mirror of
https://github.com/makeplane/plane.git
synced 2026-07-12 21:40:18 +02:00
chore: progress section indicator added (#2620)
This commit is contained in:
committed by
GitHub
parent
dafd9e0fe2
commit
dee8bd6cdf
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user