[WEB-3826] fix: estimate dropdown formatting (#6906)

* * fix: time conversion for estimate dropdown in browse
* chore: updated puncutations for estimates.

* chore: estimate activiy formatting

* chore: estimate activity refactor

web/ce/components/issues/issue-details/issue-properties-activity/helper.tsx

@@ -0,0 +1,3 @@
+import { TIssueActivity } from "@plane/types";
+
+export const renderEstimate = (activity: TIssueActivity, value: string) => value;

web/ce/components/issues/issue-details/issue-properties-activity/index.ts

@@ -1 +1,2 @@
 export * from "./root";
+export * from "./helper";

web/core/components/dropdowns/estimate.tsx

@@ -90,13 +90,15 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
   // router
   const { workspaceSlug } = useParams();
   // store hooks
-  const { currentActiveEstimateIdByProjectId, getProjectEstimates, currentActiveEstimate } = useProjectEstimates();
+  const { currentActiveEstimateIdByProjectId, getProjectEstimates, getEstimateById } = useProjectEstimates();
   const { estimatePointIds, estimatePointById } = useEstimate(
     projectId ? currentActiveEstimateIdByProjectId(projectId) : undefined
   );
 
   const currentActiveEstimateId = projectId ? currentActiveEstimateIdByProjectId(projectId) : undefined;
 
+  const currentActiveEstimate = currentActiveEstimateId ? getEstimateById(currentActiveEstimateId) : undefined;
+
   const options: DropdownOptions = (estimatePointIds ?? [])
     ?.map((estimatePoint) => {
       const currentEstimatePoint = estimatePointById(estimatePoint);

web/core/components/estimates/create/stage-one.tsx

@@ -78,7 +78,7 @@ export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
               <p className="text-base font-medium">{t("project_settings.estimates.create.custom")}</p>
               <p className="text-xs text-custom-text-300">
                 {/* TODO: Translate here */}
-                Add your own <span className="lowercase">{currentEstimateSystem.name}</span> from scratch
+                Add your own <span className="lowercase">{currentEstimateSystem.name}</span> from scratch.
               </p>
             </button>
           </div>
@@ -100,7 +100,7 @@ export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
                       {currentEstimateSystem.templates[name]?.values
                         ?.map((template) =>
                           estimateSystem === EEstimateSystem.TIME
-                            ? convertMinutesToHoursMinutesString(Number(template.value))
+                            ? convertMinutesToHoursMinutesString(Number(template.value)).trim()
                             : template.value
                         )
                         ?.join(", ")}

web/core/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx

@@ -2,10 +2,9 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { Triangle } from "lucide-react";
 // hooks
-import { EEstimateSystem } from "@plane/types/src/enums";
+import { useIssueDetail } from "@/hooks/store";
-import { convertMinutesToHoursMinutesString } from "@/helpers/date-time.helper";
-import { useIssueDetail, useProjectEstimates } from "@/hooks/store";
 // components
+import { renderEstimate } from "@/plane-web/components/issues/issue-details";
 import { IssueActivityBlockComponent, IssueLink } from "./";
 
 type TIssueEstimateActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
@@ -16,18 +15,9 @@ export const IssueEstimateActivity: FC<TIssueEstimateActivity> = observer((props
   const {
     activity: { getActivityById },
   } = useIssueDetail();
-  const { currentActiveEstimate } = useProjectEstimates();
 
   const activity = getActivityById(activityId);
 
-  const renderValue = (value: string) => {
-    const isTinmeEstimate = currentActiveEstimate?.type === EEstimateSystem.TIME;
-    if (isTinmeEstimate) {
-      return convertMinutesToHoursMinutesString(Number(value));
-    }
-    return value;
-  };
-
   if (!activity) return <></>;
 
   return (
@@ -38,7 +28,9 @@ export const IssueEstimateActivity: FC<TIssueEstimateActivity> = observer((props
     >
       <>
         {activity.new_value ? `set the estimate to ` : `removed the estimate `}
-        {activity.new_value ? renderValue(activity.new_value) : renderValue(activity?.old_value || "")}
+        {activity.new_value
+          ? renderEstimate(activity, activity.new_value)
+          : renderEstimate(activity, activity?.old_value || "")}
         {showIssue && (activity.new_value ? ` to ` : ` from `)}
         {showIssue && <IssueLink activityId={activityId} />}.
       </>

web/core/components/issues/issue-detail/issue-activity/helper.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useTranslation } from "@plane/i18n";
-import { TCommentsOperations, TIssueComment } from "@plane/types";
+import { TCommentsOperations, TIssueActivity, TIssueComment } from "@plane/types";
 import { EFileAssetType } from "@plane/types/src/enums";
 import { setToast, TOAST_TYPE } from "@plane/ui";
 import { formatTextList } from "@/helpers/issue.helper";

web/core/store/estimates/project-estimate.store.ts

@@ -1,7 +1,6 @@
 import orderBy from "lodash/orderBy";
 import set from "lodash/set";
 import unset from "lodash/unset";
-import update from "lodash/update";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
 // types
@@ -39,7 +38,7 @@ export interface IProjectEstimateStore {
     projectId: string,
     loader?: TEstimateLoader
   ) => Promise<IEstimateType[] | undefined>;
-  getEstimateById: (workspaceSlug: string, projectId: string, estimateId: string) => Promise<IEstimateType | undefined>;
+  getEstimateById: (estimateId: string) => IEstimate | undefined;
   createEstimate: (
     workspaceSlug: string,
     projectId: string,
@@ -241,44 +240,10 @@ export class ProjectEstimateStore implements IProjectEstimateStore {
   };
 
   /**
-   * @description update an estimate for a project
-   * @param { string } workspaceSlug
-   * @param { string } projectId
    * @param { string } estimateId
    * @returns IEstimateType | undefined
    */
-  getEstimateById = async (
+  getEstimateById = (estimateId: string): IEstimate | undefined => this.estimates[estimateId];
-    workspaceSlug: string,
-    projectId: string,
-    estimateId: string
-  ): Promise<IEstimateType | undefined> => {
-    try {
-      this.error = undefined;
-
-      const estimate = await estimateService.fetchEstimateById(workspaceSlug, projectId, estimateId);
-      if (estimate) {
-        runInAction(() => {
-          if (estimate.id)
-            update(this.estimates, [estimate.id], (estimateStore) => {
-              if (estimateStore) estimateStore.updateEstimate(estimate);
-              else
-                return new Estimate(this.store, {
-                  ...estimate,
-                  type: estimate.type?.toLowerCase() as TEstimateSystemKeys,
-                });
-            });
-        });
-      }
-
-      return estimate;
-    } catch (error) {
-      this.error = {
-        status: "error",
-        message: "Error fetching estimate by id",
-      };
-      throw error;
-    }
-  };
 
   /**
    * @description create an estimate for a project

web/ee/components/issues/issue-details/issue-properties-activity/helper.tsx

@@ -0,0 +1 @@
+export * from "ce/components/issues/issue-details/issue-properties-activity";