feat(ui): add roles & permissions enforcement in workspaces and editor [FLOW-DEV-75]

ui/src/features/AssetsDialog/components/AssetCard.tsx

@@ -28,6 +28,7 @@ import { getIconFileType } from "./utils";
 
 type Props = {
   asset: Asset;
+  readonly?: boolean;
   isDeleting?: boolean;
   onCopyUrlToClipBoard: (url: string) => void;
   onAssetDownload: (
@@ -41,6 +42,7 @@ type Props = {
 
 const AssetCard: React.FC<Props> = ({
   asset,
+  readonly,
   isDeleting,
   onCopyUrlToClipBoard,
   onAssetDownload,
@@ -66,7 +68,7 @@ const AssetCard: React.FC<Props> = ({
     <Card
       className="group relative cursor-pointer border-transparent bg-card hover:border-border"
       key={id}
-      onDoubleClick={handleDoubleClick}>
+      onDoubleClick={readonly ? undefined : handleDoubleClick}>
       <CardContent className="flex items-start justify-center p-2">
         {fileIcon ? (
           <Icon
@@ -107,7 +109,7 @@ const AssetCard: React.FC<Props> = ({
               onClick={(e) => e.stopPropagation()}>
               <DropdownMenuItem
                 className="justify-between gap-2 text-warning"
-                disabled={isDeleting || !url}
+                disabled={isDeleting || !url || readonly}
                 onClick={() => setAssetToBeEdited(asset)}>
                 {t("Edit Asset")}
                 <PencilLineIcon weight="light" />
@@ -131,7 +133,7 @@ const AssetCard: React.FC<Props> = ({
               <DropdownMenuSeparator />
               <DropdownMenuItem
                 className="justify-between gap-4 text-destructive"
-                disabled={isDeleting}
+                disabled={isDeleting || readonly}
                 onClick={(e) => {
                   e.stopPropagation();
                   setAssetToBeDeleted(id);

ui/src/features/AssetsDialog/components/AssetsGridView.tsx

@@ -7,6 +7,7 @@ import { AssetCard } from "./AssetCard";
 
 type Props = {
   assets?: Asset[];
+  readonly?: boolean;
   isFetching: boolean;
   isDebouncingSearch?: boolean;
   isDeleting: boolean;
@@ -21,6 +22,7 @@ type Props = {
 };
 const AssetsGridView: React.FC<Props> = ({
   assets,
+  readonly,
   isFetching,
   isDebouncingSearch,
   isDeleting,
@@ -43,6 +45,7 @@ const AssetsGridView: React.FC<Props> = ({
               <AssetCard
                 key={a.id}
                 asset={a}
+                readonly={readonly}
                 isDeleting={isDeleting}
                 onCopyUrlToClipBoard={onCopyUrlToClipBoard}
                 onAssetDownload={onAssetDownload}

ui/src/features/AssetsDialog/components/AssetsListView.tsx

@@ -16,6 +16,7 @@ import { getIconFileType } from "./utils";
 
 type Props = {
   assets?: Asset[];
+  readonly?: boolean;
   isFetching: boolean;
   isDebouncingSearch?: boolean;
   isDeleting: boolean;
@@ -34,6 +35,7 @@ type Props = {
 };
 const AssetsListView: React.FC<Props> = ({
   assets,
+  readonly,
   currentPage,
   isFetching,
   isDebouncingSearch,
@@ -80,7 +82,7 @@ const AssetsListView: React.FC<Props> = ({
           <IconButton
             icon={<PencilLineIcon />}
             onClick={() => setAssetToBeEdited(row.row.original)}
-            disabled={isDeleting}
+            disabled={isDeleting || readonly}
           />
           <IconButton
             icon={<CopyIcon />}
@@ -97,7 +99,7 @@ const AssetsListView: React.FC<Props> = ({
           </a>
           <IconButton
             icon={<TrashIcon />}
-            disabled={isDeleting}
+            disabled={isDeleting || readonly}
             onClick={() => setAssetToBeDeleted(row.row.original.id)}
           />
         </div>
@@ -118,7 +120,7 @@ const AssetsListView: React.FC<Props> = ({
           setCurrentPage={setCurrentPage}
           totalPages={totalPages}
           resultsPerPage={resultsPerPage}
-          onRowDoubleClick={onAssetDoubleClick}
+          onRowDoubleClick={readonly ? undefined : onAssetDoubleClick}
         />
       )}
     </div>

ui/src/features/PageWrapper/WorkspaceId.tsx

@@ -2,8 +2,9 @@ import { useParams } from "@tanstack/react-router";
 import { useEffect } from "react";
 
 import { LoadingSplashscreen } from "@flow/components";
-import { useWorkspace } from "@flow/lib/gql";
-import { useCurrentWorkspace } from "@flow/stores";
+import { useUser, useWorkspace } from "@flow/lib/gql";
+import { useCurrentUserRole, useCurrentWorkspace } from "@flow/stores";
+import { UserMember } from "@flow/types";
 
 import NotFoundPage from "../NotFound";
 
@@ -13,18 +14,27 @@ type Props = {
 
 const WorkspaceIdWrapper: React.FC<Props> = ({ children }) => {
   const [currentWorkspace, setCurrentWorkspace] = useCurrentWorkspace();
+  const [_currentUserRole, setCurrentUserRole] = useCurrentUserRole();
 
   const { workspaceId }: { workspaceId: string } = useParams({
     strict: false,
   });
 
   const { useGetWorkspace } = useWorkspace();
   const { workspace, isLoading } = useGetWorkspace(workspaceId);
+  const { useGetMe } = useUser();
+  const { me } = useGetMe();
+
+  const userMembers = workspace?.members as UserMember[];
+  const userRole = userMembers?.find(
+    (m) => "userId" in m && m.userId === me?.id,
+  )?.role;
 
   useEffect(() => {
     if (!workspace) return;
     setCurrentWorkspace(workspace);
-  }, [workspace, setCurrentWorkspace]);
+    setCurrentUserRole(userRole);
+  }, [workspace, userRole, setCurrentUserRole, setCurrentWorkspace]);
 
   return !isLoading && !workspace ? (
     <NotFoundPage message={`Workspace with id: "${workspaceId}" not found.`} />

ui/src/features/WorkspaceAssets/index.tsx

@@ -19,8 +19,8 @@ import {
 import { ALLOWED_ASSET_IMPORT_EXTENSIONS } from "@flow/global-constants";
 import { useAssets } from "@flow/hooks";
 import { useT } from "@flow/lib/i18n";
-import { useCurrentWorkspace } from "@flow/stores";
-import type { Asset } from "@flow/types";
+import { useCurrentUserRole, useCurrentWorkspace } from "@flow/stores";
+import { Role, type Asset } from "@flow/types";
 
 import {
   AssetDeletionDialog,
@@ -32,6 +32,8 @@ import {
 const AssetsManager: React.FC = () => {
   const t = useT();
   const [currentWorkspace] = useCurrentWorkspace();
+  const [currentUserRole] = useCurrentUserRole();
+  const disabled = currentUserRole === Role.Reader;
   const {
     assets,
     isFetching,
@@ -77,7 +79,7 @@ const AssetsManager: React.FC = () => {
         <Button
           className="flex gap-2"
           variant="default"
-          disabled={isCreatingAsset}
+          disabled={isCreatingAsset || disabled}
           onClick={handleAssetUploadClick}>
           <FileArrowUpIcon weight="thin" />
           <p className="text-xs">{t("Upload")}</p>
@@ -129,6 +131,7 @@ const AssetsManager: React.FC = () => {
             {layoutView === "list" ? (
               <AssetsListView
                 assets={assets}
+                readonly={disabled}
                 isFetching={isFetching}
                 isDebouncingSearch={isDebouncingSearch}
                 isDeleting={isDeleting}
@@ -145,6 +148,7 @@ const AssetsManager: React.FC = () => {
             ) : (
               <AssetsGridView
                 assets={assets}
+                readonly={disabled}
                 isFetching={isFetching}
                 isDebouncingSearch={isDebouncingSearch}
                 isDeleting={isDeleting}

ui/src/features/WorkspaceDeployments/components/DeploymentDetails/index.tsx

@@ -16,12 +16,14 @@ import useHooks from "./hooks";
 
 type Props = {
   selectedDeployment: Deployment;
+  readonly?: boolean;
   setDeploymentToBeDeleted: (deployment?: Deployment) => void;
   onDeploymentRun: (deployment?: Deployment | undefined) => void;
 };
 
 const DeploymentDetails: React.FC<Props> = ({
   selectedDeployment,
+  readonly,
   setDeploymentToBeDeleted,
   onDeploymentRun,
 }) => {
@@ -45,21 +47,23 @@ const DeploymentDetails: React.FC<Props> = ({
             <Button
               variant="default"
               size="sm"
+              disabled={readonly}
               onClick={() => onDeploymentRun(selectedDeployment)}>
               <PlayIcon />
               {t("Run")}
             </Button>
             <Button
               variant="outline"
               size="sm"
-              disabled={!selectedDeployment}
+              disabled={readonly}
               onClick={() => setOpenDeploymentEditDialog(true)}>
               <PencilLineIcon />
               {t("Edit Deployment")}
             </Button>
             <Button
               variant="destructive"
               size="sm"
+              disabled={readonly}
               onClick={() => setDeploymentToBeDeleted(selectedDeployment)}>
               <TrashIcon />
               {t("Delete")}

ui/src/features/WorkspaceDeployments/index.tsx

@@ -13,7 +13,8 @@ import {
 } from "@flow/components";
 import { DEPLOYMENT_FETCH_RATE } from "@flow/lib/gql/deployment/useQueries";
 import { useT } from "@flow/lib/i18n";
-import type { Deployment } from "@flow/types";
+import { useCurrentUserRole } from "@flow/stores";
+import { Role, type Deployment } from "@flow/types";
 import { formatTimestamp } from "@flow/utils/timestamp";
 
 import {
@@ -27,6 +28,8 @@ import useHooks from "./hooks";
 
 const DeploymentManager: React.FC = () => {
   const t = useT();
+  const [currentUserRole] = useCurrentUserRole();
+  const readonly = currentUserRole === Role.Reader;
   const {
     deployments,
     selectedDeployment,
@@ -79,20 +82,23 @@ const DeploymentManager: React.FC = () => {
           <ButtonWithTooltip
             variant="default"
             size="icon"
+            disabled={readonly}
             tooltipText={t("Run Deployment")}
             onClick={() => handleDeploymentRun(row.row.original)}>
             <PlayIcon />
           </ButtonWithTooltip>
           <ButtonWithTooltip
             variant="outline"
             size="icon"
+            disabled={readonly}
             tooltipText={t("Edit Deployment")}
             onClick={() => setDeploymentToBeEdited(row.row.original)}>
             <PencilLineIcon />
           </ButtonWithTooltip>
           <ButtonWithTooltip
             variant="destructive"
             size="icon"
+            disabled={readonly}
             tooltipText={t("Delete Deployment")}
             onClick={() => setDeploymentToBeDeleted(row.row.original)}>
             <TrashIcon />
@@ -108,6 +114,7 @@ const DeploymentManager: React.FC = () => {
         <div className="flex flex-1">
           <DeploymentDetails
             selectedDeployment={selectedDeployment}
+            readonly={readonly}
             setDeploymentToBeDeleted={setDeploymentToBeDeleted}
             onDeploymentRun={handleDeploymentRun}
           />
@@ -121,7 +128,8 @@ const DeploymentManager: React.FC = () => {
               </p>
               <Button
                 className="flex gap-2"
-                onClick={() => setOpenDeploymentAddDialog(true)}>
+                onClick={() => setOpenDeploymentAddDialog(true)}
+                disabled={readonly}>
                 <PlusIcon weight="thin" />
                 <p className="text-xs dark:font-light">{t("New Deployment")}</p>
               </Button>

ui/src/features/WorkspaceLeftPanel/index.tsx

@@ -1,5 +1,8 @@
 import { useRouterState } from "@tanstack/react-router";
 
+import { useCurrentUserRole } from "@flow/stores";
+import { Role } from "@flow/types";
+
 import { BottomSection, TopSection } from "./components";
 
 export const routeOptions = [
@@ -23,12 +26,12 @@ const LeftPanel: React.FC = () => {
   } = useRouterState();
 
   const route: RouteOption = getRoute(pathname);
-
+  const [currentUserRole] = useCurrentUserRole();
   return (
     <div className="m-2 flex w-[260px] flex-col justify-between gap-[8px] rounded-xl border bg-secondary px-2 shadow-md shadow-secondary backdrop-blur-xs">
       <div className="flex flex-1 flex-col">
         <TopSection route={route} />
-        <BottomSection route={route} />
+        {currentUserRole !== Role.Reader && <BottomSection route={route} />}
       </div>
     </div>
   );

ui/src/features/WorkspaceProjects/components/ProjectCard.tsx

@@ -36,6 +36,7 @@ import useProjectExportFromCard from "./useProjectExportFromCard";
 
 type Props = {
   project: Project;
+  readonly?: boolean;
   isDuplicating: boolean;
   setEditProject: (project: Project | undefined) => void;
   setDuplicateProject: (project: Project | undefined) => void;
@@ -45,6 +46,7 @@ type Props = {
 
 const ProjectCard: React.FC<Props> = ({
   project,
+  readonly,
   isDuplicating,
   setEditProject,
   setDuplicateProject,
@@ -131,6 +133,7 @@ const ProjectCard: React.FC<Props> = ({
               onClick={(e) => e.stopPropagation()}>
               <DropdownMenuItem
                 className="justify-between gap-2 text-warning"
+                disabled={readonly}
                 onClick={() => setEditProject({ ...project })}>
                 {t("Edit Details")}
                 <PencilLineIcon />
@@ -145,6 +148,7 @@ const ProjectCard: React.FC<Props> = ({
               </DropdownMenuItem>
               <DropdownMenuItem
                 className="justify-between gap-2"
+                disabled={readonly}
                 onClick={() => setDuplicateProject({ ...project })}>
                 {t("Duplicate Project")}
                 <CopyIcon weight="light" />
@@ -159,6 +163,7 @@ const ProjectCard: React.FC<Props> = ({
               <DropdownMenuSeparator />
               <DropdownMenuItem
                 className="justify-between gap-4 text-destructive"
+                disabled={readonly}
                 onClick={(e) => {
                   e.stopPropagation();
                   setProjectToBeDeleted(id);