Implement custom roles and improve permissions logic

The commit refactors the handling of account roles and enhances permissions checks. The account role has been shifted to use a string type, providing the ability to define custom roles. It also introduces the RolesDataProvider component, which stipulates role-related data for different forms and tables. The modification goes further to consider user role hierarchy in permissions checks, offering a more granular access control.
2024-03-29 14:48:45 +08:00
parent f1967a686c
commit 99db8f4ca4
41 changed files with 498 additions and 228 deletions
--- a/apps/web/app/(dashboard)/home/(user)/billing/_components/personal-account-checkout-form.tsx
+++ b/apps/web/app/(dashboard)/home/(user)/billing/_components/personal-account-checkout-form.tsx
@@ -5,7 +5,7 @@ import { useState, useTransition } from 'react';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';

 import { EmbeddedCheckout, PlanPicker } from '@kit/billing-gateway/components';
-import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import { Alert, AlertTitle } from '@kit/ui/alert';
 import {
  Card,
  CardContent,
@@ -14,6 +14,7 @@ import {
  CardTitle,
 } from '@kit/ui/card';
 import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';

 import billingConfig from '~/config/billing.config';

@@ -79,13 +80,11 @@ export function PersonalAccountCheckoutForm() {
 function ErrorAlert() {
  return (
    <Alert variant={'destructive'}>
-      <ExclamationTriangleIcon />
+      <ExclamationTriangleIcon className={'h-4'} />

-      <AlertTitle>Sorry, we encountered an error.</AlertTitle>
-
-      <AlertDescription>
-        We couldn't process your request. Please try again.
-      </AlertDescription>
+      <AlertTitle>
+        <Trans i18nKey={'common:genericError'} />
+      </AlertTitle>
    </Alert>
  );
 }
--- a/apps/web/app/(dashboard)/home/[account]/billing/_components/team-account-checkout-form.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/billing/_components/team-account-checkout-form.tsx
@@ -12,6 +12,7 @@ import {
  CardHeader,
  CardTitle,
 } from '@kit/ui/card';
+import { Trans } from '@kit/ui/trans';

 import billingConfig from '~/config/billing.config';

@@ -36,9 +37,13 @@ export function TeamAccountCheckoutForm(params: { accountId: string }) {
  return (
    <Card>
      <CardHeader>
-        <CardTitle>Manage your Team Plan</CardTitle>
+        <CardTitle>
+          <Trans i18nKey={'billing.manageTeamPlan'} />
+        </CardTitle>

-        <CardDescription>You can change your plan at any time.</CardDescription>
+        <CardDescription>
+          <Trans i18nKey={'billing.manageTeamPlanDescription'} />
+        </CardDescription>
      </CardHeader>

      <CardContent>
--- a/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
@@ -3,6 +3,7 @@ import {
  CurrentPlanCard,
 } from '@kit/billing-gateway/components';
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import { If } from '@kit/ui/if';
 import { PageBody, PageHeader } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
@@ -34,6 +35,8 @@ async function TeamAccountBillingPage({ params }: Params) {
  const workspace = await loadTeamWorkspace(params.account);
  const accountId = workspace.account.id;
  const [subscription, customerId] = await loadAccountData(accountId);
+  const canManageBilling =
+    workspace.account.permissions.includes('billing.manage');

  return (
    <>
@@ -44,17 +47,25 @@ async function TeamAccountBillingPage({ params }: Params) {

      <PageBody>
        <div className={'mx-auto w-full max-w-2xl'}>
+          <If condition={!canManageBilling}>
+            <CannotManageBillingAlert />
+          </If>
+
          <div className={'flex flex-col space-y-4'}>
            <If
              condition={subscription}
-              fallback={<TeamAccountCheckoutForm accountId={accountId} />}
+              fallback={
+                <If condition={canManageBilling}>
+                  <TeamAccountCheckoutForm accountId={accountId} />
+                </If>
+              }
            >
              {(data) => (
                <CurrentPlanCard subscription={data} config={billingConfig} />
              )}
            </If>

-            <If condition={customerId}>
+            <If condition={customerId && canManageBilling}>
              <form action={createBillingPortalSession}>
                <input type="hidden" name={'accountId'} value={accountId} />
                <input type="hidden" name={'slug'} value={params.account} />
@@ -71,6 +82,19 @@ async function TeamAccountBillingPage({ params }: Params) {

 export default withI18n(TeamAccountBillingPage);

+function CannotManageBillingAlert() {
+  return (
+    <Alert>
+      <AlertTitle>
+        <Trans i18nKey={'billing:cannotManageBillingAlertTitle'} />
+      </AlertTitle>
+      <AlertDescription>
+        <Trans i18nKey={'billing:cannotManageBillingAlertDescription'} />
+      </AlertDescription>
+    </Alert>
+  );
+}
+
 async function loadAccountData(accountId: string) {
  const client = getSupabaseServerComponentClient();

--- a/apps/web/app/(dashboard)/home/[account]/members/page.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/members/page.tsx
@@ -17,6 +17,7 @@ import {
  CardHeader,
  CardTitle,
 } from '@kit/ui/card';
+import { If } from '@kit/ui/if';
 import { PageBody, PageHeader } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';

@@ -99,13 +100,10 @@ async function TeamAccountMembersPage({ params }: Params) {
  );

  const canManageRoles = account.permissions.includes('roles.manage');
-  const isPrimaryOwner = account.primary_owner_user_id === user.id;
+  const canManageInvitations = account.permissions.includes('invites.manage');

-  const permissions = {
-    canUpdateRole: canManageRoles,
-    canRemoveFromAccount: canManageRoles,
-    canTransferOwnership: isPrimaryOwner,
-  };
+  const isPrimaryOwner = account.primary_owner_user_id === user.id;
+  const currentUserRoleHierarchy = account.role_hierarchy_level;

  return (
    <>
@@ -126,23 +124,32 @@ async function TeamAccountMembersPage({ params }: Params) {
                </CardTitle>

                <CardDescription>
-                  Here you can manage the members of your organization.
+                  <Trans i18nKey={'common:membersTabDescription'} />
                </CardDescription>
              </div>

-              <InviteMembersDialogContainer account={account.slug}>
-                <Button size={'sm'}>
-                  <PlusCircle className={'mr-2 w-4'} />
-                  <span>Add Member</span>
-                </Button>
-              </InviteMembersDialogContainer>
+              <If condition={canManageInvitations}>
+                <InviteMembersDialogContainer
+                  userRoleHierarchy={currentUserRoleHierarchy}
+                  account={account.slug}
+                >
+                  <Button size={'sm'}>
+                    <PlusCircle className={'mr-2 w-4'} />
+                    <span>
+                      <Trans i18nKey={'teams:inviteMembersButton'} />
+                    </span>
+                  </Button>
+                </InviteMembersDialogContainer>
+              </If>
            </CardHeader>

            <CardContent>
              <AccountMembersTable
+                userRoleHierarchy={currentUserRoleHierarchy}
                currentUserId={user.id}
-                permissions={permissions}
                members={members}
+                isPrimaryOwner={isPrimaryOwner}
+                canManageRoles={canManageRoles}
              />
            </CardContent>
          </Card>
@@ -150,11 +157,12 @@ async function TeamAccountMembersPage({ params }: Params) {
          <Card>
            <CardHeader className={'flex flex-row justify-between'}>
              <div className={'flex flex-col space-y-1.5'}>
-                <CardTitle>Pending Invitations</CardTitle>
+                <CardTitle>
+                  <Trans i18nKey={'teams:pendingInvitesHeading'} />
+                </CardTitle>

                <CardDescription>
-                  Here you can manage the pending invitations to your
-                  organization.
+                  <Trans i18nKey={'teams:pendingInvitesDescription'} />
                </CardDescription>
              </div>
            </CardHeader>
@@ -164,6 +172,7 @@ async function TeamAccountMembersPage({ params }: Params) {
                permissions={{
                  canUpdateInvitation: canManageRoles,
                  canRemoveInvitation: canManageRoles,
+                  currentUserRoleHierarchy,
                }}
                invitations={invitations}
              />
--- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx
+++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
@@ -2,14 +2,13 @@

 import Link from 'next/link';

-import { Session, User } from '@supabase/supabase-js';
+import type { User } from '@supabase/supabase-js';

 import { ChevronRight } from 'lucide-react';

 import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown';
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
 import { useUser } from '@kit/supabase/hooks/use-user';
-import { useUserSession } from '@kit/supabase/hooks/use-user-session';
 import { Button } from '@kit/ui/button';
 import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';
--- a/apps/web/app/(marketing)/blog/[slug]/page.tsx
+++ b/apps/web/app/(marketing)/blog/[slug]/page.tsx
@@ -23,7 +23,7 @@ export async function generateMetadata({
  const { title, date, description, image, slug } = post;
  const url = [appConfig.url, 'blog', slug].join('/');

-  return {
+  return Promise.resolve({
    title,
    description,
    openGraph: {
@@ -46,7 +46,7 @@ export async function generateMetadata({
      description,
      images: image ? [image] : [],
    },
-  };
+  });
 }

 function BlogPost({ params }: { params: { slug: string } }) {
--- a/apps/web/app/(marketing)/docs/_lib/build-documentation-tree.ts
+++ b/apps/web/app/(marketing)/docs/_lib/build-documentation-tree.ts
@@ -25,6 +25,7 @@ export const buildDocumentationTree = cache(
      .filter(
        (_) =>
          _.pathSegments.length === level + 1 &&
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
          _.pathSegments
            .map(({ pathName }: { pathName: string }) => pathName)
            .join('/')
@@ -37,6 +38,7 @@ export const buildDocumentationTree = cache(
    return pages.map((doc, index) => {
      const children = buildDocumentationTree(
        docs,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
        doc.pathSegments.map(({ pathName }: { pathName: string }) => pathName),
      );

@@ -44,7 +46,7 @@ export const buildDocumentationTree = cache(
        ...doc,
        pathSegments: doc.pathSegments || ([] as string[]),
        collapsible: children.length > 0,
-        nextPage: children[0] || pages[index + 1],
+        nextPage: children[0] ?? pages[index + 1],
        previousPage: pages[index - 1],
        children,
      };
--- a/apps/web/app/(marketing)/docs/layout.tsx
+++ b/apps/web/app/(marketing)/docs/layout.tsx
@@ -1,4 +1,3 @@
-import type { DocumentationPage } from 'contentlayer/generated';
 import { allDocumentationPages } from 'contentlayer/generated';

 import DocsNavigation from '~/(marketing)/docs/_components/docs-navigation';