[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/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">