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
2026-02-01 21:17:18 +00:00
parent 5f2d409773
commit 7f5a1ab513
83 changed files with 10568 additions and 1442 deletions
--- a/apps/web/src/views/card/components/Comment.tsx
+++ b/apps/web/src/views/card/components/Comment.tsx
@@ -8,6 +8,7 @@ import { HiEllipsisHorizontal, HiPencil, HiTrash } from "react-icons/hi2";
 import Avatar from "~/components/Avatar";
 import Button from "~/components/Button";
 import Dropdown from "~/components/Dropdown";
+import { usePermissions } from "~/hooks/usePermissions";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
@@ -49,6 +50,7 @@ const Comment = ({
  const utils = api.useUtils();
  const { showPopup } = usePopup();
  const { openModal } = useModal();
+  const { canEditComment, canDeleteComment } = usePermissions();
  const { handleSubmit, setValue, watch } = useForm<FormValues>({
    defaultValues: {
      comment,
@@ -80,7 +82,7 @@ const Comment = ({
  };

  const dropdownItems = [
-    ...(isAuthor
+    ...(isAuthor && canEditComment
      ? [
          {
            label: t`Edit comment`,
@@ -89,7 +91,7 @@ const Comment = ({
          },
        ]
      : []),
-    ...(isAuthor || isAdmin
+    ...((isAuthor || canDeleteComment)
      ? [
          {
            label: t`Delete comment`,
--- a/apps/web/src/views/card/components/Dropdown.tsx
+++ b/apps/web/src/views/card/components/Dropdown.tsx
@@ -5,29 +5,53 @@ import {
  HiOutlineTrash,
 } from "react-icons/hi2";

+import { authClient } from "@kan/auth/client";
+
 import Dropdown from "~/components/Dropdown";
+import { usePermissions } from "~/hooks/usePermissions";
 import { useModal } from "~/providers/modal";

-export default function BoardDropdown() {
+export default function CardDropdown({
+  cardCreatedBy,
+}: {
+  cardCreatedBy?: string | null;
+}) {
  const { openModal } = useModal();
+  const { canEditCard, canDeleteCard } = usePermissions();
+  const { data: session } = authClient.useSession();
+  const isCreator = cardCreatedBy && session?.user.id === cardCreatedBy;
+
+  const items = [
+    ...(canEditCard
+      ? [
+          {
+            label: t`Add checklist`,
+            action: () => openModal("ADD_CHECKLIST"),
+            icon: (
+              <HiOutlineCheckCircle className="h-[16px] w-[16px] text-dark-900" />
+            ),
+          },
+        ]
+      : []),
+    ...(canDeleteCard || isCreator
+      ? [
+          {
+            label: t`Delete card`,
+            action: () => openModal("DELETE_CARD"),
+            icon: (
+              <HiOutlineTrash className="h-[16px] w-[16px] text-dark-900" />
+            ),
+          },
+        ]
+      : []),
+  ];
+
+  if (items.length === 0) {
+    return null;
+  }

  return (
-    <Dropdown
-      items={[
-        {
-          label: t`Add checklist`,
-          action: () => openModal("ADD_CHECKLIST"),
-          icon: (
-            <HiOutlineCheckCircle className="h-[16px] w-[16px] text-dark-900" />
-          ),
-        },
-        {
-          label: t`Delete card`,
-          action: () => openModal("DELETE_CARD"),
-          icon: <HiOutlineTrash className="h-[16px] w-[16px] text-dark-900" />,
-        },
-      ]}
-    >
+    <Dropdown items={items}>
      <HiEllipsisHorizontal className="h-5 w-5 text-dark-900" />
    </Dropdown>
  );
--- a/apps/web/src/views/card/components/DueDateSelector.tsx
+++ b/apps/web/src/views/card/components/DueDateSelector.tsx
@@ -12,12 +12,14 @@ interface DueDateSelectorProps {
  cardPublicId: string;
  dueDate: Date | null | undefined;
  isLoading?: boolean;
+  disabled?: boolean;
 }

 export function DueDateSelector({
  cardPublicId,
  dueDate,
  isLoading = false,
+  disabled = false,
 }: DueDateSelectorProps) {
  const { showPopup } = usePopup();
  const utils = api.useUtils();
@@ -105,9 +107,9 @@ export function DueDateSelector({
    <div className="relative flex w-full items-center text-left">
      <button
        type="button"
-        onClick={() => setIsOpen(!isOpen)}
-        disabled={isLoading}
-        className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-xs text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100"
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={isLoading || disabled}
+        className={`flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-xs text-neutral-900 dark:border-dark-50 dark:text-dark-1000 ${disabled ? "cursor-not-allowed opacity-60" : "hover:border-light-300 hover:bg-light-200 dark:hover:border-dark-200 dark:hover:bg-dark-100"}`}
      >
        {dueDate ? (
          <span>{format(dueDate, "MMM d, yyyy")}</span>
@@ -118,7 +120,7 @@ export function DueDateSelector({
          </>
        )}
      </button>
-      {isOpen && (
+      {isOpen && !disabled && (
        <>
          <div className="fixed inset-0 z-10" onClick={handleBackdropClick} />
          <div
--- a/apps/web/src/views/card/components/LabelSelector.tsx
+++ b/apps/web/src/views/card/components/LabelSelector.tsx
@@ -17,12 +17,14 @@ interface LabelSelectorProps {
    leftIcon: React.ReactNode;
  }[];
  isLoading: boolean;
+  disabled?: boolean;
 }

 export default function LabelSelector({
  cardPublicId,
  labels,
  isLoading,
+  disabled = false,
 }: LabelSelectorProps) {
  const utils = api.useUtils();
  const { openModal } = useModal();
@@ -93,9 +95,10 @@ export default function LabelSelector({
          handleSelect={(_, label) => {
            addOrRemoveLabel.mutate({ cardPublicId, labelPublicId: label.key });
          }}
-          handleEdit={(labelPublicId) => openModal("EDIT_LABEL", labelPublicId)}
-          handleCreate={() => openModal("NEW_LABEL")}
+          handleEdit={disabled ? undefined : (labelPublicId) => openModal("EDIT_LABEL", labelPublicId)}
+          handleCreate={disabled ? undefined : () => openModal("NEW_LABEL")}
          createNewItemLabel={t`Create new label`}
+          disabled={disabled}
          asChild
        >
          {selectedLabels.length ? (
@@ -110,7 +113,7 @@ export default function LabelSelector({
              <Badge value={t`Add label`} iconLeft={<HiMiniPlus size={14} />} />
            </div>
          ) : (
-            <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
+            <div className={`flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 pl-2 text-left text-sm text-neutral-900 dark:border-dark-50 dark:text-dark-1000 ${disabled ? "cursor-not-allowed opacity-60" : "hover:border-light-300 hover:bg-light-200 dark:hover:border-dark-200 dark:hover:bg-dark-100"}`}>
              <HiMiniPlus size={22} className="pr-2" />
              {t`Add label`}
            </div>
--- a/apps/web/src/views/card/components/ListSelector.tsx
+++ b/apps/web/src/views/card/components/ListSelector.tsx
@@ -13,12 +13,14 @@ interface ListSelectorProps {
    selected: boolean;
  }[];
  isLoading: boolean;
+  disabled?: boolean;
 }

 export default function ListSelector({
  cardPublicId,
  lists,
  isLoading,
+  disabled = false,
 }: ListSelectorProps) {
  const utils = api.useUtils();

@@ -77,9 +79,10 @@ export default function ListSelector({
              index: 0,
            });
          }}
+          disabled={disabled}
          asChild
        >
-          <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-xs text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
+          <div className={`flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-xs text-neutral-900 dark:border-dark-50 dark:text-dark-1000 ${disabled ? "cursor-not-allowed opacity-60" : "hover:border-light-300 hover:bg-light-200 dark:hover:border-dark-200 dark:hover:bg-dark-100"}`}>
            {selectedList?.value}
          </div>
        </CheckboxDropdown>
--- a/apps/web/src/views/card/components/MemberSelector.tsx
+++ b/apps/web/src/views/card/components/MemberSelector.tsx
@@ -19,12 +19,14 @@ interface MemberSelectorProps {
    imageUrl: string | undefined;
  }[];
  isLoading: boolean;
+  disabled?: boolean;
 }

 export default function MemberSelector({
  cardPublicId,
  members,
  isLoading,
+  disabled = false,
 }: MemberSelectorProps) {
  const router = useRouter();
  const utils = api.useUtils();
@@ -108,11 +110,12 @@ export default function MemberSelector({
              workspaceMemberPublicId: member.key,
            });
          }}
-          handleCreate={handleInviteMember}
+          handleCreate={disabled ? undefined : handleInviteMember}
          createNewItemLabel={t`Invite member`}
+          disabled={disabled}
          asChild
        >
-          <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-xs text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
+          <div className={`flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-xs text-neutral-900 dark:border-dark-50 dark:text-dark-1000 ${disabled ? "cursor-not-allowed opacity-60" : "hover:border-light-300 hover:bg-light-200 dark:hover:border-dark-200 dark:hover:bg-dark-100"}`}>
            {selectedMembers.length ? (
              <div className="isolate flex justify-end -space-x-1 overflow-hidden">
                {selectedMembers.map(({ value, imageUrl }) => (
--- a/apps/web/src/views/card/components/NewCommentForm.tsx
+++ b/apps/web/src/views/card/components/NewCommentForm.tsx
@@ -4,6 +4,7 @@ import { useForm } from "react-hook-form";
 import { HiOutlineArrowUp } from "react-icons/hi2";

 import LoadingSpinner from "~/components/LoadingSpinner";
+import { usePermissions } from "~/hooks/usePermissions";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
 import { invalidateCard } from "~/utils/cardInvalidation";
@@ -15,6 +16,7 @@ interface FormValues {
 const NewCommentForm = ({ cardPublicId }: { cardPublicId: string }) => {
  const utils = api.useUtils();
  const { showPopup } = usePopup();
+  const { canCreateComment } = usePermissions();
  const { handleSubmit, setValue, watch, reset } = useForm<FormValues>({
    values: {
      comment: "",
@@ -46,6 +48,10 @@ const NewCommentForm = ({ cardPublicId }: { cardPublicId: string }) => {
    });
  };

+  if (!canCreateComment) {
+    return null;
+  }
+
  return (
    <form
      onSubmit={handleSubmit(onSubmit)}