chore: rename freightline to freight timeline (#2256)

Signed-off-by: Remington Breeze <[email protected]>
akuity · Jul 8, 2024 · 3e008c9 · 3e008c9
1 parent 112fe1e
commit 3e008c9
Show file tree

Hide file tree

Showing 17 changed files with 56 additions and 55 deletions.
diff --git a/ui/src/features/common/freight-label.tsx b/ui/src/features/common/freight-label.tsx
@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react';
 
 import { Freight } from '@ui/gen/v1alpha1/generated_pb';
 
-import { FreightContents } from '../freightline/freight-contents';
+import { FreightContents } from '../freight-timeline/freight-contents';
 
 import { getAlias } from './utils';
 

diff --git a/ui/src/features/create-freight/create-freight.tsx b/ui/src/features/create-freight/create-freight.tsx
@@ -20,7 +20,7 @@ import {
   Warehouse
 } from '@ui/gen/v1alpha1/generated_pb';
 
-import { FreightContents } from '../freightline/freight-contents';
+import { FreightContents } from '../freight-timeline/freight-contents';
 
 import { ArtifactMenuGroup } from './artifact-menu-group';
 import { ChartTable } from './chart-table';

diff --git a/...reightline/confirm-promotion-dialogue.tsx → ...t-timeline/confirm-promotion-dialogue.tsx b/...reightline/confirm-promotion-dialogue.tsx → ...t-timeline/confirm-promotion-dialogue.tsx
diff --git a/...features/freightline/freight-contents.tsx → ...res/freight-timeline/freight-contents.tsx b/...features/freightline/freight-contents.tsx → ...res/freight-timeline/freight-contents.tsx
diff --git a/ui/src/features/freightline/freight-item.tsx → ...eatures/freight-timeline/freight-item.tsx b/ui/src/features/freightline/freight-item.tsx → ...eatures/freight-timeline/freight-item.tsx
@@ -5,7 +5,7 @@ import { Freight } from '@ui/gen/v1alpha1/generated_pb';
 import { FreightLabel } from '../common/freight-label';
 import { FreightMode } from '../project/pipelines/types';
 
-import styles from './freightline.module.less';
+import styles from './freight-timeline.module.less';
 
 export const FreightItem = ({
   freight,

diff --git a/...atures/freightline/freightline-header.tsx → ...ight-timeline/freight-timeline-header.tsx b/...atures/freightline/freightline-header.tsx → ...ight-timeline/freight-timeline-header.tsx
@@ -17,9 +17,9 @@ import { paths } from '@ui/config/paths';
 import { ColorContext } from '@ui/context/colors';
 import { Warehouse } from '@ui/gen/v1alpha1/generated_pb';
 
-import { FreightlineAction } from '../project/pipelines/types';
+import { FreightTimelineAction } from '../project/pipelines/types';
 
-export const FreightlineHeader = ({
+export const FreightTimelineHeader = ({
   promotingStage,
   action,
   cancel,
@@ -32,7 +32,7 @@ export const FreightlineHeader = ({
   collapsable
 }: {
   promotingStage?: string;
-  action?: FreightlineAction;
+  action?: FreightTimelineAction;
   cancel: () => void;
   downstreamSubs?: string[];
   selectedWarehouse: string;
@@ -45,7 +45,7 @@ export const FreightlineHeader = ({
   const stageColorMap = useContext(ColorContext);
   const { name: projectName } = useParams();
 
-  const getIcon = (action: FreightlineAction) => {
+  const getIcon = (action: FreightTimelineAction) => {
     switch (action) {
       case 'promote':
         return faBullseye;
@@ -113,7 +113,7 @@ export const FreightlineHeader = ({
           <>
             <div className='flex items-center text-neutral-500 text-xs mr-auto'>
               <FontAwesomeIcon icon={faTimeline} className='mr-2' />
-              FREIGHTLINE
+              FREIGHT TIMELINE
             </div>
             {collapsable && (
               <Tooltip title={`${collapsed ? 'Expand' : 'Collapse'} old freight`}>

diff --git a/...tures/freightline/freightline-wrapper.tsx → ...ght-timeline/freight-timeline-wrapper.tsx b/...tures/freightline/freightline-wrapper.tsx → ...ght-timeline/freight-timeline-wrapper.tsx
@@ -1,4 +1,4 @@
-export const FreightlineWrapper = ({ children }: { children: React.ReactNode }) => {
+export const FreightTimelineWrapper = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className='w-full py-3 flex flex-col overflow-hidden' style={{ backgroundColor: '#eee' }}>
       <div className='flex h-48 w-full items-center px-1'>

diff --git a/...tures/freightline/freightline.module.less → ...ght-timeline/freight-timeline.module.less b/...tures/freightline/freightline.module.less → ...ght-timeline/freight-timeline.module.less
diff --git a/ui/src/features/freightline/freightline.tsx → ...res/freight-timeline/freight-timeline.tsx b/ui/src/features/freightline/freightline.tsx → ...res/freight-timeline/freight-timeline.tsx
@@ -15,7 +15,7 @@ import {
 import { Freight, Stage } from '@ui/gen/v1alpha1/generated_pb';
 
 import { FreightActionMenu } from '../project/pipelines/freight-action-menu';
-import { FreightMode, FreightlineAction } from '../project/pipelines/types';
+import { FreightMode, FreightTimelineAction } from '../project/pipelines/types';
 import { PipelineStateHook, getFreightMode, isPromoting } from '../project/pipelines/utils/state';
 import { usePromotionEligibleFreight } from '../project/pipelines/utils/use-promotion-eligible-freight';
 import { getSeconds, onError } from '../project/pipelines/utils/util';
@@ -25,7 +25,7 @@ import { FreightContents } from './freight-contents';
 import { FreightItem } from './freight-item';
 import { StageIndicators } from './stage-indicators';
 
-export const Freightline = ({
+export const FreightTimeline = ({
   freight,
   state,
   stagesPerFreight,
@@ -169,15 +169,15 @@ export const Freightline = ({
                   <FreightActionMenu
                     freight={f}
                     approveAction={() => {
-                      state.select(FreightlineAction.ManualApproval, undefined, id);
+                      state.select(FreightTimelineAction.ManualApproval, undefined, id);
                     }}
                     refetchFreight={refetchFreight}
                     inUse={stagesPerFreight[id]?.length > 0}
                   />
                 )}
                 <StageIndicators
                   stages={stagesPerFreight[id] || []}
-                  faded={state.action === FreightlineAction.ManualApproval}
+                  faded={state.action === FreightTimelineAction.ManualApproval}
                 />
                 <FreightContents
                   highlighted={
@@ -198,7 +198,7 @@ export const Freightline = ({
                         project,
                         freight: f?.metadata?.name
                       };
-                      if (state.action === FreightlineAction.Promote) {
+                      if (state.action === FreightTimelineAction.Promote) {
                         promoteAction({
                           stage: state.stage || '',
                           ...currentData
@@ -220,4 +220,4 @@ export const Freightline = ({
   );
 };
 
-export default Freightline;
+export default FreightTimeline;
diff --git a/ui/src/features/freightline/palette.tsx → ui/src/features/freight-timeline/palette.tsx b/ui/src/features/freightline/palette.tsx → ui/src/features/freight-timeline/palette.tsx
diff --git a/...features/freightline/stage-indicators.tsx → ...res/freight-timeline/stage-indicators.tsx b/...features/freightline/stage-indicators.tsx → ...res/freight-timeline/stage-indicators.tsx
diff --git a/ui/src/features/freight/freight-details.tsx b/ui/src/features/freight/freight-details.tsx
@@ -12,7 +12,7 @@ import { Description } from '../common/description';
 import { ManifestPreview } from '../common/manifest-preview';
 import { useModal } from '../common/modal/use-modal';
 import { getAlias } from '../common/utils';
-import { FreightContents } from '../freightline/freight-contents';
+import { FreightContents } from '../freight-timeline/freight-contents';
 import { UpdateFreightAliasModal } from '../project/pipelines/update-freight-alias-modal';
 
 import { FreightStatusList } from './freight-status-list';

diff --git a/ui/src/features/project/pipelines/nodes/stage-node.tsx b/ui/src/features/project/pipelines/nodes/stage-node.tsx
@@ -17,7 +17,7 @@ import { HealthStatusIcon } from '@ui/features/common/health-status/health-statu
 import { PromotionStatusIcon } from '@ui/features/common/promotion-status/promotion-status-icon';
 import { Freight, Stage } from '@ui/gen/v1alpha1/generated_pb';
 
-import { FreightlineAction } from '../types';
+import { FreightTimelineAction } from '../types';
 
 import * as styles from './stage-node.module.less';
 
@@ -42,8 +42,8 @@ export const StageNode = ({
   faded: boolean;
   projectName?: string;
   hasNoSubscribers?: boolean;
-  action?: FreightlineAction;
-  onPromoteClick: (type: FreightlineAction) => void;
+  action?: FreightTimelineAction;
+  onPromoteClick: (type: FreightTimelineAction) => void;
   currentFreight: Freight;
   onClick?: () => void;
   approving?: boolean;
@@ -144,14 +144,14 @@ export const StageNode = ({
             <Nodule
               begin={true}
               nodeHeight={height}
-              onClick={() => onPromoteClick(FreightlineAction.Promote)}
-              selected={action === FreightlineAction.Promote}
+              onClick={() => onPromoteClick(FreightTimelineAction.Promote)}
+              selected={action === FreightTimelineAction.Promote}
             />
             {!hasNoSubscribers && (
               <Nodule
                 nodeHeight={height}
-                onClick={() => onPromoteClick(FreightlineAction.PromoteSubscribers)}
-                selected={action === FreightlineAction.PromoteSubscribers}
+                onClick={() => onPromoteClick(FreightTimelineAction.PromoteSubscribers)}
+                selected={action === FreightTimelineAction.PromoteSubscribers}
               />
             )}
           </>

diff --git a/ui/src/features/project/pipelines/pipelines.tsx b/ui/src/features/project/pipelines/pipelines.tsx
@@ -21,11 +21,11 @@ import { ColorContext } from '@ui/context/colors';
 import { LoadingState } from '@ui/features/common';
 import { useModal } from '@ui/features/common/modal/use-modal';
 const FreightDetails = lazy(() => import('@ui/features/freight/freight-details'));
-const Freightline = lazy(() => import('@ui/features/freightline/freightline'));
+const FreightTimeline = lazy(() => import('@ui/features/freight-timeline/freight-timeline'));
 const StageDetails = lazy(() => import('@ui/features/stage/stage-details'));
 import { SuspenseSpin } from '@ui/features/common/suspense-spin';
-import { FreightlineHeader } from '@ui/features/freightline/freightline-header';
-import { FreightlineWrapper } from '@ui/features/freightline/freightline-wrapper';
+import { FreightTimelineHeader } from '@ui/features/freight-timeline/freight-timeline-header';
+import { FreightTimelineWrapper } from '@ui/features/freight-timeline/freight-timeline-wrapper';
 import { clearColors } from '@ui/features/stage/utils';
 import {
   approveFreight,
@@ -44,7 +44,7 @@ import { Images } from './images';
 import { RepoNode } from './nodes/repo-node';
 import { Nodule, StageNode } from './nodes/stage-node';
 import styles from './project-details.module.less';
-import { FreightlineAction, NodeType } from './types';
+import { FreightTimelineAction, NodeType } from './types';
 import { LINE_THICKNESS, WAREHOUSE_NODE_HEIGHT } from './utils/graph';
 import { isPromoting, usePipelineState } from './utils/state';
 import { usePipelineGraph } from './utils/use-pipeline-graph';
@@ -97,7 +97,7 @@ export const Pipelines = () => {
   );
 
   const [selectedWarehouse, setSelectedWarehouse] = React.useState('');
-  const [freightlineCollapsed, setFreightlineCollapsed] = React.useState(false);
+  const [freightTimelineCollapsed, setFreightTimelineCollapsed] = React.useState(false);
 
   const warehouseMap = useMemo(() => {
     const map = {} as { [key: string]: Warehouse };
@@ -210,7 +210,7 @@ export const Pipelines = () => {
   return (
     <div className='flex flex-col flex-grow'>
       <ColorContext.Provider value={stageColorMap}>
-        <FreightlineHeader
+        <FreightTimelineHeader
           promotingStage={state.stage}
           action={state.action}
           cancel={() => {
@@ -223,38 +223,38 @@ export const Pipelines = () => {
           selectedWarehouse={selectedWarehouse || ''}
           setSelectedWarehouse={setSelectedWarehouse}
           warehouses={warehouseMap}
-          collapsed={freightlineCollapsed}
-          setCollapsed={setFreightlineCollapsed}
+          collapsed={freightTimelineCollapsed}
+          setCollapsed={setFreightTimelineCollapsed}
           collapsable={
             Object.keys(stagesPerFreight).reduce(
               (acc, cur) => (cur?.length > 0 ? acc + stagesPerFreight[cur].length : acc),
               0
             ) > 0
           }
         />
-        <FreightlineWrapper>
+        <FreightTimelineWrapper>
           <Suspense
             fallback={
               <div className='h-full w-full flex items-center justify-center'>
                 <Spin />
               </div>
             }
           >
-            <Freightline
+            <FreightTimeline
               highlightedStages={
-                state.action === FreightlineAction.ManualApproval ? {} : highlightedStages
+                state.action === FreightTimelineAction.ManualApproval ? {} : highlightedStages
               }
               refetchFreight={refetchFreightData}
               onHover={onHover}
               freight={filteredFreight}
               state={state}
               promotionEligible={{}}
               stagesPerFreight={stagesPerFreight}
-              collapsed={freightlineCollapsed}
-              setCollapsed={setFreightlineCollapsed}
+              collapsed={freightTimelineCollapsed}
+              setCollapsed={setFreightTimelineCollapsed}
             />
           </Suspense>
-        </FreightlineWrapper>
+        </FreightTimelineWrapper>
         <div className='flex flex-grow w-full'>
           <div className={`overflow-hidden flex-grow w-full h-full ${styles.dag}`}>
             <div className='flex justify-end items-center p-4 mb-4'>
@@ -336,7 +336,7 @@ export const Pipelines = () => {
                           hasNoSubscribers={
                             (subscribersByStage[node?.data?.metadata?.name || ''] || []).length <= 1
                           }
-                          onPromoteClick={(type: FreightlineAction) => {
+                          onPromoteClick={(type: FreightTimelineAction) => {
                             const currentWarehouse =
                               node.data?.status?.currentFreight?.warehouse ||
                               node.data?.spec?.subscriptions?.warehouse ||
@@ -352,7 +352,7 @@ export const Pipelines = () => {
                               state.select(
                                 type,
                                 stageName,
-                                type === FreightlineAction.PromoteSubscribers
+                                type === FreightTimelineAction.PromoteSubscribers
                                   ? node.data?.status?.currentFreight?.name || ''
                                   : undefined
                               );
@@ -364,7 +364,7 @@ export const Pipelines = () => {
                               : undefined
                           }
                           onClick={
-                            state.action === FreightlineAction.ManualApproval
+                            state.action === FreightTimelineAction.ManualApproval
                               ? () => {
                                   manualApproveAction({
                                     stage: node.data?.metadata?.name,
@@ -375,7 +375,7 @@ export const Pipelines = () => {
                               : undefined
                           }
                           onHover={(h) => onHover(h, node.data?.metadata?.name || '', true)}
-                          approving={state.action === FreightlineAction.ManualApproval}
+                          approving={state.action === FreightTimelineAction.ManualApproval}
                           highlighted={highlightedStages[node.data?.metadata?.name || '']}
                         />
                       </>

diff --git a/ui/src/features/project/pipelines/types.ts b/ui/src/features/project/pipelines/types.ts
@@ -61,7 +61,7 @@ export const NewWarehouseNode = (warehouse: Warehouse, stageNames?: string[]): R
   };
 };
 
-export enum FreightlineAction {
+export enum FreightTimelineAction {
   Promote = 'promote', // Promoting a stage. Freight has not been selected yet
   PromoteSubscribers = 'promoteSubscribers', // Promoting subscribers of a stage. Freight has not been selected yet
   ManualApproval = 'manualApproval' // Manually approving a freight

diff --git a/ui/src/features/project/pipelines/utils/state.ts b/ui/src/features/project/pipelines/utils/state.ts
@@ -1,17 +1,17 @@
 import { useState } from 'react';
 
-import { FreightMode, FreightlineAction } from '../types';
+import { FreightMode, FreightTimelineAction } from '../types';
 
 export interface PipelineStateHook {
-  action?: FreightlineAction;
+  action?: FreightTimelineAction;
   freight?: string;
   stage?: string;
   clear: () => void;
-  select: (action?: FreightlineAction, stage?: string, freight?: string) => void;
+  select: (action?: FreightTimelineAction, stage?: string, freight?: string) => void;
 }
 
 export const usePipelineState = (): PipelineStateHook => {
-  const [action, setAction] = useState<FreightlineAction | undefined>();
+  const [action, setAction] = useState<FreightTimelineAction | undefined>();
   const [freight, setFreight] = useState<string | undefined>();
   const [stage, setStage] = useState<string | undefined>();
 
@@ -21,20 +21,20 @@ export const usePipelineState = (): PipelineStateHook => {
     setStage(undefined);
   };
 
-  const select = (_action?: FreightlineAction, _stage?: string, _freight?: string) => {
+  const select = (_action?: FreightTimelineAction, _stage?: string, _freight?: string) => {
     if (action === _action) {
       clear();
       return;
     }
     if (_action) {
       setAction(_action);
       if (
-        _action === FreightlineAction.Promote ||
-        _action === FreightlineAction.PromoteSubscribers
+        _action === FreightTimelineAction.Promote ||
+        _action === FreightTimelineAction.PromoteSubscribers
       ) {
         setStage(_stage);
         setFreight(undefined);
-      } else if (_action === FreightlineAction.ManualApproval) {
+      } else if (_action === FreightTimelineAction.ManualApproval) {
         setFreight(_freight);
         setStage(undefined);
       }
@@ -60,7 +60,8 @@ export const usePipelineState = (): PipelineStateHook => {
 export const isPromoting = ({ action, stage }: PipelineStateHook) => {
   return (
     stage &&
-    (action === FreightlineAction.PromoteSubscribers || action === FreightlineAction.Promote)
+    (action === FreightTimelineAction.PromoteSubscribers ||
+      action === FreightTimelineAction.Promote)
   );
 };
 
@@ -69,7 +70,7 @@ export const getFreightMode = (
   freightID: string,
   promotionEligible: boolean
 ): FreightMode => {
-  if (state.action === FreightlineAction.ManualApproval) {
+  if (state.action === FreightTimelineAction.ManualApproval) {
     return state.freight === freightID ? FreightMode.Selected : FreightMode.Disabled;
   }
 

diff --git a/ui/src/features/project/pipelines/utils/use-promotion-eligible-freight.ts b/ui/src/features/project/pipelines/utils/use-promotion-eligible-freight.ts
@@ -2,11 +2,11 @@ import { useMemo } from 'react';
 
 import { Freight } from '@ui/gen/v1alpha1/generated_pb';
 
-import { FreightlineAction } from '../types';
+import { FreightTimelineAction } from '../types';
 
 export const usePromotionEligibleFreight = (
   freight: Freight[],
-  action?: FreightlineAction,
+  action?: FreightTimelineAction,
   stage?: string,
   disabled?: boolean
 ) => {
@@ -15,7 +15,7 @@ export const usePromotionEligibleFreight = (
       return {};
     }
     const availableFreight =
-      action === FreightlineAction.Promote || !stage
+      action === FreightTimelineAction.Promote || !stage
         ? freight
         : // if promoting subscribers, only include freight that has been verified in the promoting stage
           freight.filter((f) => !!f?.status?.verifiedIn[stage]);