chore, make core changes for Advanced views (#4962)

web/ce/components/views/access-controller.tsx

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const AccessController = (props: any) => <></>;

web/ce/components/views/filters/access-filter.tsx

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const FilterByAccess = (props: any) => <></>;

web/core/components/common/access-field.tsx

@@ -0,0 +1,44 @@
+import { LucideIcon } from "lucide-react";
+import { cn } from "@plane/editor";
+import { Tooltip } from "@plane/ui";
+
+type Props = {
+  onChange: (value: number) => void;
+  value: number;
+  accessSpecifiers: {
+    key: number;
+    label: string;
+    icon: LucideIcon;
+  }[];
+  isMobile?: boolean;
+};
+
+export const AccessField = (props: Props) => {
+  const { onChange, value, accessSpecifiers, isMobile = false } = props;
+
+  return (
+    <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded border-[1px] border-custom-border-200 p-1">
+      {accessSpecifiers.map((access, index) => (
+        <Tooltip key={access.key} tooltipContent={access.label} isMobile={isMobile}>
+          <button
+            type="button"
+            onClick={() => onChange(access.key)}
+            className={cn(
+              "flex-shrink-0 relative flex justify-center items-center w-5 h-5 rounded-sm p-1 transition-all",
+              value === access.key ? "bg-custom-background-80" : "hover:bg-custom-background-80"
+            )}
+            tabIndex={2 + index}
+          >
+            <access.icon
+              className={cn(
+                "h-3.5 w-3.5 transition-all",
+                value === access.key ? "text-custom-text-100" : "text-custom-text-400"
+              )}
+              strokeWidth={2}
+            />
+          </button>
+        </Tooltip>
+      ))}
+    </div>
+  );
+};

web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx

@@ -16,6 +16,7 @@ import { CreateUpdateWorkspaceViewModal } from "@/components/workspace";
 // constants
 import { GLOBAL_VIEW_UPDATED } from "@/constants/event-tracker";
 import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { EViewAccess } from "@/constants/views";
 import { DEFAULT_GLOBAL_VIEWS_LIST, EUserWorkspaceRoles } from "@/constants/workspace";
 // hooks
 import { useEventTracker, useGlobalView, useIssues, useLabel, useUser } from "@/hooks/store";
@@ -138,6 +139,7 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
         preLoadedData={{
           name: `${viewDetails?.name} 2`,
           description: viewDetails?.description,
+          access: viewDetails?.access ?? EViewAccess.PUBLIC,
           ...viewFilters,
         }}
       />

web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx

@@ -13,6 +13,7 @@ import { CreateUpdateProjectViewModal } from "@/components/views";
 import { UpdateViewComponent } from "@/components/views/update-view-component";
 // constants
 import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { EViewAccess } from "@/constants/views";
 import { EUserWorkspaceRoles } from "@/constants/workspace";
 // hooks
 import { useIssues, useLabel, useProjectState, useProjectView, useUser } from "@/hooks/store";
@@ -121,6 +122,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
           name: `${viewDetails?.name} 2`,
           description: viewDetails?.description,
           logo_props: viewDetails?.logo_props,
+          access: viewDetails?.access ?? EViewAccess.PUBLIC,
           ...viewFilters,
         }}
       />

web/core/components/pages/modals/page-form.tsx

@@ -5,12 +5,12 @@ import { FormEvent, useState } from "react";
 import { FileText } from "lucide-react";
 import { TPage } from "@plane/types";
 // ui
-import { Button, EmojiIconPicker, EmojiIconPickerTypes, Input, Tooltip } from "@plane/ui";
+import { Button, EmojiIconPicker, EmojiIconPickerTypes, Input } from "@plane/ui";
 import { Logo } from "@/components/common";
 // constants
-import { PAGE_ACCESS_SPECIFIERS } from "@/constants/page";
+import { AccessField } from "@/components/common/access-field";
+import { EPageAccess, PAGE_ACCESS_SPECIFIERS } from "@/constants/page";
 // helpers
-import { cn } from "@/helpers/common.helper";
 import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -111,29 +111,12 @@ export const PageForm: React.FC<Props> = (props) => {
       </div>
       <div className="px-5 py-4 flex items-center justify-between gap-2 border-t-[0.5px] border-custom-border-200">
         <div className="flex items-center gap-2">
-          <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded border-[0.5px] border-custom-border-200 p-1">
-            {PAGE_ACCESS_SPECIFIERS.map((access, index) => (
-              <Tooltip key={access.key} tooltipContent={access.label} isMobile={isMobile}>
-                <button
-                  type="button"
-                  onClick={() => handleFormData("access", access.key)}
-                  className={cn(
-                    "flex-shrink-0 relative flex justify-center items-center w-6 h-6 rounded-sm p-1 transition-all",
-                    formData.access === access.key ? "bg-custom-background-80" : "hover:bg-custom-background-80"
-                  )}
-                  tabIndex={2 + index}
-                >
-                  <access.icon
-                    className={cn(
-                      "h-3.5 w-3.5 transition-all",
-                      formData.access === access.key ? "text-custom-text-100" : "text-custom-text-400"
-                    )}
-                    strokeWidth={2}
+          <AccessField
+            onChange={(access) => handleFormData("access", access)}
+            value={formData?.access ?? EPageAccess.PUBLIC}
+            accessSpecifiers={PAGE_ACCESS_SPECIFIERS}
+            isMobile={isMobile}
           />
-                </button>
-              </Tooltip>
-            ))}
-          </div>
           <h6 className="text-xs font-medium">
             {PAGE_ACCESS_SPECIFIERS.find((access) => access.key === formData.access)?.label}
           </h6>

web/core/components/views/filters/filter-selection.tsx

@@ -7,6 +7,7 @@ import { FilterCreatedBy, FilterCreatedDate } from "@/components/common/filters"
 import { FilterOption } from "@/components/issues";
 // constants
 import { EViewAccess } from "@/constants/views";
+import { FilterByAccess } from "@/plane-web/components/views/filters/access-filter";
 
 type Props = {
   filters: TViewFilters;
@@ -77,6 +78,17 @@ export const ViewFiltersSelection: React.FC<Props> = observer((props) => {
           />
         </div>
 
+        {/* access / view type */}
+        <FilterByAccess
+          appliedFilters={filters.filters?.view_type}
+          handleUpdate={(val: string | string[]) => handleFilters("view_type", val)}
+          searchQuery={filtersSearchQuery}
+          accessFilters={[
+            { key: EViewAccess.PRIVATE, value: "Private" },
+            { key: EViewAccess.PUBLIC, value: "Public" },
+          ]}
+        />
+
         {/* created date */}
         <div className="py-2">
           <FilterCreatedDate

web/core/components/views/form.tsx

@@ -12,11 +12,13 @@ import { Logo } from "@/components/common";
 import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "@/components/issues";
 // constants
 import { EIssueLayoutTypes, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+import { EViewAccess } from "@/constants/views";
 // helpers
 import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
 import { getComputedDisplayFilters, getComputedDisplayProperties } from "@/helpers/issue.helper";
 // hooks
 import { useLabel, useMember, useProject, useProjectState } from "@/hooks/store";
+import { AccessController } from "@/plane-web/components/views/access-controller";
 import { LayoutDropDown } from "../dropdowns/layout";
 
 type Props = {
@@ -29,6 +31,7 @@ type Props = {
 const defaultValues: Partial<IProjectView> = {
   name: "",
   description: "",
+  access: EViewAccess.PUBLIC,
   display_properties: getComputedDisplayProperties(),
   display_filters: getComputedDisplayFilters(),
 };
@@ -102,6 +105,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
       filters: formData.filters,
       display_filters: formData.display_filters,
       display_properties: formData.display_properties,
+      access: formData.access,
     } as IProjectView);
 
     reset({
@@ -216,6 +220,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
             />
           </div>
           <div className="flex gap-2">
+            <AccessController control={control} />
             <Controller
               control={control}
               name="display_filters.layout"

web/core/components/workspace/views/form.tsx

@@ -11,10 +11,12 @@ import { Button, Input, TextArea } from "@plane/ui";
 import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "@/components/issues";
 // constants
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+import { EViewAccess } from "@/constants/views";
 // helpers
 import { getComputedDisplayFilters, getComputedDisplayProperties } from "@/helpers/issue.helper";
 // hooks
 import { useLabel, useMember } from "@/hooks/store";
+import { AccessController } from "@/plane-web/components/views/access-controller";
 
 type Props = {
   handleFormSubmit: (values: Partial<IWorkspaceView>) => Promise<void>;
@@ -26,6 +28,7 @@ type Props = {
 const defaultValues: Partial<IWorkspaceView> = {
   name: "",
   description: "",
+  access: EViewAccess.PUBLIC,
   display_properties: getComputedDisplayProperties(),
   display_filters: getComputedDisplayFilters(),
 };
@@ -150,7 +153,8 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
               )}
             />
           </div>
-          <div>
+          <div className="flex gap-2">
+            <AccessController control={control} />
             <Controller
               control={control}
               name="filters"

web/ee/components/views/access-controller.tsx

@@ -0,0 +1 @@
+export * from "ce/components/views/access-controller";

web/ee/components/views/filters/access-filter.tsx

@@ -0,0 +1 @@
+export * from "ce/components/views/filters/access-filter";