From 1c82354a76059daf1f3719b844a026e0bda11350 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 6 Dec 2023 14:22:06 +0530
Subject: [PATCH] fix: bug fixes and improvement (#2992)

* chore: issue sidebar permission bug fix and not authorized page redirection added

* chore: unauthorized project setting page improvement

* fix: build error fix
---
 web/components/headers/project-settings.tsx   |  9 ++++++++-
 .../issues/sidebar-select/label.tsx           |  6 ++++--
 web/components/modules/sidebar.tsx            |  1 -
 web/components/ui/datepicker.tsx              |  2 +-
 .../settings-layout/project/layout.tsx        | 19 ++++++++++++++++++-
 5 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/web/components/headers/project-settings.tsx b/web/components/headers/project-settings.tsx
index 3dfb9da07..bf2dc374d 100644
--- a/web/components/headers/project-settings.tsx
+++ b/web/components/headers/project-settings.tsx
@@ -8,6 +8,8 @@ import { renderEmoji } from "helpers/emoji.helper";
 // hooks
 import { useMobxStore } from "lib/mobx/store-provider";
 import { observer } from "mobx-react-lite";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 export interface IProjectSettingHeader {
   title: string;
@@ -18,9 +20,14 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // store
-  const { project: projectStore } = useMobxStore();
+  const {
+    project: projectStore,
+    user: { currentProjectRole },
+  } = useMobxStore();
   const { currentProjectDetails } = projectStore;
 
+  if (currentProjectRole && currentProjectRole <= EUserWorkspaceRoles.VIEWER) return null;
+
   return (
     <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
diff --git a/web/components/issues/sidebar-select/label.tsx b/web/components/issues/sidebar-select/label.tsx
index 43dfeefd9..4d9459a31 100644
--- a/web/components/issues/sidebar-select/label.tsx
+++ b/web/components/issues/sidebar-select/label.tsx
@@ -89,7 +89,7 @@ export const SidebarLabelSelect: React.FC<Props> = observer((props) => {
 
           if (label)
             return (
-              <span
+              <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"
                 onClick={() => {
@@ -98,6 +98,7 @@ export const SidebarLabelSelect: React.FC<Props> = observer((props) => {
                     labels: updatedLabels,
                   });
                 }}
+                disabled={uneditable}
               >
                 <span
                   className="h-2 w-2 flex-shrink-0 rounded-full"
@@ -107,7 +108,7 @@ export const SidebarLabelSelect: React.FC<Props> = observer((props) => {
                 />
                 {label.name}
                 <X className="h-2 w-2 group-hover:text-red-500" />
-              </span>
+              </button>
             );
         })}
         <IssueLabelSelect
@@ -209,6 +210,7 @@ export const SidebarLabelSelect: React.FC<Props> = observer((props) => {
             type="button"
             className="grid place-items-center rounded bg-red-500 p-2.5"
             onClick={() => setCreateLabelForm(false)}
+            disabled={uneditable}
           >
             <X className="h-4 w-4 text-white" />
           </button>
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index a257f5e1e..b2685ca2c 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -226,7 +226,6 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
     : null;
 
   const handleEditLink = (link: ILinkDetails) => {
-    console.log("link", link);
     setSelectedLinkToUpdate(link);
     setModuleLinkModal(true);
   };
diff --git a/web/components/ui/datepicker.tsx b/web/components/ui/datepicker.tsx
index d8ebc143a..3e3c08296 100644
--- a/web/components/ui/datepicker.tsx
+++ b/web/components/ui/datepicker.tsx
@@ -61,7 +61,7 @@ export const CustomDatePicker: React.FC<Props> = ({
       noBorder ? "" : "border border-custom-border-200"
     } w-full rounded-md caret-transparent outline-none ${className}`}
     dateFormat="MMM dd, yyyy"
-    isClearable={isClearable}
+    isClearable={Boolean(isClearable && !disabled)}
     disabled={disabled}
     maxDate={maxDate}
     minDate={minDate}
diff --git a/web/layouts/settings-layout/project/layout.tsx b/web/layouts/settings-layout/project/layout.tsx
index d823cbe70..7762469a7 100644
--- a/web/layouts/settings-layout/project/layout.tsx
+++ b/web/layouts/settings-layout/project/layout.tsx
@@ -1,10 +1,12 @@
 import { FC, ReactNode } from "react";
+import { useRouter } from "next/router";
 // components
 import { ProjectSettingsSidebar } from "./sidebar";
 import { useMobxStore } from "lib/mobx/store-provider";
 import { EUserWorkspaceRoles } from "constants/workspace";
 import { NotAuthorizedView } from "components/auth-screens";
 import { observer } from "mobx-react-lite";
+import { Button, LayersIcon } from "@plane/ui";
 
 export interface IProjectSettingLayout {
   children: ReactNode;
@@ -13,6 +15,9 @@ export interface IProjectSettingLayout {
 export const ProjectSettingLayout: FC<IProjectSettingLayout> = observer((props) => {
   const { children } = props;
 
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
   const {
     user: { currentProjectRole },
   } = useMobxStore();
@@ -20,7 +25,19 @@ export const ProjectSettingLayout: FC<IProjectSettingLayout> = observer((props)
   const restrictViewSettings = currentProjectRole && currentProjectRole <= EUserWorkspaceRoles.VIEWER;
 
   return restrictViewSettings ? (
-    <NotAuthorizedView type="project" />
+    <NotAuthorizedView
+      type="project"
+      actionButton={
+        <Button
+          variant="primary"
+          size="md"
+          prependIcon={<LayersIcon />}
+          onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues`)}
+        >
+          Go to issues
+        </Button>
+      }
+    />
   ) : (
     <div className="flex gap-2 h-full w-full overflow-x-hidden overflow-y-scroll">
       <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">