From b7a46e67fe445196aa47a45c946497349591b186 Mon Sep 17 00:00:00 2001
From: Clint Andrew Hall <clint.hall@elastic.co>
Date: Wed, 7 Jul 2021 21:02:44 -0400
Subject: [PATCH] Fix import workpad (#104722)

---
 .../components/home/hooks/use_upload_workpad.ts   |  7 +++++--
 .../home/my_workpads/upload_dropzone.tsx          | 15 ++-------------
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/x-pack/plugins/canvas/public/components/home/hooks/use_upload_workpad.ts b/x-pack/plugins/canvas/public/components/home/hooks/use_upload_workpad.ts
index 7934a469bb7a2..5c01ce631f5a7 100644
--- a/x-pack/plugins/canvas/public/components/home/hooks/use_upload_workpad.ts
+++ b/x-pack/plugins/canvas/public/components/home/hooks/use_upload_workpad.ts
@@ -12,10 +12,12 @@ import { i18n } from '@kbn/i18n';
 import { CANVAS, JSON as JSONString } from '../../../../i18n/constants';
 import { useNotifyService } from '../../../services';
 import { getId } from '../../../lib/get_id';
+import { useCreateWorkpad } from './use_create_workpad';
 import type { CanvasWorkpad } from '../../../../types';
 
 export const useImportWorkpad = () => {
   const notifyService = useNotifyService();
+  const createWorkpad = useCreateWorkpad();
 
   return useCallback(
     (file?: File, onComplete: (workpad?: CanvasWorkpad) => void = () => {}) => {
@@ -37,7 +39,7 @@ export const useImportWorkpad = () => {
       const reader = new FileReader();
 
       // handle reading the uploaded file
-      reader.onload = () => {
+      reader.onload = async () => {
         try {
           const workpad = JSON.parse(reader.result as string); // Type-casting because we catch below.
           workpad.id = getId('workpad');
@@ -48,6 +50,7 @@ export const useImportWorkpad = () => {
             throw new Error(errors.getMissingPropertiesErrorMessage());
           }
 
+          await createWorkpad(workpad);
           onComplete(workpad);
         } catch (e) {
           notifyService.error(e, {
@@ -62,7 +65,7 @@ export const useImportWorkpad = () => {
       // read the uploaded file
       reader.readAsText(file);
     },
-    [notifyService]
+    [notifyService, createWorkpad]
   );
 };
 
diff --git a/x-pack/plugins/canvas/public/components/home/my_workpads/upload_dropzone.tsx b/x-pack/plugins/canvas/public/components/home/my_workpads/upload_dropzone.tsx
index 8ee0ae108392e..962f616515396 100644
--- a/x-pack/plugins/canvas/public/components/home/my_workpads/upload_dropzone.tsx
+++ b/x-pack/plugins/canvas/public/components/home/my_workpads/upload_dropzone.tsx
@@ -11,8 +11,7 @@ import Dropzone from 'react-dropzone';
 
 import { useNotifyService } from '../../../services';
 import { ErrorStrings } from '../../../../i18n';
-import { useImportWorkpad, useCreateWorkpad } from '../hooks';
-import { CanvasWorkpad } from '../../../../types';
+import { useImportWorkpad } from '../hooks';
 
 import { UploadDropzone as Component } from './upload_dropzone.component';
 
@@ -21,18 +20,8 @@ const { WorkpadDropzone: errors } = ErrorStrings;
 export const UploadDropzone: FC = ({ children }) => {
   const notify = useNotifyService();
   const uploadWorkpad = useImportWorkpad();
-  const createWorkpad = useCreateWorkpad();
   const [isDisabled, setIsDisabled] = useState(false);
 
-  const onComplete = async (workpad?: CanvasWorkpad) => {
-    if (!workpad) {
-      setIsDisabled(false);
-      return;
-    }
-
-    await createWorkpad(workpad);
-  };
-
   const onDrop = (files: FileList) => {
     if (!files) {
       return;
@@ -44,7 +33,7 @@ export const UploadDropzone: FC = ({ children }) => {
     }
 
     setIsDisabled(true);
-    uploadWorkpad(files[0], onComplete);
+    uploadWorkpad(files[0], () => setIsDisabled(false));
   };
 
   return (