feat(ui): Various improvements to Promote Subscribers UX (#1961)

Signed-off-by: Remington Breeze <remington@breeze.software> Co-authored-by: Hidde Beydals <hiddeco@users.noreply.github.com>
akuity · May 6, 2024 · 13ebe88 · 13ebe88
1 parent 3a30cf8
commit 13ebe88
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 27 deletions.
diff --git a/ui/src/features/freightline/freightline-header.tsx b/ui/src/features/freightline/freightline-header.tsx
@@ -17,11 +17,13 @@ import { FreightlineAction } from '../project/pipelines/types';
 export const FreightlineHeader = ({
   promotingStage,
   action,
-  cancel
+  cancel,
+  downstreamSubs
 }: {
   promotingStage?: Stage;
   action?: FreightlineAction;
   cancel: () => void;
+  downstreamSubs?: string[];
 }) => {
   const stageColorMap = useContext(ColorContext);
 
@@ -46,7 +48,11 @@ export const FreightlineHeader = ({
             <FontAwesomeIcon icon={getIcon(action)} className='mr-2' />
             {promotingStage && action != 'manualApproval' ? (
               <>
-                PROMOTING {action === 'promoteSubscribers' ? 'SUBSCRIBERS OF' : ''} STAGE:{' '}
+                PROMOTING{' '}
+                {action === 'promoteSubscribers'
+                  ? `TO ${(downstreamSubs || []).length} DOWNSTREAM SUBSCRIBERS (${downstreamSubs?.join(', ')}) OF`
+                  : ''}{' '}
+                STAGE :{' '}
                 <div
                   className='px-2 py-1 rounded text-white ml-2 font-semibold'
                   style={{

diff --git a/ui/src/features/project/pipelines/nodes/stage-node.tsx b/ui/src/features/project/pipelines/nodes/stage-node.tsx
@@ -143,27 +143,29 @@ export const Nodule = (props: {
   const noduleHeight = 30;
   const top = props.nodeHeight / 2 - noduleHeight / 2;
   return (
-    <div
-      onClick={(e) => {
-        e.stopPropagation();
-        if (props.onClick) {
-          props.onClick();
-        }
-      }}
-      style={{
-        top: top,
-        height: noduleHeight,
-        width: noduleHeight,
-        left: props.begin ? -noduleHeight / 2 : 'auto',
-        right: props.begin ? 'auto' : -noduleHeight / 2
-      }}
-      className={`cursor-pointer select-none z-10 flex items-center justify-center hover:text-white border border-sky-300 border-solid hover:bg-blue-400 absolute rounded-lg ${
-        props.selected ? 'text-white bg-blue-400' : 'bg-white text-blue-500'
-      }`}
-    >
-      <FontAwesomeIcon
-        icon={props.icon ? props.icon : props.begin ? faBullseye : faTruckArrowRight}
-      />
-    </div>
+    <Tooltip title={props.begin ? 'Promote into Stage' : 'Promote to downstream Subscribers'}>
+      <div
+        onClick={(e) => {
+          e.stopPropagation();
+          if (props.onClick) {
+            props.onClick();
+          }
+        }}
+        style={{
+          top: top,
+          height: noduleHeight,
+          width: noduleHeight,
+          left: props.begin ? -noduleHeight / 2 : 'auto',
+          right: props.begin ? 'auto' : -noduleHeight / 2
+        }}
+        className={`cursor-pointer select-none z-10 flex items-center justify-center hover:text-white border border-sky-300 border-solid hover:bg-blue-400 absolute rounded-lg ${
+          props.selected ? 'text-white bg-blue-400' : 'bg-white text-blue-500'
+        }`}
+      >
+        <FontAwesomeIcon
+          icon={props.icon ? props.icon : props.begin ? faBullseye : faTruckArrowRight}
+        />
+      </div>
+    </Tooltip>
   );
 };
diff --git a/ui/src/features/project/pipelines/pipelines.tsx b/ui/src/features/project/pipelines/pipelines.tsx
@@ -347,7 +347,7 @@ export const Pipelines = () => {
       }
     });
 
-    layout(g, { labelpos: 'c' });
+    layout(g, { lablepos: 'c' });
 
     const nodes = myNodes.map((node, index) => {
       const gNode = g.node(String(index));
@@ -526,6 +526,7 @@ export const Pipelines = () => {
 
   React.useEffect(() => {
     const stagesPerFreight: { [key: string]: Stage[] } = {};
+    const subscribersByStage = {} as { [key: string]: Stage[] };
     (data?.stages || []).forEach((stage) => {
       const items = stagesPerFreight[stage.status?.currentFreight?.name || ''] || [];
       stagesPerFreight[stage.status?.currentFreight?.name || ''] = [...items, stage];
@@ -596,6 +597,9 @@ export const Pipelines = () => {
             setManuallyApproving(undefined);
             setConfirmingPromotion(undefined);
           }}
+          downstreamSubs={(subscribersByStage[promotingStage?.metadata?.name || ''] || []).map(
+            (s) => s.metadata?.name || ''
+          )}
         />
         <Freightline promotingStage={promotingStage} setPromotingStage={setPromotingStage}>
           <>
@@ -829,8 +833,7 @@ export const Pipelines = () => {
                             fullFreightById[node.data?.status?.currentFreight?.name || '']
                           }
                           hasNoSubscribers={
-                            (subscribersByStage[node?.data?.metadata?.name || ''] || []).length ===
-                            0
+                            (subscribersByStage[node?.data?.metadata?.name || ''] || []).length <= 0
                           }
                           onPromoteClick={(type: FreightlineAction) => {
                             if (promotingStage?.metadata?.name === node.data?.metadata?.name) {
@@ -839,6 +842,9 @@ export const Pipelines = () => {
                             } else {
                               setPromotingStage(node.data);
                               setFreightAction(type);
+                              if (type === 'promoteSubscribers') {
+                                setConfirmingPromotion(node.data?.status?.currentFreight?.name);
+                              }
                             }
                             setConfirmingPromotion(undefined);
                           }}