refactor: permission types (#6417)

Co-authored-by: Zaimwa9 <wadii.zaim@flagsmith.com>
Co-authored-by: Matthew Elwell <matthew.elwell@flagsmith.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: 4 people

frontend/common/constants.ts

@@ -1,9 +1,17 @@
 import { OAuthType } from './types/requests'
 import { SegmentCondition } from './types/responses'
 import Utils from './utils/utils'
-
 import Project from './project'
 import { integrationCategories } from 'components/pages/IntegrationsPage'
+import {
+  EnvironmentPermission,
+  EnvironmentPermissionDescriptions,
+  OrganisationPermission,
+  OrganisationPermissionDescriptions,
+  ProjectPermission,
+  ProjectPermissionDescriptions,
+} from './types/permissions.types'
+
 const keywords = {
   FEATURE_FUNCTION: 'myCoolFeature',
   FEATURE_NAME: 'my_cool_feature',
@@ -252,8 +260,9 @@ const Constants = {
     value: '',
   } as SegmentCondition,
   defaultTagColor: '#3d4db6',
-  environmentPermissions: (perm: string) =>
-    `To manage this feature you need the <i>${perm}</i> permission for this environment.<br/>Please contact a member of this environment who has administrator privileges.`,
+  environmentPermissions: (perm: EnvironmentPermission) => {
+    return `To manage this feature you need the <i>${EnvironmentPermissionDescriptions[perm]}</i> permission for this environment.<br/>Please contact a member of this environment who has administrator privileges.`
+  },
   events: {
     'ACCEPT_INVITE': (org: any) => ({
       'category': 'Invite',
@@ -626,8 +635,9 @@ const Constants = {
   modals: {
     'PAYMENT': 'Payment Modal',
   },
-  organisationPermissions: (perm: string) =>
-    `To manage this feature you need the <i>${perm}</i> permission for this organisastion.<br/>Please contact a member of this organisation who has administrator privileges.`,
+  organisationPermissions: (perm: OrganisationPermission) => {
+    return `To manage this feature you need the <i>${OrganisationPermissionDescriptions[perm]}</i> permission for this organisation.<br/>Please contact a member of this organisation who has administrator privileges.`
+  },
   pages: {
     'ACCOUNT': 'Account Page',
     'AUDIT_LOG': 'Audit Log Page',
@@ -659,8 +669,9 @@ const Constants = {
     '#FFBE71',
     '#F57C78',
   ],
-  projectPermissions: (perm: string) =>
-    `To use this feature you need the <i>${perm}</i> permission for this project.<br/>Please contact a member of this project who has administrator privileges.`,
+  projectPermissions: (perm: ProjectPermission) => {
+    return `To use this feature you need the <i>${ProjectPermissionDescriptions[perm]}</i> permission for this project.<br/>Please contact a member of this project who has administrator privileges.`
+  },
   resourceTypes: {
     GITHUB_ISSUE: {
       id: 1,

frontend/common/providers/Permission.tsx

@@ -1,29 +1,22 @@
 import React, { FC, ReactNode, useMemo } from 'react'
 import { useGetPermissionQuery } from 'common/services/usePermission'
-import { PermissionLevel } from 'common/types/requests'
 import AccountStore from 'common/stores/account-store'
 import intersection from 'lodash/intersection'
 import { cloneDeep } from 'lodash'
 import Utils from 'common/utils/utils'
 import Constants from 'common/constants'
+import {
+  EnvironmentPermission,
+  OrganisationPermission,
+  ProjectPermission,
+} from 'common/types/permissions.types'
 
 /**
- * Props for the Permission component
- *
- * @property {number | string} id - The ID of the resource (projectId, organisationId, environmentId, etc.)
- * @property {string} permission - The permission key to check (e.g., 'CREATE_FEATURE', 'UPDATE_FEATURE')
- * @property {PermissionLevel} level - The permission level ('project', 'organisation', 'environment')
- * @property {number[]} [tags] - Optional tag IDs for tag-based permission checking
- * @property {ReactNode | ((data: { permission: boolean; isLoading: boolean }) => ReactNode)} children - Content to render or render function
- * @property {ReactNode} [fallback] - Optional content to render when permission is denied
- * @property {string} [permissionName] - Optional custom permission name for tooltip display
- * @property {boolean} [showTooltip=false] - Whether to show a tooltip when permission is denied
+ * Base props shared across all permission levels
  */
-type PermissionType = {
+type BasePermissionProps = {
   id: number | string
-  permission: string
   tags?: number[]
-  level: PermissionLevel
   children:
     | ReactNode
     | ((data: { permission: boolean; isLoading: boolean }) => ReactNode)
@@ -32,6 +25,37 @@ type PermissionType = {
   showTooltip?: boolean
 }
 
+/**
+ * Discriminated union types for each permission level
+ * This means we can detect a mismatch between level and permission
+ */
+type OrganisationLevelProps = BasePermissionProps & {
+  level: 'organisation'
+  permission: OrganisationPermission
+}
+
+type ProjectLevelProps = BasePermissionProps & {
+  level: 'project'
+  permission: ProjectPermission
+}
+
+type EnvironmentLevelProps = BasePermissionProps & {
+  level: 'environment'
+  permission: EnvironmentPermission
+}
+
+type PermissionType =
+  | OrganisationLevelProps
+  | ProjectLevelProps
+  | EnvironmentLevelProps
+
+type UseHasPermissionParams = {
+  id: number | string
+  level: 'organisation' | 'project' | 'environment'
+  permission: OrganisationPermission | ProjectPermission | EnvironmentPermission
+  tags?: number[]
+}
+
 /**
  * Hook to check if the current user has a specific permission
  *
@@ -54,12 +78,15 @@ export const useHasPermission = ({
   level,
   permission,
   tags,
-}: Omit<PermissionType, 'children'>) => {
+}: UseHasPermissionParams) => {
   const {
     data: permissionsData,
     isLoading,
     isSuccess,
-  } = useGetPermissionQuery({ id: `${id}`, level }, { skip: !id || !level })
+  } = useGetPermissionQuery(
+    { id: id as number, level },
+    { skip: !id || !level },
+  )
   const data = useMemo(() => {
     if (!tags?.length || !permissionsData?.tag_based_permissions)
       return permissionsData
@@ -154,6 +181,23 @@ const Permission: FC<PermissionType> = ({
 
   const finalPermission = hasPermission || AccountStore.isAdmin()
 
+  const getPermissionDescription = (): string => {
+    switch (level) {
+      case 'environment':
+        return Constants.environmentPermissions(
+          permission as EnvironmentPermission,
+        )
+      case 'project':
+        return Constants.projectPermissions(permission as ProjectPermission)
+      default:
+        return Constants.organisationPermissions(
+          permission as OrganisationPermission,
+        )
+    }
+  }
+
+  const tooltipMessage = permissionName || getPermissionDescription()
+
   if (typeof children === 'function') {
     const renderedChildren = children({
       isLoading,
@@ -166,7 +210,7 @@ const Permission: FC<PermissionType> = ({
 
     return Utils.renderWithPermission(
       finalPermission,
-      permissionName || Constants.projectPermissions(permission),
+      tooltipMessage,
       renderedChildren,
     )
   }
@@ -176,11 +220,7 @@ const Permission: FC<PermissionType> = ({
   }
 
   if (showTooltip) {
-    return Utils.renderWithPermission(
-      finalPermission,
-      permissionName || Constants.projectPermissions(permission),
-      children,
-    )
+    return Utils.renderWithPermission(finalPermission, tooltipMessage, children)
   }
 
   return <>{fallback || null}</>

frontend/common/stores/config-store.js

@@ -40,7 +40,7 @@ flagsmith
     AsyncStorage,
     api: Project.flagsmithClientAPI,
     cacheFlags: true,
-    enableAnalytics: Project.flagsmithAnalytics,
+    enableAnalytics: window.E2E ? false : Project.flagsmithAnalytics,
     environmentID: Project.flagsmith,
     onChange: controller.loaded,
     realtime: window.E2E ? false : Project.flagsmithRealtime,

frontend/common/types/permissions.types.ts

@@ -0,0 +1,85 @@
+// Organization Permissions
+export enum OrganisationPermission {
+  ADMIN = 'ADMIN',
+  CREATE_PROJECT = 'CREATE_PROJECT',
+  MANAGE_USERS = 'MANAGE_USERS',
+  MANAGE_USER_GROUPS = 'MANAGE_USER_GROUPS',
+}
+export const OrganisationPermissionDescriptions: Record<
+  OrganisationPermission,
+  string
+> = {
+  [OrganisationPermission.ADMIN]: 'Administrator',
+  [OrganisationPermission.CREATE_PROJECT]: 'Create project',
+  [OrganisationPermission.MANAGE_USERS]: 'Manage users',
+  [OrganisationPermission.MANAGE_USER_GROUPS]: 'Manage user groups',
+} as const
+
+// Project Permissions
+export enum ProjectPermission {
+  ADMIN = 'ADMIN',
+  VIEW_PROJECT = 'VIEW_PROJECT',
+  CREATE_ENVIRONMENT = 'CREATE_ENVIRONMENT',
+  DELETE_FEATURE = 'DELETE_FEATURE',
+  CREATE_FEATURE = 'CREATE_FEATURE',
+  MANAGE_SEGMENTS = 'MANAGE_SEGMENTS',
+  VIEW_AUDIT_LOG = 'VIEW_AUDIT_LOG',
+  MANAGE_TAGS = 'MANAGE_TAGS',
+  MANAGE_PROJECT_LEVEL_CHANGE_REQUESTS = 'MANAGE_PROJECT_LEVEL_CHANGE_REQUESTS',
+  APPROVE_PROJECT_LEVEL_CHANGE_REQUESTS = 'APPROVE_PROJECT_LEVEL_CHANGE_REQUESTS',
+  CREATE_PROJECT_LEVEL_CHANGE_REQUESTS = 'CREATE_PROJECT_LEVEL_CHANGE_REQUESTS',
+}
+export const ProjectPermissionDescriptions: Record<ProjectPermission, string> =
+  {
+    [ProjectPermission.ADMIN]: 'Administrator',
+    [ProjectPermission.VIEW_PROJECT]: 'View project',
+    [ProjectPermission.CREATE_ENVIRONMENT]: 'Create environment',
+    [ProjectPermission.DELETE_FEATURE]: 'Delete feature',
+    [ProjectPermission.CREATE_FEATURE]: 'Create feature',
+    [ProjectPermission.MANAGE_SEGMENTS]: 'Manage segments',
+    [ProjectPermission.VIEW_AUDIT_LOG]: 'View audit log',
+    [ProjectPermission.MANAGE_TAGS]: 'Manage tags',
+    [ProjectPermission.MANAGE_PROJECT_LEVEL_CHANGE_REQUESTS]:
+      'Manage project level change requests',
+    [ProjectPermission.APPROVE_PROJECT_LEVEL_CHANGE_REQUESTS]:
+      'Approve project level change requests',
+    [ProjectPermission.CREATE_PROJECT_LEVEL_CHANGE_REQUESTS]:
+      'Create project level change requests',
+  } as const
+
+// Environment Permissions
+export enum EnvironmentPermission {
+  ADMIN = 'ADMIN',
+  VIEW_ENVIRONMENT = 'VIEW_ENVIRONMENT',
+  UPDATE_FEATURE_STATE = 'UPDATE_FEATURE_STATE',
+  MANAGE_IDENTITIES = 'MANAGE_IDENTITIES',
+  CREATE_CHANGE_REQUEST = 'CREATE_CHANGE_REQUEST',
+  APPROVE_CHANGE_REQUEST = 'APPROVE_CHANGE_REQUEST',
+  VIEW_IDENTITIES = 'VIEW_IDENTITIES',
+  MANAGE_SEGMENT_OVERRIDES = 'MANAGE_SEGMENT_OVERRIDES',
+}
+export const EnvironmentPermissionDescriptions: Record<
+  EnvironmentPermission,
+  string
+> = {
+  [EnvironmentPermission.ADMIN]: 'Administrator',
+  [EnvironmentPermission.VIEW_ENVIRONMENT]: 'View environment',
+  [EnvironmentPermission.UPDATE_FEATURE_STATE]: 'Update feature state',
+  [EnvironmentPermission.MANAGE_IDENTITIES]: 'Manage identities',
+  [EnvironmentPermission.CREATE_CHANGE_REQUEST]: 'Create change request',
+  [EnvironmentPermission.APPROVE_CHANGE_REQUEST]: 'Approve change request',
+  [EnvironmentPermission.VIEW_IDENTITIES]: 'View identities',
+  [EnvironmentPermission.MANAGE_SEGMENT_OVERRIDES]: 'Manage segment overrides',
+} as const
+
+export type Permission =
+  | OrganisationPermission
+  | ProjectPermission
+  | EnvironmentPermission
+
+// Combined permission descriptions record
+export const PermissionDescriptions: Record<Permission, string> = {
+  ...OrganisationPermissionDescriptions,
+  ...ProjectPermissionDescriptions,
+  ...EnvironmentPermissionDescriptions,
+} as const

frontend/common/utils/utils.tsx

@@ -9,11 +9,11 @@ import {
   MultivariateFeatureStateValue,
   MultivariateOption,
   Organisation,
+  PConfidence,
   Project as ProjectType,
   ProjectFlag,
   SegmentCondition,
   Tag,
-  PConfidence,
   UserPermissions,
 } from 'common/types/responses'
 import flagsmith from '@flagsmith/flagsmith'
@@ -28,6 +28,12 @@ import { selectBuildVersion } from 'common/services/useBuildVersion'
 import { getStore } from 'common/store'
 import { TRACKED_UTMS, UtmsType } from 'common/types/utms'
 import { TimeUnit } from 'components/release-pipelines/constants'
+import {
+  EnvironmentPermission,
+  EnvironmentPermissionDescriptions,
+  OrganisationPermission,
+  OrganisationPermissionDescriptions,
+} from 'common/types/permissions.types'
 
 const semver = require('semver')
 
@@ -226,15 +232,17 @@ const Utils = Object.assign({}, require('./base/_utils'), {
   },
   getCreateProjectPermission(organisation: Organisation) {
     if (organisation?.restrict_project_create_to_admin) {
-      return 'ADMIN'
+      return OrganisationPermission.ADMIN
     }
-    return 'CREATE_PROJECT'
+    return OrganisationPermission.CREATE_PROJECT
   },
   getCreateProjectPermissionDescription(organisation: Organisation) {
     if (organisation?.restrict_project_create_to_admin) {
-      return 'Administrator'
+      return OrganisationPermissionDescriptions[OrganisationPermission.ADMIN]
     }
-    return 'Create Project'
+    return OrganisationPermissionDescriptions[
+      OrganisationPermission.CREATE_PROJECT
+    ]
   },
   getExistingWaitForTime: (
     waitFor: string | undefined,
@@ -384,22 +392,15 @@ const Utils = Object.assign({}, require('./base/_utils'), {
   },
   getManageFeaturePermission(isChangeRequest: boolean) {
     if (isChangeRequest) {
-      return 'CREATE_CHANGE_REQUEST'
+      return EnvironmentPermission.CREATE_CHANGE_REQUEST
     }
-    return 'UPDATE_FEATURE_STATE'
+    return EnvironmentPermission.UPDATE_FEATURE_STATE
   },
   getManageFeaturePermissionDescription(isChangeRequest: boolean) {
     if (isChangeRequest) {
-      return 'Create Change Request'
+      return EnvironmentPermissionDescriptions.CREATE_CHANGE_REQUEST
     }
-    return 'Update Feature State'
-  },
-
-  getManageUserPermission() {
-    return 'MANAGE_IDENTITIES'
-  },
-  getManageUserPermissionDescription() {
-    return 'Manage Identities'
+    return EnvironmentPermissionDescriptions.UPDATE_FEATURE_STATE
   },
 
   getNextPlan: (skipFree?: boolean) => {
@@ -431,7 +432,12 @@ const Utils = Object.assign({}, require('./base/_utils'), {
     const organisationId = match?.params?.organisationId
     return organisationId ? parseInt(organisationId) : null
   },
-  getOverridePermission: (level: 'identity' | 'segment') => {
+  getOverridePermission: (
+    level: 'identity' | 'segment',
+  ): {
+    permission: EnvironmentPermission
+    permissionDescription: string
+  } => {
     switch (level) {
       case 'identity':
         return {
@@ -441,8 +447,9 @@ const Utils = Object.assign({}, require('./base/_utils'), {
         }
       default:
         return {
-          permission: 'MANAGE_SEGMENT_OVERRIDES',
-          permissionDescription: 'Manage Segment Overrides',
+          permission: EnvironmentPermission.MANAGE_SEGMENT_OVERRIDES,
+          permissionDescription:
+            EnvironmentPermissionDescriptions.MANAGE_SEGMENT_OVERRIDES,
         }
     }
   },
@@ -632,9 +639,6 @@ const Utils = Object.assign({}, require('./base/_utils'), {
       return utms
     }, {} as UtmsType)
   },
-  getViewIdentitiesPermission() {
-    return 'VIEW_IDENTITIES'
-  },
 
   hasEntityPermission(key: string, entityPermissions: UserPermissions) {
     if (entityPermissions?.admin) return true