chore: issue sidebar and project view improvement and validation (#3098)

* chore: project view header button validation

* chore: copy view link option added in project view list item and role action validation added

* chore: issue sidebar improvement

web/components/headers/project-view-issues.tsx

@@ -173,7 +173,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
             handleDisplayPropertiesUpdate={handleDisplayProperties}
           />
         </FiltersDropdown>
-        {
+        {canUserCreateIssue && (
           <Button
             onClick={() => {
               setTrackElement("PROJECT_VIEW_PAGE_HEADER");
@@ -184,7 +184,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
           >
             Add Issue
           </Button>
-        }
+        )}
       </div>
     </div>
   );

web/components/headers/project-views.tsx

@@ -7,15 +7,24 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { Breadcrumbs, PhotoFilterIcon, Button } from "@plane/ui";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 export const ProjectViewsHeader: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { project: projectStore, commandPalette } = useMobxStore();
+  const {
+    project: projectStore,
+    commandPalette,
+    user: { currentProjectRole },
+  } = useMobxStore();
   const { currentProjectDetails } = projectStore;
 
+  const canUserCreateIssue =
+    currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
+
   return (
     <>
       <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
@@ -50,6 +59,7 @@ export const ProjectViewsHeader: React.FC = observer(() => {
             </Breadcrumbs>
           </div>
         </div>
+        {canUserCreateIssue && (
           <div className="flex flex-shrink-0 items-center gap-2">
             <div>
               <Button
@@ -62,6 +72,7 @@ export const ProjectViewsHeader: React.FC = observer(() => {
               </Button>
             </div>
           </div>
+        )}
       </div>
     </>
   );

web/components/issues/sidebar-select/assignee.tsx

@@ -60,7 +60,9 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabl
           ) : (
             <button
               type="button"
-              className="rounded bg-custom-background-80 px-2.5 py-0.5 text-xs text-custom-text-200"
+              className={`rounded bg-custom-background-80 px-2.5 py-0.5 text-xs text-custom-text-200 ${
+                disabled ? "cursor-not-allowed" : ""
+              }`}
             >
               No assignees
             </button>

web/components/issues/sidebar.tsx

@@ -572,7 +572,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                   labelList={issueDetail?.labels ?? []}
                   submitChanges={submitChanges}
                   isNotAllowed={!isAllowed}
-                  uneditable={uneditable ?? false}
+                  uneditable={uneditable || !isAllowed}
                 />
               </div>
             </div>

web/components/views/view-list-item.tsx

@@ -2,17 +2,22 @@ import React, { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { PencilIcon, StarIcon, TrashIcon } from "lucide-react";
+import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
 // components
 import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "components/views";
 // ui
 import { CustomMenu, PhotoFilterIcon } from "@plane/ui";
 // helpers
 import { calculateTotalFilters } from "helpers/filter.helper";
+import { copyUrlToClipboard } from "helpers/string.helper";
 // types
 import { IProjectView } from "types";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 type Props = {
   view: IProjectView;
@@ -27,7 +32,12 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { projectViews: projectViewsStore } = useMobxStore();
+  const { setToastAlert } = useToast();
+
+  const {
+    projectViews: projectViewsStore,
+    user: { currentProjectRole },
+  } = useMobxStore();
 
   const handleAddToFavorites = () => {
     if (!workspaceSlug || !projectId) return;
@@ -41,8 +51,22 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
     projectViewsStore.removeViewFromFavorites(workspaceSlug.toString(), projectId.toString(), view.id);
   };
 
+  const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/views/${view.id}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "View link copied to clipboard.",
+      });
+    });
+  };
+
   const totalFilters = calculateTotalFilters(view.query_data ?? {});
 
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
   return (
     <>
       {workspaceSlug && projectId && view && (
@@ -73,8 +97,8 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
                   <p className="hidden rounded bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200 group-hover:block">
                     {totalFilters} {totalFilters === 1 ? "filter" : "filters"}
                   </p>
-
+                  {isEditingAllowed &&
-                  {view.is_favorite ? (
+                    (view.is_favorite ? (
                       <button
                         type="button"
                         onClick={(e) => {
@@ -98,8 +122,11 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
                       >
                         <StarIcon size={14} strokeWidth={2} />
                       </button>
-                  )}
+                    ))}
+
                   <CustomMenu width="auto" ellipsis>
+                    {isEditingAllowed && (
+                      <>
                         <CustomMenu.MenuItem
                           onClick={(e) => {
                             e.preventDefault();
@@ -124,6 +151,14 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
                             <span>Delete View</span>
                           </span>
                         </CustomMenu.MenuItem>
+                      </>
+                    )}
+                    <CustomMenu.MenuItem onClick={handleCopyText}>
+                      <span className="flex items-center justify-start gap-2">
+                        <LinkIcon className="h-3 w-3" />
+                        <span>Copy view link</span>
+                      </span>
+                    </CustomMenu.MenuItem>
                   </CustomMenu>
                 </div>
               </div>