chore: user permission related fix (#3066)

* chore: page action user permission validation * chore: cycle & module action user permission validation * chore: issue quick action user permission validation * chore: spreadsheet layout improvement
2023-12-11 17:29:10 +05:30 · 2023-12-11 17:29:10 +05:30 · f38278f465
commit f38278f465
parent 73b58e91ee
7 changed files with 170 additions and 121 deletions
--- a/web/components/cycles/cycles-board-card.tsx
+++ b/web/components/cycles/cycles-board-card.tsx
@ -23,6 +23,7 @@ import { ICycle } from "types";
 import { useMobxStore } from "lib/mobx/store-provider";
 // constants
 import { CYCLE_STATUS } from "constants/cycle";
+import { EUserWorkspaceRoles } from "constants/workspace";

 export interface ICyclesBoardCard {
  workspaceSlug: string;
@ -36,6 +37,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
  const {
    cycle: cycleStore,
    trackEvent: { setTrackElement },
+    user: userStore,
  } = useMobxStore();
  // toast
  const { setToastAlert } = useToast();
@ -49,6 +51,9 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
  const startDate = new Date(cycle.start_date ?? "");
  const isDateValid = cycle.start_date || cycle.end_date;

+  const { currentProjectRole } = userStore;
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
  const router = useRouter();

  const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
@ -235,7 +240,8 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
                <span className="text-xs text-custom-text-400">No due date</span>
              )}
              <div className="z-10 flex items-center gap-1.5">
-                {cycle.is_favorite ? (
+                {isEditingAllowed &&
+                  (cycle.is_favorite ? (
                    <button type="button" onClick={handleRemoveFromFavorites}>
                      <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
                    </button>
@ -243,9 +249,9 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
                    <button type="button" onClick={handleAddToFavorites}>
                      <Star className="h-3.5 w-3.5 text-custom-text-200" />
                    </button>
-                )}
+                  ))}
                <CustomMenu width="auto" ellipsis className="z-10">
-                  {!isCompleted && (
+                  {!isCompleted && isEditingAllowed && (
                    <>
                      <CustomMenu.MenuItem onClick={handleEditCycle}>
                        <span className="flex items-center justify-start gap-2">
--- a/web/components/cycles/cycles-list-item.tsx
+++ b/web/components/cycles/cycles-list-item.tsx
@ -24,6 +24,7 @@ import { copyTextToClipboard } from "helpers/string.helper";
 import { ICycle } from "types";
 // constants
 import { CYCLE_STATUS } from "constants/cycle";
+import { EUserWorkspaceRoles } from "constants/workspace";

 type TCyclesListItem = {
  cycle: ICycle;
@ -41,6 +42,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
  const {
    cycle: cycleStore,
    trackEvent: { setTrackElement },
+    user: userStore,
  } = useMobxStore();
  // toast
  const { setToastAlert } = useToast();
@ -53,6 +55,9 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
  const endDate = new Date(cycle.end_date ?? "");
  const startDate = new Date(cycle.start_date ?? "");

+  const { currentProjectRole } = userStore;
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
  const router = useRouter();

  const cycleTotalIssues =
@ -226,8 +231,8 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                )}
              </div>
            </Tooltip>
-
-            {cycle.is_favorite ? (
+            {isEditingAllowed &&
+              (cycle.is_favorite ? (
                <button type="button" onClick={handleRemoveFromFavorites}>
                  <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
                </button>
@ -235,10 +240,10 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                <button type="button" onClick={handleAddToFavorites}>
                  <Star className="h-3.5 w-3.5 text-custom-text-200" />
                </button>
-            )}
+              ))}

            <CustomMenu width="auto" ellipsis>
-              {!isCompleted && (
+              {!isCompleted && isEditingAllowed && (
                <>
                  <CustomMenu.MenuItem onClick={handleEditCycle}>
                    <span className="flex items-center justify-start gap-2">
--- a/web/components/issues/issue-layouts/properties/state.tsx
+++ b/web/components/issues/issue-layouts/properties/state.tsx
@ -94,7 +94,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props

  const label = (
    <Tooltip tooltipHeading="State" tooltipContent={selectedOption?.name ?? ""} position="top">
-      <div className="flex w-full cursor-pointer items-center gap-2 text-custom-text-200">
+      <div className="flex w-full items-center gap-2 text-custom-text-200">
        {selectedOption && <StateGroupIcon stateGroup={selectedOption?.group as any} color={selectedOption?.color} />}
        <span className="line-clamp-1 inline-block truncate">{selectedOption?.name ?? "State"}</span>
      </div>
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@ -2,6 +2,8 @@ import { useState } from "react";
 import { useRouter } from "next/router";
 import { CustomMenu } from "@plane/ui";
 import { Copy, Link, Pencil, Trash2 } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // components
@ -12,6 +14,8 @@ import { copyUrlToClipboard } from "helpers/string.helper";
 import { IIssue } from "types";
 import { IQuickActionProps } from "../list/list-view-types";
 import { EProjectStore } from "store/command-palette.store";
+// constant
+import { EUserWorkspaceRoles } from "constants/workspace";

 export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
  const { issue, handleDelete, handleUpdate, customActionButton } = props;
@ -24,6 +28,12 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
  const [issueToEdit, setIssueToEdit] = useState<IIssue | null>(null);
  const [deleteIssueModal, setDeleteIssueModal] = useState(false);

+  const { user: userStore } = useMobxStore();
+
+  const { currentProjectRole } = userStore;
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
  const { setToastAlert } = useToast();

  const handleCopyIssueLink = () => {
@ -71,6 +81,8 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
            Copy link
          </div>
        </CustomMenu.MenuItem>
+        {isEditingAllowed && (
+          <>
            <CustomMenu.MenuItem
              onClick={(e) => {
                e.preventDefault();
@ -108,6 +120,8 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
                Delete issue
              </div>
            </CustomMenu.MenuItem>
+          </>
+        )}
      </CustomMenu>
    </>
  );
--- a/web/components/modules/module-card-item.tsx
+++ b/web/components/modules/module-card-item.tsx
@ -19,6 +19,7 @@ import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper"
 import { IModule } from "types";
 // constants
 import { MODULE_STATUS } from "constants/module";
+import { EUserWorkspaceRoles } from "constants/workspace";

 type Props = {
  module: IModule;
@ -35,7 +36,11 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {

  const { setToastAlert } = useToast();

-  const { module: moduleStore } = useMobxStore();
+  const { module: moduleStore, user: userStore } = useMobxStore();
+
+  const { currentProjectRole } = userStore;
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;

  const moduleTotalIssues =
    module.backlog_issues +
@ -217,7 +222,8 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
              )}

              <div className="z-10 flex items-center gap-1.5">
-                {module.is_favorite ? (
+                {isEditingAllowed &&
+                  (module.is_favorite ? (
                    <button type="button" onClick={handleRemoveFromFavorites}>
                      <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
                    </button>
@ -225,8 +231,11 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
                    <button type="button" onClick={handleAddToFavorites}>
                      <Star className="h-3.5 w-3.5 text-custom-text-200" />
                    </button>
-                )}
+                  ))}
+
                <CustomMenu width="auto" ellipsis className="z-10">
+                  {isEditingAllowed && (
+                    <>
                      <CustomMenu.MenuItem onClick={handleEditModule}>
                        <span className="flex items-center justify-start gap-2">
                          <Pencil className="h-3 w-3" />
@ -239,6 +248,8 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
                          <span>Delete module</span>
                        </span>
                      </CustomMenu.MenuItem>
+                    </>
+                  )}
                  <CustomMenu.MenuItem onClick={handleCopyText}>
                    <span className="flex items-center justify-start gap-2">
                      <LinkIcon className="h-3 w-3" />
--- a/web/components/modules/module-list-item.tsx
+++ b/web/components/modules/module-list-item.tsx
@ -19,6 +19,7 @@ import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper"
 import { IModule } from "types";
 // constants
 import { MODULE_STATUS } from "constants/module";
+import { EUserWorkspaceRoles } from "constants/workspace";

 type Props = {
  module: IModule;
@ -35,7 +36,11 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {

  const { setToastAlert } = useToast();

-  const { module: moduleStore } = useMobxStore();
+  const { module: moduleStore, user: userStore } = useMobxStore();
+
+  const { currentProjectRole } = userStore;
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;

  const completionPercentage = ((module.completed_issues + module.cancelled_issues) / module.total_issues) * 100;

@ -194,7 +199,8 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
              </div>
            </Tooltip>

-            {module.is_favorite ? (
+            {isEditingAllowed &&
+              (module.is_favorite ? (
                <button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
                  <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
                </button>
@ -202,9 +208,11 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
                <button type="button" onClick={handleAddToFavorites} className="z-[1]">
                  <Star className="h-3.5 w-3.5 text-custom-text-300" />
                </button>
-            )}
+              ))}

            <CustomMenu width="auto" verticalEllipsis buttonClassName="z-[1]">
+              {isEditingAllowed && (
+                <>
                  <CustomMenu.MenuItem onClick={handleEditModule}>
                    <span className="flex items-center justify-start gap-2">
                      <Pencil className="h-3 w-3" />
@ -217,6 +225,8 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
                      <span>Delete module</span>
                    </span>
                  </CustomMenu.MenuItem>
+                </>
+              )}
              <CustomMenu.MenuItem onClick={handleCopyText}>
                <span className="flex items-center justify-start gap-2">
                  <LinkIcon className="h-3 w-3" />
--- a/web/components/pages/pages-list/list-item.tsx
+++ b/web/components/pages/pages-list/list-item.tsx
@ -154,6 +154,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
  const userCanChangeAccess = isCurrentUserOwner;
  const userCanArchive = isCurrentUserOwner || currentProjectRole === EUserWorkspaceRoles.ADMIN;
  const userCanDelete = isCurrentUserOwner || currentProjectRole === EUserWorkspaceRoles.ADMIN;
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;

  return (
    <>
@ -208,6 +209,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
                    <p className="text-sm text-custom-text-200">{render24HourFormatTime(page.updated_at)}</p>
                  </Tooltip>
                )}
+                {isEditingAllowed && (
                  <Tooltip tooltipContent={`${page.is_favorite ? "Remove from favorites" : "Mark as favorite"}`}>
                    {page.is_favorite ? (
                      <button type="button" onClick={handleRemoveFromFavorites}>
@ -219,6 +221,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
                      </button>
                    )}
                  </Tooltip>
+                )}
                {userCanChangeAccess && (
                  <Tooltip
                    tooltipContent={`${
@ -255,7 +258,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
                          </div>
                        </CustomMenu.MenuItem>
                      )}
-                      {userCanDelete && (
+                      {userCanDelete && isEditingAllowed && (
                        <CustomMenu.MenuItem onClick={handleDeletePage}>
                          <div className="flex items-center gap-2">
                            <Trash2 className="h-3 w-3" />
@ -266,7 +269,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
                    </>
                  ) : (
                    <>
-                      {userCanEdit && (
+                      {userCanEdit && isEditingAllowed && (
                        <CustomMenu.MenuItem onClick={handleEditPage}>
                          <div className="flex items-center gap-2">
                            <Pencil className="h-3 w-3" />
@ -274,7 +277,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
                          </div>
                        </CustomMenu.MenuItem>
                      )}
-                      {userCanArchive && (
+                      {userCanArchive && isEditingAllowed && (
                        <CustomMenu.MenuItem onClick={handleArchivePage}>
                          <div className="flex items-center gap-2">
                            <Archive className="h-3 w-3" />