Chore/user role validation (#3260)

* chore: remove `Save View` option for guest/ viewer from project issues header. * chore: allow guest/ viewer to clear applied filters in project issues. * chore: disable `date`, `label` property access for guests/ viewer in all project issue views. * chore: update `Workspace Issues` -> `All Issues` header. * chore: refactor apply/ clear filter implementation in All Issues. * Revert "chore: refactor apply/ clear filter implementation in All Issues." This reverts commit 024822d. * Revert "chore: allow guest/ viewer to clear applied filters in project issues." This reverts commit 3dae871. * Revert "chore: update `Workspace Issues` -> `All Issues` header." This reverts commit 03f90be. * chore: remove `cursor-pointer` style from non actionable issue properties.
makeplane · Jan 22, 2024 · a545787 · a545787
1 parent 2ca0a9a
commit a545787
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 20 deletions.
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
@@ -1,29 +1,32 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { AppliedFiltersList, SaveFilterView } from "components/issues";
-
 // types
 import { IIssueFilterOptions } from "types";
 import { EFilterType } from "store/issues/types";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query as {
     workspaceSlug: string;
     projectId: string;
   };
-
+  // mobx stores
   const {
     projectLabel: { projectLabels },
     projectState: projectStateStore,
     projectMember: { projectMembers },
     projectIssuesFilter: { issueFilters, updateFilters },
+    user: { currentProjectRole },
   } = useMobxStore();
-
+  // derived values
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
   const userFilters = issueFilters?.filters;
 
   // filters whose value not null or empty array
@@ -73,8 +76,9 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
         members={projectMembers?.map((m) => m.member)}
         states={projectStateStore.states?.[projectId?.toString() ?? ""]}
       />
-
-      <SaveFilterView workspaceSlug={workspaceSlug} projectId={projectId} filterParams={appliedFilters} />
+      {isEditingAllowed && (
+        <SaveFilterView workspaceSlug={workspaceSlug} projectId={projectId} filterParams={appliedFilters} />
+      )}
     </div>
   );
 });
diff --git a/web/components/issues/issue-layouts/kanban/properties.tsx b/web/components/issues/issue-layouts/kanban/properties.tsx
@@ -166,7 +166,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       {/* sub-issues */}
       {displayProperties && displayProperties?.sub_issue_count && !!issue?.sub_issues_count && (
         <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
-          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
+          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 cursor-default">
             <Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
             <div className="text-xs">{issue.sub_issues_count}</div>
           </div>
@@ -176,7 +176,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       {/* attachments */}
       {displayProperties && displayProperties?.attachment_count && !!issue?.attachment_count && (
         <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
+          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 cursor-default">
             <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
             <div className="text-xs">{issue.attachment_count}</div>
           </div>
@@ -186,7 +186,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       {/* link */}
       {displayProperties && displayProperties?.link && !!issue?.link_count && (
         <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
+          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 cursor-default">
             <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
             <div className="text-xs">{issue.link_count}</div>
           </div>

diff --git a/web/components/issues/issue-layouts/list/properties.tsx b/web/components/issues/issue-layouts/list/properties.tsx
@@ -137,7 +137,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
       {/* sub-issues */}
       {displayProperties && displayProperties?.sub_issue_count && !!issue?.sub_issues_count && (
         <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
-          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
+          <div className="flex h-5 flex-shrink-0 cursor-default items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
             <Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
             <div className="text-xs">{issue.sub_issues_count}</div>
           </div>
@@ -147,7 +147,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
       {/* attachments */}
       {displayProperties && displayProperties?.attachment_count && !!issue?.attachment_count && (
         <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
+          <div className="flex h-5 flex-shrink-0 cursor-default items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
             <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
             <div className="text-xs">{issue.attachment_count}</div>
           </div>
@@ -157,7 +157,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
       {/* link */}
       {displayProperties && displayProperties?.link && !!issue?.link_count && (
         <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
+          <div className="flex h-5 flex-shrink-0 cursor-default items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
             <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
             <div className="text-xs">{issue.link_count}</div>
           </div>

diff --git a/web/components/issues/issue-layouts/properties/date.tsx b/web/components/issues/issue-layouts/properties/date.tsx
@@ -61,6 +61,7 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
               ref={dropdownBtn}
               className="border-none outline-none"
               onClick={(e) => e.stopPropagation()}
+              disabled={disabled}
             >
               <Tooltip
                 tooltipHeading={dateOptionDetails.placeholder}
@@ -69,7 +70,7 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
                 <div
                   className={`flex h-5 w-full items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 outline-none duration-300 ${
                     disabled
-                      ? "pointer-events-none cursor-not-allowed text-custom-text-200"
+                      ? "cursor-not-allowed text-custom-text-200"
                       : "cursor-pointer hover:bg-custom-background-80"
                   }`}
                 >

diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -128,7 +128,11 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
               ))}
           </>
         ) : (
-          <div className="flex h-full flex-shrink-0 cursor-pointer items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs">
+          <div
+            className={`flex h-full flex-shrink-0 items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs ${
+              disabled ? "cursor-not-allowed" : "cursor-pointer"
+            }`}
+          >
             <Tooltip
               position="top"
               tooltipHeading="Labels"
@@ -147,7 +151,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
       ) : (
         <Tooltip position="top" tooltipHeading="Labels" tooltipContent="None">
           <div
-            className={`h-full flex items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
+            className={`flex h-full items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
               noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
             }`}
           >

diff --git a/web/components/issues/sidebar-select/label.tsx b/web/components/issues/sidebar-select/label.tsx
@@ -92,7 +92,9 @@ export const SidebarLabelSelect: React.FC<Props> = observer((props) => {
             return (
               <button
                 key={label.id}
-                className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20"
+                className={`group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1 py-0.5 text-xs ${
+                  isNotAllowed || uneditable ? "!cursor-not-allowed" : "hover:border-red-500/20 hover:bg-red-500/20"
+                }`}
                 onClick={() => {
                   const updatedLabels = labelList?.filter((l) => l !== labelId);
                   submitChanges({

diff --git a/web/components/issues/view-select/due-date.tsx b/web/components/issues/view-select/due-date.tsx
@@ -61,9 +61,9 @@ export const ViewDueDateSelect: React.FC<Props> = ({
           className={`bg-transparent ${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"}`}
           customInput={
             <div
-              className={`flex cursor-pointer items-center justify-center gap-2 rounded border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-200 hover:bg-custom-background-80 ${
+              className={`flex items-center justify-center gap-2 rounded border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-200 hover:bg-custom-background-80 ${
                 issue.target_date ? "pr-6 text-custom-text-300" : "text-custom-text-400"
-              }`}
+              } ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
             >
               {issue.target_date ? (
                 <>

diff --git a/web/components/issues/view-select/start-date.tsx b/web/components/issues/view-select/start-date.tsx
@@ -49,9 +49,9 @@ export const ViewStartDateSelect: React.FC<Props> = ({
           handleOnOpen={handleOnOpen}
           customInput={
             <div
-              className={`flex cursor-pointer items-center justify-center gap-2 rounded border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-200 hover:bg-custom-background-80 ${
+              className={`flex items-center justify-center gap-2 rounded border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-200 hover:bg-custom-background-80 ${
                 issue?.start_date ? "pr-6 text-custom-text-300" : "text-custom-text-400"
-              }`}
+              } ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
             >
               {issue?.start_date ? (
                 <>