chore(ui): promotion steps live view and show 'as'

Signed-off-by: Mayursinh Sarvaiya <[email protected]>
akuity · Oct 4, 2024 · e307292 · e307292
1 parent 3287d04
commit e307292
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 17 deletions.
diff --git a/ui/src/features/stage/promotion-details-modal.tsx b/ui/src/features/stage/promotion-details-modal.tsx
@@ -8,7 +8,7 @@ import {
   faTimes
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Collapse, Flex, Modal, Segmented, Tabs } from 'antd';
+import { Collapse, Flex, Modal, Segmented, Tabs, Tag } from 'antd';
 import Alert from 'antd/es/alert/Alert';
 import { SegmentedOptions } from 'antd/es/segmented';
 import classNames from 'classnames';
@@ -117,7 +117,12 @@ const Step = ({
         </Flex>
         <Flex className={'font-semibold text-base w-full'} align='center'>
           {meta.spec.identifier}
-          <Flex className='ml-auto' align='center'>
+          {!!step?.as && (
+            <Tag className='text-xs ml-auto mr-5' color='blue'>
+              {step.as}
+            </Tag>
+          )}
+          <Flex className={classNames({ 'ml-auto': !step?.as })} align='center'>
             <Flex
               align='center'
               className='bg-gray-500 text-white uppercase p-2 rounded-md font-medium mr-3 gap-2 text-sm'
@@ -198,7 +203,7 @@ export const PromotionDetailsModal = ({
               })}
             />
             {!!promotion?.status?.message && (
-              <Alert message={promotion.status.message} type='error' className='mt4' />
+              <Alert message={promotion.status.message} type='error' className='mt-4' />
             )}
           </Tabs.TabPane>
         )}

diff --git a/ui/src/features/stage/promotions.tsx b/ui/src/features/stage/promotions.tsx
@@ -17,7 +17,6 @@ import { KargoService } from '@ui/gen/service/v1alpha1/service_connect';
 import { ListPromotionsResponse } from '@ui/gen/service/v1alpha1/service_pb';
 import { Freight, Promotion } from '@ui/gen/v1alpha1/generated_pb';
 
-import { useModal } from '../common/modal/use-modal';
 import { PromotionStatusIcon } from '../common/promotion-status/promotion-status-icon';
 
 import { PrLinks } from './pr-links';
@@ -26,8 +25,6 @@ import { PromotionDetailsModal } from './promotion-details-modal';
 export const Promotions = ({ repoUrls }: { repoUrls?: string[] }) => {
   const client = useQueryClient();
 
-  const { show } = useModal();
-
   const { name: projectName, stageName } = useParams();
   const { data: promotionsResponse, isLoading } = useQuery(
     listPromotions,
@@ -45,6 +42,9 @@ export const Promotions = ({ repoUrls }: { repoUrls?: string[] }) => {
     }
   );
 
+  // modal kept in the same component for live view
+  const [selectedPromotion, setSelectedPromotion] = useState<Promotion | undefined>();
+
   useEffect(() => {
     if (isLoading || !promotionsResponse) {
       return;
@@ -114,9 +114,7 @@ export const Promotions = ({ repoUrls }: { repoUrls?: string[] }) => {
     {
       title: 'Name',
       render: (_, promotion) => (
-        <a onClick={() => show((p) => <PromotionDetailsModal {...p} promotion={promotion} />)}>
-          {promotion.metadata?.name}
-        </a>
+        <a onClick={() => setSelectedPromotion(promotion)}>{promotion.metadata?.name}</a>
       )
     },
     {
@@ -161,13 +159,26 @@ export const Promotions = ({ repoUrls }: { repoUrls?: string[] }) => {
   ];
 
   return (
-    <Table
-      columns={columns}
-      dataSource={promotions}
-      size='small'
-      pagination={{ hideOnSinglePage: true }}
-      rowKey={(p) => p.metadata?.uid || ''}
-      loading={isLoading}
-    />
+    <>
+      <Table
+        columns={columns}
+        dataSource={promotions}
+        size='small'
+        pagination={{ hideOnSinglePage: true }}
+        rowKey={(p) => p.metadata?.uid || ''}
+        loading={isLoading}
+      />
+
+      {selectedPromotion && (
+        <PromotionDetailsModal
+          // @ts-expect-error // know that there will always be value available of this promotion
+          promotion={promotions?.find(
+            (p) => p?.metadata?.name === selectedPromotion?.metadata?.name
+          )}
+          visible={!!selectedPromotion}
+          hide={() => setSelectedPromotion(undefined)}
+        />
+      )}
+    </>
   );
 };