110 lines
5.0 KiB
TypeScript
110 lines
5.0 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import { observer } from "mobx-react";
|
|
import { useTranslation } from "@plane/i18n";
|
|
import { Badge } from "@plane/propel/badge";
|
|
import type { TExternalContourRequest } from "@plane/types";
|
|
import { Avatar } from "@plane/ui";
|
|
import { renderFormattedDate } from "@plane/utils";
|
|
import { ExternalContourStatePill } from "./state-pill";
|
|
|
|
type Props = {
|
|
contourRequest: TExternalContourRequest;
|
|
};
|
|
|
|
export const ExternalContoursRequestTraceability = observer(function ExternalContoursRequestTraceability(props: Props) {
|
|
const { contourRequest } = props;
|
|
const { t } = useTranslation();
|
|
|
|
const issue = contourRequest.issue;
|
|
const requestedByName = contourRequest.requested_by_name || issue.created_by_detail?.display_name || t("common.none");
|
|
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 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");
|
|
|
|
return (
|
|
<div className="rounded-lg border border-subtle bg-surface-2 p-4">
|
|
<div className="mb-3">
|
|
<h5 className="text-body-sm-medium">{t("external_contours_page.traceability.title")}</h5>
|
|
<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="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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
</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_at")}</div>
|
|
<div className="mt-1 text-13 font-medium text-secondary">
|
|
{requestedAt ? renderFormattedDate(requestedAt) : t("common.none")}
|
|
</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.last_updated")}</div>
|
|
<div className="mt-1 text-13 font-medium text-secondary">
|
|
{lastUpdatedAt ? renderFormattedDate(lastUpdatedAt) : t("common.none")}
|
|
</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.linked_item")}</div>
|
|
<div className="mt-1 flex items-center gap-2">
|
|
<Badge variant="neutral">{targetIssueKey}</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|