feat: update organization member abilities

frontend/src/layout/navigation/OrganizationSwitcher.tsx

@@ -1,4 +1,4 @@
-import { IconPlus } from '@posthog/icons'
+import { IconPlusSmall } from '@posthog/icons'
 import { useActions, useValues } from 'kea'
 import { upgradeModalLogic } from 'lib/components/UpgradeModal/upgradeModalLogic'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
@@ -57,7 +57,7 @@ export function NewOrganizationButton(): JSX.Element {
 
     return (
         <LemonButton
-            icon={<IconPlus />}
+            icon={<IconPlusSmall />}
             onClick={() =>
                 guardAvailableFeature(
                     AvailableFeature.ORGANIZATIONS_PROJECTS,

frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx

@@ -13,6 +13,8 @@ export interface LemonFileInputProps extends Pick<HTMLInputElement, 'multiple' |
      * are the files currently being uploaded?
      */
     loading?: boolean
+    /** Whether input field is disabled */
+    disabled?: boolean
     /** if this is not provided then this component is the drop target
      * and is styled when a file is dragged over it
      * if this alternativeDropTargetRef is provided,
@@ -35,6 +37,7 @@ export const LemonFileInput = ({
     onChange,
     multiple,
     loading,
+    disabled,
     // e.g. '.json' or 'image/*'
     accept,
     alternativeDropTargetRef,
@@ -142,14 +145,21 @@ export const LemonFileInput = ({
                     'FileDropTarget flex flex-col gap-1',
                     !alternativeDropTargetRef?.current && drag && 'FileDropTarget--active'
                 )}
+                aria-disabled={disabled}
             >
-                <label className="text-muted inline-flex flow-row items-center gap-1 cursor-pointer">
+                <label
+                    className={clsx(
+                        'text-muted inline-flex flow-row items-center gap-1',
+                        disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+                    )}
+                >
                     <input
                         className="hidden"
                         type="file"
                         multiple={multiple}
                         accept={accept}
                         onChange={onInputChange}
+                        disabled={disabled}
                     />
                     {callToAction || (
                         <>

frontend/src/scenes/billing/Billing.tsx

@@ -5,7 +5,9 @@ import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { Field, Form } from 'kea-forms'
 import { router } from 'kea-router'
+import { RestrictionScope, useRestrictedArea } from 'lib/components/RestrictedArea'
 import { supportLogic } from 'lib/components/Support/supportLogic'
+import { OrganizationMembershipLevel } from 'lib/constants'
 import { dayjs } from 'lib/dayjs'
 import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
@@ -36,6 +38,11 @@ export function Billing(): JSX.Element {
     const { preflight, isCloudOrDev } = useValues(preflightLogic)
     const { openSupportForm } = useActions(supportLogic)
 
+    const restrictionReason = useRestrictedArea({
+        minimumAccessLevel: OrganizationMembershipLevel.Admin,
+        scope: RestrictionScope.Organization,
+    })
+
     if (preflight && !isCloudOrDev) {
         router.actions.push(urls.default())
     }
@@ -59,6 +66,20 @@ export function Billing(): JSX.Element {
         )
     }
 
+    if (restrictionReason) {
+        return (
+            <div className="space-y-4">
+                <h1>Billing</h1>
+                <LemonBanner type="warning">{restrictionReason}</LemonBanner>
+                <div className="flex">
+                    <LemonButton type="primary" to={urls.default()}>
+                        Go back home
+                    </LemonButton>
+                </div>
+            </div>
+        )
+    }
+
     if (!billing && !billingLoading) {
         return (
             <div className="space-y-4">

frontend/src/scenes/settings/environment/ManagedReverseProxy.tsx

@@ -1,4 +1,4 @@
-import { IconEllipsis, IconInfo, IconPlus } from '@posthog/icons'
+import { IconEllipsis, IconInfo } from '@posthog/icons'
 import {
     LemonBanner,
     LemonButton,
@@ -148,13 +148,8 @@ export function ManagedReverseProxy(): JSX.Element {
                         </LemonBanner>
                     ) : (
                         <div className="flex">
-                            <LemonButton
-                                onClick={showForm}
-                                type="secondary"
-                                icon={<IconPlus />}
-                                disabledReason={restrictionReason}
-                            >
-                                New managed proxy
+                            <LemonButton onClick={showForm} type="primary" disabledReason={restrictionReason}>
+                                Add managed proxy
                             </LemonButton>
                         </div>
                     )

frontend/src/scenes/settings/organization/InviteModal.tsx

@@ -270,7 +270,7 @@ export function InviteModal({ isOpen, onClose }: { isOpen: boolean; onClose: ()
                                 <LemonButton
                                     onClick={() => inviteTeamMembers()}
                                     type="primary"
-                                    disabled={!canSubmit}
+                                    disabledReason={canSubmit ? undefined : 'Please fill out all fields'}
                                     data-attr="invite-team-member-submit"
                                 >
                                     {validInvitesCount

frontend/src/scenes/settings/organization/Invites.tsx

@@ -2,6 +2,8 @@ import { IconX } from '@posthog/icons'
 import { LemonTag } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { CopyToClipboardInline } from 'lib/components/CopyToClipboard'
+import { useRestrictedArea } from 'lib/components/RestrictedArea'
+import { RestrictionScope } from 'lib/components/RestrictedArea'
 import { OrganizationMembershipLevel } from 'lib/constants'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonDialog } from 'lib/lemon-ui/LemonDialog'
@@ -61,6 +63,11 @@ export function Invites(): JSX.Element {
     const { deleteInvite, showInviteModal } = useActions(inviteLogic)
     const { preflight } = useValues(preflightLogic)
 
+    const restrictionReason = useRestrictedArea({
+        minimumAccessLevel: OrganizationMembershipLevel.Admin,
+        scope: RestrictionScope.Organization,
+    })
+
     const columns: LemonTableColumns<OrganizationInviteType> = [
         {
             key: 'user_profile_picture',
@@ -106,7 +113,7 @@ export function Invites(): JSX.Element {
             title: '',
             key: 'actions',
             width: 24,
-            render: makeActionsComponent(deleteInvite),
+            render: restrictionReason ? undefined : makeActionsComponent(deleteInvite),
         },
     ]
 

frontend/src/scenes/settings/organization/OrgDisplayName.tsx

@@ -29,13 +29,15 @@ export function OrganizationDisplayName(): JSX.Element {
                     updateOrganization({ name })
                 }}
                 disabledReason={
-                    !name
+                    restrictionReason
+                        ? restrictionReason
+                        : !name
                         ? 'You must provide a name'
                         : !currentOrganization
                         ? 'Organization not loaded'
                         : currentOrganization.name === name
                         ? 'Name unchanged'
-                        : restrictionReason
+                        : undefined
                 }
                 loading={currentOrganizationLoading}
             >

frontend/src/scenes/settings/organization/OrgLogo.tsx

@@ -34,6 +34,7 @@ export function OrganizationLogo(): JSX.Element {
                 onChange={setFilesToUpload}
                 loading={uploading}
                 value={filesToUpload}
+                disabled={!!restrictionReason}
                 callToAction={
                     <>
                         <div className="relative">
@@ -76,11 +77,13 @@ export function OrganizationLogo(): JSX.Element {
                     updateOrganization({ logo_media_id: logoMediaId })
                 }}
                 disabledReason={
-                    !currentOrganization
+                    restrictionReason
+                        ? restrictionReason
+                        : !currentOrganization
                         ? 'Organization not loaded'
                         : logoMediaId === currentOrganization.logo_media_id
                         ? 'Logo unchanged'
-                        : restrictionReason
+                        : undefined
                 }
                 loading={currentOrganizationLoading || uploading}
             >

frontend/src/scenes/settings/organization/OrganizationDangerZone.tsx

@@ -1,7 +1,7 @@
 import { IconTrash } from '@posthog/icons'
 import { LemonButton, LemonInput, LemonModal } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { useRestrictedArea } from 'lib/components/RestrictedArea'
+import { RestrictionScope, useRestrictedArea } from 'lib/components/RestrictedArea'
 import { OrganizationMembershipLevel } from 'lib/constants'
 import { Dispatch, SetStateAction, useState } from 'react'
 import { organizationLogic } from 'scenes/organizationLogic'
@@ -67,7 +67,11 @@ export function DeleteOrganizationModal({
 export function OrganizationDangerZone(): JSX.Element {
     const { currentOrganization } = useValues(organizationLogic)
     const [isModalVisible, setIsModalVisible] = useState(false)
-    const restrictionReason = useRestrictedArea({ minimumAccessLevel: OrganizationMembershipLevel.Admin })
+
+    const restrictionReason = useRestrictedArea({
+        minimumAccessLevel: OrganizationMembershipLevel.Owner,
+        scope: RestrictionScope.Organization,
+    })
 
     return (
         <>

frontend/src/scenes/settings/organization/Permissions/PermissionsGrid.tsx

@@ -2,7 +2,7 @@ import { IconInfo } from '@posthog/icons'
 import { LemonButton, LemonCheckbox, LemonTable } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { PayGateMini } from 'lib/components/PayGateMini/PayGateMini'
-import { useRestrictedArea } from 'lib/components/RestrictedArea'
+import { RestrictionScope, useRestrictedArea } from 'lib/components/RestrictedArea'
 import { TitleWithIcon } from 'lib/components/TitleWithIcon'
 import { OrganizationMembershipLevel } from 'lib/constants'
 import { LemonTableColumns } from 'lib/lemon-ui/LemonTable'
@@ -22,7 +22,11 @@ export function PermissionsGrid(): JSX.Element {
     const { roles, rolesLoading } = useValues(rolesLogic)
     const { setRoleInFocus, openCreateRoleModal } = useActions(rolesLogic)
     const { isAdminOrOwner } = useValues(organizationLogic)
-    const restrictionReason = useRestrictedArea({ minimumAccessLevel: OrganizationMembershipLevel.Admin }) // TODO: check if this is correct
+
+    const restrictionReason = useRestrictedArea({
+        minimumAccessLevel: OrganizationMembershipLevel.Admin,
+        scope: RestrictionScope.Organization,
+    })
 
     const columns: LemonTableColumns<RoleType> = [
         {
@@ -107,17 +111,24 @@ export function PermissionsGrid(): JSX.Element {
                         Edit organizational default permission levels for PostHog resources. Use roles to apply
                         permissions to specific sets of users.
                     </div>
-                    {!restrictionReason && (
-                        <LemonButton type="primary" onClick={openCreateRoleModal} data-attr="create-role-button">
-                            Create role
-                        </LemonButton>
-                    )}
                 </div>
+
                 <LemonTable
                     columns={columns}
                     loading={rolesLoading || organizationResourcePermissionsLoading}
                     dataSource={[{ name: 'organization_default' } as RoleType, ...roles]}
                 />
+
+                <LemonButton
+                    type="primary"
+                    onClick={openCreateRoleModal}
+                    className="mt-4"
+                    data-attr="create-role-button"
+                    disabledReason={restrictionReason}
+                >
+                    Create role
+                </LemonButton>
+
                 <CreateRoleModal />
             </>
         </PayGateMini>

frontend/src/scenes/settings/organization/VerifiedDomains/SSOSelect.tsx

@@ -11,9 +11,16 @@ export interface SSOSelectInterface {
     loading: boolean
     onChange: (value: SSOProvider | '') => void
     samlAvailable: boolean
+    disabledReason?: string | null
 }
 
-export function SSOSelect({ value, loading, onChange, samlAvailable }: SSOSelectInterface): JSX.Element | null {
+export function SSOSelect({
+    value,
+    loading,
+    onChange,
+    samlAvailable,
+    disabledReason,
+}: SSOSelectInterface): JSX.Element | null {
     const { preflight } = useValues(preflightLogic)
 
     if (!preflight) {
@@ -46,7 +53,7 @@ export function SSOSelect({ value, loading, onChange, samlAvailable }: SSOSelect
             value={value}
             options={options}
             loading={loading}
-            disabledReason={loading ? 'Cannot change while loading' : undefined}
+            disabledReason={loading ? 'Cannot change while loading' : disabledReason}
             fullWidth
             onChange={onChange}
         />

frontend/src/scenes/settings/organization/VerifiedDomains/VerifiedDomains.tsx

@@ -1,6 +1,9 @@
 import { IconCheckCircle, IconInfo, IconLock, IconTrash, IconWarning } from '@posthog/icons'
 import { useActions, useValues } from 'kea'
 import { PayGateMini } from 'lib/components/PayGateMini/PayGateMini'
+import { RestrictionScope } from 'lib/components/RestrictedArea'
+import { useRestrictedArea } from 'lib/components/RestrictedArea'
+import { OrganizationMembershipLevel } from 'lib/constants'
 import { IconExclamation, IconOffline } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { More } from 'lib/lemon-ui/LemonButton/More'
@@ -27,6 +30,11 @@ export function VerifiedDomains(): JSX.Element {
     const { verifiedDomainsLoading, updatingDomainLoading } = useValues(verifiedDomainsLogic)
     const { setAddModalShown } = useActions(verifiedDomainsLogic)
 
+    const restrictionReason = useRestrictedArea({
+        minimumAccessLevel: OrganizationMembershipLevel.Admin,
+        scope: RestrictionScope.Organization,
+    })
+
     return (
         <PayGateMini feature={AvailableFeature.AUTOMATIC_PROVISIONING}>
             <p>
@@ -39,7 +47,7 @@ export function VerifiedDomains(): JSX.Element {
                 type="primary"
                 onClick={() => setAddModalShown(true)}
                 className="mt-4"
-                disabledReason={verifiedDomainsLoading || updatingDomainLoading ? 'loading...' : null}
+                disabledReason={verifiedDomainsLoading || updatingDomainLoading ? 'loading...' : restrictionReason}
             >
                 Add domain
             </LemonButton>
@@ -60,6 +68,11 @@ function VerifiedDomainsTable(): JSX.Element {
         useActions(verifiedDomainsLogic)
     const { preflight } = useValues(preflightLogic)
 
+    const restrictionReason = useRestrictedArea({
+        minimumAccessLevel: OrganizationMembershipLevel.Admin,
+        scope: RestrictionScope.Organization,
+    })
+
     const columns: LemonTableColumns<OrganizationDomainType> = [
         {
             key: 'domain',
@@ -119,6 +132,7 @@ function VerifiedDomainsTable(): JSX.Element {
                         <LemonSwitch
                             checked={jit_provisioning_enabled}
                             disabled={updatingDomainLoading || !is_verified}
+                            disabledReason={restrictionReason}
                             onChange={(checked) => updateDomain({ id, jit_provisioning_enabled: checked })}
                             label={
                                 <span className="font-normal">{jit_provisioning_enabled ? 'Enabled' : 'Disabled'}</span>
@@ -157,6 +171,7 @@ function VerifiedDomainsTable(): JSX.Element {
                         loading={updatingDomainLoading}
                         onChange={(val) => updateDomain({ id, sso_enforcement: val })}
                         samlAvailable={has_saml}
+                        disabledReason={restrictionReason}
                     />
                 ) : (
                     <i className="text-muted-alt">Verify domain to enable</i>
@@ -205,7 +220,7 @@ function VerifiedDomainsTable(): JSX.Element {
                 return is_verified ? (
                     <></>
                 ) : (
-                    <LemonButton type="primary" onClick={() => setVerifyModal(id)}>
+                    <LemonButton type="primary" onClick={() => setVerifyModal(id)} disabledReason={restrictionReason}>
                         Verify
                     </LemonButton>
                 )
@@ -224,8 +239,10 @@ function VerifiedDomainsTable(): JSX.Element {
                                     <LemonButton
                                         onClick={() => setConfigureSAMLModalId(id)}
                                         fullWidth
-                                        disabled={!isSAMLAvailable}
-                                        title={isSAMLAvailable ? undefined : 'Upgrade to enable SAML'}
+                                        disabledReason={
+                                            restrictionReason ||
+                                            (!isSAMLAvailable ? 'Upgrade to enable SAML' : undefined)
+                                        }
                                     >
                                         Configure SAML
                                     </LemonButton>
@@ -249,6 +266,7 @@ function VerifiedDomainsTable(): JSX.Element {
                                     }
                                     fullWidth
                                     icon={<IconTrash />}
+                                    disabledReason={restrictionReason}
                                 >
                                     Remove domain
                                 </LemonButton>