chore: progress section indicator added (#2620)

This commit is contained in:
Anmol Singh Bhatia
2025-02-28 12:02:48 +05:30
committed by GitHub
parent dafd9e0fe2
commit dee8bd6cdf
3 changed files with 35 additions and 4 deletions

View File

@@ -17,6 +17,7 @@ import { SectionWrapper } from "../common/section-wrapper";
type TProgressSectionProps = {
title?: string;
data: TStateAnalytics;
indicatorElement?: React.ReactNode;
};
interface IProgressIndicatorData {
@@ -28,7 +29,7 @@ interface IProgressIndicatorData {
}
export const ProgressSection: FC<TProgressSectionProps> = (props) => {
const { data } = props;
const { data, indicatorElement } = props;
const { t } = useTranslation();
@@ -44,8 +45,9 @@ export const ProgressSection: FC<TProgressSectionProps> = (props) => {
return (
<SectionWrapper>
<div className="flex items-center">
<div className="flex items-center gap-2">
<h3 className="text-base text-custom-text-300 font-medium">{t("common.progress")}</h3>
{indicatorElement && <>{indicatorElement}</>}
</div>
<div className="flex flex-col gap-4">

View File

@@ -4,6 +4,7 @@ import React, { FC } from "react";
import { observer } from "mobx-react";
import { EIssueServiceType } from "@plane/constants";
import { TStateAnalytics } from "@plane/types";
import { InfoIcon, Tooltip } from "@plane/ui";
// hooks
import { useIssueDetail } from "@/hooks/store";
// plane web
@@ -29,5 +30,16 @@ export const EpicProgressSection: FC<Props> = observer((props) => {
if (!shouldRenderProgressSection) return <></>;
return <ProgressSection data={epicAnalytics as TStateAnalytics} />;
return (
<ProgressSection
data={epicAnalytics as TStateAnalytics}
indicatorElement={
<Tooltip tooltipContent="The progress metrics aggregate all child work items from Epics." position="top-left">
<span className="flex items-center justify-center size-4 text-custom-text-300 hover:text-custom-text-200 cursor-pointer">
<InfoIcon className="size-3.5" />
</span>
</Tooltip>
}
/>
);
});

View File

@@ -4,6 +4,7 @@ import React, { FC } from "react";
import omit from "lodash/omit";
import { observer } from "mobx-react";
import { TStateAnalytics } from "@plane/types";
import { InfoIcon, Tooltip } from "@plane/ui";
// plane web
import { ProgressSection } from "@/plane-web/components/common/layout/main/sections/progress-root";
import { useInitiatives } from "@/plane-web/hooks/store/use-initiatives";
@@ -33,5 +34,21 @@ export const InitiativeProgressSection: FC<Props> = observer((props) => {
if (!shouldRenderProgressSection) return <></>;
return <ProgressSection data={initiativeAnalytics as TStateAnalytics} />;
return (
<ProgressSection
data={initiativeAnalytics as TStateAnalytics}
indicatorElement={
<>
<Tooltip
tooltipContent="The progress metrics aggregate all child work items from both Epics and Projects."
position="top-left"
>
<span className="flex items-center justify-center size-4 text-custom-text-300 hover:text-custom-text-200 cursor-pointer">
<InfoIcon className="size-3.5" />
</span>
</Tooltip>
</>
}
/>
);
});