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/members/components/EditMemberPermissionsModal.tsx

@@ -0,0 +1,253 @@
+import { t } from "@lingui/core/macro";
+import { HiXMark } from "react-icons/hi2";
+
+import type { Permission } from "@kan/shared";
+import { permissionCategories } from "@kan/shared";
+
+import Button from "~/components/Button";
+import Toggle from "~/components/Toggle";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { useWorkspace } from "~/providers/workspace";
+import { api } from "~/utils/api";
+
+export function EditMemberPermissionsModal() {
+  const { workspace } = useWorkspace();
+  const { modalContentType, entityId, entityLabel, closeModal } = useModal();
+  const { showPopup } = usePopup();
+  const utils = api.useUtils();
+
+  const { data, isLoading } = api.permission.getMemberPermissions.useQuery(
+    {
+      workspacePublicId: workspace.publicId,
+      memberPublicId: entityId,
+    },
+    {
+      enabled:
+        modalContentType === "EDIT_MEMBER_PERMISSIONS" && !!entityId,
+    },
+  );
+
+  const grantMutation = api.permission.grantPermission.useMutation({
+    onSuccess: () => {
+      showPopup({
+        header: t`Permissions updated`,
+        message: t`The member's permissions have been updated.`,
+        icon: "success",
+      });
+    },
+    onError: () => {
+      showPopup({
+        header: t`Unable to update permissions`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      });
+    },
+    onSettled: async () => {
+      await utils.permission.getMemberPermissions.invalidate({
+        workspacePublicId: workspace.publicId,
+        memberPublicId: entityId,
+      });
+    },
+  });
+
+  const revokeMutation = api.permission.revokePermission.useMutation({
+    onSuccess: () => {
+      showPopup({
+        header: t`Permissions updated`,
+        message: t`The member's permissions have been updated.`,
+        icon: "success",
+      });
+    },
+    onError: () => {
+      showPopup({
+        header: t`Unable to update permissions`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      });
+    },
+    onSettled: async () => {
+      await utils.permission.getMemberPermissions.invalidate({
+        workspacePublicId: workspace.publicId,
+        memberPublicId: entityId,
+      });
+    },
+  });
+
+  const resetMutation = api.permission.resetMemberPermissions.useMutation({
+    onSuccess: async () => {
+      showPopup({
+        header: t`Permissions reset`,
+        message: t`This member's permissions have been reset to their role defaults.`,
+        icon: "success",
+      });
+
+      await utils.permission.getMemberPermissions.invalidate({
+        workspacePublicId: workspace.publicId,
+        memberPublicId: entityId,
+      });
+    },
+    onError: () => {
+      showPopup({
+        header: t`Unable to reset permissions`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      });
+    },
+  });
+
+  const effectivePermissions = (data?.permissions ?? []) as Permission[];
+  const hasOverrides = (data?.overrides?.length ?? 0) > 0;
+  const isBusy =
+    grantMutation.isPending ||
+    revokeMutation.isPending ||
+    resetMutation.isPending;
+
+  const handleToggle = (permission: Permission, nextState: boolean) => {
+    if (!workspace.publicId || !entityId) return;
+
+    if (nextState) {
+      grantMutation.mutate({
+        workspacePublicId: workspace.publicId,
+        memberPublicId: entityId,
+        permission,
+      });
+    } else {
+      revokeMutation.mutate({
+        workspacePublicId: workspace.publicId,
+        memberPublicId: entityId,
+        permission,
+      });
+    }
+  };
+
+  const permissionLabels: Record<Permission, string> = {
+    "workspace:view": t`Can view workspace`,
+    "workspace:edit": t`Can edit workspace`,
+    "workspace:delete": t`Can delete workspace`,
+    "workspace:manage": t`Can manage workspace settings`,
+
+    "board:view": t`Can view boards`,
+    "board:create": t`Can create boards`,
+    "board:edit": t`Can edit boards`,
+    "board:delete": t`Can delete boards`,
+
+    "list:view": t`Can view lists`,
+    "list:create": t`Can create lists`,
+    "list:edit": t`Can edit lists`,
+    "list:delete": t`Can delete lists`,
+
+    "card:view": t`Can view cards`,
+    "card:create": t`Can create cards`,
+    "card:edit": t`Can edit cards`,
+    "card:delete": t`Can delete cards`,
+
+    "comment:view": t`Can view comments`,
+    "comment:create": t`Can add comments`,
+    "comment:edit": t`Can edit comments`,
+    "comment:delete": t`Can delete comments`,
+
+    "member:view": t`Can view members`,
+    "member:invite": t`Can invite members`,
+    "member:edit": t`Can edit member roles and permissions`,
+    "member:remove": t`Can remove members`,
+  };
+
+  return (
+    <div className="w-full rounded-md bg-light-50 text-light-1000 dark:bg-dark-100 dark:text-dark-1000">
+      <div className="px-5 pt-5">
+        <div className="mb-3 flex items-start justify-between gap-3">
+          <div>
+            <h2 className="mb-1 text-sm font-semibold">
+              {t`Edit permissions`}
+            </h2>
+            <p className="min-h-[16px] text-xs text-light-900 dark:text-dark-900">
+              {entityLabel}
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={closeModal}
+            className="ml-2 inline-flex h-6 w-6 items-center justify-center rounded-md text-light-900 hover:bg-light-200 focus:outline-none dark:text-dark-900 dark:hover:bg-dark-200"
+            aria-label={t`Close`}
+          >
+            <HiXMark className="h-3.5 w-3.5" />
+          </button>
+        </div>
+
+        {isLoading ? (
+          <p className="text-xs text-light-900 dark:text-dark-900">
+            {t`Loading permissions...`}
+          </p>
+        ) : (
+          <div className="max-h-80 pb-4 space-y-3 overflow-y-auto pr-1">
+            {Object.values(permissionCategories).map((category, index) => (
+              <div
+                key={category.label}
+                className={`py-2 ${
+                  index > 0
+                    ? "border-t border-light-300 dark:border-dark-300"
+                    : ""
+                }`}
+              >
+                <div className="my-2 text-[12px] font-semibold text-light-900 dark:text-dark-950">
+                  {category.label}
+                </div>
+                <div className="space-y-1.5">
+                  {category.permissions.map((permission) => {
+                    const label =
+                      permissionLabels[permission] ?? (permission as string);
+
+                    return (
+                      <div
+                        key={permission}
+                        className="flex items-center justify-between gap-3 py-0.5"
+                      >
+                        <span className="text-xs text-light-900 dark:text-dark-900">
+                          {label}
+                        </span>
+                        <Toggle
+                          label={label}
+                          showLabel={false}
+                          isChecked={effectivePermissions.includes(permission)}
+                          disabled={isBusy}
+                          onChange={() =>
+                            handleToggle(
+                              permission,
+                              !effectivePermissions.includes(permission),
+                            )
+                          }
+                        />
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      <div className="flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+        <div>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => {
+              if (!workspace.publicId || !entityId || isBusy) return;
+              resetMutation.mutate({
+                workspacePublicId: workspace.publicId,
+                memberPublicId: entityId,
+              });
+            }}
+            disabled={isBusy || !hasOverrides}
+            isLoading={resetMutation.isPending}
+          >
+            {t`Reset to role defaults`}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+

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

@@ -3,6 +3,7 @@ import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
 import {
   HiBolt,
+  HiChevronDown,
   HiEllipsisHorizontal,
   HiOutlinePlusSmall,
 } from "react-icons/hi2";
@@ -19,16 +20,20 @@ import FeedbackModal from "~/components/FeedbackModal";
 import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import { PageHead } from "~/components/PageHead";
+import { usePermissions } from "~/hooks/usePermissions";
 import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
 import { getAvatarUrl } from "~/utils/helpers";
 import { DeleteMemberConfirmation } from "./components/DeleteMemberConfirmation";
 import { InviteMemberForm } from "./components/InviteMemberForm";
+import { EditMemberPermissionsModal } from "./components/EditMemberPermissionsModal";
 
 export default function MembersPage() {
   const { modalContentType, openModal, isOpen } = useModal();
   const { workspace } = useWorkspace();
+  const { showPopup } = usePopup();
 
   const { data, isLoading } = api.workspace.byId.useQuery(
     { workspacePublicId: workspace.publicId },
@@ -37,6 +42,31 @@ export default function MembersPage() {
 
   const { data: session } = authClient.useSession();
 
+  const { canEditMember } = usePermissions();
+
+  const utils = api.useUtils();
+
+  const updateRoleMutation = api.member.updateRole.useMutation({
+    onSuccess: async () => {
+      await utils.workspace.byId.invalidate({
+        workspacePublicId: workspace.publicId,
+      });
+
+      showPopup({
+        header: t`Role updated`,
+        message: t`The member's role has been updated.`,
+        icon: "success",
+      });
+    },
+    onError: () => {
+      showPopup({
+        header: t`Unable to update role`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      });
+    },
+  });
+
   const subscriptions = data?.subscriptions as Subscription[] | undefined;
 
   const teamSubscription = getSubscriptionByPlan(subscriptions, "team");
@@ -67,6 +97,16 @@ export default function MembersPage() {
     showSkeleton?: boolean;
     showPendingIcon?: boolean;
   }) => {
+    const handleRoleChange = (newRole: "admin" | "member" | "guest") => {
+      if (!memberPublicId) return;
+
+      updateRoleMutation.mutate({
+        workspacePublicId: workspace.publicId,
+        memberPublicId,
+        role: newRole,
+      });
+    };
+
     return (
       <tr className="rounded-b-lg">
         <td
@@ -127,19 +167,45 @@ export default function MembersPage() {
           )}
         >
           <div className="flex w-full items-center justify-between px-2 sm:px-3">
-            <div className="flex flex-col sm:flex-row sm:items-center">
-              <span
-                className={twMerge(
-                  "inline-flex items-center rounded-md bg-emerald-500/10 px-1.5 py-0.5 text-[10px] font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20 sm:text-[11px]",
-                  showSkeleton &&
+            <div className="flex items-center gap-2">
+              {showSkeleton ? (
+                <span
+                  className={twMerge(
+                    "inline-flex items-center rounded-md bg-emerald-500/10 px-1.5 py-0.5 text-[10px] font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20 sm:text-[11px]",
                     "h-5 w-[50px] animate-pulse bg-light-200 ring-0 dark:bg-dark-200",
-                )}
-              >
-                {memberRole &&
-                  memberRole.charAt(0).toUpperCase() + memberRole.slice(1)}
-              </span>
+                  )}
+                />
+              ) : (
+                <div className="relative inline-flex items-center">
+                  <span className="inline-flex items-center gap-1 rounded-md bg-emerald-500/10 px-1.5 py-0.5 text-[10px] font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20 sm:text-[11px]">
+                    {memberRole &&
+                      memberRole.charAt(0).toUpperCase() +
+                        memberRole.slice(1)}
+                    {canEditMember && session?.user.id !== memberId && (
+                      <HiChevronDown className="h-3 w-3" />
+                    )}
+                  </span>
+
+                  {canEditMember && session?.user.id !== memberId && (
+                    <select
+                      value={memberRole}
+                      onChange={(e) =>
+                        handleRoleChange(
+                          e.target.value as "admin" | "member" | "guest",
+                        )
+                      }
+                      disabled={updateRoleMutation.isPending}
+                      className="absolute inset-0 h-full w-full cursor-pointer appearance-none border-none bg-transparent p-0 text-[10px] leading-none opacity-0 focus:outline-none focus-visible:outline-none sm:text-[11px]"
+                    >
+                      <option value="admin">{t`Admin`}</option>
+                      <option value="member">{t`Member`}</option>
+                      <option value="guest">{t`Guest`}</option>
+                    </select>
+                  )}
+                </div>
+              )}
               {(memberStatus === "invited" || memberStatus === "paused") && (
-                <span className="mt-1 inline-flex items-center rounded-md bg-gray-500/10 px-1.5 py-0.5 text-[10px] font-medium text-gray-400 ring-1 ring-inset ring-gray-500/20 sm:ml-2 sm:mt-0 sm:text-[11px]">
+                <span className="inline-flex items-center rounded-md bg-gray-500/10 px-1.5 py-0.5 text-[10px] font-medium text-gray-400 ring-1 ring-inset ring-gray-500/20 sm:text-[11px]">
                   {memberStatus === "invited" ? t`Pending` : t`Paused`}
                 </span>
               )}
@@ -153,6 +219,15 @@ export default function MembersPage() {
               {session?.user.id !== memberId && (
                 <Dropdown
                   items={[
+                    {
+                      label: t`Edit permissions`,
+                      action: () =>
+                        openModal(
+                          "EDIT_MEMBER_PERMISSIONS",
+                          memberPublicId,
+                          memberEmail ?? "",
+                        ),
+                    },
                     {
                       label: t`Remove member`,
                       action: () =>
@@ -166,7 +241,7 @@ export default function MembersPage() {
                 >
                   <HiEllipsisHorizontal
                     size={20}
-                    className="text-light-900 dark:text-dark-900 sm:size-[25px]"
+                    className="text-light-900 dark:text-dark-900 sm:size-[20px]"
                   />
                 </Dropdown>
               )}
@@ -321,6 +396,14 @@ export default function MembersPage() {
           >
             <DeleteMemberConfirmation />
           </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "EDIT_MEMBER_PERMISSIONS"}
+            centered
+          >
+            <EditMemberPermissionsModal />
+          </Modal>
         </>
       </div>
     </>