feat: [M3-8023] - Refactor Image Upload and Add Tags (#10484)

* save progress * save progress * save progress * save progress * upload flow works 🎉 * save progress * save progress * clean up * fix tsc errors * more progress * re-add redux and analytics * fix e2e tests by clicking submit button * add comments * fixes * add tags * Added changeset: Tags to image upload tab * re-add nicer error messages so UX does not get worse * fix small state bug * move react query logic * clean up imports * scroll errors into view and disable fields when upload is happening * all feedback from @mjac0bs except CLI modal changes * clean up the image upload CLI dialog * migrate to `Upload Using Command Line` * move helper text upon UX request --------- Co-authored-by: Banks Nussman <banks@nussman.us>
linode · May 28, 2024 · 60a108d · 60a108d
1 parent b6c4094
commit 60a108d
Show file tree

Hide file tree

Showing 13 changed files with 635 additions and 761 deletions.
diff --git a/packages/manager/.changeset/pr-10484-added-1715972836354.md b/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))
diff --git a/packages/manager/cypress/e2e/core/images/machine-image-upload.spec.ts b/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();

diff --git a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx b/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
@@ -1,24 +1,35 @@
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
-import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
+import {
+  CopyTooltip,
+  CopyTooltipProps,
+} from 'src/components/CopyTooltip/CopyTooltip';
 import { TextField, TextFieldProps } from 'src/components/TextField';
 
 interface CopyableTextFieldProps extends TextFieldProps {
+  /**
+   * Optional props that are passed to the underlying CopyTooltip component
+   */
+  CopyTooltipProps?: Partial<CopyTooltipProps>;
   className?: string;
   hideIcon?: boolean;
 }
 
 export const CopyableTextField = (props: CopyableTextFieldProps) => {
-  const { className, hideIcon, value, ...restProps } = props;
+  const { CopyTooltipProps, className, hideIcon, value, ...restProps } = props;
 
   return (
     <StyledTextField
       value={value}
       {...restProps}
       InputProps={{
         endAdornment: hideIcon ? undefined : (
-          <CopyTooltip className="copyIcon" text={`${value}`} />
+          <CopyTooltip
+            className="copyIcon"
+            text={`${value}`}
+            {...CopyTooltipProps}
+          />
         ),
       }}
       className={`${className} copy removeDisabledStyles`}

diff --git a/packages/manager/src/components/LinodeCLIModal/LinodeCLIModal.tsx b/packages/manager/src/components/LinodeCLIModal/LinodeCLIModal.tsx
diff --git a/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.stories.tsx b/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} />;

diff --git a/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.test.tsx b/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();
   });