thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

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

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

* chore: project analytics cycle and module feature toggle validation added
This commit is contained in:
Anmol Singh Bhatia 2024-04-04 15:49:25 +05:30 committed by GitHub
parent 71b73000d2
commit b4cc58d5dd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 48 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/components/analytics/custom-analytics/select-bar.tsx
View File

@ -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>

10
web/components/analytics/custom-analytics/select/segment.tsx
View File

@ -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;

10
web/components/analytics/custom-analytics/select/x-axis.tsx
View File

@ -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;

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

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

10
web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
View File

@ -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}

8
web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
View File

@ -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}

4
web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
View File

@ -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>

12
web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
View File

@ -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">