[WEB-756] chore: spreadsheet layout cycle and module feature toggle validation (#4121)

* chore: spreadsheet layout cycle and module feature toggle validation added

* chore: project analytics cycle and module feature toggle validation added

web/components/analytics/custom-analytics/select-bar.tsx

@@ -3,6 +3,7 @@ import { Control, Controller, UseFormSetValue } from "react-hook-form";
 import { IAnalyticsParams } from "@plane/types";
 // hooks
 import { SelectProject, SelectSegment, SelectXAxis, SelectYAxis } from "@/components/analytics";
+import { ANALYTICS_X_AXIS_VALUES } from "@/constants/analytics";
 import { useProject } from "@/hooks/store";
 // components
 // types
@@ -18,7 +19,15 @@ type Props = {
 export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
   const { control, setValue, params, fullScreen, isProjectLevel } = props;
 
-  const { workspaceProjectIds: workspaceProjectIds } = useProject();
+  const { workspaceProjectIds: workspaceProjectIds, currentProjectDetails } = useProject();
+
+  const analyticsOptions = isProjectLevel
+    ? ANALYTICS_X_AXIS_VALUES.filter((v) => {
+        if (v.value === "issue_cycle__cycle_id" && !currentProjectDetails?.cycle_view) return false;
+        if (v.value === "issue_module__module_id" && !currentProjectDetails?.module_view) return false;
+        return true;
+      })
+    : ANALYTICS_X_AXIS_VALUES;
 
   return (
     <div
@@ -64,6 +73,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
                 onChange(val);
               }}
               params={params}
+              analyticsOptions={analyticsOptions}
             />
           )}
         />
@@ -74,7 +84,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
           name="segment"
           control={control}
           render={({ field: { value, onChange } }) => (
-            <SelectSegment value={value} onChange={onChange} params={params} />
+            <SelectSegment value={value} onChange={onChange} params={params} analyticsOptions={analyticsOptions} />
           )}
         />
       </div>

web/components/analytics/custom-analytics/select/segment.tsx

@@ -3,17 +3,15 @@ import { IAnalyticsParams, TXAxisValues } from "@plane/types";
 
 // ui
 import { CustomSelect } from "@plane/ui";
-// types
-import { ANALYTICS_X_AXIS_VALUES } from "@/constants/analytics";
-// constants
 
 type Props = {
   value: TXAxisValues | null | undefined;
   onChange: () => void;
   params: IAnalyticsParams;
+  analyticsOptions: { value: TXAxisValues; label: string }[];
 };
 
-export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => {
+export const SelectSegment: React.FC<Props> = ({ value, onChange, params, analyticsOptions }) => {
   const router = useRouter();
   const { cycleId, moduleId } = router.query;
 
@@ -22,7 +20,7 @@ export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => {
       value={value}
       label={
         <span>
-          {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label ?? (
+          {analyticsOptions.find((v) => v.value === value)?.label ?? (
             <span className="text-custom-text-200">No value</span>
           )}
         </span>
@@ -31,7 +29,7 @@ export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => {
       maxHeight="lg"
     >
       <CustomSelect.Option value={null}>No value</CustomSelect.Option>
-      {ANALYTICS_X_AXIS_VALUES.map((item) => {
+      {analyticsOptions.map((item) => {
         if (params.x_axis === item.value) return null;
         if (cycleId && item.value === "issue_cycle__cycle_id") return null;
         if (moduleId && item.value === "issue_module__module_id") return null;

web/components/analytics/custom-analytics/select/x-axis.tsx

@@ -3,18 +3,16 @@ import { IAnalyticsParams, TXAxisValues } from "@plane/types";
 
 // ui
 import { CustomSelect } from "@plane/ui";
-// types
-import { ANALYTICS_X_AXIS_VALUES } from "@/constants/analytics";
-// constants
 
 type Props = {
   value: TXAxisValues;
   onChange: (val: string) => void;
   params: IAnalyticsParams;
+  analyticsOptions: { value: TXAxisValues; label: string }[];
 };
 
 export const SelectXAxis: React.FC<Props> = (props) => {
-  const { value, onChange, params } = props;
+  const { value, onChange, params, analyticsOptions } = props;
 
   const router = useRouter();
   const { cycleId, moduleId } = router.query;
@@ -22,11 +20,11 @@ export const SelectXAxis: React.FC<Props> = (props) => {
   return (
     <CustomSelect
       value={value}
-      label={<span>{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label}</span>}
+      label={<span>{analyticsOptions.find((v) => v.value === value)?.label}</span>}
       onChange={onChange}
       maxHeight="lg"
     >
-      {ANALYTICS_X_AXIS_VALUES.map((item) => {
+      {analyticsOptions.map((item) => {
         if (params.segment === item.value) return null;
         if (cycleId && item.value === "issue_cycle__cycle_id") return null;
         if (moduleId && item.value === "issue_module__module_id") return null;

web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx

@@ -182,6 +182,7 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
               updateIssue={updateIssue}
               canEditProperties={canEditProperties}
               viewId={globalViewId}
+              isWorkspaceLevel
             />
             {/* peek overview */}
             <IssuePeekOverview />

web/components/issues/issue-layouts/spreadsheet/issue-row.tsx

@@ -8,8 +8,6 @@ import { IIssueDisplayProperties, TIssue } from "@plane/types";
 import { ControlLink, Tooltip } from "@plane/ui";
 // components
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
-// constants
-import { SPREADSHEET_PROPERTY_LIST } from "@/constants/spreadsheet";
 // helper
 import { cn } from "@/helpers/common.helper";
 // hooks
@@ -37,6 +35,7 @@ interface Props {
   isScrolled: MutableRefObject<boolean>;
   containerRef: MutableRefObject<HTMLTableElement | null>;
   issueIds: string[];
+  spreadsheetColumnsList: (keyof IIssueDisplayProperties)[];
 }
 
 export const SpreadsheetIssueRow = observer((props: Props) => {
@@ -52,6 +51,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
     isScrolled,
     containerRef,
     issueIds,
+    spreadsheetColumnsList,
   } = props;
 
   const [isExpanded, setExpanded] = useState<boolean>(false);
@@ -81,6 +81,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
           isScrolled={isScrolled}
           isExpanded={isExpanded}
           setExpanded={setExpanded}
+          spreadsheetColumnsList={spreadsheetColumnsList}
         />
       </RenderIfVisible>
 
@@ -101,6 +102,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
             isScrolled={isScrolled}
             containerRef={containerRef}
             issueIds={issueIds}
+            spreadsheetColumnsList={spreadsheetColumnsList}
           />
         ))}
     </>
@@ -123,6 +125,7 @@ interface IssueRowDetailsProps {
   isScrolled: MutableRefObject<boolean>;
   isExpanded: boolean;
   setExpanded: Dispatch<SetStateAction<boolean>>;
+  spreadsheetColumnsList: (keyof IIssueDisplayProperties)[];
 }
 
 const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
@@ -138,6 +141,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
     isScrolled,
     isExpanded,
     setExpanded,
+    spreadsheetColumnsList,
   } = props;
   // router
   const router = useRouter();
@@ -255,7 +259,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
         </ControlLink>
       </td>
       {/* Rest of the columns */}
-      {SPREADSHEET_PROPERTY_LIST.map((property) => (
+      {spreadsheetColumnsList.map((property) => (
         <IssueColumn
           key={property}
           displayProperties={displayProperties}

web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx

@@ -1,8 +1,6 @@
 // ui
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 import { LayersIcon } from "@plane/ui";
-// types
-import { SPREADSHEET_PROPERTY_LIST } from "@/constants/spreadsheet";
 // constants
 // components
 import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
@@ -13,10 +11,12 @@ interface Props {
   displayFilters: IIssueDisplayFilterOptions;
   handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
   isEstimateEnabled: boolean;
+  spreadsheetColumnsList: (keyof IIssueDisplayProperties)[];
 }
 
 export const SpreadsheetHeader = (props: Props) => {
-  const { displayProperties, displayFilters, handleDisplayFilterUpdate, isEstimateEnabled } = props;
+  const { displayProperties, displayFilters, handleDisplayFilterUpdate, isEstimateEnabled, spreadsheetColumnsList } =
+    props;
 
   return (
     <thead className="sticky top-0 left-0 z-[12] border-b-[0.5px] border-custom-border-100">
@@ -36,7 +36,7 @@ export const SpreadsheetHeader = (props: Props) => {
           </span>
         </th>
 
-        {SPREADSHEET_PROPERTY_LIST.map((property) => (
+        {spreadsheetColumnsList.map((property) => (
           <SpreadsheetHeaderColumn
             key={property}
             property={property}

web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx

@@ -22,6 +22,7 @@ type Props = {
   canEditProperties: (projectId: string | undefined) => boolean;
   portalElement: React.MutableRefObject<HTMLDivElement | null>;
   containerRef: MutableRefObject<HTMLTableElement | null>;
+  spreadsheetColumnsList: (keyof IIssueDisplayProperties)[];
 };
 
 export const SpreadsheetTable = observer((props: Props) => {
@@ -36,6 +37,7 @@ export const SpreadsheetTable = observer((props: Props) => {
     updateIssue,
     canEditProperties,
     containerRef,
+    spreadsheetColumnsList,
   } = props;
 
   // states
@@ -83,6 +85,7 @@ export const SpreadsheetTable = observer((props: Props) => {
         displayFilters={displayFilters}
         handleDisplayFilterUpdate={handleDisplayFilterUpdate}
         isEstimateEnabled={isEstimateEnabled}
+        spreadsheetColumnsList={spreadsheetColumnsList}
       />
       <tbody>
         {issueIds.map((id) => (
@@ -99,6 +102,7 @@ export const SpreadsheetTable = observer((props: Props) => {
             containerRef={containerRef}
             isScrolled={isScrolled}
             issueIds={issueIds}
+            spreadsheetColumnsList={spreadsheetColumnsList}
           />
         ))}
       </tbody>

web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx

@@ -4,6 +4,7 @@ import { TIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@pl
 // components
 import { Spinner } from "@plane/ui";
 import { SpreadsheetQuickAddIssueForm } from "@/components/issues";
+import { SPREADSHEET_PROPERTY_LIST } from "@/constants/spreadsheet";
 import { useProject } from "@/hooks/store";
 import { SpreadsheetTable } from "./spreadsheet-table";
 // types
@@ -31,6 +32,7 @@ type Props = {
   canEditProperties: (projectId: string | undefined) => boolean;
   enableQuickCreateIssue?: boolean;
   disableIssueCreation?: boolean;
+  isWorkspaceLevel?: boolean;
 };
 
 export const SpreadsheetView: React.FC<Props> = observer((props) => {
@@ -46,6 +48,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
     canEditProperties,
     enableQuickCreateIssue,
     disableIssueCreation,
+    isWorkspaceLevel = false,
   } = props;
   // refs
   const containerRef = useRef<HTMLTableElement | null>(null);
@@ -55,6 +58,14 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
 
   const isEstimateEnabled: boolean = currentProjectDetails?.estimate !== null;
 
+  const spreadsheetColumnsList = isWorkspaceLevel
+    ? SPREADSHEET_PROPERTY_LIST
+    : SPREADSHEET_PROPERTY_LIST.filter((property) => {
+        if (property === "cycle" && !currentProjectDetails?.cycle_view) return false;
+        if (property === "modules" && !currentProjectDetails?.module_view) return false;
+        return true;
+      });
+
   if (!issueIds || issueIds.length === 0)
     return (
       <div className="grid h-full w-full place-items-center">
@@ -77,6 +88,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
           updateIssue={updateIssue}
           canEditProperties={canEditProperties}
           containerRef={containerRef}
+          spreadsheetColumnsList={spreadsheetColumnsList}
         />
       </div>
       <div className="border-t border-custom-border-100">