[WEB-1255] chore: public and unlocked views (#4932)

* chore private and public views required changes

* fix slight alignment of view icons

* add feedback for update View button

* fix object reference sharing by using cloneDeep to replicate objects

* addressing review comments

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx

@@ -4,10 +4,11 @@ import { useCallback } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
+import { Earth, Lock } from "lucide-react";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
-import { Breadcrumbs, Button, CustomMenu, PhotoFilterIcon } from "@plane/ui";
+import { Breadcrumbs, Button, CustomMenu, PhotoFilterIcon, Tooltip } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
@@ -19,6 +20,7 @@ import {
   ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
 } from "@/constants/issue";
 import { EUserProjectRoles } from "@/constants/project";
+import { EViewAccess } from "@/constants/views";
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 import { truncateText } from "@/helpers/string.helper";
@@ -205,54 +207,64 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
             }
           />
         </Breadcrumbs>
+
+        <div className="cursor-default text-custom-text-300">
+          <Tooltip tooltipContent={viewDetails?.access === EViewAccess.PUBLIC ? "Public" : "Private"}>
+            {viewDetails?.access === EViewAccess.PUBLIC ? <Earth className="h-4 w-4" /> : <Lock className="h-4 w-4" />}
+          </Tooltip>
+        </div>
       </div>
       <div className="flex items-center gap-2">
-        <LayoutSelection
-          layouts={[
-            EIssueLayoutTypes.LIST,
-            EIssueLayoutTypes.KANBAN,
-            EIssueLayoutTypes.CALENDAR,
-            EIssueLayoutTypes.SPREADSHEET,
-            EIssueLayoutTypes.GANTT,
-          ]}
-          onChange={(layout) => handleLayoutChange(layout)}
-          selectedLayout={activeLayout}
-        />
+        {!viewDetails?.is_locked && (
+          <>
+            <LayoutSelection
+              layouts={[
+                EIssueLayoutTypes.LIST,
+                EIssueLayoutTypes.KANBAN,
+                EIssueLayoutTypes.CALENDAR,
+                EIssueLayoutTypes.SPREADSHEET,
+                EIssueLayoutTypes.GANTT,
+              ]}
+              onChange={(layout) => handleLayoutChange(layout)}
+              selectedLayout={activeLayout}
+            />
 
-        <FiltersDropdown
-          title="Filters"
-          placement="bottom-end"
-          disabled={!canUserCreateIssue}
-          isFiltersApplied={isFiltersApplied}
-        >
-          <FilterSelection
-            filters={issueFilters?.filters ?? {}}
-            handleFiltersUpdate={handleFiltersUpdate}
-            displayFilters={issueFilters?.displayFilters ?? {}}
-            handleDisplayFiltersUpdate={handleDisplayFilters}
-            layoutDisplayFiltersOptions={
-              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-            }
-            labels={projectLabels}
-            memberIds={projectMemberIds ?? undefined}
-            states={projectStates}
-            cycleViewDisabled={!currentProjectDetails?.cycle_view}
-            moduleViewDisabled={!currentProjectDetails?.module_view}
-          />
-        </FiltersDropdown>
-        <FiltersDropdown title="Display" placement="bottom-end">
-          <DisplayFiltersSelection
-            layoutDisplayFiltersOptions={
-              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-            }
-            displayFilters={issueFilters?.displayFilters ?? {}}
-            handleDisplayFiltersUpdate={handleDisplayFilters}
-            displayProperties={issueFilters?.displayProperties ?? {}}
-            handleDisplayPropertiesUpdate={handleDisplayProperties}
-            cycleViewDisabled={!currentProjectDetails?.cycle_view}
-            moduleViewDisabled={!currentProjectDetails?.module_view}
-          />
-        </FiltersDropdown>
+            <FiltersDropdown
+              title="Filters"
+              placement="bottom-end"
+              disabled={!canUserCreateIssue}
+              isFiltersApplied={isFiltersApplied}
+            >
+              <FilterSelection
+                filters={issueFilters?.filters ?? {}}
+                handleFiltersUpdate={handleFiltersUpdate}
+                displayFilters={issueFilters?.displayFilters ?? {}}
+                handleDisplayFiltersUpdate={handleDisplayFilters}
+                layoutDisplayFiltersOptions={
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                }
+                labels={projectLabels}
+                memberIds={projectMemberIds ?? undefined}
+                states={projectStates}
+                cycleViewDisabled={!currentProjectDetails?.cycle_view}
+                moduleViewDisabled={!currentProjectDetails?.module_view}
+              />
+            </FiltersDropdown>
+            <FiltersDropdown title="Display" placement="bottom-end">
+              <DisplayFiltersSelection
+                layoutDisplayFiltersOptions={
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                }
+                displayFilters={issueFilters?.displayFilters ?? {}}
+                handleDisplayFiltersUpdate={handleDisplayFilters}
+                displayProperties={issueFilters?.displayProperties ?? {}}
+                handleDisplayPropertiesUpdate={handleDisplayProperties}
+                cycleViewDisabled={!currentProjectDetails?.cycle_view}
+                moduleViewDisabled={!currentProjectDetails?.module_view}
+              />
+            </FiltersDropdown>
+          </>
+        )}
         {canUserCreateIssue && (
           <Button
             onClick={() => {

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx

@@ -33,15 +33,17 @@ const ProjectViewIssuesPage = observer(() => {
   );
 
   if (error) {
-    <EmptyState
-      image={emptyView}
-      title="View does not exist"
-      description="The view you are looking for does not exist or has been deleted."
-      primaryButton={{
-        text: "View other views",
-        onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/views`),
-      }}
-    />;
+    return (
+      <EmptyState
+        image={emptyView}
+        title="View does not exist"
+        description="The view you are looking for does not exist or you don't have permission to view it."
+        primaryButton={{
+          text: "View other views",
+          onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/views`),
+        }}
+      />
+    );
   }
 
   return (

web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx

@@ -17,7 +17,7 @@ import { EUserWorkspaceRoles } from "@/constants/workspace";
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
-import { useLabel, useMember, useUser, useIssues } from "@/hooks/store";
+import { useLabel, useMember, useUser, useIssues, useGlobalView } from "@/hooks/store";
 
 export const GlobalIssuesHeader = observer(() => {
   // states
@@ -28,6 +28,7 @@ export const GlobalIssuesHeader = observer(() => {
   const {
     issuesFilter: { filters, updateFilters },
   } = useIssues(EIssuesStoreType.GLOBAL);
+  const { getViewDetailsById } = useGlobalView();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -38,6 +39,8 @@ export const GlobalIssuesHeader = observer(() => {
 
   const issueFilters = globalViewId ? filters[globalViewId.toString()] : undefined;
 
+  const viewDetails = getViewDetailsById(globalViewId.toString());
+
   const handleFiltersUpdate = useCallback(
     (key: keyof IIssueFilterOptions, value: string | string[]) => {
       if (!workspaceSlug || !globalViewId) return;
@@ -96,6 +99,7 @@ export const GlobalIssuesHeader = observer(() => {
   const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
 
   const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0;
+  const isLocked = viewDetails?.is_locked;
 
   return (
     <>
@@ -112,28 +116,30 @@ export const GlobalIssuesHeader = observer(() => {
           </Breadcrumbs>
         </div>
         <div className="flex items-center gap-2">
-          <>
-            <FiltersDropdown title="Filters" placement="bottom-end" isFiltersApplied={isFiltersApplied}>
-              <FilterSelection
-                layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
-                filters={issueFilters?.filters ?? {}}
-                handleFiltersUpdate={handleFiltersUpdate}
-                displayFilters={issueFilters?.displayFilters ?? {}}
-                handleDisplayFiltersUpdate={handleDisplayFilters}
-                labels={workspaceLabels ?? undefined}
-                memberIds={workspaceMemberIds ?? undefined}
-              />
-            </FiltersDropdown>
-            <FiltersDropdown title="Display" placement="bottom-end">
-              <DisplayFiltersSelection
-                layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
-                displayFilters={issueFilters?.displayFilters ?? {}}
-                handleDisplayFiltersUpdate={handleDisplayFilters}
-                displayProperties={issueFilters?.displayProperties ?? {}}
-                handleDisplayPropertiesUpdate={handleDisplayProperties}
-              />
-            </FiltersDropdown>
-          </>
+          {!isLocked && (
+            <>
+              <FiltersDropdown title="Filters" placement="bottom-end" isFiltersApplied={isFiltersApplied}>
+                <FilterSelection
+                  layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+                  filters={issueFilters?.filters ?? {}}
+                  handleFiltersUpdate={handleFiltersUpdate}
+                  displayFilters={issueFilters?.displayFilters ?? {}}
+                  handleDisplayFiltersUpdate={handleDisplayFilters}
+                  labels={workspaceLabels ?? undefined}
+                  memberIds={workspaceMemberIds ?? undefined}
+                />
+              </FiltersDropdown>
+              <FiltersDropdown title="Display" placement="bottom-end">
+                <DisplayFiltersSelection
+                  layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+                  displayFilters={issueFilters?.displayFilters ?? {}}
+                  handleDisplayFiltersUpdate={handleDisplayFilters}
+                  displayProperties={issueFilters?.displayProperties ?? {}}
+                  handleDisplayPropertiesUpdate={handleDisplayProperties}
+                />
+              </FiltersDropdown>
+            </>
+          )}
           {isAuthorizedUser && (
             <Button variant="primary" size="sm" onClick={() => setCreateViewModal(true)}>
               Add View