feat: customisable workspace role permissions (#345)

* feat: setup schema for workspace roles

* chore: regen migration

* feat: add publicId to workspace roles

* feat: setup default permissions

* feat: add repo funcs

* feat: setup basic router interactions

* feat: add card permissions

* feat: assert permissions for lists

* feat: assert board permissions

* feat: assert permission for remaining routes

* feat: add permissions page to settings

* feat: enable updating member roles

* feat: order members by role and createdAt

* feat: allow editing individual permissions

* feat: reset role defaults

* feat: clear all permission overrides

* feat: allow users to delete entities they have created

* feat: set roleId when inviting new members

* feat: disable UI elements if user does not have permissions

* feat: allow admins to assign the admin role to other users

* feat: allow delete:list as default

* refactor: centre permissions modal

* chore: translations

apps/web/src/views/boards/components/BoardsList.tsx

@@ -4,6 +4,8 @@ import { HiOutlineRectangleStack } from "react-icons/hi2";
 
 import Button from "~/components/Button";
 import PatternedBackground from "~/components/PatternedBackground";
+import { Tooltip } from "~/components/Tooltip";
+import { usePermissions } from "~/hooks/usePermissions";
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
@@ -11,6 +13,7 @@ import { api } from "~/utils/api";
 export function BoardsList({ isTemplate }: { isTemplate?: boolean }) {
   const { workspace } = useWorkspace();
   const { openModal } = useModal();
+  const { canCreateBoard } = usePermissions();
 
   const { data, isLoading } = api.board.all.useQuery(
     {
@@ -41,9 +44,20 @@ export function BoardsList({ isTemplate }: { isTemplate?: boolean }) {
             {t`Get started by creating a new ${isTemplate ? "template" : "board"}`}
           </p>
         </div>
-        <Button onClick={() => openModal("NEW_BOARD")}>
-          {t`Create new ${isTemplate ? "template" : "board"}`}
-        </Button>
+        <Tooltip
+          content={
+            !canCreateBoard ? t`You don't have permission` : undefined
+          }
+        >
+          <Button
+            onClick={() => {
+              if (canCreateBoard) openModal("NEW_BOARD");
+            }}
+            disabled={!canCreateBoard}
+          >
+            {t`Create new ${isTemplate ? "template" : "board"}`}
+          </Button>
+        </Tooltip>
       </div>
     );
 

apps/web/src/views/boards/index.tsx

@@ -7,6 +7,7 @@ import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import { PageHead } from "~/components/PageHead";
 import { Tooltip } from "~/components/Tooltip";
+import { usePermissions } from "~/hooks/usePermissions";
 import { useKeyboardShortcut } from "~/providers/keyboard-shortcuts";
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
@@ -17,12 +18,13 @@ import { NewBoardForm } from "./components/NewBoardForm";
 export default function BoardsPage({ isTemplate }: { isTemplate?: boolean }) {
   const { openModal, modalContentType, isOpen } = useModal();
   const { workspace } = useWorkspace();
+  const { canCreateBoard } = usePermissions();
 
   const { tooltipContent: createModalShortcutTooltipContent } =
     useKeyboardShortcut({
       type: "PRESS",
       stroke: { key: "C" },
-      action: () => openModal("NEW_BOARD"),
+      action: () => canCreateBoard && openModal("NEW_BOARD"),
       description: t`Create new ${isTemplate ? "template" : "board"}`,
       group: "ACTIONS",
     });
@@ -39,22 +41,40 @@ export default function BoardsPage({ isTemplate }: { isTemplate?: boolean }) {
           </h1>
           <div className="flex gap-2">
             {!isTemplate && (
-              <Button
-                type="button"
-                variant="secondary"
-                onClick={() => openModal("IMPORT_BOARDS")}
-                iconLeft={
-                  <HiArrowDownTray aria-hidden="true" className="h-4 w-4" />
+              <Tooltip
+                content={
+                  !canCreateBoard ? t`You don't have permission` : undefined
                 }
               >
-                {t`Import`}
-              </Button>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  onClick={() => {
+                    if (canCreateBoard) openModal("IMPORT_BOARDS");
+                  }}
+                  disabled={!canCreateBoard}
+                  iconLeft={
+                    <HiArrowDownTray aria-hidden="true" className="h-4 w-4" />
+                  }
+                >
+                  {t`Import`}
+                </Button>
+              </Tooltip>
             )}
-            <Tooltip content={createModalShortcutTooltipContent}>
+            <Tooltip
+              content={
+                !canCreateBoard
+                  ? t`You don't have permission`
+                  : createModalShortcutTooltipContent
+              }
+            >
               <Button
                 type="button"
                 variant="primary"
-                onClick={() => openModal("NEW_BOARD")}
+                onClick={() => {
+                  if (canCreateBoard) openModal("NEW_BOARD");
+                }}
+                disabled={!canCreateBoard}
                 iconLeft={
                   <HiOutlinePlusSmall aria-hidden="true" className="h-4 w-4" />
                 }