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

@@ -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">

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>

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);
   };

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}

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">