feat: [M3-8023] - Refactor Image Upload and Add Tags

packages/api-v4/src/images/images.ts

@@ -12,7 +12,12 @@ import Request, {
   setXFilter,
 } from '../request';
 import { Filter, Params, ResourcePage as Page } from '../types';
-import { CreateImagePayload, Image, ImageUploadPayload, UploadImageResponse } from './types';
+import {
+  CreateImagePayload,
+  Image,
+  ImageUploadPayload,
+  UploadImageResponse,
+} from './types';
 
 /**
  * Get information about a single Image.

packages/manager/.changeset/pr-10484-added-1715972836354.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Tags to image upload tab ([#10484](https://github.com/linode/manager/pull/10484))

packages/manager/cypress/e2e/core/images/machine-image-upload.spec.ts

@@ -131,7 +131,13 @@ const uploadImage = (label: string) => {
       mimeType: 'application/x-gzip',
     });
   });
+
   cy.intercept('POST', apiMatcher('images/upload')).as('imageUpload');
+
+  ui.button.findByAttribute('type', 'submit')
+    .should('be.enabled')
+    .should('be.visible')
+    .click();
 };
 
 authenticate();

packages/manager/src/components/LinodeCLIModal/LinodeCLIModal.tsx

@@ -1,20 +1,33 @@
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
+import { useFormContext } from 'react-hook-form';
 
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
 import { Dialog } from 'src/components/Dialog/Dialog';
 import { sendCLIClickEvent } from 'src/utilities/analytics/customEventAnalytics';
+import { wrapInQuotes } from 'src/utilities/stringUtils';
+
+import type { ImageUploadPayload } from '@linode/api-v4';
 
 export interface ImageUploadSuccessDialogProps {
   analyticsKey?: string;
-  command: string;
   isOpen: boolean;
   onClose: () => void;
 }
 
 export const LinodeCLIModal = React.memo(
   (props: ImageUploadSuccessDialogProps) => {
-    const { analyticsKey, command, isOpen, onClose } = props;
+    const { analyticsKey, isOpen, onClose } = props;
+
+    const form = useFormContext<ImageUploadPayload>();
+
+    const { label, description, region } = form.getValues();
+
+    const cliLabel = formatForCLI(label, 'label');
+    const cliDescription = formatForCLI(description ?? '', 'description');
+    const cliRegion = formatForCLI(region, 'region');
+
+    const command = `linode-cli image-upload --label ${cliLabel} --description ${cliDescription} --region ${cliRegion} FILE`;
 
     return (
       <StyledLinodeCLIModal
@@ -83,3 +96,7 @@ const StyledCopyTooltip = styled(CopyTooltip, {
   },
   display: 'flex',
 }));
+
+const formatForCLI = (value: string, fallback: string) => {
+  return value ? wrapInQuotes(value) : `[${fallback.toUpperCase()}]`;
+};

packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.stories.tsx

@@ -9,10 +9,8 @@ import type { Meta, StoryObj } from '@storybook/react';
  */
 export const _ImageUploader: StoryObj<typeof ImageUploader> = {
   args: {
-    description: 'My Ubuntu Image for Production',
-    dropzoneDisabled: false,
-    label: 'file upload',
-    region: 'us-east-1',
+    isUploading: false,
+    progress: undefined,
   },
   render: (args) => {
     return <ImageUploader {...args} />;

packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.test.tsx

@@ -5,39 +5,33 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 import { ImageUploader } from './ImageUploader';
 
 const props = {
-  apiError: undefined,
-  dropzoneDisabled: false,
-  label: 'Upload files here',
-  onSuccess: vi.fn(),
-  region: 'us-east-1',
-  setCancelFn: vi.fn(),
-  setErrors: vi.fn(),
+  isUploading: false,
+  progress: undefined,
 };
 
 describe('File Uploader', () => {
   it('properly renders the File Uploader', () => {
     const screen = renderWithTheme(<ImageUploader {...props} />);
 
-    const browseFiles = screen.getByTestId('upload-button');
+    const browseFiles = screen.getByText('Browse Files').closest('button');
     expect(browseFiles).toBeVisible();
-    expect(browseFiles).toHaveAttribute('aria-disabled', 'false');
+    expect(browseFiles).toBeEnabled();
     const text = screen.getByText(
       'You can browse your device to upload an image file or drop it here.'
     );
     expect(text).toBeVisible();
   });
 
   it('disables the dropzone', () => {
-    const screen = renderWithTheme(
-      <ImageUploader {...props} dropzoneDisabled={true} />
-    );
+    const screen = renderWithTheme(<ImageUploader {...props} disabled />);
 
-    const browseFiles = screen.getByTestId('upload-button');
+    const browseFiles = screen.getByText('Browse Files').closest('button');
     expect(browseFiles).toBeVisible();
+    expect(browseFiles).toBeDisabled();
     expect(browseFiles).toHaveAttribute('aria-disabled', 'true');
 
     const text = screen.getByText(
-      'To upload an image, complete the required fields.'
+      'You can browse your device to upload an image file or drop it here.'
     );
     expect(text).toBeVisible();
   });