tag based role ui

Flagsmith · Nov 6, 2024 · 716706b · 716706b
1 parent 82519f2
commit 716706b
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 32 deletions.
diff --git a/frontend/web/components/RolesTable.tsx b/frontend/web/components/RolesTable.tsx
@@ -32,13 +32,14 @@ const RolesTable: FC<RolesTableType> = ({ organisationId, users }) => {
     level: 'organisation',
     permission: 'ADMIN',
   })
-  const createRole = () => {
+  const createRole = (tagBased: boolean) => {
     openModal(
-      'Create Role',
+      tagBased ? 'Create Tag-based role' : 'Create Role',
       <CreateRole
+        tagBased={tagBased}
         organisationId={organisationId}
         onComplete={() => {
-          toast('Role Created')
+          toast(tagBased ? 'Tag-based Role Created' : 'Role Created')
           closeModal()
         }}
       />,
@@ -60,7 +61,9 @@ const RolesTable: FC<RolesTableType> = ({ organisationId, users }) => {
 
   const editRole = (role: Role) => {
     openModal(
-      'Edit Role and Permissions',
+      role.tag_based
+        ? `Edit Tag-based Role: ${role.name}`
+        : `Edit Role: ${role.name}`,
       <CreateRole
         organisationId={role.organisation}
         isEdit
@@ -74,6 +77,9 @@ const RolesTable: FC<RolesTableType> = ({ organisationId, users }) => {
       'side-modal',
     )
   }
+  const tag_based_permissions = Utils.getFlagsmithHasFeature(
+    'tag_based_permissions',
+  )
   return (
     <>
       <Row space className='mt-4'>
@@ -85,7 +91,7 @@ const RolesTable: FC<RolesTableType> = ({ organisationId, users }) => {
             disabled={!isAdmin}
             className='mr-2'
             id='btn-invite'
-            onClick={() => createRole()}
+            onClick={() => createRole(false)}
             type='button'
           >
             Create Role
@@ -97,9 +103,9 @@ const RolesTable: FC<RolesTableType> = ({ organisationId, users }) => {
         you can assign roles to users and/or groups.
       </p>
       <PanelSearch
-        id='org-members-list'
+        id='org-roles-list'
         className='no-pad'
-        items={roles?.results || []}
+        items={(roles?.results || []).filter((v) => !v.tag_based)}
         itemHeight={65}
         header={
           <Row className='table-header'>
@@ -163,7 +169,7 @@ const RolesTable: FC<RolesTableType> = ({ organisationId, users }) => {
           </Row>
         )}
         renderNoResults={
-          <Panel title={'Organisation roles'} className='no-pad'>
+          <Panel className='no-pad'>
             <div className='search-list'>
               <Row className='list-item p-3 text-muted'>
                 You currently have no organisation roles
@@ -173,6 +179,107 @@ const RolesTable: FC<RolesTableType> = ({ organisationId, users }) => {
         }
         isLoading={false}
       />
+      {tag_based_permissions && (
+        <>
+          <Row space className='mt-4'>
+            <h5 className='m-b-0'>Tag-based Roles</h5>
+            {Utils.renderWithPermission(
+              isAdmin,
+              Constants.organisationPermissions('Admin'),
+              <Button
+                disabled={!isAdmin}
+                className='mr-2'
+                id='btn-invite'
+                onClick={() => createRole(true)}
+                type='button'
+              >
+                Create Tag-based Role
+              </Button>,
+            )}
+          </Row>
+          <p className='fs-small lh-sm'>
+            Use tag-based roles to grant permissions for features with specific
+            tags.
+          </p>
+          <PanelSearch
+            id='org-roles-list'
+            className='no-pad'
+            items={(roles?.results || []).filter((v) => !!v.tag_based)}
+            itemHeight={65}
+            header={
+              <Row className='table-header'>
+                <div
+                  className='table-column'
+                  style={{
+                    width: rolesWidths[0],
+                  }}
+                >
+                  Name
+                </div>
+                <div className='flex-fill table-column'>Description</div>
+                <div
+                  style={{
+                    width: rolesWidths[1],
+                  }}
+                  className='table-column text-center'
+                >
+                  Remove
+                </div>
+              </Row>
+            }
+            renderRow={(role: Role) => (
+              <Row className='list-item clickable cursor-pointer' key={role.id}>
+                <Row
+                  onClick={() => {
+                    editRole(role)
+                  }}
+                  className='table-column'
+                  style={{
+                    width: rolesWidths[0],
+                  }}
+                >
+                  {role.name}
+                </Row>
+                <Row
+                  className='table-column flex-fill'
+                  onClick={() => {
+                    editRole(role)
+                  }}
+                >
+                  {role.description}
+                </Row>
+                <div
+                  style={{
+                    width: rolesWidths[1],
+                  }}
+                  className='table-column text-center'
+                >
+                  <Button
+                    id='remove-role'
+                    type='button'
+                    onClick={() => {
+                      deleteRole(role)
+                    }}
+                    className='btn btn-with-icon'
+                  >
+                    <Icon name='trash-2' width={20} fill='#656D7B' />
+                  </Button>
+                </div>
+              </Row>
+            )}
+            renderNoResults={
+              <Panel className='no-pad'>
+                <div className='search-list'>
+                  <Row className='list-item p-3 text-muted'>
+                    You currently have no tag-based roles
+                  </Row>
+                </div>
+              </Panel>
+            }
+            isLoading={false}
+          />
+        </>
+      )}
     </>
   )
 }

diff --git a/frontend/web/components/TagBasedPermissions.tsx b/frontend/web/components/TagBasedPermissions.tsx
@@ -36,7 +36,7 @@ const TagBasedPermissions: FC<TaggedPermissionsType> = ({
       {role?.tag_based && (
         <div className='mb-2'>
           <div className='mt-2 text-body fw-bold'>
-            Enable permissions for the following tags:
+            Permissions will only apply for features with the following tags:
           </div>
           <AddEditTags
             projectId={projectId}

diff --git a/frontend/web/components/modals/CreateRole.tsx b/frontend/web/components/modals/CreateRole.tsx
@@ -59,6 +59,7 @@ type CreateRoleType = {
   isEdit?: boolean
   onComplete: () => void
   organisationId?: number
+  tagBased: boolean
   role?: number
   users?: User[]
 }
@@ -68,6 +69,7 @@ const CreateRole: FC<CreateRoleType> = ({
   onComplete,
   organisationId,
   role: role_id,
+  tagBased,
   users,
 }) => {
   const { data: role, isLoading } = useGetRoleQuery(
@@ -89,7 +91,6 @@ const CreateRole: FC<CreateRoleType> = ({
     }[]
   >([])
 
-  const [tagBased, setTagBased] = useState(!!role?.tag_based)
   const [groupSelected, setGroupSelected] = useState<
     {
       group: number
@@ -312,7 +313,6 @@ const CreateRole: FC<CreateRoleType> = ({
     )
     useEffect(() => {
       if (!isLoading && isEdit && roleData) {
-        setTagBased(roleData.tag_based)
         setRoleName(roleData.name)
         setRoleDesc(roleData.description || '')
       }
@@ -370,27 +370,6 @@ const CreateRole: FC<CreateRoleType> = ({
           id='roleName'
           placeholder='E.g. Viewers'
         />
-        <InputGroup
-          title='Use tag-based permissions'
-          tooltip={
-            'Tag-based roles will grant permissions to a selected set of feature tags'
-          }
-          value={tagBased}
-          component={
-            <Switch
-              disabled={!!role}
-              checked={tagBased}
-              onChange={setTagBased}
-            />
-          }
-          unsaved={isEdit && roleDescChanged}
-          onChange={(event: InputEvent) => {
-            setRoleDescChanged(true)
-            setRoleDesc(Utils.safeParseEventValue(event))
-          }}
-          id='description'
-          placeholder='E.g. Some role description'
-        />
         <InputGroup
           title='Description'
           inputProps={{