feat: support check permission for workspace actions

sdks/js/packages/core/react/components/organization/general/general.workspace.tsx

@@ -14,6 +14,7 @@ import { toast } from 'sonner';
 import * as yup from 'yup';
 import { useFrontier } from '~/react/contexts/FrontierContext';
 import { V1Beta1Organization } from '~/src';
+import { PERMISSIONS } from '~/utils';
 
 const generalSchema = yup
   .object({
@@ -24,10 +25,14 @@ const generalSchema = yup
 
 export const GeneralOrganization = ({
   organization,
-  isLoading
+  isLoading,
+  organizationPermissions,
+  permissionMap
 }: {
   organization?: V1Beta1Organization;
   isLoading?: boolean;
+  organizationPermissions?: Record<string, string>;
+  permissionMap?: Record<string, string>;
 }) => {
   const { client } = useFrontier();
   const {
@@ -111,15 +116,20 @@ export const GeneralOrganization = ({
             </Text>
           </InputField>
         </Box>
-        <Button
-          size="medium"
-          variant="primary"
-          type="submit"
-          style={{ width: 'fit-content' }}
-          disabled={isLoading || isSubmitting}
-        >
-          {isSubmitting ? 'updating...' : 'Update'}
-        </Button>
+        {organizationPermissions &&
+        organizationPermissions[
+          `${PERMISSIONS.PUT}::${permissionMap?.Organization}`
+        ] ? (
+          <Button
+            size="medium"
+            variant="primary"
+            type="submit"
+            style={{ width: 'fit-content' }}
+            disabled={isLoading || isSubmitting}
+          >
+            {isSubmitting ? 'updating...' : 'Update'}
+          </Button>
+        ) : null}
       </Flex>
     </form>
   );

sdks/js/packages/core/react/components/organization/general/index.tsx

@@ -2,16 +2,66 @@
 
 import { Button, Flex, Separator, Text } from '@raystack/apsara';
 import { Outlet, useNavigate } from '@tanstack/react-router';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFrontier } from '~/react/contexts/FrontierContext';
+import { PERMISSIONS, formatPermissions } from '~/utils';
 import { styles } from '../styles';
 import { GeneralProfile } from './general.profile';
 import { GeneralOrganization } from './general.workspace';
 
 export default function GeneralSetting() {
-  const {
-    activeOrganization: organization,
-    isActiveOrganizationLoading: isLoading
-  } = useFrontier();
+  const [permisionValues, setPermisionValues] = useState([]);
+  const [fetchingOrgPermissions, setFetchingOrgPermissions] = useState(true);
+
+  const { client, activeOrganization: organization } = useFrontier();
+  const isLoading = fetchingOrgPermissions;
+
+  const PERMISSIONS_MAP = {
+    Organization: `app/organization:${organization?.id}`
+  };
+
+  const permisions = [
+    {
+      permission: PERMISSIONS.GET,
+      resource: PERMISSIONS_MAP.Organization
+    },
+    {
+      permission: PERMISSIONS.DELETE,
+      resource: PERMISSIONS_MAP.Organization
+    }
+  ];
+
+  const fetchOrganizationPermissions = useCallback(async () => {
+    try {
+      const {
+        // @ts-ignore
+        data: { pairs }
+      } = await client?.frontierServiceBatchCheckPermission({
+        bodies: permisions
+      });
+      setPermisionValues(pairs);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setFetchingOrgPermissions(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [client]);
+
+  useEffect(() => {
+    if (organization?.id) {
+      fetchOrganizationPermissions();
+    }
+  }, [fetchOrganizationPermissions, organization?.id]);
+
+  const organizationPermissions = useMemo(() => {
+    if (permisionValues.length) {
+      return formatPermissions(permisionValues);
+    } else {
+      return {};
+    }
+  }, [permisionValues]);
+
   return (
     <Flex direction="column" style={{ width: '100%' }}>
       <Flex style={styles.header}>
@@ -22,11 +72,17 @@ export default function GeneralSetting() {
         <Separator />
         <GeneralOrganization
           organization={organization}
+          permissionMap={PERMISSIONS_MAP}
+          organizationPermissions={organizationPermissions}
           isLoading={isLoading}
         />
         <Separator />
-        <GeneralDeleteOrganization isLoading={isLoading} />
-        <Separator />
+        {organizationPermissions &&
+        organizationPermissions[
+          `${PERMISSIONS.DELETE}::${PERMISSIONS_MAP.Organization}`
+        ] ? (
+          <GeneralDeleteOrganization isLoading={isLoading} />
+        ) : null}
       </Flex>
     </Flex>
   );
@@ -39,21 +95,27 @@ export const GeneralDeleteOrganization = ({
 }) => {
   const navigate = useNavigate({ from: '/' });
   return (
-    <Flex direction="column" gap="medium">
-      <Text size={3} style={{ color: 'var(--foreground-muted)' }}>
-        If you want to permanently delete this organization and all of its data.
-      </Text>
-
-      <Button
-        variant="danger"
-        type="submit"
-        size="medium"
-        onClick={() => navigate({ to: '/delete' })}
-        disabled={isLoading}
-      >
-        Delete organization
-      </Button>
-      <Outlet />
-    </Flex>
+    <>
+      <Flex direction="column" gap="medium">
+        <Text size={3} style={{ color: 'var(--foreground-muted)' }}>
+          If you want to permanently delete this organization and all of its
+          data.
+        </Text>
+
+        <Button
+          variant="danger"
+          type="submit"
+          size="medium"
+          onClick={() => navigate({ to: '/delete' })}
+          disabled={isLoading}
+        >
+          Delete organization
+        </Button>
+        <Outlet />
+      </Flex>
+      <Separator />
+    </>
   );
 };
+
+

sdks/js/packages/core/utils/index.ts

@@ -23,3 +23,32 @@ export const filterUsersfromUsers = (
   const excludeIds = exclude.map(e => e.id);
   return arr.filter(user => !excludeIds.includes(user.id));
 };
+
+
+export const PERMISSIONS = {
+  ADMINISTER: 'administer',
+  GROUPCREATE: 'groupcreate',
+  GROUPLIST: 'grouplist',
+  INVITATIONCREATE: 'invitationcreate',
+  INVITATIONLIST: 'invitationlist',
+  POLICYMANAGE: 'policymanage',
+  PROJECTCREATE: 'projectcreate',
+  PROJECTLIST: 'projectlist',
+  RESOURCELIST: 'resourcelist',
+  ROLEMANAGE: 'rolemanage',
+  SERVICEUSERMANAGE: 'serviceusermanage',
+  GET: 'get',
+  PUT: 'put',
+  POST: 'post',
+  UPDATE: 'update',
+  DELETE: 'delete'
+};
+
+export const formatPermissions = (
+  permisions: { body: any; status: boolean }[] = []
+): Record<string, string> =>
+  permisions.reduce((acc: any, p: any) => {
+    const { body, status } = p;
+    acc[`${body.permission}::${body.resource}`] = status;
+    return acc;
+  }, {});