fix: more cms and permission updates (#217)

* feat: enhance PermissionToggle component with new variants and visual feedback

- Added support for 'compact' and 'detailed' variants to the PermissionToggle component.
- Introduced optional props for description, icon visibility, and variant selection.
- Updated the component's rendering logic to accommodate new visual styles and feedback mechanisms.
- Replaced existing RolePermission and UserPermission components with EnhancedPermissionDialog for improved user experience.

* refactor: update Role and User permission handling for improved navigation

- Replaced dialog-based permission management in RoleList and UserList components with direct navigation to permission pages.
- Updated RolePermission and UserPermission components to use buttons for managing permissions, enhancing user experience.
- Improved error handling in usePermissions hook to ensure robustness in permission fetching.

* feat: enhance PermissionsPage with user existence check and improved error handling

- Added a check for user existence when managing user permissions, displaying appropriate error messages if the user is not found.
- Updated permission fetching logic to handle user IDs and usernames more effectively.
- Improved loading states and error handling for API requests, ensuring better user feedback during permission management.
- Grouped permissions by the first two parts of their names for better organization in the UI.

* feat: enhance tenant management and permissions handling

- Ensured tenantId is consistently stored as a string across various components and middleware, improving data integrity.
- Integrated translation support for permission names in the PermissionsPage, enhancing user experience with localized content.
- Improved error handling during permission updates and API requests, providing clearer feedback to users.
- Updated session management to handle edge cases for tenantId, ensuring robust authentication flow.

* feat: improve user permission management and UI responsiveness

- Enhanced user permission management by implementing a more efficient user existence check, providing clearer error messages when users are not found.
- Optimized permission fetching logic to better handle user IDs and usernames.
- Improved loading states and error handling for API requests, ensuring a smoother user experience during permission management.
- Organized permissions in the UI by grouping them based on the first two parts of their names for better clarity.

* feat: extend block configuration with new components and props

- Added imports for CodeBlock, ListBlock, QuoteBlock, TableBlock, and TestimonialBlock configurations and props.
- Updated the config object to include new components in the content, layout, and social categories, enhancing the overall block management capabilities.

* refactor: remove CodeBlock component and related files

- Deleted the CodeBlock component along with its configuration, props, and story files to streamline the codebase.
- Updated the main configuration file to remove references to CodeBlock, ensuring consistency across the component management system.

* feat: add new block types to ensureValidPuckData function

- Extended the ensureValidPuckData function to include CarouselBlock, ListBlock, QuoteBlock, TableBlock, and TestimonialBlock, enhancing the validation capabilities for various content types.

* fix: enhance EnhancedPermissionDialog with unsaved changes confirmation

- Implemented a confirmation dialog for unsaved changes when closing the EnhancedPermissionDialog, improving user experience by preventing accidental data loss.
- Removed redundant onCloseEvent definition and updated dependencies in the useCallback hook for better performance.
- Updated useEnhancedPermissionChanges to handle undefined values for oldValue and newValue, ensuring more robust change tracking.

Author: antosubash

GEMINI.md

@@ -0,0 +1,11 @@
+export default function PermissionsLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="min-h-screen bg-background">
+      {children}
+    </div>
+  )
+} 

src/src/app/admin/permissions/[type]/[id]/page.tsx

@@ -8,15 +8,33 @@ interface ApiError extends Error {
 }
 
 const getHeaders = async (): Promise<HeadersInit> => {
-  const session = await getSession()
+  try {
+    const session = await getSession()
+
+    const headers = new Headers()
+
+    // Check if we have a valid access token
+    if (!session.access_token) {
+      console.error('Session debug:', {
+        isLoggedIn: session.isLoggedIn,
+        hasUserInfo: !!session.userInfo,
+        hasTenantId: !!session.tenantId,
+        sessionKeys: Object.keys(session)
+      })
+      throw new Error('No access token available in session')
+    }
 
-  const headers = new Headers()
+    headers.set('Authorization', `Bearer ${session.access_token}`)
+    headers.set('Content-Type', 'application/json')
+    headers.set('__tenant', session.tenantId ?? '')
 
-  headers.set('Authorization', `Bearer ${session.access_token}`)
-  headers.set('Content-Type', 'application/json')
-  headers.set('__tenant', session.tenantId ?? '')
+    console.log('tenantId', session.tenantId)
 
-  return headers
+    return headers
+  } catch (error) {
+    console.error('Error getting headers:', error)
+    throw new Error(`Failed to get request headers: ${error instanceof Error ? error.message : 'Unknown error'}`)
+  }
 }
 
 const makeApiRequest = async (
@@ -78,23 +96,44 @@ const makeApiRequest = async (
         .clone()
         .json()
         .catch(() => null)
+      
+      // Better error message handling
+      let errorMessage = `API request failed with status ${response.status}`
+      if (errorData?.error) {
+        if (typeof errorData.error === 'string') {
+          errorMessage = errorData.error
+        } else if (typeof errorData.error === 'object') {
+          errorMessage = errorData.error.message || JSON.stringify(errorData.error)
+        }
+      }
+      
       console.error(`[${requestId}] API request failed:`, {
         status: response.status,
         statusText: response.statusText,
         errorData,
+        errorMessage,
         url,
         method,
         duration: `${Date.now() - startTime}ms`,
       })
+      
       throw Object.assign(
-        new Error(errorData?.error || `API request failed with status ${response.status}`),
+        new Error(errorMessage),
         { status: response.status }
       )
     }
 
-    // Forward the response with original headers
+    // Handle 204 No Content responses
+    if (response.status === 204) {
+      return new NextResponse(null, {
+        status: 204,
+        headers: response.headers,
+      })
+    }
+
+    // Forward the response with original headers for other status codes
     const responseHeaders = new Headers(response.headers)
-    const data = await response.json().catch(() => response)
+    const data = await response.json().catch(() => null)
 
     return NextResponse.json(data, {
       status: response.status,
@@ -103,14 +142,22 @@ const makeApiRequest = async (
   } catch (error) {
     const apiError = error as ApiError
     const duration = Date.now() - startTime
+    
+    // Better error handling to prevent [object Object] issues
+    const errorMessage = apiError.message || 
+                        (typeof error === 'string' ? error : 'Unknown error occurred')
+    const errorStatus = apiError.status || 500
+    
     console.error(`[${requestId}] API request error:`, {
-      error: apiError.message,
-      status: apiError.status,
+      error: errorMessage,
+      status: errorStatus,
       stack: apiError.stack,
       duration: `${duration}ms`,
       timestamp: new Date().toISOString(),
+      originalError: error,
     })
-    return NextResponse.json({ error: apiError.message }, { status: apiError.status || 500 })
+    
+    return NextResponse.json({ error: errorMessage }, { status: errorStatus })
   }
 }
 

src/src/app/admin/permissions/layout.tsx

@@ -18,12 +18,14 @@ export async function GET() {
   const openIdClientConfig = await getClientConfig()
   let tenantId = session.tenantId
 
-  if (
-    !tenantId ||
-    tenantId === 'default' ||
-    (typeof tenantId === 'object' && Object.keys(tenantId).length === 0)
-  ) {
+  // Ensure tenantId is always a string and handle edge cases
+  if (!tenantId || 
+      tenantId === 'default' || 
+      (typeof tenantId === 'object' && Object.keys(tenantId).length === 0) ||
+      typeof tenantId !== 'string') {
     tenantId = ''
+  } else {
+    tenantId = String(tenantId)
   }
 
   let parameters: Record<string, string> = {

src/src/app/api/[...slug]/route.ts

@@ -27,10 +27,11 @@ export async function GET() {
   try {
     const { data } = await tenantGetTenantGuid({ query: { host: host! } })
     console.log('Fetched tenant GUID:', data)
-    session.tenantId = data ?? 'default'
+    // Ensure tenantId is always a string
+    session.tenantId = data ? String(data) : ''
   } catch (error) {
     console.error('Failed to fetch tenant GUID:', error)
-    session.tenantId = 'default'
+    session.tenantId = ''
   }
 
   await session.save()