Fix import workpad (#104722) (#104800)

elastic · Jul 8, 2021 · 9826a94 · 9826a94
1 parent 0b282ef
commit 9826a94
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 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
@@ -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
@@ -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 (