Skip to content

Commit

Permalink
feat: support check permission for workspace actions
Browse files Browse the repository at this point in the history
  • Loading branch information
pyadav committed Sep 20, 2023
1 parent 2522b3b commit fa69b7f
Show file tree
Hide file tree
Showing 23 changed files with 812 additions and 376 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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}>
Expand All @@ -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 />
Expand All @@ -84,10 +112,12 @@ const AllowedEmailDomains = () => {

const Domains = ({
domains,
isLoading
isLoading,
canCreateDomain
}: {
domains: V1Beta1Domain[];
isLoading?: boolean;
canCreateDomain?: boolean;
}) => {
let navigate = useNavigate({ from: '/domains' });

Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ 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({
Expand All @@ -26,13 +25,11 @@ const generalSchema = yup
export const GeneralOrganization = ({
organization,
isLoading,
organizationPermissions,
permissionMap
canUpdateWorkspace = false
}: {
organization?: V1Beta1Organization;
isLoading?: boolean;
organizationPermissions?: Record<string, string>;
permissionMap?: Record<string, string>;
canUpdateWorkspace?: boolean;
}) => {
const { client } = useFrontier();
const {
Expand Down Expand Up @@ -116,10 +113,7 @@ export const GeneralOrganization = ({
</Text>
</InputField>
</Box>
{organizationPermissions &&
organizationPermissions[
`${PERMISSIONS.PUT}::${permissionMap?.Organization}`
] ? (
{canUpdateWorkspace ? (
<Button
size="medium"
variant="primary"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,65 +2,49 @@

import { Button, Flex, Separator, Text } from '@raystack/apsara';
import { Outlet, useNavigate } from '@tanstack/react-router';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useMemo } 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 {
activeOrganization: organization,
isActiveOrganizationLoading: isLoading
} = useFrontier();

const { client, activeOrganization: organization } = useFrontier();
const isLoading = fetchingOrgPermissions;

const PERMISSIONS_MAP = {
Organization: `app/organization:${organization?.id}`
};

const permisions = [
const resource = `app/organization:${organization?.id}`;
const listOfPermissionsToCheck = [
{
permission: PERMISSIONS.GET,
resource: PERMISSIONS_MAP.Organization
permission: PERMISSIONS.UpdatePermission,
resource: resource
},
{
permission: PERMISSIONS.DELETE,
resource: PERMISSIONS_MAP.Organization
permission: PERMISSIONS.DeletePermission,
resource: resource
}
];

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 { permissions } = usePermissions(
listOfPermissionsToCheck,
!!organization?.id
);

const organizationPermissions = useMemo(() => {
if (permisionValues.length) {
return formatPermissions(permisionValues);
} else {
return {};
}
}, [permisionValues]);
const { canUpdateWorkspace, canDeleteWorkspace } = useMemo(() => {
return {
canUpdateWorkspace: shouldShowComponent(
permissions,
`${PERMISSIONS.UpdatePermission}::${resource}`
),
canDeleteWorkspace: shouldShowComponent(
permissions,
`${PERMISSIONS.DeletePermission}::${resource}`
)
};
}, [permissions, resource]);

return (
<Flex direction="column" style={{ width: '100%' }}>
Expand All @@ -72,15 +56,11 @@ export default function GeneralSetting() {
<Separator />
<GeneralOrganization
organization={organization}
permissionMap={PERMISSIONS_MAP}
organizationPermissions={organizationPermissions}
canUpdateWorkspace={canUpdateWorkspace}
isLoading={isLoading}
/>
<Separator />
{organizationPermissions &&
organizationPermissions[
`${PERMISSIONS.DELETE}::${PERMISSIONS_MAP.Organization}`
] ? (
{canDeleteWorkspace ? (
<GeneralDeleteOrganization isLoading={isLoading} />
) : null}
</Flex>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -63,6 +65,36 @@ export default function WorkspaceMembers() {
[isUsersLoading, users]
);

const resource = `app/organization:${organization?.id}`;
const listOfPermissionsToCheck = [
{
permission: PERMISSIONS.InvitationCreatePermission,
resource
},
{
permission: PERMISSIONS.UpdatePermission,
resource
}
];

const { permissions } = usePermissions(
listOfPermissionsToCheck,
!!organization?.id
);

const { canCreateInvite, canDeleteUser } = useMemo(() => {
return {
canCreateInvite: shouldShowComponent(
permissions,
`${PERMISSIONS.InvitationCreatePermission}::${resource}`
),
canDeleteUser: shouldShowComponent(
permissions,
`${PERMISSIONS.UpdatePermission}::${resource}`
)
};
}, [permissions, resource]);

return (
<Flex direction="column" style={{ width: '100%' }}>
<Flex style={styles.header}>
Expand All @@ -77,6 +109,8 @@ export default function WorkspaceMembers() {
users={updatedUsers}
organizationId={organization?.id}
isLoading={isUsersLoading}
canCreateInvite={canCreateInvite}
canDeleteUser={canDeleteUser}
/>
) : null}
</Flex>
Expand All @@ -98,9 +132,11 @@ const ManageMembers = () => (
);

const MembersTable = ({
isLoading,
users,
organizationId,
isLoading
canCreateInvite,
canDeleteUser,
organizationId
}: MembersTableType) => {
let navigate = useNavigate({ from: '/members' });

Expand All @@ -111,8 +147,8 @@ const MembersTable = ({
);

const columns = useMemo(
() => getColumns(organizationId, isLoading),
[organizationId, isLoading]
() => getColumns(organizationId, canDeleteUser, isLoading),
[organizationId, canDeleteUser, isLoading]
);

return (
Expand All @@ -135,13 +171,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>
Expand Down
Loading

0 comments on commit fa69b7f

Please sign in to comment.