Permissions form fixes (#4675)

* fit object permissions form

* add fragment

* fix global permissions

* revert workaround for roles

* chore

---------

Co-authored-by: bilalabbad <[email protected]>

Author: pa-lem

changelog/+permissions.added.md

@@ -0,0 +1,4 @@
+New permissions system in UI:
+- Implemented CRUD views for managing accounts, groups, roles, and permissions
+- Updated all components to support new permission system
+- Added dynamic message display according to user access levels

frontend/app/src/graphql/queries/role-management/getGlobalPermissions.ts

@@ -7,11 +7,22 @@ export const GET_ROLE_MANAGEMENT_GLOBAL_PERMISSIONS = gql`
         node {
           id
           display_label
+          name {
+            value
+          }
           action {
             value
           }
+          decision {
+            value
+          }
           roles {
             count
+            edges {
+              node {
+                id
+              }
+            }
           }
           identifier {
             value

frontend/app/src/graphql/queries/role-management/getRoles.ts

@@ -27,6 +27,17 @@ export const GET_ROLE_MANAGEMENT_ROLES = gql`
           }
         }
       }
+      permissions {
+        edges {
+          node {
+            kind
+            view
+            create
+            update
+            delete
+          }
+        }
+      }
     }
   }
 `;

frontend/app/src/screens/role-management/global-permissions.tsx

@@ -72,9 +72,14 @@ function GlobalPermissions() {
                 {edge?.node?.display_label}
               </div>
             ),
+            value: edge?.node?.name?.value,
+          },
+          action: { value: edge?.node?.action?.value },
+          decision: { value: edge?.node?.decision?.value },
+          roles: {
+            display: <Pill>{edge?.node?.roles?.count}</Pill>,
+            value: { edges: edge?.node?.roles?.edges },
           },
-          description: { value: edge?.node?.description?.value },
-          roles: { display: <Pill>{edge?.node?.roles?.count}</Pill> },
           identifier: { display: <BadgeCopy value={edge?.node?.identifier?.value} /> },
         },
       };
@@ -120,7 +125,17 @@ function GlobalPermissions() {
           </div>
         </div>
 
-        <Table columns={columns} rows={rows ?? []} className="border-0" permission={permission} />
+        <Table
+          columns={columns}
+          rows={rows ?? []}
+          onDelete={(data) => setRowToDelete(data.values)}
+          onUpdate={(row) => {
+            setRowToUpdate(row.values);
+            setShowDrawer(true);
+          }}
+          className="border-0"
+          permission={permission}
+        />
 
         <Pagination count={data && data[GLOBAL_PERMISSION_OBJECT]?.count} />
       </div>

frontend/app/src/screens/role-management/object-permissions-form.tsx

@@ -9,7 +9,7 @@ import { ACCOUNT_ROLE_OBJECT, OBJECT_PERMISSION_OBJECT } from "@/config/constant
 import graphqlClient from "@/graphql/graphqlClientApollo";
 import { createObject } from "@/graphql/mutations/objects/createObject";
 import { updateObjectWithId } from "@/graphql/mutations/objects/updateObjectWithId";
-import { branchesState, currentBranchAtom } from "@/state/atoms/branches.atom";
+import { currentBranchAtom } from "@/state/atoms/branches.atom";
 import { namespacesState, schemaState } from "@/state/atoms/schema.atom";
 import { datetimeAtom } from "@/state/atoms/time.atom";
 import { AttributeType, RelationshipType } from "@/utils/getObjectItemDisplayValue";
@@ -37,7 +37,6 @@ export const ObjectPermissionForm = ({
   onCancel,
   onUpdateComplete,
 }: NumberPoolFormProps) => {
-  const branches = useAtomValue(branchesState);
   const branch = useAtomValue(currentBranchAtom);
   const date = useAtomValue(datetimeAtom);
 
@@ -46,18 +45,17 @@ export const ObjectPermissionForm = ({
   });
 
   const defaultValues = {
-    branch: getCurrentFieldValue("branch", currentObject),
     namespace: getCurrentFieldValue("namespace", currentObject),
     name: getCurrentFieldValue("name", currentObject),
+    action: getCurrentFieldValue("action", currentObject),
+    decision: getCurrentFieldValue("decision", currentObject),
     roles,
   };
 
   const form = useForm<FieldValues>({
     defaultValues,
   });
 
-  const branchesOptions = branches.map((branch) => ({ value: branch.name, label: branch.name }));
-
   const actionOptions = [
     {
       value: "any",

frontend/app/src/screens/role-management/roles.tsx

@@ -17,7 +17,7 @@ import graphqlClient from "@/graphql/graphqlClientApollo";
 import useQuery from "@/hooks/useQuery";
 import { useSchema } from "@/hooks/useSchema";
 import UnauthorizedScreen from "../errors/unauthorized-screen";
-import { PERMISSION_ALLOW_ALL } from "../permission/utils";
+import { getPermission } from "../permission/utils";
 
 function Roles() {
   const { loading, data, error, refetch } = useQuery(GET_ROLE_MANAGEMENT_ROLES);
@@ -33,8 +33,7 @@ function Roles() {
   > | null>(null);
   const [showDrawer, setShowDrawer] = useState(false);
 
-  // const permission = getPermission(data?.[ACCOUNT_ROLE_OBJECT]?.permissions?.edges);
-  const permission = PERMISSION_ALLOW_ALL;
+  const permission = getPermission(data?.[ACCOUNT_ROLE_OBJECT]?.permissions?.edges);
 
   const columns = [
     {