github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: ui fix and validation on estimare on active cycles estimate in project cycles (#4822)

Browse Source
This commit is contained in:
guru_sainath 2024-06-14 16:38:48 +05:30 committed by GitHub
parent 299e220d08
commit cfbc0cf2e1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
web/core/components/cycles/active-cycle/productivity.tsx
View File

@ -1,5 +1,6 @@
import { FC, Fragment, useState } from "react"; import { FC, Fragment, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { observer } from "mobx-react";
import { ICycle, TCyclePlotType } from "@plane/types"; import { ICycle, TCyclePlotType } from "@plane/types";
import { CustomSelect, Spinner } from "@plane/ui"; import { CustomSelect, Spinner } from "@plane/ui";
// components // components
@ -7,7 +8,7 @@ import ProgressChart from "@/components/core/sidebar/progress-chart";
import { EmptyState } from "@/components/empty-state"; import { EmptyState } from "@/components/empty-state";
// constants // constants
import { EmptyStateType } from "@/constants/empty-state"; import { EmptyStateType } from "@/constants/empty-state";
import { useCycle } from "@/hooks/store"; import { useCycle, useProjectEstimates } from "@/hooks/store";
export type ActiveCycleProductivityProps = { export type ActiveCycleProductivityProps = {
workspaceSlug: string; workspaceSlug: string;
@ -20,10 +21,11 @@ const cycleBurnDownChartOptions = [
{ value: "points", label: "Points" }, { value: "points", label: "Points" },
]; ];
export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = (props) => { export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observer((props) => {
const { workspaceSlug, projectId, cycle } = props; const { workspaceSlug, projectId, cycle } = props;
// hooks // hooks
const { getPlotTypeByCycleId, setPlotType, fetchCycleDetails } = useCycle(); const { getPlotTypeByCycleId, setPlotType, fetchCycleDetails } = useCycle();
const { areEstimateEnabledByProjectId } = useProjectEstimates();
// state // state
const [loader, setLoader] = useState(false); const [loader, setLoader] = useState(false);
// derived values // derived values
@ -46,27 +48,31 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = (props)
const completionChartDistributionData = chartDistributionData?.completion_chart || undefined; const completionChartDistributionData = chartDistributionData?.completion_chart || undefined;
return ( return (
<div className="flex flex-col justify-center min-h-[17rem] gap-5 py-4 px-3.5 bg-custom-background-100 border border-custom-border-200 rounded-lg"> <div className="flex flex-col justify-center min-h-[17rem] gap-5 px-3.5 py-4 bg-custom-background-100 border border-custom-border-200 rounded-lg">
<div className="flex items-center justify-between gap-4"> <div className="relative flex items-center justify-between gap-4 -mt-7">
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`}>
<h3 className="text-base text-custom-text-300 font-semibold">Issue burndown</h3> <h3 className="text-base text-custom-text-300 font-semibold">Issue burndown</h3>
</Link> </Link>
<div id="no-redirection" className="flex items-center gap-2"> {areEstimateEnabledByProjectId(projectId) && (
<CustomSelect <>
value={plotType} <CustomSelect
label={<span>{cycleBurnDownChartOptions.find((v) => v.value === plotType)?.label ?? "None"}</span>} value={plotType}
onChange={onChange} label={<span>{cycleBurnDownChartOptions.find((v) => v.value === plotType)?.label ?? "None"}</span>}
maxHeight="lg" onChange={onChange}
> maxHeight="lg"
{cycleBurnDownChartOptions.map((item) => ( className="m-0 p-0"
<CustomSelect.Option key={item.value} value={item.value}> >
{item.label} {cycleBurnDownChartOptions.map((item) => (
</CustomSelect.Option> <CustomSelect.Option key={item.value} value={item.value}>
))} {item.label}
</CustomSelect> </CustomSelect.Option>
{loader && <Spinner className="h-3 w-3" />} ))}
</div> </CustomSelect>
{loader && <Spinner className="h-3 w-3" />}
</>
)}
</div> </div>
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`}>
{cycle.total_issues > 0 ? ( {cycle.total_issues > 0 ? (
<> <>
@ -124,4 +130,4 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = (props)
</Link> </Link>
</div> </div>
); );
}; });