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,18 +59,20 @@ export const ProjectViewsHeader: React.FC = observer(() => {
             </Breadcrumbs>
           </div>
         </div>
-        <div className="flex flex-shrink-0 items-center gap-2">
-          <div>
-            <Button
-              variant="primary"
-              size="sm"
-              prependIcon={<Plus className="h-3.5 w-3.5 stroke-2" />}
-              onClick={() => commandPalette.toggleCreateViewModal(true)}
-            >
-              Create View
-            </Button>
+        {canUserCreateIssue && (
+          <div className="flex flex-shrink-0 items-center gap-2">
+            <div>
+              <Button
+                variant="primary"
+                size="sm"
+                prependIcon={<Plus className="h-3.5 w-3.5 stroke-2" />}
+                onClick={() => commandPalette.toggleCreateViewModal(true)}
+              >
+                Create View
+              </Button>
+            </div>
           </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,55 +97,66 @@ 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 ? (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleRemoveFromFavorites();
+                        }}
+                        className="grid place-items-center"
+                      >
+                        <StarIcon className="h-3.5 w-3.5 fill-orange-400 text-orange-400" strokeWidth={2} />
+                      </button>
+                    ) : (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleAddToFavorites();
+                        }}
+                        className="grid place-items-center"
+                      >
+                        <StarIcon size={14} strokeWidth={2} />
+                      </button>
+                    ))}
 
-                  {view.is_favorite ? (
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleRemoveFromFavorites();
-                      }}
-                      className="grid place-items-center"
-                    >
-                      <StarIcon className="h-3.5 w-3.5 fill-orange-400 text-orange-400" strokeWidth={2} />
-                    </button>
-                  ) : (
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleAddToFavorites();
-                      }}
-                      className="grid place-items-center"
-                    >
-                      <StarIcon size={14} strokeWidth={2} />
-                    </button>
-                  )}
                   <CustomMenu width="auto" ellipsis>
-                    <CustomMenu.MenuItem
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        setCreateUpdateViewModal(true);
-                      }}
-                    >
+                    {isEditingAllowed && (
+                      <>
+                        <CustomMenu.MenuItem
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setCreateUpdateViewModal(true);
+                          }}
+                        >
+                          <span className="flex items-center justify-start gap-2">
+                            <PencilIcon size={14} strokeWidth={2} />
+                            <span>Edit View</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                        <CustomMenu.MenuItem
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setDeleteViewModal(true);
+                          }}
+                        >
+                          <span className="flex items-center justify-start gap-2">
+                            <TrashIcon size={14} strokeWidth={2} />
+                            <span>Delete View</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                      </>
+                    )}
+                    <CustomMenu.MenuItem onClick={handleCopyText}>
                       <span className="flex items-center justify-start gap-2">
-                        <PencilIcon size={14} strokeWidth={2} />
-                        <span>Edit View</span>
-                      </span>
-                    </CustomMenu.MenuItem>
-                    <CustomMenu.MenuItem
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        setDeleteViewModal(true);
-                      }}
-                    >
-                      <span className="flex items-center justify-start gap-2">
-                        <TrashIcon size={14} strokeWidth={2} />
-                        <span>Delete View</span>
+                        <LinkIcon className="h-3 w-3" />
+                        <span>Copy view link</span>
                       </span>
                     </CustomMenu.MenuItem>
                   </CustomMenu>