feat: User permissions summary

frontend/web/components/EditPermissions.tsx

@@ -1,6 +1,6 @@
 import React, { FC, forwardRef, useCallback, useEffect, useState } from 'react'
-import { find } from 'lodash'
-import { close as closeIcon } from 'ionicons/icons'
+import { find, sortBy } from 'lodash'
+import { close as closeIcon, informationCircle } from 'ionicons/icons'
 import { IonIcon } from '@ionic/react'
 import _data from 'common/data/base/_data'
 import {
@@ -65,8 +65,11 @@ import PlanBasedAccess from './PlanBasedAccess'
 import { useGetTagsQuery } from 'common/services/useTag'
 import { components } from 'react-select'
 import { SingleValueProps } from 'react-select/lib/components/SingleValue'
-import Utils from 'common/utils/utils'
 import AddEditTags from './tags/AddEditTags'
+import PermissionsSummaryList, {
+  PermissionSummaryItem,
+} from './PermissionsSummaryList'
+import Tooltip from './Tooltip'
 
 const Project = require('common/project')
 
@@ -1132,7 +1135,17 @@ const EditPermissions: FC<EditPermissionsType> = (props) => {
                           id='org-members-list'
                           title='Users'
                           className='panel--transparent'
-                          items={users}
+                          items={sortBy(users, (user) =>
+                            user.role === 'ADMIN'
+                              ? `0${user.first_name}`
+                              : permissions?.find(
+                                  (permission) =>
+                                    permission.user.id === user.id &&
+                                    permission.permissions?.length,
+                                )
+                              ? `1${user.first_name}`
+                              : `2${user.first_name}`,
+                          )}
                           itemHeight={64}
                           header={
                             <Row className='table-header'>
@@ -1157,6 +1170,7 @@ const EditPermissions: FC<EditPermissionsType> = (props) => {
                             const matchingPermissions = permissions?.find(
                               (v) => v.user.id === id,
                             )
+                            debugger
 
                             return (
                               <Row
@@ -1176,29 +1190,63 @@ const EditPermissions: FC<EditPermissionsType> = (props) => {
                                     {email}
                                   </div>
                                 </Flex>
-                                {role === 'ADMIN' ? (
-                                  <Flex className='table-column fs-small lh-sm'>
-                                    <Tooltip
-                                      title={'Organisation Administrator'}
-                                    >
-                                      {
-                                        'Organisation administrators have all permissions enabled.<br/>To change the role of this user, visit Organisation Settings.'
-                                      }
-                                    </Tooltip>
-                                  </Flex>
-                                ) : (
-                                  <Flex
-                                    onClick={onClick}
-                                    className='table-column fs-small lh-sm'
-                                  >
-                                    {matchingPermissions &&
-                                    matchingPermissions.admin
-                                      ? `${Format.camelCase(
-                                          level,
-                                        )} Administrator`
-                                      : 'Regular User'}
-                                  </Flex>
-                                )}
+                                <div className='d-flex  gap-2 table-column fs-small'>
+                                  {role === 'ADMIN' ? (
+                                    <div className=''>
+                                      <Tooltip
+                                        title={
+                                          <PermissionSummaryItem isAdmin />
+                                        }
+                                      >
+                                        {
+                                          'Organisation administrators have all permissions enabled. To change the role of this user, visit Organisation Settings.'
+                                        }
+                                      </Tooltip>
+                                    </div>
+                                  ) : (
+                                    <div onClick={onClick}>
+                                      {!matchingPermissions?.permissions
+                                        ?.length &&
+                                      !matchingPermissions?.admin ? (
+                                        <Tooltip
+                                          title={
+                                            <div className='text-body gap-1 align-items-center d-flex'>
+                                              No User-level Permissions{' '}
+                                              <span className='lh-1'>
+                                                <IonIcon
+                                                  icon={informationCircle}
+                                                />
+                                              </span>
+                                            </div>
+                                          }
+                                        >
+                                          {`This user has no permissions assigned
+                                          directly, but they may belong to a
+                                          group that has permissions on this
+                                          ${level}.`}
+                                        </Tooltip>
+                                      ) : (
+                                        <PermissionsSummaryList
+                                          permissions={
+                                            matchingPermissions.admin
+                                              ? [
+                                                  {
+                                                    permission_key: `${level} Administrator`,
+                                                    tags: [],
+                                                  },
+                                                ]
+                                              : matchingPermissions.permissions.map(
+                                                  (v) => ({
+                                                    permission_key: v,
+                                                    tags: [],
+                                                  }),
+                                                )
+                                          }
+                                        />
+                                      )}
+                                    </div>
+                                  )}
+                                </div>
                                 <div
                                   style={{ width: '80px' }}
                                   className='text-center'

frontend/web/components/PermissionsSummaryList.tsx

@@ -1,16 +1,42 @@
 import React, { FC, useMemo } from 'react'
 import Tooltip from './Tooltip'
-import { RolePermission } from 'common/types/responses'
+import { RolePermission, UserPermission } from 'common/types/responses'
 import Format from 'common/utils/format'
 import classNames from 'classnames'
 import { sortBy } from 'lodash'
 
 type PermissionsSummaryListType = {
-  isAdmin: boolean
+  isAdmin?: boolean
   permissions: RolePermission['permissions'] | null | undefined
   numberToTruncate?: number
 }
 
+type PermissionSummaryItemType = {
+  value: RolePermission['permissions'][number]
+  isAdmin?: boolean
+}
+
+const getPermissionString = (v: RolePermission['permissions'][number]) =>
+  `${Format.enumeration.get(v.permission_key)}${v.tags?.length ? `*` : ''}`
+
+export const PermissionSummaryItem: FC<PermissionSummaryItemType> = ({
+  isAdmin,
+  value,
+}) => {
+  return (
+    <div
+      className={classNames('chip chip--xs', {
+        'bg-white text-success border-success bg-opacity-10':
+          isAdmin || !value.tags?.length,
+        'bg-white text-warning border-warning bg-opacity-10':
+          !isAdmin && value.tags?.length,
+      })}
+    >
+      {isAdmin ? 'Administrator' : getPermissionString(value)}
+    </div>
+  )
+}
+
 const PermissionsSummaryList: FC<PermissionsSummaryListType> = ({
   isAdmin,
   numberToTruncate = 3,
@@ -37,24 +63,12 @@ const PermissionsSummaryList: FC<PermissionsSummaryListType> = ({
       truncatedItems: (sortedPermissions || []).slice(numberToTruncate),
     }
   }, [isAdmin, numberToTruncate, permissions])
-  const getPermissionString = (v: RolePermission['permissions'][number]) =>
-    `${Format.enumeration.get(v.permission_key)}${v.tags?.length ? `*` : ''}`
 
   const truncatedHasLimitedAccess = truncatedItems?.find((v) => v.tags?.length)
   return (
     <div className='flex-row gap-1 align-items-center'>
       {items.map((value, i) => (
-        <div
-          key={i}
-          className={classNames('chip chip--xs', {
-            'bg-white text-success border-success bg-opacity-10':
-              !value.tags?.length,
-            'bg-white text-warning border-warning bg-opacity-10':
-              value.tags?.length,
-          })}
-        >
-          {getPermissionString(value)}
-        </div>
+        <PermissionSummaryItem value={value} key={i} />
       ))}
       {!!truncatedItems.length && (
         <Tooltip

frontend/web/components/PermissionsTabs.tsx

@@ -92,6 +92,7 @@ const PermissionsTabs: FC<PermissionsTabsType> = ({
           <EditPermissionsModal
             id={orgId}
             group={group}
+            permissions={[]}
             isGroup={!!group}
             user={user}
             className='mt-2'

frontend/web/components/modals/CreateRole.tsx

@@ -10,23 +10,12 @@ import React, {
 import InputGroup from 'components/base/forms/InputGroup'
 import Tabs from 'components/base/forms/Tabs'
 import TabItem from 'components/base/forms/TabItem'
-import RolePermissionsList from 'components/RolePermissionsList'
 import {
   useCreateRoleMutation,
   useGetRoleQuery,
   useUpdateRoleMutation,
 } from 'common/services/useRole'
-
-import { EditPermissionsModal } from 'components/EditPermissions'
-import OrganisationStore from 'common/stores/organisation-store'
-import ProjectFilter from 'components/ProjectFilter'
-import {
-  Environment,
-  Project,
-  Role,
-  User,
-  UserGroup,
-} from 'common/types/responses'
+import { Role, User, UserGroup } from 'common/types/responses'
 import { setInterceptClose } from './base/ModalDefault'
 import UserSelect from 'components/UserSelect'
 import MyGroupsSelect from 'components/MyGroupsSelect'
@@ -44,7 +33,6 @@ import { close as closeIcon } from 'ionicons/icons'
 import { IonIcon } from '@ionic/react'
 import Utils from 'common/utils/utils'
 import Button from 'components/base/forms/Button'
-import Input from 'components/base/forms/Input'
 import SettingsButton from 'components/SettingsButton'
 import PermissionsTabs from 'components/PermissionsTabs'
 import AccountStore from 'common/stores/account-store'

frontend/web/components/modals/CreateSegment.tsx

@@ -73,13 +73,15 @@ type CreateSegmentType = {
   segment?: Segment
 }
 type CreateSegmentError = {
-  status: number,
+  status: number
   data: {
-    rules: [{
-      rules: Array<{
-        conditions: SegmentConditionsError[]
-      }>
-    }]
+    rules: [
+      {
+        rules: Array<{
+          conditions: SegmentConditionsError[]
+        }>
+      },
+    ]
   }
 }
 
@@ -351,9 +353,10 @@ const CreateSegment: FC<CreateSegmentType> = ({
                 >
                   <Flex className='and-divider__line' />
                   {Format.camelCase(
-                    `${displayIndex > 0 ? 'And ' : ''}${rule.type === 'ANY'
-                      ? 'Any of the following'
-                      : 'None of the following'
+                    `${displayIndex > 0 ? 'And ' : ''}${
+                      rule.type === 'ANY'
+                        ? 'Any of the following'
+                        : 'None of the following'
                     }`,
                   )}
                   <Flex className='and-divider__line' />

frontend/web/components/pages/EnvironmentSettingsPage.js

@@ -31,6 +31,7 @@ import {
   getWebhooks,
   updateWebhook,
 } from 'common/services/useWebhooks'
+import _data from 'common/data/base/_data'
 
 const showDisabledFlagOptions = [
   { label: 'Inherit from Project', value: null },
@@ -56,6 +57,7 @@ const EnvironmentSettingsPage = class extends Component {
       webhooksLoading: true,
     }
     AppActions.getProject(this.props.match.params.projectId)
+    this.getPermissions()
   }
 
   componentDidMount = () => {
@@ -79,6 +81,16 @@ const EnvironmentSettingsPage = class extends Component {
       })
   }
 
+  getPermissions = () => {
+    _data
+      .get(
+        `${Project.api}environments/${this.props.match.params.environmentId}/user-permissions/`,
+      )
+      .then((permissions) => {
+        this.setState({ permissions })
+      })
+  }
+
   getEnvironment = () => {
     const env = ProjectStore.getEnvs().find(
       (v) => v.api_key === this.props.match.params.environmentId,
@@ -799,13 +811,17 @@ const EnvironmentSettingsPage = class extends Component {
                       <FormGroup>
                         <EditPermissions
                           tabClassName='flat-panel'
+                          onSaveUser={() => {
+                            this.getPermissions()
+                          }}
                           parentId={this.props.match.params.projectId}
                           parentLevel='project'
                           parentSettingsLink={`/project/${this.props.match.params.projectId}/settings`}
                           id={this.props.match.params.environmentId}
                           envId={env.id}
                           router={this.context.router}
                           level='environment'
+                          permissions={this.state.permissions}
                           roleTabTitle='Environment Permissions'
                           roles={this.state.roles}
                         />

frontend/web/project/api.js

@@ -273,7 +273,10 @@ global.API = {
         if (plan && plan.includes('start-up')) {
           return planNames.startup
         }
-        if (global.flagsmithVersion?.backend.is_enterprise || (plan && plan.includes('enterprise'))) {
+        if (
+          global.flagsmithVersion?.backend.is_enterprise ||
+          (plan && plan.includes('enterprise'))
+        ) {
           return planNames.enterprise
         }
         return planNames.free