chore(backport release-0.7): feat(ui): ability to delete freight (#2111)

Co-authored-by: Remington Breeze <[email protected]>
Co-authored-by: Kent Rancourt <[email protected]>

ui/src/features/freightline/freightline.tsx

@@ -132,6 +132,7 @@ export const Freightline = ({
                       state.select(FreightlineAction.ManualApproval, undefined, id);
                     }}
                     refetchFreight={refetchFreight}
+                    inUse={stagesPerFreight[id]?.length > 0}
                   />
                 )}
                 <StageIndicators

ui/src/features/project/pipelines/delete-freight-modal.tsx

@@ -0,0 +1,58 @@
+import { useMutation } from '@connectrpc/connect-query';
+import { Alert, Modal, message } from 'antd';
+import { useParams } from 'react-router-dom';
+
+import { ModalComponentProps } from '@ui/features/common/modal/modal-context';
+import { getAlias } from '@ui/features/common/utils';
+import { deleteFreight } from '@ui/gen/service/v1alpha1/service-KargoService_connectquery';
+import { Freight } from '@ui/gen/v1alpha1/generated_pb';
+
+import { onError } from '../pipelines/utils/util';
+
+export const DeleteFreightModal = ({
+  visible,
+  hide,
+  onDelete,
+  freight
+}: ModalComponentProps & { onDelete: () => void; freight: Freight }) => {
+  const { name: project } = useParams();
+  const { mutate: deleteAction, isPending } = useMutation(deleteFreight, {
+    onError,
+    onSuccess: () => {
+      message.success('Freight successfully deleted');
+      onDelete();
+    }
+  });
+
+  const alias = getAlias(freight);
+
+  return (
+    <Modal
+      destroyOnClose
+      open={visible}
+      title='Confirm Delete'
+      onCancel={hide}
+      onOk={() =>
+        deleteAction({
+          name: freight.metadata?.name || '',
+          project
+        })
+      }
+      okText='Delete'
+      okButtonProps={{ loading: isPending, danger: true }}
+    >
+      <Alert
+        type='error'
+        banner
+        message={
+          <div>
+            Are you sure you want to delete freight{' '}
+            <span className='font-semibold'>{alias ? alias : freight?.metadata?.name}</span>?
+          </div>
+        }
+        className='mb-4'
+        showIcon={false}
+      />
+    </Modal>
+  );
+};

ui/src/features/project/pipelines/freight-action-menu.tsx

@@ -3,7 +3,8 @@ import {
   faClipboard,
   faCopy,
   faEllipsisV,
-  faPencil
+  faPencil,
+  faTrashAlt
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Dropdown, message } from 'antd';
@@ -12,18 +13,21 @@ import { useModal } from '@ui/features/common/modal/use-modal';
 import { getAlias } from '@ui/features/common/utils';
 import { Freight } from '@ui/gen/v1alpha1/generated_pb';
 
+import { DeleteFreightModal } from './delete-freight-modal';
 import { UpdateFreightAliasModal } from './update-freight-alias-modal';
 
 export const FreightActionMenu = ({
   freight,
   approveAction,
   refetchFreight,
-  hide
+  hide,
+  inUse
 }: {
   freight: Freight;
   approveAction: () => void;
   refetchFreight: () => void;
   hide?: boolean;
+  inUse?: boolean;
 }) => {
   const { show } = useModal();
 
@@ -96,6 +100,27 @@ export const FreightActionMenu = ({
                 />
               ));
             }
+          },
+          {
+            key: '5',
+            disabled: inUse,
+            label: (
+              <>
+                <FontAwesomeIcon icon={faTrashAlt} className='mr-2' /> Delete
+              </>
+            ),
+            onClick: () => {
+              show((p) => (
+                <DeleteFreightModal
+                  {...p}
+                  freight={freight}
+                  onDelete={() => {
+                    refetchFreight();
+                    p.hide();
+                  }}
+                />
+              ));
+            }
           }
         ]
       }}