feat: rbac client side code (#26694)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

cypress/fixtures/api/notebooks/notebook.json

@@ -60,5 +60,6 @@
         "first_name": "Employee 427",
         "email": "[email protected]",
         "is_email_verified": null
-    }
+    },
+    "user_access_level": "editor"
 }

cypress/fixtures/api/notebooks/notebooks.json

@@ -65,7 +65,8 @@
                 "first_name": "Employee 427",
                 "email": "[email protected]",
                 "is_email_verified": null
-            }
+            },
+            "user_access_level": "editor"
         }
     ]
 }

frontend/src/layout/ErrorProjectUnavailable.tsx

@@ -3,6 +3,7 @@ import { useValues } from 'kea'
 import { PageHeader } from 'lib/components/PageHeader'
 import { useEffect, useState } from 'react'
 import { CreateOrganizationModal } from 'scenes/organization/CreateOrganizationModal'
+import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
 import { userLogic } from 'scenes/userLogic'
 
@@ -11,6 +12,7 @@ import { organizationLogic } from '../scenes/organizationLogic'
 export function ErrorProjectUnavailable(): JSX.Element {
     const { projectCreationForbiddenReason } = useValues(organizationLogic)
     const { user } = useValues(userLogic)
+    const { currentTeam } = useValues(teamLogic)
     const [options, setOptions] = useState<JSX.Element[]>([])
 
     useEffect(() => {
@@ -45,7 +47,8 @@ export function ErrorProjectUnavailable(): JSX.Element {
             <PageHeader />
             {!user?.organization ? (
                 <CreateOrganizationModal isVisible inline />
-            ) : user?.team && !user.organization?.teams.some((team) => team.id === user?.team?.id) ? (
+            ) : (user?.team && !user.organization?.teams.some((team) => team.id === user?.team?.id || user.team)) ||
+              currentTeam?.user_access_level === 'none' ? (
                 <>
                     <h1>Project access has been removed</h1>
                     <p>

frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx

@@ -1,6 +1,6 @@
 import './SidePanel.scss'
 
-import { IconEllipsis, IconFeatures, IconGear, IconInfo, IconNotebook, IconSupport } from '@posthog/icons'
+import { IconEllipsis, IconFeatures, IconGear, IconInfo, IconLock, IconNotebook, IconSupport } from '@posthog/icons'
 import { LemonButton, LemonMenu, LemonMenuItems, LemonModal } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
@@ -16,6 +16,7 @@ import {
 import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 import { SidePanelTab } from '~/types'
 
+import { SidePanelAccessControl } from './panels/access_control/SidePanelAccessControl'
 import { SidePanelActivation, SidePanelActivationIcon } from './panels/activation/SidePanelActivation'
 import { SidePanelActivity, SidePanelActivityIcon } from './panels/activity/SidePanelActivity'
 import { SidePanelDiscussion, SidePanelDiscussionIcon } from './panels/discussion/SidePanelDiscussion'
@@ -87,6 +88,11 @@ export const SIDE_PANEL_TABS: Record<
         Content: SidePanelStatus,
         noModalSupport: true,
     },
+    [SidePanelTab.AccessControl]: {
+        label: 'Access control',
+        Icon: IconLock,
+        Content: SidePanelAccessControl,
+    },
 }
 
 const DEFAULT_WIDTH = 512