ФУНКЦИИ - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: source-side редактирование открытого внешнего запроса и перестройка маршрутизации

plane-src/apps/web/ce/components/projects/external-contours/request-traceability.tsx

@@ -4,6 +4,7 @@
  * See the LICENSE file for details.
  */
 
+import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import { Badge } from "@plane/propel/badge";
@@ -16,6 +17,13 @@ type Props = {
   contourRequest: TExternalContourRequest;
 };
 
+const TraceabilityCell = ({ label, children }: { label: string; children: ReactNode }) => (
+  <div className="rounded-md border border-subtle bg-surface-1 p-3">
+    <div className="text-11 font-medium text-tertiary">{label}</div>
+    <div className="mt-1 min-h-6 text-13 font-medium text-secondary">{children}</div>
+  </div>
+);
+
 export const ExternalContoursRequestTraceability = observer(function ExternalContoursRequestTraceability(props: Props) {
   const { contourRequest } = props;
   const { t } = useTranslation();
@@ -25,16 +33,13 @@ export const ExternalContoursRequestTraceability = observer(function ExternalCon
   const requestedAt = contourRequest.requested_at || contourRequest.created_at;
   const lastUpdatedAt = issue.updated_at || contourRequest.updated_at;
   const targetProjectName = contourRequest.target_project_name || issue.project_detail?.name || t("common.none");
+  const sourceProjectName = contourRequest.source_project_name || t("common.none");
   const sourceDecision =
     contourRequest.source_decision === "accepted"
       ? t("external_contours_page.traceability.source_decision_accepted")
       : t("external_contours_page.traceability.source_decision_pending");
-  const targetIssueKey =
-    issue.project_detail?.identifier && issue.sequence_id
-      ? `${issue.project_detail.identifier}-${issue.sequence_id}`
-      : issue.sequence_id
-        ? `#${issue.sequence_id}`
-        : t("common.none");
+  const dueDate = issue.target_date ? renderFormattedDate(issue.target_date) : t("common.none");
+  const assigneeDetails = issue.assignee_details ?? [];
 
   return (
     <div className="rounded-lg border border-subtle bg-surface-2 p-4">
@@ -43,66 +48,56 @@ export const ExternalContoursRequestTraceability = observer(function ExternalCon
         <p className="mt-1 text-12 text-tertiary">{t("external_contours_page.traceability.description")}</p>
       </div>
 
-      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
-        <div className="rounded-md border border-subtle bg-surface-1 p-3">
-          <div className="text-11 font-medium text-tertiary">{t("external_contours_page.traceability.source_contour")}</div>
-          <div className="mt-1 text-13 font-medium text-secondary">
-            {contourRequest.source_project_name || t("common.none")}
-          </div>
-        </div>
+      <div className="grid gap-3 md:grid-cols-3">
+        <TraceabilityCell label={t("external_contours_page.traceability.source_contour")}>
+          {sourceProjectName}
+        </TraceabilityCell>
 
-        <div className="rounded-md border border-subtle bg-surface-1 p-3">
-          <div className="text-11 font-medium text-tertiary">{t("external_contours_page.traceability.target_contour")}</div>
-          <div className="mt-1 flex items-center gap-2">
-            <Badge variant="neutral">{targetProjectName}</Badge>
-          </div>
-        </div>
+        <TraceabilityCell label={t("external_contours_page.traceability.target_contour")}>
+          <Badge variant="neutral">{targetProjectName}</Badge>
+        </TraceabilityCell>
 
-        <div className="rounded-md border border-subtle bg-surface-1 p-3">
-          <div className="text-11 font-medium text-tertiary">{t("external_contours_page.traceability.status")}</div>
-          <div className="mt-1">
-            <ExternalContourStatePill request={contourRequest} />
-          </div>
-        </div>
+        <TraceabilityCell label={t("external_contours_page.traceability.status")}>
+          <ExternalContourStatePill request={contourRequest} />
+        </TraceabilityCell>
 
-        <div className="rounded-md border border-subtle bg-surface-1 p-3">
-          <div className="text-11 font-medium text-tertiary">{t("external_contours_page.traceability.source_decision")}</div>
-          <div className="mt-1 text-13 font-medium text-secondary">{sourceDecision}</div>
-        </div>
-
-        <div className="rounded-md border border-subtle bg-surface-1 p-3">
-          <div className="text-11 font-medium text-tertiary">{t("external_contours_page.traceability.requested_by")}</div>
-          <div className="mt-1 flex items-center gap-2">
-            <Avatar
-              src={issue.created_by_detail?.avatar_url || ""}
-              name={requestedByName}
-              size="md"
-              showTooltip
-            />
-            <span className="text-13 font-medium text-secondary">{requestedByName}</span>
+        <TraceabilityCell label={t("external_contours_page.traceability.requested_by")}>
+          <div className="flex items-center gap-2">
+            <Avatar src={issue.created_by_detail?.avatar_url || ""} name={requestedByName} size="md" showTooltip />
+            <span>{requestedByName}</span>
           </div>
-        </div>
+        </TraceabilityCell>
 
-        <div className="rounded-md border border-subtle bg-surface-1 p-3">
-          <div className="text-11 font-medium text-tertiary">{t("external_contours_page.traceability.requested_at")}</div>
-          <div className="mt-1 text-13 font-medium text-secondary">
-            {requestedAt ? renderFormattedDate(requestedAt) : t("common.none")}
-          </div>
-        </div>
+        <TraceabilityCell label={t("external_contours_page.traceability.assignee")}>
+          {assigneeDetails.length > 0 ? (
+            <div className="flex flex-wrap items-center gap-2">
+              {assigneeDetails.map((assignee) => (
+                <div key={assignee.id} className="flex items-center gap-2 rounded-sm border border-strong px-2 py-1">
+                  <Avatar src={assignee.avatar_url || ""} name={assignee.display_name || t("common.none")} size="sm" showTooltip />
+                  <span className="text-12 font-medium text-secondary">{assignee.display_name}</span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            t("external_contours_page.list.unassigned")
+          )}
+        </TraceabilityCell>
 
-        <div className="rounded-md border border-subtle bg-surface-1 p-3">
-          <div className="text-11 font-medium text-tertiary">{t("external_contours_page.traceability.last_updated")}</div>
-          <div className="mt-1 text-13 font-medium text-secondary">
-            {lastUpdatedAt ? renderFormattedDate(lastUpdatedAt) : t("common.none")}
-          </div>
-        </div>
+        <TraceabilityCell label={t("external_contours_page.traceability.source_decision")}>
+          {sourceDecision}
+        </TraceabilityCell>
 
-        <div className="rounded-md border border-subtle bg-surface-1 p-3">
-          <div className="text-11 font-medium text-tertiary">{t("external_contours_page.traceability.linked_item")}</div>
-          <div className="mt-1 flex items-center gap-2">
-            <Badge variant="neutral">{targetIssueKey}</Badge>
-          </div>
-        </div>
+        <TraceabilityCell label={t("external_contours_page.traceability.requested_at")}>
+          {requestedAt ? renderFormattedDate(requestedAt) : t("common.none")}
+        </TraceabilityCell>
+
+        <TraceabilityCell label={t("external_contours_page.traceability.due_date")}>
+          {dueDate}
+        </TraceabilityCell>
+
+        <TraceabilityCell label={t("external_contours_page.traceability.last_updated")}>
+          {lastUpdatedAt ? renderFormattedDate(lastUpdatedAt) : t("common.none")}
+        </TraceabilityCell>
       </div>
     </div>
   );