From b4cc58d5dde89563d5e3acb468550181cef20706 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Thu, 4 Apr 2024 15:49:25 +0530 Subject: [PATCH] [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 --- .../analytics/custom-analytics/select-bar.tsx | 14 ++++++++++++-- .../analytics/custom-analytics/select/segment.tsx | 10 ++++------ .../analytics/custom-analytics/select/x-axis.tsx | 10 ++++------ .../issue-layouts/roots/all-issue-layout-root.tsx | 1 + .../issues/issue-layouts/spreadsheet/issue-row.tsx | 10 +++++++--- .../spreadsheet/spreadsheet-header.tsx | 8 ++++---- .../spreadsheet/spreadsheet-table.tsx | 4 ++++ .../issue-layouts/spreadsheet/spreadsheet-view.tsx | 12 ++++++++++++ 8 files changed, 48 insertions(+), 21 deletions(-) diff --git a/web/components/analytics/custom-analytics/select-bar.tsx b/web/components/analytics/custom-analytics/select-bar.tsx index dc241d1ee..1e4286acd 100644 --- a/web/components/analytics/custom-analytics/select-bar.tsx +++ b/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 = 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 (
= observer((props) => { onChange(val); }} params={params} + analyticsOptions={analyticsOptions} /> )} /> @@ -74,7 +84,7 @@ export const CustomAnalyticsSelectBar: React.FC = observer((props) => { name="segment" control={control} render={({ field: { value, onChange } }) => ( - + )} />
diff --git a/web/components/analytics/custom-analytics/select/segment.tsx b/web/components/analytics/custom-analytics/select/segment.tsx index 07bbb0e37..f9dedc965 100644 --- a/web/components/analytics/custom-analytics/select/segment.tsx +++ b/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 = ({ value, onChange, params }) => { +export const SelectSegment: React.FC = ({ value, onChange, params, analyticsOptions }) => { const router = useRouter(); const { cycleId, moduleId } = router.query; @@ -22,7 +20,7 @@ export const SelectSegment: React.FC = ({ value, onChange, params }) => { value={value} label={ - {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label ?? ( + {analyticsOptions.find((v) => v.value === value)?.label ?? ( No value )} @@ -31,7 +29,7 @@ export const SelectSegment: React.FC = ({ value, onChange, params }) => { maxHeight="lg" > No value - {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; diff --git a/web/components/analytics/custom-analytics/select/x-axis.tsx b/web/components/analytics/custom-analytics/select/x-axis.tsx index a0c21b1b6..39a01f0c4 100644 --- a/web/components/analytics/custom-analytics/select/x-axis.tsx +++ b/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) => { - 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) => { return ( {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label}} + label={{analyticsOptions.find((v) => v.value === value)?.label}} 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; diff --git a/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx b/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx index ef7b02b29..af36b4814 100644 --- a/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx +++ b/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 */} diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx index fc36fdd86..e88352261 100644 --- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx +++ b/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; containerRef: MutableRefObject; 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(false); @@ -81,6 +81,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => { isScrolled={isScrolled} isExpanded={isExpanded} setExpanded={setExpanded} + spreadsheetColumnsList={spreadsheetColumnsList} /> @@ -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; isExpanded: boolean; setExpanded: Dispatch>; + 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) => { {/* Rest of the columns */} - {SPREADSHEET_PROPERTY_LIST.map((property) => ( + {spreadsheetColumnsList.map((property) => ( ) => 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 ( @@ -36,7 +36,7 @@ export const SpreadsheetHeader = (props: Props) => { - {SPREADSHEET_PROPERTY_LIST.map((property) => ( + {spreadsheetColumnsList.map((property) => ( boolean; portalElement: React.MutableRefObject; containerRef: MutableRefObject; + 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} /> {issueIds.map((id) => ( @@ -99,6 +102,7 @@ export const SpreadsheetTable = observer((props: Props) => { containerRef={containerRef} isScrolled={isScrolled} issueIds={issueIds} + spreadsheetColumnsList={spreadsheetColumnsList} /> ))} diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx index 4459d462c..5231e427e 100644 --- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx +++ b/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 = observer((props) => { @@ -46,6 +48,7 @@ export const SpreadsheetView: React.FC = observer((props) => { canEditProperties, enableQuickCreateIssue, disableIssueCreation, + isWorkspaceLevel = false, } = props; // refs const containerRef = useRef(null); @@ -55,6 +58,14 @@ export const SpreadsheetView: React.FC = 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 (
@@ -77,6 +88,7 @@ export const SpreadsheetView: React.FC = observer((props) => { updateIssue={updateIssue} canEditProperties={canEditProperties} containerRef={containerRef} + spreadsheetColumnsList={spreadsheetColumnsList} />