feat(web): make worklog editing reachable, drop the dead paths

Review found the update path fully built and completely unreachable: the
API had PATCH, the store had updateWorklog with optimistic update and
rollback, the root store delegated it, and the operations helper exposed
`update` with its own toasts and translations — but no component ever
called any of it. Roughly forty lines and four i18n keys existed to serve
a flow with no way in, and the rollback branch was both unreachable and
untested.

Correcting a logged duration matters more here than in most features,
because the number ends up on an invoice, so this builds the UI rather
than deleting the path. The existing form serves both modes: the fields
and validation are identical and only the final call differs, so editing
prefills from the entry and swaps create for update.

Removes two members nothing read — getSummaryByIssueId and the
issueWorklogs computed. Both mirrored link.store.ts rather than answering
a need.

Browser coverage extended to the correction flow, asserting the value the
server stored rather than the text the row renders: a duration re-entered
as "2h 15m" has to arrive as 135.

Claude-Session: https://claude.ai/code/session_01XvVRm84RrH9APR25g8pFXt

Author: dnplkndll

apps/web/core/components/issues/issue-detail-widgets/worklogs/log-time-form.tsx

@@ -9,13 +9,22 @@ import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { Input } from "@plane/propel/input";
-import { parseDurationToMinutes } from "@plane/utils";
+import { formatMinutesAsDuration, parseDurationToMinutes } from "@plane/utils";
 // local imports
 import type { TWorklogOperations } from "./helper";
 
 type Props = {
   worklogOperations: TWorklogOperations;
   onClose: () => void;
+  /** Present when correcting an existing entry rather than adding one. The
+   *  same form serves both: the fields and validation are identical, and only
+   *  the call at the end differs. */
+  editing?: {
+    worklogId: string;
+    duration: number;
+    loggedAt: string;
+    description: string;
+  };
 };
 
 /** `new Date()` in the browser is local time; `toISOString` is UTC and would
@@ -28,13 +37,13 @@ const todayAsISODate = (): string => {
 };
 
 export function LogTimeForm(props: Props) {
-  const { worklogOperations, onClose } = props;
+  const { worklogOperations, onClose, editing } = props;
   // i18n
   const { t } = useTranslation();
-  // state
-  const [duration, setDuration] = useState("");
-  const [loggedAt, setLoggedAt] = useState(todayAsISODate);
-  const [description, setDescription] = useState("");
+  // state — prefilled from the entry being corrected, blank when adding.
+  const [duration, setDuration] = useState(editing ? formatMinutesAsDuration(editing.duration) : "");
+  const [loggedAt, setLoggedAt] = useState(editing ? editing.loggedAt : todayAsISODate);
+  const [description, setDescription] = useState(editing ? editing.description : "");
   const [error, setError] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const durationRef = useRef<HTMLInputElement>(null);
@@ -59,9 +68,14 @@ export function LogTimeForm(props: Props) {
     setError(null);
     setIsSubmitting(true);
     try {
-      await worklogOperations.create({ duration: minutes, logged_at: loggedAt, description });
-      setDuration("");
-      setDescription("");
+      const payload = { duration: minutes, logged_at: loggedAt, description };
+      if (editing) {
+        await worklogOperations.update(editing.worklogId, payload);
+      } else {
+        await worklogOperations.create(payload);
+        setDuration("");
+        setDescription("");
+      }
       onClose();
     } catch {
       // The operation helper has already raised a toast carrying the API's
@@ -75,7 +89,7 @@ export function LogTimeForm(props: Props) {
     <form
       onSubmit={handleSubmit}
       className="mt-2 flex flex-col gap-2 rounded-sm border-[0.5px] border-subtle bg-surface-2 p-3"
-      data-testid="worklog-form"
+      data-testid={editing ? "worklog-edit-form" : "worklog-form"}
     >
       <div className="flex flex-wrap items-start gap-2">
         <div className="flex flex-col gap-1">
@@ -118,7 +132,7 @@ export function LogTimeForm(props: Props) {
       </div>
       <div className="flex items-center gap-2">
         <Button type="submit" variant="primary" size="base" loading={isSubmitting} data-testid="worklog-submit">
-          {isSubmitting ? t("common.adding") : t("worklogs.form.submit")}
+          {isSubmitting ? t("common.adding") : editing ? t("common.save") : t("worklogs.form.submit")}
         </Button>
         <Button type="button" variant="secondary" size="base" onClick={onClose}>
           {t("common.cancel")}

apps/web/core/components/issues/issue-detail-widgets/worklogs/worklog-item.tsx

@@ -4,12 +4,12 @@
  * See the LICENSE file for details.
  */
 
-import React from "react";
+import React, { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Avatar } from "@plane/propel/avatar";
-import { TrashIcon } from "@plane/propel/icons";
+import { EditIcon, TrashIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TIssueServiceType } from "@plane/types";
 import { formatMinutesAsDuration, renderFormattedDate } from "@plane/utils";
@@ -19,6 +19,7 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 import { useUser } from "@/hooks/store/user";
 // local imports
 import type { TWorklogOperations } from "./helper";
+import { LogTimeForm } from "./log-time-form";
 
 type Props = {
   worklogId: string;
@@ -37,6 +38,8 @@ export const WorklogItem = observer(function WorklogItem(props: Props) {
   } = useIssueDetail(issueServiceType);
   const { data: currentUser } = useUser();
   const { isMobile } = usePlatformOS();
+  // state
+  const [isEditing, setIsEditing] = useState(false);
   // derived values
   const worklog = getWorklogById(worklogId);
 
@@ -45,9 +48,24 @@ export const WorklogItem = observer(function WorklogItem(props: Props) {
   // The API refuses an edit or delete from anyone but the author, so hiding the
   // control keeps the UI honest about what it will let you do.
   const isAuthor = !!currentUser?.id && currentUser.id === worklog.logged_by;
-  const canDelete = isAuthor && !disabled;
+  const canModify = isAuthor && !disabled;
   const author = worklog.logged_by_detail;
 
+  if (isEditing) {
+    return (
+      <LogTimeForm
+        worklogOperations={worklogOperations}
+        onClose={() => setIsEditing(false)}
+        editing={{
+          worklogId: worklog.id,
+          duration: worklog.duration,
+          loggedAt: worklog.logged_at,
+          description: worklog.description ?? "",
+        }}
+      />
+    );
+  }
+
   return (
     <div
       className="group flex h-10 flex-shrink-0 items-center justify-between gap-3 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-3 hover:bg-layer-1"
@@ -76,7 +94,18 @@ export const WorklogItem = observer(function WorklogItem(props: Props) {
         <span className="text-caption-sm-regular text-placeholder">
           {author?.display_name ?? t("common.unknown_user")}
         </span>
-        {canDelete && (
+        {canModify && (
+          <button
+            type="button"
+            aria-label={t("worklogs.edit")}
+            className="opacity-0 transition-opacity group-hover:opacity-100"
+            onClick={() => setIsEditing(true)}
+            data-testid="worklog-edit"
+          >
+            <EditIcon className="size-3.5 text-tertiary hover:text-primary" />
+          </button>
+        )}
+        {canModify && (
           <button
             type="button"
             aria-label={t("worklogs.delete")}

apps/web/core/store/issue/issue-details/worklog.store.ts

@@ -5,14 +5,13 @@
  */
 
 import { set } from "lodash-es";
-import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { action, makeObservable, observable, runInAction } from "mobx";
 // plane imports
 import type {
   TIssueWorklog,
   TIssueWorklogEditableFields,
   TIssueWorklogIdMap,
   TIssueWorklogMap,
-  TIssueWorklogSummary,
   TIssueWorklogSummaryMap,
 } from "@plane/types";
 // services
@@ -44,12 +43,9 @@ export interface IIssueWorklogStore extends IIssueWorklogStoreActions {
   worklogs: TIssueWorklogIdMap;
   worklogMap: TIssueWorklogMap;
   summaryMap: TIssueWorklogSummaryMap;
-  // computed
-  issueWorklogs: string[] | undefined;
   // helper methods
   getWorklogsByIssueId: (issueId: string) => string[] | undefined;
   getWorklogById: (worklogId: string) => TIssueWorklog | undefined;
-  getSummaryByIssueId: (issueId: string) => TIssueWorklogSummary | undefined;
   getTotalDurationByIssueId: (issueId: string) => number;
 }
 
@@ -69,8 +65,6 @@ export class IssueWorklogStore implements IIssueWorklogStore {
       worklogs: observable,
       worklogMap: observable,
       summaryMap: observable,
-      // computed
-      issueWorklogs: computed,
       // actions
       addWorklogs: action.bound,
       fetchWorklogs: action,
@@ -84,13 +78,6 @@ export class IssueWorklogStore implements IIssueWorklogStore {
     this.issueWorklogService = new IssueWorklogService();
   }
 
-  // computed
-  get issueWorklogs() {
-    const issueId = this.rootIssueDetailStore.peekIssue?.issueId;
-    if (!issueId) return undefined;
-    return this.worklogs[issueId] ?? undefined;
-  }
-
   // helper methods
   getWorklogsByIssueId = (issueId: string) => {
     if (!issueId) return undefined;
@@ -102,11 +89,6 @@ export class IssueWorklogStore implements IIssueWorklogStore {
     return this.worklogMap[worklogId] ?? undefined;
   };
 
-  getSummaryByIssueId = (issueId: string) => {
-    if (!issueId) return undefined;
-    return this.summaryMap[issueId] ?? undefined;
-  };
-
   /**
    * The total the widget shows. Preferring the server summary keeps the number
    * honest when the list is partial, and falling back to the loaded entries

e2e/worklogs.ui.spec.ts

@@ -129,4 +129,42 @@ test.describe("recording time from the work item page", () => {
       await context.close();
     }
   });
+
+  test("an entry can be corrected in place", async ({ browser }) => {
+    const { context, page, logTime } = await openWorkItem(browser);
+
+    try {
+      const rows = page.getByTestId("worklog-item");
+      const before = await rows.count();
+
+      await logTime.click();
+      await page.getByTestId("worklog-duration-input").fill("30m");
+      await page.getByTestId("worklog-description-input").fill("Initial estimate");
+      await page.getByTestId("worklog-submit").click();
+      await expect(rows).toHaveCount(before + 1);
+
+      // Edit only appears on hover, and only for the author.
+      await rows.first().hover();
+      await page.getByTestId("worklog-edit").first().click();
+
+      // The form opens prefilled — the round trip through the formatter is the
+      // part worth asserting, since minutes are stored but durations are typed.
+      const form = page.getByTestId("worklog-edit-form");
+      await expect(form).toBeVisible();
+      await expect(page.getByTestId("worklog-duration-input")).toHaveValue("30m");
+
+      await page.getByTestId("worklog-duration-input").fill("2h 15m");
+      await page.getByTestId("worklog-submit").click();
+
+      await expect(page.getByTestId("worklog-edit-form")).toHaveCount(0);
+      await expect(page.getByTestId("worklog-duration").first()).toHaveText("2h 15m");
+
+      // What the server stored, not just what the row renders.
+      const logs = await client.get(seed.worklogsUrl);
+      const edited = logs.find((l: any) => l.description === "Initial estimate");
+      expect(edited.duration).toBe(135);
+    } finally {
+      await context.close();
+    }
+  });
 });

packages/i18n/src/locales/en/common.json

@@ -871,6 +871,7 @@
   "worklogs": {
     "title": "Worklogs",
     "log_time": "Log time",
+    "edit": "Edit worklog",
     "delete": "Delete worklog",
     "empty": "No time logged on this work item yet.",
     "form": {