chore: backport recent changes from main to release-0.5 (#1762)

Signed-off-by: Remington Breeze <remington@breeze.software>
Signed-off-by: Sunghoon Kang <hoon@akuity.io>
Signed-off-by: Kent Rancourt <kent.rancourt@gmail.com>
Co-authored-by: Remington Breeze <remington@breeze.software>
Co-authored-by: Sunghoon Kang <hoon@akuity.io>

internal/cli/cmd/promote/promote.go

@@ -180,7 +180,7 @@ func (o *promotionOptions) run(ctx context.Context) error {
 		_ = printer.PrintObj(res.Msg.GetPromotion(), o.IOStreams.Out)
 		return nil
 	case o.SubscribersOf != "":
-		res, promoteErr := kargoSvcCli.PromoteToStageSubscribers(
+		res, err := kargoSvcCli.PromoteToStageSubscribers(
 			ctx,
 			connect.NewRequest(
 				&v1alpha1.PromoteToStageSubscribersRequest{
@@ -191,11 +191,13 @@ func (o *promotionOptions) run(ctx context.Context) error {
 				},
 			),
 		)
-
+		if err != nil {
+			return fmt.Errorf("promote stage subscribers: %w", err)
+		}
 		for _, p := range res.Msg.GetPromotions() {
 			_ = printer.PrintObj(p, o.IOStreams.Out)
 		}
-		return promoteErr
+		return nil
 	}
 	return nil
 }

ui/src/features/freightline/freight-item.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Freight } from '@ui/gen/v1alpha1/generated_pb';
 
 import { FreightLabel } from '../common/freight-label';
-import { FreightMode } from '../project/project-details/types';
+import { FreightMode } from '../project/pipelines/types';
 
 import styles from './freightline.module.less';
 

ui/src/features/freightline/freightline-header.tsx

@@ -12,7 +12,7 @@ import { useContext } from 'react';
 import { ColorContext } from '@ui/context/colors';
 import { Stage } from '@ui/gen/v1alpha1/generated_pb';
 
-import { FreightlineAction } from '../project/project-details/types';
+import { FreightlineAction } from '../project/pipelines/types';
 
 export const FreightlineHeader = ({
   promotingStage,

ui/src/features/project/analysis-templates/analysis-templates-list.tsx

@@ -1,7 +1,7 @@
 import { useMutation, useQuery } from '@connectrpc/connect-query';
-import { faChartBar, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Space, Table } from 'antd';
+import { Button, Table } from 'antd';
 import { format } from 'date-fns';
 import { useParams } from 'react-router-dom';
 
@@ -29,19 +29,6 @@ export const AnalysisTemplatesList = () => {
 
   return (
     <div className='p-4'>
-      <h1 className='pl-2 text-lg font-semibold flex items-center mb-4'>
-        <FontAwesomeIcon icon={faChartBar} className='mr-2' />
-        Analysis Templates
-        <Button
-          type='primary'
-          className='ml-auto'
-          icon={<FontAwesomeIcon icon={faPlus} />}
-          onClick={() => showCreate()}
-        >
-          New
-        </Button>
-      </h1>
-
       <Table<AnalysisTemplate>
         dataSource={data?.analysisTemplates}
         pagination={{ hideOnSinglePage: true }}
@@ -58,10 +45,23 @@ export const AnalysisTemplatesList = () => {
         <Table.Column<AnalysisTemplate> title='Name' dataIndex={['metadata', 'name']} />
         <Table.Column<AnalysisTemplate>
           width={100}
+          title={
+            <div className='w-full'>
+              <Button
+                type='primary'
+                className='ml-auto text-xs font-semibold'
+                icon={<FontAwesomeIcon icon={faPlus} />}
+                onClick={() => showCreate()}
+              >
+                ADD TEMPLATE
+              </Button>
+            </div>
+          }
           render={(_, template) => (
-            <Space>
+            <div className='w-full flex'>
               <Button
                 icon={<FontAwesomeIcon icon={faTrash} />}
+                className='ml-auto'
                 danger
                 loading={isDeleting}
                 onClick={() => {
@@ -86,7 +86,7 @@ export const AnalysisTemplatesList = () => {
               >
                 Delete
               </Button>
-            </Space>
+            </div>
           )}
         />
       </Table>

ui/src/features/project/credentials/credentials-list.tsx

@@ -2,7 +2,6 @@ import { useMutation, useQuery } from '@connectrpc/connect-query';
 import {
   faCode,
   faExternalLink,
-  faIdBadge,
   faPencil,
   faPlus,
   faTrash
@@ -36,22 +35,6 @@ export const CredentialsList = () => {
 
   return (
     <div className='p-4'>
-      <h1 className='pl-2 text-lg font-semibold flex items-center mb-4'>
-        <FontAwesomeIcon icon={faIdBadge} className='mr-2' />
-        Credentials
-        <Button
-          type='primary'
-          className='ml-auto'
-          icon={<FontAwesomeIcon icon={faPlus} />}
-          onClick={() => {
-            showCreate((p) => (
-              <CreateCredentialsModal project={name || ''} onSuccess={refetch} {...p} />
-            ));
-          }}
-        >
-          New
-        </Button>
-      </h1>
       <Table
         dataSource={data?.credentials || []}
         rowKey={(record) => record?.metadata?.name || ''}
@@ -100,6 +83,22 @@ export const CredentialsList = () => {
           },
           {
             key: 'actions',
+            title: (
+              <div className='w-full flex'>
+                <Button
+                  type='primary'
+                  className='ml-auto text-xs font-semibold'
+                  icon={<FontAwesomeIcon icon={faPlus} />}
+                  onClick={() => {
+                    showCreate((p) => (
+                      <CreateCredentialsModal project={name || ''} onSuccess={refetch} {...p} />
+                    ));
+                  }}
+                >
+                  ADD CREDENTIALS
+                </Button>
+              </div>
+            ),
             render: (record) => (
               <div className='flex items-center w-full'>
                 <Button

ui/src/features/project/project-details/images.tsx → ui/src/features/project/pipelines/images.tsx

@@ -114,7 +114,7 @@ export const Images = ({ projectName, stages }: { projectName: string; stages: S
         }
         stages[stage.metadata?.name as string] = {
           opacity: 1,
-          backgroundColor: colors[stage.metadata?.uid as string]
+          backgroundColor: colors[stage.metadata?.name as string]
         };
       });
     });

ui/src/features/project/project-details/project-details.tsx → ui/src/features/project/pipelines/pipelines.tsx

@@ -6,7 +6,6 @@ import {
   faCircleCheck,
   faClipboard,
   faCopy,
-  faDiagramProject,
   faEllipsisV,
   faEye,
   faEyeSlash,
@@ -81,7 +80,7 @@ const warehouseNodeHeight = 110;
 
 const getSeconds = (ts?: Time): number => Number(ts?.seconds) || 0;
 
-export const ProjectDetails = () => {
+export const Pipelines = () => {
   const { name, stageName, freightName } = useParams();
   const { data, isLoading } = useQuery(listStages, { project: name });
   const {
@@ -628,8 +627,11 @@ export const ProjectDetails = () => {
                     }, false)}
                   >
                     <Dropdown
-                      className='absolute top-2 right-2'
+                      className='absolute top-2 right-2 pl-2'
                       trigger={['click']}
+                      dropdownRender={(menu) => {
+                        return <div onClick={(e) => e.stopPropagation()}>{menu}</div>;
+                      }}
                       menu={{
                         items: [
                           {
@@ -696,6 +698,7 @@ export const ProjectDetails = () => {
                       }}
                     >
                       <FontAwesomeIcon
+                        onClick={(e) => e.stopPropagation()}
                         icon={faEllipsisV}
                         className='cursor-pointer text-gray-500 hover:text-white'
                       />
@@ -745,11 +748,7 @@ export const ProjectDetails = () => {
         </Freightline>
         <div className='flex flex-grow w-full'>
           <div className={`overflow-hidden flex-grow w-full h-full ${styles.dag}`}>
-            <div className='flex justify-between items-center p-4 mb-4'>
-              <div className='text-sm font-semibold pl-2'>
-                <FontAwesomeIcon icon={faDiagramProject} className='mr-2' />
-                PIPELINE
-              </div>
+            <div className='flex justify-end items-center p-4 mb-4'>
               <div>
                 <Tooltip title='Reassign Stage Colors'>
                   <Button

ui/src/features/stage/edit-stage-modal.tsx

@@ -15,7 +15,7 @@ import {
 } from '@ui/gen/service/v1alpha1/service-KargoService_connectquery';
 import { zodValidators } from '@ui/utils/validators';
 
-import { getStageYAMLExample } from '../project/project-details/utils/stage-yaml-example';
+import { getStageYAMLExample } from '../project/pipelines/utils/stage-yaml-example';
 
 import { prepareStageToEdit, prepareStageToSave } from './utils/edit-stage-utils';
 

ui/src/pages/project.tsx

@@ -1,18 +1,18 @@
-import { faChartBar, faCircleNodes, faIdBadge } from '@fortawesome/free-solid-svg-icons';
+import { faChartBar, faDiagramProject, faIdBadge } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tabs } from 'antd';
 import { generatePath, useNavigate, useParams } from 'react-router-dom';
 
 import { paths } from '@ui/config/paths';
 import { AnalysisTemplatesList } from '@ui/features/project/analysis-templates/analysis-templates-list';
 import { CredentialsList } from '@ui/features/project/credentials/credentials-list';
-import { ProjectDetails } from '@ui/features/project/project-details/project-details';
+import { Pipelines } from '@ui/features/project/pipelines/pipelines';
 
 const tabs = {
-  details: {
+  pipelines: {
     path: paths.project,
-    label: 'Details',
-    icon: faCircleNodes
+    label: 'Pipelines',
+    icon: faDiagramProject
   },
   credentials: {
     path: paths.projectCredentials,
@@ -28,21 +28,21 @@ const tabs = {
 
 export type ProjectTab = keyof typeof tabs;
 
-export const Project = ({ tab = 'details' }: { tab?: ProjectTab }) => {
+export const Project = ({ tab = 'pipelines' }: { tab?: ProjectTab }) => {
   const { name } = useParams();
   const navigate = useNavigate();
 
   // we must render the tab contents outside of the Antd tabs component to prevent layout issues in the ProjectDetails component
   const renderTab = (key: ProjectTab) => {
     switch (key) {
-      case 'details':
-        return <ProjectDetails />;
+      case 'pipelines':
+        return <Pipelines />;
       case 'credentials':
         return <CredentialsList />;
       case 'analysisTemplates':
         return <AnalysisTemplatesList />;
       default:
-        return <ProjectDetails />;
+        return <Pipelines />;
     }
   };