chore(ui): address review

Signed-off-by: Mayursinh Sarvaiya <[email protected]>

ui/src/features/assemble-freight/commit-table.tsx

@@ -1,7 +1,7 @@
 import { Radio, Table } from 'antd';
 
 import { DiscoveredCommit } from '@ui/gen/v1alpha1/generated_pb';
-import { k8sApiMachineryTimestampDate } from '@ui/utils/connectrpc-extension';
+import { timestampDate } from '@ui/utils/connectrpc-utils';
 
 import { TruncatedCopyable } from './truncated-copyable';
 
@@ -48,7 +48,7 @@ export const CommitTable = ({
           {
             title: 'Date',
             render: (record: DiscoveredCommit) =>
-              k8sApiMachineryTimestampDate(record.creatorDate)?.toLocaleString()
+              timestampDate(record.creatorDate)?.toLocaleString()
           }
         ]}
       />

ui/src/features/assemble-freight/image-table.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Radio, Table } from 'antd';
 
 import { DiscoveredImageReference } from '@ui/gen/v1alpha1/generated_pb';
-import { k8sApiMachineryTimestampDate } from '@ui/utils/connectrpc-extension';
+import { timestampDate } from '@ui/utils/connectrpc-utils';
 
 import { TruncatedCopyable } from './truncated-copyable';
 
@@ -47,7 +47,7 @@ export const ImageTable = ({
         {
           title: 'Created At',
           render: (record: DiscoveredImageReference) =>
-            k8sApiMachineryTimestampDate(record.createdAt)?.toLocaleString()
+            timestampDate(record.createdAt)?.toLocaleString()
         }
       ]}
     />

ui/src/features/common/analysis-modal/metric-chart/metric-chart.tsx

@@ -17,7 +17,7 @@ import {
 } from 'recharts';
 import { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
 
-import { k8sApiMachineryTimestampDate } from '@ui/utils/connectrpc-extension';
+import { timestampDate } from '@ui/utils/connectrpc-utils';
 
 import { StatusIndicator } from '../status-indicator/status-indicator';
 import { AnalysisStatus, TransformedMeasurement } from '../types';
@@ -126,9 +126,8 @@ export const MetricChart = ({
   yAxisLabel
 }: MetricChartProps) => {
   // show ticks at boundaries of analysis
-  const startingTick = k8sApiMachineryTimestampDate(data[0]?.startedAt)?.toLocaleTimeString() ?? '';
-  const endingTick =
-    k8sApiMachineryTimestampDate(data[data.length - 1]?.finishedAt)?.toLocaleTimeString() ?? '';
+  const startingTick = timestampDate(data[0]?.startedAt)?.toLocaleTimeString() ?? '';
+  const endingTick = timestampDate(data[data.length - 1]?.finishedAt)?.toLocaleTimeString() ?? '';
   const timeTicks: (string | number)[] = [startingTick, endingTick];
 
   return (

ui/src/features/common/commit-info.tsx

@@ -1,7 +1,6 @@
 import { GitCommit } from '@ui/gen/v1alpha1/generated_pb';
-import { PlainMessage } from '@ui/utils/connectrpc-extension';
 
-export const CommitInfo = ({ commit }: { commit: PlainMessage<GitCommit> }) => (
+export const CommitInfo = ({ commit }: { commit: GitCommit }) => (
   <div className='grid grid-cols-2'>
     <div>Repo:</div>
     <div>

ui/src/features/common/promotion-directive-step-status/utils.test.ts

@@ -1,7 +1,7 @@
-import { PlainMessage } from '@bufbuild/protobuf';
 import { expect, test } from 'vitest';
 
 import { PromotionStatus } from '@ui/gen/v1alpha1/generated_pb';
+import { PlainMessage } from '@ui/utils/connectrpc-utils';
 
 import { PromotionStatusPhase } from '../promotion-status/utils';
 

ui/src/features/common/utils.ts

@@ -1,6 +1,6 @@
 import { ObjectMeta } from '@ui/gen/k8s.io/apimachinery/pkg/apis/meta/v1/generated_pb';
 import { Freight, FreightReference, Stage } from '@ui/gen/v1alpha1/generated_pb';
-import { PlainMessageRecursive } from '@ui/utils/connectrpc-extension';
+import { PlainMessageRecursive } from '@ui/utils/connectrpc-utils';
 
 export const ALIAS_LABEL_KEY = 'kargo.akuity.io/alias';
 export const DESCRIPTION_ANNOTATION_KEY = 'kargo.akuity.io/description';

ui/src/features/freight-timeline/freight-contents.tsx

@@ -3,15 +3,14 @@ import { faAnchor } from '@fortawesome/free-solid-svg-icons';
 import classNames from 'classnames';
 
 import { Freight } from '@ui/gen/v1alpha1/generated_pb';
-import { PlainMessage } from '@ui/utils/connectrpc-extension';
 import { urlForImage } from '@ui/utils/url';
 
 import { CommitInfo } from '../common/commit-info';
 
 import { FreightContentItem } from './freight-content-item';
 
 export const FreightContents = (props: {
-  freight?: PlainMessage<Freight>;
+  freight?: Freight;
   highlighted: boolean;
   horizontal?: boolean;
   dark?: boolean;

ui/src/features/freight-timeline/freight-item-label.tsx

@@ -5,10 +5,7 @@ import { format, formatDistance } from 'date-fns';
 import { useEffect, useState } from 'react';
 
 import { Freight } from '@ui/gen/v1alpha1/generated_pb';
-import {
-  k8sApiMachineryTimestampDate,
-  PlainMessageRecursive
-} from '@ui/utils/connectrpc-extension';
+import { timestampDate, PlainMessageRecursive } from '@ui/utils/connectrpc-utils';
 
 import { getAlias } from '../common/utils';
 
@@ -35,15 +32,15 @@ export const FreightItemLabel = ({ freight }: { freight?: PlainMessageRecursive<
       : alias;
 
   const humanReadable = formatDistance(
-    k8sApiMachineryTimestampDate(freight?.metadata?.creationTimestamp) || 0,
+    timestampDate(freight?.metadata?.creationTimestamp) || 0,
     new Date(),
     {
       addSuffix: true
     }
   );
 
   const freightCreationTimestamp = freight?.metadata?.creationTimestamp
-    ? k8sApiMachineryTimestampDate(freight?.metadata?.creationTimestamp)
+    ? timestampDate(freight?.metadata?.creationTimestamp)
     : null;
 
   return (

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

@@ -13,7 +13,7 @@ import {
   deleteAnalysisTemplate,
   listAnalysisTemplates
 } from '@ui/gen/service/v1alpha1/service-KargoService_connectquery';
-import { k8sApiMachineryTimestampDate } from '@ui/utils/connectrpc-extension';
+import { timestampDate } from '@ui/utils/connectrpc-utils';
 
 import { CreateAnalysisTemplateModal } from './create-analysis-template-modal';
 import { EditAnalysisTemplateModal } from './edit-analysis-template-modal';
@@ -44,7 +44,7 @@ export const AnalysisTemplatesList = () => {
           title='Creation Date'
           width={200}
           render={(_, template) => {
-            const date = k8sApiMachineryTimestampDate(template.metadata?.creationTimestamp);
+            const date = timestampDate(template.metadata?.creationTimestamp);
             return date ? format(date, 'MMM do yyyy HH:mm:ss') : '';
           }}
         />

ui/src/features/project/events/events.tsx

@@ -14,7 +14,7 @@ import { useParams } from 'react-router-dom';
 import { Event } from '@ui/gen/k8s.io/api/core/v1/generated_pb';
 import { Time } from '@ui/gen/k8s.io/apimachinery/pkg/apis/meta/v1/generated_pb';
 import { listProjectEvents } from '@ui/gen/service/v1alpha1/service-KargoService_connectquery';
-import { k8sApiMachineryTimestampDate } from '@ui/utils/connectrpc-extension';
+import { timestampDate } from '@ui/utils/connectrpc-utils';
 
 const EventValue = ({ label, children }: { label: string; children: React.ReactNode }) => {
   return (
@@ -75,7 +75,7 @@ const HumanReadableTimestamp = ({ timestamp }: { timestamp?: Time }) => {
     return <>Unknown</>;
   }
 
-  const date = k8sApiMachineryTimestampDate(timestamp);
+  const date = timestampDate(timestamp);
   const fullTimestamp = format(date || '', 'MMM do yyyy HH:mm:ss');
   const fromNow = moment(date).fromNow();
 

ui/src/features/project/list/project-item/stage-popover.tsx

@@ -13,7 +13,7 @@ import {
   getPromotion
 } from '@ui/gen/service/v1alpha1/service-KargoService_connectquery';
 import { Freight, FreightReference, Promotion, Stage } from '@ui/gen/v1alpha1/generated_pb';
-import { k8sApiMachineryTimestampDate } from '@ui/utils/connectrpc-extension';
+import { timestampDate } from '@ui/utils/connectrpc-utils';
 
 export const StagePopover = ({ project, stage }: { project?: string; stage?: Stage }) => {
   const { data: promotionData } = useQuery(
@@ -53,7 +53,7 @@ export const StagePopover = ({ project, stage }: { project?: string; stage?: Sta
       <div className='flex items-center mb-4'>
         <FontAwesomeIcon icon={faClock} className='mr-2' />
         <div>
-          {moment(k8sApiMachineryTimestampDate(promotion?.metadata?.creationTimestamp)).format(
+          {moment(timestampDate(promotion?.metadata?.creationTimestamp)).format(
             'MMM do yyyy HH:mm:ss'
           )}
         </div>

ui/src/features/project/pipelines/nodes/freight-label.tsx

@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react';
 
 import { CommitInfo } from '@ui/features/common/commit-info';
 import { Freight } from '@ui/gen/v1alpha1/generated_pb';
-import { k8sApiMachineryTimestampDate } from '@ui/utils/connectrpc-extension';
+import { timestampDate } from '@ui/utils/connectrpc-utils';
 
 import { getAlias } from '../../../common/utils';
 
@@ -27,7 +27,7 @@ export const FreightLabel = ({ freight }: { freight?: Freight }) => {
   const alias = getAlias(freight);
 
   const humanReadable = formatDistance(
-    k8sApiMachineryTimestampDate(freight?.metadata?.creationTimestamp) || 0,
+    timestampDate(freight?.metadata?.creationTimestamp) || 0,
     new Date(),
     {
       addSuffix: true
@@ -59,7 +59,7 @@ export const FreightLabel = ({ freight }: { freight?: Freight }) => {
           {freight?.metadata?.creationTimestamp && (
             <Tooltip
               title={format(
-                k8sApiMachineryTimestampDate(freight?.metadata?.creationTimestamp) || '',
+                timestampDate(freight?.metadata?.creationTimestamp) || '',
                 'MMM do yyyy HH:mm:ss'
               )}
               className={style.smallLabel}

ui/src/features/project/pipelines/nodes/stage-node.tsx

@@ -20,7 +20,7 @@ import { PromotionStatusIcon } from '@ui/features/common/promotion-status/promot
 import { selectFreightByWarehouse } from '@ui/features/common/utils';
 import { willStagePromotionOpenPR } from '@ui/features/promotion-directives/utils';
 import { Freight, Stage } from '@ui/gen/v1alpha1/generated_pb';
-import { k8sApiMachineryTimestampDate } from '@ui/utils/connectrpc-extension';
+import { timestampDate } from '@ui/utils/connectrpc-utils';
 import { useLocalStorage } from '@ui/utils/use-local-storage';
 
 import { FreightTimelineAction, NodeDimensions } from '../types';
@@ -189,9 +189,7 @@ export const StageNode = ({
           )}
         </div>
         <StageNodeFooter
-          lastPromotion={
-            k8sApiMachineryTimestampDate(stage?.status?.lastPromotion?.finishedAt) || undefined
-          }
+          lastPromotion={timestampDate(stage?.status?.lastPromotion?.finishedAt) || undefined}
         />
       </div>
       {action !== FreightTimelineAction.ManualApproval &&

ui/src/features/stage/create-stage.tsx

@@ -23,7 +23,7 @@ import { JSON } from '@ui/gen/k8s.io/apiextensions-apiserver/pkg/apis/apiextensi
 import schema from '@ui/gen/schema/stages.kargo.akuity.io_v1alpha1.json';
 import { createResource } from '@ui/gen/service/v1alpha1/service-KargoService_connectquery';
 import { PromotionStep, Stage } from '@ui/gen/v1alpha1/generated_pb';
-import { PlainMessage } from '@ui/utils/connectrpc-extension';
+import { PlainMessage } from '@ui/utils/connectrpc-utils';
 import { zodValidators } from '@ui/utils/validators';
 
 import { getStageYAMLExample } from '../project/pipelines/utils/stage-yaml-example';

ui/src/features/stage/create-warehouse/subscription-wizard.tsx

@@ -15,7 +15,7 @@ import { ObjectFieldTemplate } from '@ui/features/common/form/rjsf/object-field-
 import { IconSetByKargoTerminology } from '@ui/features/common/icons';
 import { ObjectDescription } from '@ui/features/common/object-description';
 import { RepoSubscription } from '@ui/gen/v1alpha1/generated_pb';
-import { PlainMessage } from '@ui/utils/connectrpc-extension';
+import { PlainMessage } from '@ui/utils/connectrpc-utils';
 
 import { warehouseCreateFormJSONSchema } from './schema';
 

ui/src/features/stage/freight-history.tsx

@@ -18,7 +18,7 @@ import {
   FreightSchema,
   StageStatus
 } from '@ui/gen/v1alpha1/generated_pb';
-import { PlainMessage } from '@ui/utils/connectrpc-extension';
+import { PlainMessage } from '@ui/utils/connectrpc-utils';
 
 import { LoadingState } from '../common';
 import { FreightContents } from '../freight-timeline/freight-contents';

ui/src/features/stage/promotion-details-modal.tsx

@@ -29,7 +29,7 @@ import { Runner } from '@ui/features/promotion-directives/registry/types';
 import { canAbortPromotion } from '@ui/features/stage/utils/promotion';
 import { abortPromotion } from '@ui/gen/service/v1alpha1/service-KargoService_connectquery';
 import { Promotion, PromotionSchema, PromotionStep } from '@ui/gen/v1alpha1/generated_pb';
-import { k8sApiMachineryTimestampDate } from '@ui/utils/connectrpc-extension';
+import { timestampDate } from '@ui/utils/connectrpc-utils';
 import { decodeRawData } from '@ui/utils/decode-raw-data';
 
 const Step = ({
@@ -220,9 +220,7 @@ export const PromotionDetailsModal = ({
             {
               key: 'date',
               label: 'Start Date',
-              children: k8sApiMachineryTimestampDate(
-                promotion.metadata?.creationTimestamp
-              )?.toString()
+              children: timestampDate(promotion.metadata?.creationTimestamp)?.toString()
             }
           ]}
         />

ui/src/features/stage/promotion-steps-wizard/use-promotion-wizard-steps-state.ts

@@ -4,7 +4,7 @@ import { parse, stringify } from 'yaml';
 import { usePromotionDirectivesRegistryContext } from '@ui/features/promotion-directives/registry/context/use-registry-context';
 import { Runner } from '@ui/features/promotion-directives/registry/types';
 import { PromotionStep } from '@ui/gen/v1alpha1/generated_pb';
-import { PlainMessage } from '@ui/utils/connectrpc-extension';
+import { PlainMessage } from '@ui/utils/connectrpc-utils';
 
 import { RunnerWithConfiguration } from './types';
 

ui/src/features/stage/promotions.tsx

@@ -21,7 +21,7 @@ import {
 import { KargoService } from '@ui/gen/service/v1alpha1/service_pb';
 import { ListPromotionsResponse } from '@ui/gen/service/v1alpha1/service_pb';
 import { Freight, Promotion } from '@ui/gen/v1alpha1/generated_pb';
-import { k8sApiMachineryTimestampDate } from '@ui/utils/connectrpc-extension';
+import { timestampDate } from '@ui/utils/connectrpc-utils';
 
 import { PromotionDetailsModal } from './promotion-details-modal';
 import { hasAbortRequest, promotionCompareFn } from './utils/promotion';
@@ -133,7 +133,7 @@ export const Promotions = () => {
     {
       title: 'Date',
       render: (_, promotion) => {
-        const date = k8sApiMachineryTimestampDate(promotion.metadata?.creationTimestamp);
+        const date = timestampDate(promotion.metadata?.creationTimestamp);
         return date ? format(date, 'MMM do yyyy HH:mm:ss') : '';
       }
     },

ui/src/features/stage/stage-details.tsx

@@ -7,7 +7,7 @@ import { generatePath, useNavigate, useParams } from 'react-router-dom';
 import { paths } from '@ui/config/paths';
 import { HealthStatusIcon } from '@ui/features/common/health-status/health-status-icon';
 import { Stage, StageSchema, VerificationInfo } from '@ui/gen/v1alpha1/generated_pb';
-import { k8sApiMachineryTimestampDate } from '@ui/utils/connectrpc-extension';
+import { timestampDate } from '@ui/utils/connectrpc-utils';
 
 import { Description } from '../common/description';
 import { ManifestPreview } from '../common/manifest-preview';
@@ -41,11 +41,7 @@ export const StageDetails = ({ stage }: { stage: Stage }) => {
           } as VerificationInfo;
         })
       )
-      .sort((a, b) =>
-        moment(k8sApiMachineryTimestampDate(b.startTime)).diff(
-          moment(k8sApiMachineryTimestampDate(a.startTime))
-        )
-      );
+      .sort((a, b) => moment(timestampDate(b.startTime)).diff(moment(timestampDate(a.startTime))));
   }, [stage]);
 
   return (

ui/src/features/stage/utils/promotion.ts

@@ -5,7 +5,7 @@ import {
   isPromotionPhaseTerminal
 } from '@ui/features/common/promotion-status/utils';
 import { Promotion } from '@ui/gen/v1alpha1/generated_pb';
-import { k8sApiMachineryTimestampDate } from '@ui/utils/connectrpc-extension';
+import { timestampDate } from '@ui/utils/connectrpc-utils';
 
 export const canAbortPromotion = (promotion: Promotion) =>
   !isPromotionPhaseTerminal(getPromotionStatusPhase(promotion));
@@ -25,8 +25,8 @@ export const promotionCompareFn = (
   promotion1: Partial<Promotion>,
   promotion2: Partial<Promotion>
 ) => {
-  const promo1Date = k8sApiMachineryTimestampDate(promotion1.metadata?.creationTimestamp);
-  const promo2Date = k8sApiMachineryTimestampDate(promotion2.metadata?.creationTimestamp);
+  const promo1Date = timestampDate(promotion1.metadata?.creationTimestamp);
+  const promo2Date = timestampDate(promotion2.metadata?.creationTimestamp);
 
   if (promo1Date && promo2Date) {
     // latest promotion should have lower index in array

ui/src/features/stage/verifications.tsx

@@ -3,7 +3,7 @@ import Link from 'antd/es/typography/Link';
 import { format } from 'date-fns';
 
 import { VerificationInfo } from '@ui/gen/v1alpha1/generated_pb';
-import { k8sApiMachineryTimestampDate } from '@ui/utils/connectrpc-extension';
+import { timestampDate } from '@ui/utils/connectrpc-utils';
 
 import { AnalysisModal } from '../common/analysis-modal/analysis-modal';
 import { useModal } from '../common/modal/use-modal';
@@ -46,7 +46,7 @@ export const Verifications = ({ verifications, images }: Props) => {
       <Table.Column<(typeof verifications)[number]>
         title='Date'
         render={(_, verification) => {
-          const date = k8sApiMachineryTimestampDate(verification.startTime);
+          const date = timestampDate(verification.startTime);
           return date ? format(date, 'MMM do yyyy HH:mm:ss') : '';
         }}
       />

ui/src/features/utils/manifest-generator.ts

@@ -1,7 +1,7 @@
 import { stringify } from 'yaml';
 
 import { WarehouseSpec } from '@ui/gen/v1alpha1/generated_pb';
-import { PartialRecursive, PlainMessageRecursive } from '@ui/utils/connectrpc-extension';
+import { PartialRecursive, PlainMessageRecursive } from '@ui/utils/connectrpc-utils';
 import { cleanEmptyObjectValues } from '@ui/utils/helpers';
 
 // generate manifests for kargo resources

ui/src/utils/connectrpc-extension.ts → ui/src/utils/connectrpc-utils.ts

@@ -1,8 +1,8 @@
-import { Timestamp, timestampDate } from '@bufbuild/protobuf/wkt';
+import { Timestamp, timestampDate as coreTimestampDate } from '@bufbuild/protobuf/wkt';
 
 import { Time } from '@ui/gen/k8s.io/apimachinery/pkg/apis/meta/v1/generated_pb';
 
-export const k8sApiMachineryTimestampDate = (t?: Time | PlainMessage<Time> | string) => {
+export const timestampDate = (t?: Time | PlainMessage<Time> | string) => {
   if (!t) {
     return null;
   }
@@ -12,7 +12,7 @@ export const k8sApiMachineryTimestampDate = (t?: Time | PlainMessage<Time> | str
   }
 
   // apimachinery time is same as google.protobuf.Timestamp
-  return timestampDate(t as unknown as Timestamp);
+  return coreTimestampDate(t as unknown as Timestamp);
 };
 
 export type PlainMessage<T> = Omit<T, '$typeName' | '$unknown'>;