Merge pull request #1869 from carbon-design-system/imagecard-upload-fix

fix(dashboardeditor): keep state of images to upload

Author: kodiakhq[bot]

src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.jsx

@@ -59,19 +59,27 @@ const ImageCardFormItems = ({ cardConfig, i18n, onChange }) => {
             readOnly
             value={cardConfig.content?.id || ''}
           />
-          <Button
-            kind="ghost"
-            renderIcon={Close16}
-            size="field"
-            iconDescription={mergedI18n.close}
-            className={`${baseClassName}--form-section ${baseClassName}--form-section-image-clear-button`}
-            onClick={() =>
-              // close means clear the image info out of the JSON
-              onChange(
-                omit(cardConfig, 'content.id', 'content.src', 'content.alt')
-              )
-            }
-          />
+          {cardConfig.content?.id ? (
+            <Button
+              kind="ghost"
+              renderIcon={Close16}
+              size="field"
+              iconDescription={mergedI18n.close}
+              className={`${baseClassName}--form-section ${baseClassName}--form-section-image-clear-button`}
+              onClick={() =>
+                // close means clear the image info out of the JSON
+                onChange(
+                  omit(
+                    cardConfig,
+                    'content.id',
+                    'content.src',
+                    'content.alt',
+                    'content.imgState'
+                  )
+                )
+              }
+            />
+          ) : null}
         </label>
         {/* TODO enable once hotspot editing is live <Button
           className={`${baseClassName}--form-section-image-btn`}

src/components/DashboardEditor/DashboardEditor.jsx

@@ -257,6 +257,7 @@ const DashboardEditor = ({
 
   // show the card gallery if no card is being edited
   const [dashboardJson, setDashboardJson] = useState(initialValue);
+  const [imagesToUpload, setImagesToUpload] = useState([]);
   const [selectedCardId, setSelectedCardId] = useState();
   const [selectedBreakpointIndex, setSelectedBreakpointIndex] = useState(
     breakpointSwitcher?.initialValue
@@ -326,7 +327,18 @@ const DashboardEditor = ({
       cardConfig.content.src = availableImages.find(
         (image) => image.id === cardConfig.content.id
       )?.src;
+    } else if (
+      cardConfig.content.imgState === 'new' &&
+      !imagesToUpload.some((image) => image.id === cardConfig.content.id)
+    ) {
+      if (cardConfig.content.id && cardConfig.content.src) {
+        setImagesToUpload((prevImagesToUpload) => [
+          ...prevImagesToUpload,
+          { id: cardConfig.content.id, src: cardConfig.content.src },
+        ]);
+      }
     }
+
     // TODO: this is really inefficient
     setDashboardJson((oldJSON) => ({
       ...oldJSON,
@@ -399,10 +411,10 @@ const DashboardEditor = ({
             breadcrumbs={headerBreadcrumbs}
             onEditTitle={onEditTitle}
             onImport={onImport}
-            onExport={() => onExport(dashboardJson)}
+            onExport={() => onExport(dashboardJson, imagesToUpload)}
             onDelete={onDelete}
             onCancel={onCancel}
-            onSubmit={onSubmit}
+            onSubmit={(params) => onSubmit(params, imagesToUpload)}
             isSubmitDisabled={isSubmitDisabled}
             isSubmitLoading={isSubmitLoading}
             i18n={mergedI18n}

src/components/DashboardEditor/DashboardEditor.test.jsx

@@ -238,14 +238,17 @@ describe('DashboardEditor', () => {
     const submitBtn = screen.getByText('Save and close');
     expect(submitBtn).toBeInTheDocument();
     fireEvent.click(submitBtn);
-    expect(mockOnSubmit).toBeCalledWith({
-      cards: [],
-      layouts: {
-        lg: [],
-        md: [],
-        xl: [],
+    expect(mockOnSubmit).toBeCalledWith(
+      {
+        cards: [],
+        layouts: {
+          lg: [],
+          md: [],
+          xl: [],
+        },
       },
-    });
+      []
+    );
   });
 
   it('selecting cancel should fire onCancel', () => {