feat: support check permission for workspace actions

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

@@ -4,7 +4,9 @@ import { Button, DataTable, EmptyState, Flex, Text } from '@raystack/apsara';
 import { Outlet, useNavigate, useRouterState } from '@tanstack/react-router';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFrontier } from '~/react/contexts/FrontierContext';
+import { usePermissions } from '~/react/hooks/usePermissions';
 import { V1Beta1Domain } from '~/src';
+import { PERMISSIONS, shouldShowComponent } from '~/utils';
 import { styles } from '../styles';
 import { getColumns } from './domain.columns';
 
@@ -50,6 +52,28 @@ export default function Domain() {
     [isDomainsLoading, domains]
   );
 
+  const resource = `app/organization:${organization?.id}`;
+  const listOfPermissionsToCheck = [
+    {
+      permission: PERMISSIONS.UpdatePermission,
+      resource
+    }
+  ];
+
+  const { permissions } = usePermissions(
+    listOfPermissionsToCheck,
+    !!organization?.id
+  );
+
+  const { canCreateDomain } = useMemo(() => {
+    return {
+      canCreateDomain: shouldShowComponent(
+        permissions,
+        `${PERMISSIONS.UpdatePermission}::${resource}`
+      )
+    };
+  }, [permissions, resource]);
+
   return (
     <Flex direction="column" style={{ width: '100%' }}>
       <Flex style={styles.header}>
@@ -59,7 +83,11 @@ export default function Domain() {
         <Flex direction="column" style={{ gap: '24px' }}>
           <AllowedEmailDomains />
           {/* @ts-ignore */}
-          <Domains domains={updatedDomains} isLoading={isDomainsLoading} />
+          <Domains
+            domains={domains}
+            isLoading={isDomainsLoading}
+            canCreateDomain={canCreateDomain}
+          />
         </Flex>
       </Flex>
       <Outlet />
@@ -84,10 +112,12 @@ const AllowedEmailDomains = () => {
 
 const Domains = ({
   domains,
-  isLoading
+  isLoading,
+  canCreateDomain
 }: {
   domains: V1Beta1Domain[];
   isLoading?: boolean;
+  canCreateDomain?: boolean;
 }) => {
   let navigate = useNavigate({ from: '/domains' });
 
@@ -115,13 +145,15 @@ const Domains = ({
               />
             </Flex>
 
-            <Button
-              variant="primary"
-              style={{ width: 'fit-content' }}
-              onClick={() => navigate({ to: '/domains/modal' })}
-            >
-              Add Domain
-            </Button>
+            {canCreateDomain ? (
+              <Button
+                variant="primary"
+                style={{ width: 'fit-content' }}
+                onClick={() => navigate({ to: '/domains/modal' })}
+              >
+                Add Domain
+              </Button>
+            ) : null}
           </Flex>
         </DataTable.Toolbar>
       </DataTable>

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

@@ -14,7 +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';
+import { PERMISSIONS, shouldShowComponent } from '~/utils';
 
 const generalSchema = yup
   .object({
@@ -26,13 +26,13 @@ const generalSchema = yup
 export const GeneralOrganization = ({
   organization,
   isLoading,
-  organizationPermissions,
-  permissionMap
+  permissions,
+  resourceMap
 }: {
   organization?: V1Beta1Organization;
   isLoading?: boolean;
-  organizationPermissions?: Record<string, string>;
-  permissionMap?: Record<string, string>;
+  permissions?: Record<string, boolean>;
+  resourceMap?: Record<string, string>;
 }) => {
   const { client } = useFrontier();
   const {
@@ -116,10 +116,10 @@ export const GeneralOrganization = ({
             </Text>
           </InputField>
         </Box>
-        {organizationPermissions &&
-        organizationPermissions[
-          `${PERMISSIONS.PUT}::${permissionMap?.Organization}`
-        ] ? (
+        {shouldShowComponent(
+          permissions,
+          `${PERMISSIONS.UPDATE}::${resourceMap?.organization}`
+        ) ? (
           <Button
             size="medium"
             variant="primary"

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

@@ -2,65 +2,37 @@
 
 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 { usePermissions } from '~/react/hooks/usePermissions';
+import { PERMISSIONS, shouldShowComponent } from '~/utils';
 import { styles } from '../styles';
 import { GeneralProfile } from './general.profile';
 import { GeneralOrganization } from './general.workspace';
 
 export default function GeneralSetting() {
-  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 {
+    activeOrganization: organization,
+    isActiveOrganizationLoading: isLoading
+  } = useFrontier();
+  const RESOURCE_MAP = {
+    organization: `app/organization:${organization?.id}`
   };
 
-  const permisions = [
+  const listOfPermissionsToCheck = [
     {
-      permission: PERMISSIONS.GET,
-      resource: PERMISSIONS_MAP.Organization
+      permission: PERMISSIONS.UPDATE,
+      resource: RESOURCE_MAP.organization
     },
     {
       permission: PERMISSIONS.DELETE,
-      resource: PERMISSIONS_MAP.Organization
+      resource: RESOURCE_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]);
+  const { permissions } = usePermissions(
+    listOfPermissionsToCheck,
+    !!organization?.id
+  );
 
   return (
     <Flex direction="column" style={{ width: '100%' }}>
@@ -72,15 +44,15 @@ export default function GeneralSetting() {
         <Separator />
         <GeneralOrganization
           organization={organization}
-          permissionMap={PERMISSIONS_MAP}
-          organizationPermissions={organizationPermissions}
+          resourceMap={RESOURCE_MAP}
+          permissions={permissions}
           isLoading={isLoading}
         />
         <Separator />
-        {organizationPermissions &&
-        organizationPermissions[
-          `${PERMISSIONS.DELETE}::${PERMISSIONS_MAP.Organization}`
-        ] ? (
+        {shouldShowComponent(
+          permissions,
+          `${PERMISSIONS.DELETE}::${RESOURCE_MAP.organization}`
+        ) ? (
           <GeneralDeleteOrganization isLoading={isLoading} />
         ) : null}
       </Flex>

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

@@ -4,7 +4,9 @@ import { Button, DataTable, EmptyState, Flex, Text } from '@raystack/apsara';
 import { Outlet, useNavigate, useRouterState } from '@tanstack/react-router';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFrontier } from '~/react/contexts/FrontierContext';
+import { usePermissions } from '~/react/hooks/usePermissions';
 import { V1Beta1User } from '~/src';
+import { PERMISSIONS, shouldShowComponent } from '~/utils';
 import { styles } from '../styles';
 import { getColumns } from './member.columns';
 import type { MembersTableType } from './member.types';
@@ -63,6 +65,28 @@ export default function WorkspaceMembers() {
     [isUsersLoading, users]
   );
 
+  const resource = `app/organization:${organization?.id}`;
+  const listOfPermissionsToCheck = [
+    {
+      permission: PERMISSIONS.INVITATIONCREATE,
+      resource
+    }
+  ];
+
+  const { permissions } = usePermissions(
+    listOfPermissionsToCheck,
+    !!organization?.id
+  );
+
+  const { canCreateInvite } = useMemo(() => {
+    return {
+      canCreateInvite: shouldShowComponent(
+        permissions,
+        `${PERMISSIONS.INVITATIONCREATE}::${resource}`
+      )
+    };
+  }, [permissions, resource]);
+
   return (
     <Flex direction="column" style={{ width: '100%' }}>
       <Flex style={styles.header}>
@@ -77,6 +101,7 @@ export default function WorkspaceMembers() {
               users={updatedUsers}
               organizationId={organization?.id}
               isLoading={isUsersLoading}
+              canCreateInvite={canCreateInvite}
             />
           ) : null}
         </Flex>
@@ -98,9 +123,10 @@ const ManageMembers = () => (
 );
 
 const MembersTable = ({
+  isLoading,
   users,
-  organizationId,
-  isLoading
+  canCreateInvite,
+  organizationId
 }: MembersTableType) => {
   let navigate = useNavigate({ from: '/members' });
 
@@ -135,13 +161,15 @@ const MembersTable = ({
               />
             </Flex>
 
-            <Button
-              variant="primary"
-              style={{ width: 'fit-content' }}
-              onClick={() => navigate({ to: '/members/modal' })}
-            >
-              Invite people
-            </Button>
+            {canCreateInvite ? (
+              <Button
+                variant="primary"
+                style={{ width: 'fit-content' }}
+                onClick={() => navigate({ to: '/members/modal' })}
+              >
+                Invite people
+              </Button>
+            ) : null}
           </Flex>
         </DataTable.Toolbar>
       </DataTable>

sdks/js/packages/core/react/components/organization/members/member.types.tsx

@@ -9,7 +9,8 @@ export enum MemberActionmethods {
 }
 
 export type MembersTableType = {
+  isLoading?: boolean;
   users: User[];
   organizationId: string;
-  isLoading?: boolean;
+  canCreateInvite?: boolean;
 };