feat(permissions): manage permissions from a single location (#3730)

Co-authored-by: Zach Aysan <zachaysan@gmail.com>

frontend/common/dispatcher/action-constants.js

@@ -5,7 +5,6 @@ const Actions = Object.assign({}, require('./base/_action-constants'), {
   'CONFIRM_TWO_FACTOR': 'CONFIRM_TWO_FACTOR',
   'CREATE_ENV': 'CREATE_ENV',
   'CREATE_FLAG': 'CREATE_FLAG',
-  'CREATE_GROUP': 'CREATE_GROUP',
   'CREATE_ORGANISATION': 'CREATE_ORGANISATION',
   'CREATE_PROJECT': 'CREATE_PROJECT',
   'DELETE_CHANGE_REQUEST': 'DELETE_CHANGE_REQUEST',
@@ -32,7 +31,6 @@ const Actions = Object.assign({}, require('./base/_action-constants'), {
   'GET_ENVIRONMENT': 'GET_ENVIRONMENT',
   'GET_FEATURE_USAGE': 'GET_FEATURE_USAGE',
   'GET_FLAGS': 'GET_FLAGS',
-  'GET_GROUPS': 'GET_GROUPS',
   'GET_IDENTITY': 'GET_IDENTITY',
   'GET_IDENTITY_SEGMENTS': 'GET_IDENTITY_SEGMENTS',
   'GET_ORGANISATION': 'GET_ORGANISATION',
@@ -51,7 +49,6 @@ const Actions = Object.assign({}, require('./base/_action-constants'), {
   'TOGGLE_USER_FLAG': 'TOGGLE_USER_FLAG',
   'TWO_FACTOR_LOGIN': 'TWO_FACTOR_LOGIN',
   'UPDATE_CHANGE_REQUEST': 'UPDATE_CHANGE_REQUEST',
-  'UPDATE_GROUP': 'UPDATE_GROUP',
   'UPDATE_SUBSCRIPTION': 'UPDATE_SUBSCRIPTION',
   'UPDATE_USER_ROLE': 'UPDATE_USER_ROLE',
 })

frontend/common/dispatcher/app-actions.js

@@ -47,13 +47,6 @@ const AppActions = Object.assign({}, require('./base/_app-actions'), {
       segmentOverrides,
     })
   },
-  createGroup(orgId, data) {
-    Dispatcher.handleViewAction({
-      actionType: Actions.CREATE_GROUP,
-      data,
-      orgId,
-    })
-  },
   createOrganisation(name) {
     Dispatcher.handleViewAction({
       actionType: Actions.CREATE_ORGANISATION,
@@ -263,12 +256,6 @@ const AppActions = Object.assign({}, require('./base/_app-actions'), {
       sort,
     })
   },
-  getGroups(orgId) {
-    Dispatcher.handleViewAction({
-      actionType: Actions.GET_GROUPS,
-      orgId,
-    })
-  },
   getIdentity(envId, id) {
     Dispatcher.handleViewAction({
       actionType: Actions.GET_IDENTITY,
@@ -422,13 +409,6 @@ const AppActions = Object.assign({}, require('./base/_app-actions'), {
       changeRequest,
     })
   },
-  updateGroup(orgId, data) {
-    Dispatcher.handleViewAction({
-      actionType: Actions.UPDATE_GROUP,
-      data,
-      orgId,
-    })
-  },
   updateSubscription(hostedPageId) {
     Dispatcher.handleViewAction({
       actionType: Actions.UPDATE_SUBSCRIPTION,

frontend/common/providers/OrganisationProvider.tsx

@@ -0,0 +1,95 @@
+import { FC, ReactNode, useEffect, useState } from 'react'
+import OrganisationStore from 'common/stores/organisation-store'
+import AccountStore from 'common/stores/account-store'
+import AppActions from 'common/dispatcher/app-actions'
+import {
+  Invite,
+  InviteLink,
+  Project,
+  SubscriptionMeta,
+  User,
+  UserGroupSummary,
+} from 'common/types/responses'
+import { useGetGroupsQuery } from 'common/services/useGroup'
+
+type OrganisationProviderType = {
+  onRemoveProject?: () => void
+  onSave?: (data: { environmentId: number; projectId: number }) => void
+  id?: number
+  children: (props: {
+    createProject: typeof AppActions.createProject
+    invalidateInviteLink: typeof AppActions.invalidateInviteLink
+    inviteLinks: InviteLink[] | null
+    invites: Invite[] | null
+    isLoading: boolean
+    isSaving: boolean
+    name: string
+    project: Project | null
+    groups: UserGroupSummary[] | null
+    projects: Project[] | null
+    subscriptionMeta: SubscriptionMeta | null
+    users: User[] | null
+  }) => ReactNode
+}
+
+const OrganisationProvider: FC<OrganisationProviderType> = ({
+  children,
+  id,
+  onRemoveProject,
+  onSave,
+}) => {
+  const [_, setUpdate] = useState(Date.now())
+  const { data: groups } = useGetGroupsQuery(
+    { orgId: id!, page: 1 },
+    { skip: !id },
+  )
+  useEffect(() => {
+    const _onRemoveProject = () => onRemoveProject?.()
+    OrganisationStore.on('removed', _onRemoveProject)
+    return () => {
+      OrganisationStore.off('removed', _onRemoveProject)
+    }
+    //eslint-disable-next-line
+  }, [])
+
+  useEffect(() => {
+    const _onSave = () => onSave?.(OrganisationStore.savedId)
+    OrganisationStore.on('saved', _onSave)
+    return () => {
+      OrganisationStore.off('saved', _onSave)
+    }
+    //eslint-disable-next-line
+  }, [])
+
+  useEffect(() => {
+    const onChange = () => {
+      setUpdate(Date.now())
+    }
+    OrganisationStore.on('change', onChange)
+    return () => {
+      OrganisationStore.off('change', onChange)
+    }
+    //eslint-disable-next-line
+  }, [])
+
+  return (
+    <>
+      {children({
+        createProject: AppActions.createProject,
+        groups: groups?.results || [],
+        invalidateInviteLink: AppActions.invalidateInviteLink,
+        inviteLinks: OrganisationStore.getInviteLinks(),
+        invites: OrganisationStore.getInvites(),
+        isLoading: OrganisationStore.isLoading,
+        isSaving: OrganisationStore.isSaving,
+        name: AccountStore.getOrganisation()?.name || '',
+        project: OrganisationStore.getProject(id),
+        projects: OrganisationStore.getProjects(),
+        subscriptionMeta: OrganisationStore.getSubscriptionMeta(),
+        users: OrganisationStore.getUsers(),
+      })}
+    </>
+  )
+}
+
+export default OrganisationProvider

frontend/common/providers/Permission.tsx

@@ -4,7 +4,7 @@ import { PermissionLevel } from 'common/types/requests'
 import AccountStore from 'common/stores/account-store' // we need this to make JSX compile
 
 type PermissionType = {
-  id: string
+  id: any
   permission: string
   level: PermissionLevel
   children: (data: { permission: boolean; isLoading: boolean }) => ReactNode
@@ -15,9 +15,12 @@ export const useHasPermission = ({
   level,
   permission,
 }: Omit<PermissionType, 'children'>) => {
-  const { data, isLoading } = useGetPermissionQuery({ id, level })
+  const { data, isLoading } = useGetPermissionQuery(
+    { id: `${id}`, level },
+    { skip: !id || !level },
+  )
   const hasPermission = !!data?.[permission] || !!data?.ADMIN
-  return { isLoading, permission: hasPermission || AccountStore.isAdmin() }
+  return { isLoading, permission: !!hasPermission || !!AccountStore.isAdmin() }
 }
 
 const Permission: FC<PermissionType> = ({