feat: Inspect Permissions - 🔴 Blocked by #5408

frontend/common/providers/Permission.tsx

@@ -3,7 +3,6 @@ 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 { add } from 'ionicons/icons'
 import { cloneDeep } from 'lodash' // we need this to make JSX compile
 
 type PermissionType = {

frontend/common/services/useUserPermissions.ts

@@ -0,0 +1,43 @@
+import { Res } from 'common/types/responses'
+import { Req } from 'common/types/requests'
+import { service } from 'common/service'
+
+export const userPermissionsService = service
+  .enhanceEndpoints({ addTagTypes: ['UserPermissions'] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      getUserPermissions: builder.query<
+        Res['userPermissions'],
+        Req['getUserPermissions']
+      >({
+        providesTags: [{ id: 'LIST', type: 'UserPermissions' }],
+        query: (query: Req['getUserPermissions']) => ({
+          url: `${query.level}s/${query.id}/user-detailed-permissions/${query.userId}/`,
+        }),
+      }),
+      // END OF ENDPOINTS
+    }),
+  })
+
+export async function getUserPermissions(
+  store: any,
+  data: Req['getUserPermissions'],
+  options?: Parameters<
+    typeof userPermissionsService.endpoints.getUserPermissions.initiate
+  >[1],
+) {
+  return store.dispatch(
+    userPermissionsService.endpoints.getUserPermissions.initiate(data, options),
+  )
+}
+// END OF FUNCTION_EXPORTS
+
+export const {
+  useGetUserPermissionsQuery,
+  // END OF EXPORTS
+} = userPermissionsService
+
+/* Usage examples:
+const { data, isLoading } = useGetUserEnvironmentPermissionsQuery({ environmentId: aA1x3Ysd, userId: 1 }, {}) //get hook
+userPermissionsService.endpoints.getUserEnvironmentPermissions.select({ environmentId: aA1x3Ysd, userId: 1 })(store.getState()) //access data from any function
+*/

frontend/common/types/requests.ts

@@ -27,6 +27,11 @@ export type PagedRequest<T> = T & {
 }
 export type OAuthType = 'github' | 'saml' | 'google'
 export type PermissionLevel = 'organisation' | 'project' | 'environment'
+export enum PermissionRoleType {
+  GRANTED = 'GRANTED',
+  GRANTED_FOR_TAGS = 'GRANTED_FOR_TAGS',
+  NONE = 'NONE',
+}
 export const billingPeriods = [
   {
     label: 'Current billing period',
@@ -646,5 +651,14 @@ export type Req = {
   }
   getBuildVersion: {}
   createOnboardingSupportOptIn: {}
+  getUserEnvironmentPermissions: {
+    environmentId: string
+    userId: string
+  }
+  getUserPermissions: {
+    id?: string
+    userId: number | undefined
+    level: PermissionLevel
+  }
   // END OF TYPES
 }

frontend/common/types/responses.ts

@@ -272,6 +272,30 @@ export type UserPermission = {
   role?: number
 }
 
+export type DerivedPermission = {
+  groups: {
+    name: string
+    id: number
+  }[]
+  roles: {
+    name: string
+    id: number
+  }[]
+}
+
+export type Permission = {
+  is_directly_granted: boolean
+  permission_key: string
+  tags: number[]
+  derived_from: DerivedPermission
+}
+export type UserPermissions = {
+  admin: boolean
+  is_directly_granted: boolean
+  derived_from: DerivedPermission
+  permissions: Permission[]
+}
+
 export type RolePermission = Omit<UserPermission, 'permissions'> & {
   permissions: { permission_key: string; tags: number[] }[]
 }
@@ -910,5 +934,6 @@ export type Res = {
   conversionEvents: PagedResponse<ConversionEvent>
   splitTest: PagedResponse<SplitTestResult>
   onboardingSupportOptIn: { id: string }
+  userPermissions: UserPermissions
   // END OF TYPES
 }

frontend/web/components/BooleanDotIndicator.tsx

@@ -0,0 +1,13 @@
+const BooleanDotIndicator = ({ enabled }: { enabled: boolean }) => (
+  <div
+    style={{
+      backgroundColor: enabled ? '#6837fc' : '#dbdcdf',
+      borderRadius: '50% 50%',
+      content: ' ',
+      height: 14,
+      width: 14,
+    }}
+  />
+)
+
+export default BooleanDotIndicator

frontend/web/components/EditPermissions.tsx

@@ -22,7 +22,7 @@ import Switch from './Switch'
 import TabItem from './base/forms/TabItem'
 import Tabs from './base/forms/Tabs'
 import UserGroupList from './UserGroupList'
-import { PermissionLevel, Req } from 'common/types/requests'
+import { PermissionLevel, Req, PermissionRoleType } from 'common/types/requests'
 import { useGetAvailablePermissionsQuery } from 'common/services/useAvailablePermissions'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Icon from './Icon'
@@ -61,30 +61,11 @@ import classNames from 'classnames'
 import OrganisationProvider from 'common/providers/OrganisationProvider'
 import { useHasPermission } from 'common/providers/Permission'
 import PlanBasedAccess from './PlanBasedAccess'
-import { useGetTagsQuery } from 'common/services/useTag'
-import { components } from 'react-select'
-import { SingleValueProps } from 'react-select/lib/components/SingleValue'
-import AddEditTags from './tags/AddEditTags'
+import { PermissionRow } from './PermissionRow'
 import { RouterChildContext } from 'react-router'
 
 const Project = require('common/project')
 
-const SingleValue = (props: SingleValueProps<any>) => {
-  return (
-    <components.SingleValue {...props}>
-      <div className='d-flex gap-1 align-items-center'>
-        {props.data.value === 'GRANTED' && (
-          <Icon width={18} name='checkmark' fill='#27AB95' />
-        )}
-        {props.data.value === 'GRANTED_FOR_TAGS' && (
-          <Icon width={18} name='shield' fill='#ff9f43' />
-        )}
-        {props.children}
-      </div>
-    </components.SingleValue>
-  )
-}
-
 type EditPermissionModalType = {
   group?: UserGroupSummary
   id: number | string
@@ -122,11 +103,7 @@ type EntityPermissions = Omit<
   user?: number
   tags?: number[]
 }
-const permissionOptions = [
-  { label: 'Granted', value: 'GRANTED' },
-  { label: 'Granted for tags', value: 'GRANTED_FOR_TAGS' },
-  { label: 'None', value: 'NONE' },
-]
+
 const withAdminPermissions = (InnerComponent: any) => {
   const WrappedComponent: FC<EditPermissionModalType> = (props) => {
     const { id, level } = props
@@ -159,6 +136,7 @@ const withAdminPermissions = (InnerComponent: any) => {
   }
   return WrappedComponent
 }
+
 const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
   forwardRef((props: EditPermissionModalType) => {
     const {
@@ -199,11 +177,6 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
         ? props.parentId
         : undefined
 
-    const { data: tags, isLoading: tagsLoading } = useGetTagsQuery(
-      { projectId: `${projectId}` },
-      { skip: !projectId },
-    )
-
     const [permissionWasCreated, setPermissionWasCreated] =
       useState<boolean>(false)
     const [rolesSelected, setRolesSelected] = useState<
@@ -259,18 +232,27 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
       //eslint-disable-next-line
     }, [groupWithRolesDataSuccesfull])
 
-    const processResults = (results: (UserPermission | GroupPermission)[]) => {
-      const foundPermission = isGroup
-        ? find(
-            results || [],
-            (r) => (r as GroupPermission).group.id === group?.id,
-          )
-        : role
-        ? find(results || [], (r) => (r as GroupPermission).role === role?.id)
-        : find(
-            results || [],
-            (r) => (r as UserPermission).user?.id === user?.id,
-          )
+    const processResults = (
+      results: (UserPermission | GroupPermission)[] = [],
+    ) => {
+      let foundPermission
+      if (isGroup) {
+        foundPermission = find(
+          results,
+          (r) => (r as GroupPermission).group.id === group?.id,
+        )
+      } else if (role) {
+        foundPermission = find(
+          results,
+          (r) => (r as GroupPermission).role === role?.id,
+        )
+      } else {
+        foundPermission = find(
+          results,
+          (r) => (r as UserPermission).user?.id === user?.id,
+        )
+      }
+
       const permissions =
         (role && (level === 'project' || level === 'environment')
           ? foundPermission?.permissions
@@ -468,28 +450,6 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
 
     const admin = () => entityPermissions && entityPermissions.admin
 
-    const hasPermission = (key: string) => {
-      if (admin()) return true
-      return entityPermissions.permissions.find(
-        (permission) => permission.permission_key === key,
-      )
-    }
-
-    const getPermissionType = (key: string) => {
-      if (admin()) return 'GRANTED'
-      const permission = entityPermissions.permissions.find(
-        (v) => v.permission_key === key,
-      )
-
-      if (!permission) return 'NONE'
-
-      if (permission.tags?.length || limitedPermissions.includes(key)) {
-        return 'GRANTED_FOR_TAGS'
-      }
-
-      return 'GRANTED'
-    }
-
     const save = useCallback(() => {
       const entityId =
         typeof entityPermissions.id === 'undefined' ? '' : entityPermissions.id
@@ -594,7 +554,7 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
 
     const selectPermissions = (
       key: string,
-      value: 'GRANTED' | 'GRANTED_FOR_TAGS' | 'NONE',
+      value: PermissionRoleType,
       tags: number[] = [],
     ) => {
       const updatedPermissions = [
@@ -605,7 +565,7 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
       const updatedLimitedPermissions = limitedPermissions.filter(
         (v) => v !== key,
       )
-      if (value === 'NONE') {
+      if (value === PermissionRoleType.NONE) {
         setEntityPermissions({
           ...entityPermissions,
           permissions: updatedPermissions,
@@ -621,7 +581,7 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
           ]),
         })
       }
-      if (value === 'GRANTED_FOR_TAGS') {
+      if (value === PermissionRoleType.GRANTED_FOR_TAGS) {
         setLimitedPermissions(updatedLimitedPermissions.concat([key]))
       } else {
         setLimitedPermissions(updatedLimitedPermissions)
@@ -853,76 +813,22 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
               title='Permissions'
               className='no-pad mb-2 overflow-visible'
               items={permissions}
-              renderRow={(p) => {
-                const levelUpperCase = level.toUpperCase()
-                const disabled =
-                  level !== 'organisation' &&
-                  p.key !== `VIEW_${levelUpperCase}` &&
-                  !hasPermission(`VIEW_${levelUpperCase}`)
-                const permission = entityPermissions.permissions.find(
-                  (v) => v.permission_key === p.key,
-                )
-                const permissionType = getPermissionType(p.key)
-                return (
-                  <Row
-                    key={p.key}
-                    style={admin() ? { opacity: 0.5 } : undefined}
-                    className='list-item list-item-sm px-3 py-2'
-                  >
-                    <Row space>
-                      <Flex>
-                        <strong>{Format.enumeration.get(p.key)}</strong>
-                        <div className='list-item-subtitle'>
-                          {p.description}
-                        </div>
-                        {permissionType === 'GRANTED_FOR_TAGS' && (
-                          <AddEditTags
-                            projectId={`${projectId}`}
-                            value={permission?.tags || []}
-                            onChange={(v) => {
-                              setValueChanged(true)
-                              selectPermissions(p.key, 'GRANTED_FOR_TAGS', v)
-                            }}
-                          />
-                        )}
-                      </Flex>
-                      {tagBasedPermissions ? (
-                        <div className='ms-2' style={{ width: 200 }}>
-                          <Select
-                            value={permissionOptions.find(
-                              (v) => v.value === permissionType,
-                            )}
-                            onChange={(v) => {
-                              setValueChanged(true)
-                              selectPermissions(p.key, v.value)
-                            }}
-                            className='react-select select-sm'
-                            disabled={disabled || admin() || saving}
-                            options={
-                              p.supports_tag
-                                ? permissionOptions
-                                : permissionOptions.filter(
-                                    (v) => v.value !== 'GRANTED_FOR_TAGS',
-                                  )
-                            }
-                            components={{ SingleValue }}
-                          />
-                        </div>
-                      ) : (
-                        <Switch
-                          data-test={`permission-switch-${p.key}`}
-                          onChange={() => {
-                            setValueChanged(true)
-                            togglePermission(p.key)
-                          }}
-                          disabled={disabled || admin() || saving}
-                          checked={!disabled && hasPermission(p.key)}
-                        />
-                      )}
-                    </Row>
-                  </Row>
-                )
-              }}
+              renderRow={(p) => (
+                <PermissionRow
+                  key={p.key}
+                  permission={p}
+                  level={level}
+                  projectId={projectId}
+                  entityPermissions={entityPermissions}
+                  limitedPermissions={limitedPermissions}
+                  isAdmin={isAdmin}
+                  isSaving={saving}
+                  isTagBasedPermissions={tagBasedPermissions}
+                  onValueChanged={setValueChanged}
+                  onSelectPermissions={selectPermissions}
+                  onTogglePermission={togglePermission}
+                />
+              )}
             />
 
             <p className='text-right mt-5 text-dark'>