[Stage Plugins] Use METADATA_STAGE_DISPLAY_KEY instead of SkippedBy/ApprovedBy

pkg/model/deployment.go

@@ -22,6 +22,8 @@ import (
 
 const (
 	MetadataKeyDeploymentNotification = "DeploymentNotification"
+	// MetadataKeyStageDisplay is the key of the metadata to be displayed on the deployment detail UI.
+	MetadataKeyStageDisplay = "pipecd/stage-display-metadata"
 )
 
 var notCompletedDeploymentStatuses = []DeploymentStatus{

web/src/components/deployments-detail-page/pipeline/index.tsx

@@ -11,6 +11,7 @@ import { FC, memo, useCallback, useEffect, useState } from "react";
 import {
   METADATA_APPROVED_BY,
   METADATA_SKIPPED_BY,
+  METADATA_STAGE_DISPLAY_KEY,
 } from "~/constants/metadata-keys";
 import { useAppDispatch, useAppSelector } from "~/hooks/redux";
 import { ActiveStage, updateActiveStage } from "~/modules/active-stage";
@@ -95,28 +96,40 @@ export interface PipelineProps {
   deploymentId: string;
 }
 
+// deprecated. Use findDisplayMetadataText for pipedv1.
 const findApprover = (
   metadata: Array<[string, string]>
 ): string | undefined => {
   const res = metadata.find(([key]) => key === METADATA_APPROVED_BY);
 
   if (res) {
-    return res[1];
+    return `Approved by: ${res[1]}`;
   }
 
   return undefined;
 };
 
+// deprecated. Use findDisplayMetadataText for pipedv1.
 const findSkipper = (metadata: Array<[string, string]>): string | undefined => {
   const res = metadata.find(([key]) => key === METADATA_SKIPPED_BY);
 
   if (res) {
-    return res[1];
+    return `Skipped by: ${res[1]}`;
   }
 
   return undefined;
 };
 
+const findDisplayMetadataText = (
+  metadata: Array<[string, string]>
+): string | undefined => {
+  const res = metadata.find(([key]) => key === METADATA_STAGE_DISPLAY_KEY);
+  if (res) {
+    return res[1];
+  }
+  return undefined;
+};
+
 export const Pipeline: FC<PipelineProps> = memo(function Pipeline({
   deploymentId,
 }) {
@@ -205,6 +218,10 @@ export const Pipeline: FC<PipelineProps> = memo(function Pipeline({
               key={`pipeline-${columnIndex}`}
             >
               {stageColumn.map((stage, stageIndex) => {
+                const displayMetadataText = findDisplayMetadataText(
+                  stage.metadataMap
+                );
+                // TODO: remove approver and skipper. they should be included in findDisplayMetadataText for compatibility.
                 const approver = findApprover(stage.metadataMap);
                 const skipper = findSkipper(stage.metadataMap);
                 const isActive = activeStage
@@ -215,6 +232,7 @@ export const Pipeline: FC<PipelineProps> = memo(function Pipeline({
                 const showLine = columnIndex > 0;
                 const showStraightLine = showLine && stageIndex === 0;
                 const showCurvedLine = showLine && stageIndex > 0;
+                // TODO: remove approver. use displayMetadataText instead.
                 const isCurvedLineExtend =
                   showCurvedLine && (Boolean(approver) || isPrevStageLarge);
 
@@ -274,9 +292,11 @@ export const Pipeline: FC<PipelineProps> = memo(function Pipeline({
                         metadata={stage.metadataMap}
                         onClick={handleOnClickStage}
                         active={isActive}
-                        approver={approver}
-                        skipper={skipper}
                         isDeploymentRunning={isRunning}
+                        // TODO: use only displayMetadataText
+                        displayMetadataText={
+                          displayMetadataText || approver || skipper
+                        }
                       />
                     )}
                   </Box>

web/src/components/deployments-detail-page/pipeline/pipeline-stage/index.tsx

@@ -9,12 +9,12 @@ export interface PipelineStageProps {
   status: StageStatus;
   active: boolean;
   isDeploymentRunning: boolean;
-  approver?: string;
-  skipper?: string;
   metadata: [string, string][];
+  displayMetadataText?: string;
   onClick: (stageId: string, stageName: string) => void;
 }
 
+// TODO: Use METADATA_STAGE_DISPLAY_KEY instead for all fields in pipedv1.
 const TRAFFIC_PERCENTAGE_META_KEY = {
   PRIMARY: "primary-percentage",
   CANARY: "canary-percentage",
@@ -68,10 +68,9 @@ export const PipelineStage: FC<PipelineStageProps> = memo(
     status,
     onClick,
     active,
-    approver,
-    skipper,
     metadata,
     isDeploymentRunning,
+    displayMetadataText,
   }) {
     const disabled =
       isDeploymentRunning === false &&
@@ -139,7 +138,7 @@ export const PipelineStage: FC<PipelineStageProps> = memo(
             </Box>
           </Typography>
         </Box>
-        {approver !== undefined ? (
+        {displayMetadataText && (
           <Box
             sx={{
               color: "text.secondary",
@@ -150,22 +149,10 @@ export const PipelineStage: FC<PipelineStageProps> = memo(
             <Typography
               variant="body2"
               color="inherit"
-            >{`Approved by ${approver}`}</Typography>
+            >{`${displayMetadataText}`}</Typography>
           </Box>
-        ) : skipper !== undefined ? (
-          <Box
-            sx={{
-              color: "text.secondary",
-              marginLeft: 4,
-              textAlign: "left",
-            }}
-          >
-            <Typography
-              variant="body2"
-              color="inherit"
-            >{`Skipped by ${skipper}`}</Typography>
-          </Box>
-        ) : null}
+        )}
+        {/* TODO: remove trafficPercentage and use only displayMetadataText */}
         {trafficPercentage && (
           <Box
             sx={{

web/src/constants/metadata-keys.ts

@@ -1,2 +1,5 @@
+// deprecated. use METADATA_STAGE_DISPLAY_KEY in pipedv1.
 export const METADATA_APPROVED_BY = "ApprovedBy";
 export const METADATA_SKIPPED_BY = "SkippedBy";
+
+export const METADATA_STAGE_DISPLAY_KEY = "pipecd/stage-display-metadata";