From 9a3a359c69a29612820ecc5b83cc3e306654171a Mon Sep 17 00:00:00 2001
From: Clint Andrew Hall <clint.hall@elastic.co>
Date: Tue, 29 Jun 2021 23:28:08 -0400
Subject: [PATCH] [canvas] Restore Workpad Title/button to Home; fix mounting
 behavior (#103601)

---
 .../public/components/home/hooks/index.ts     |  4 +-
 .../home/hooks/use_find_templates.ts          | 25 +------
 .../components/home/hooks/use_find_workpad.ts | 25 +------
 .../home/{my_workpads => }/loading.tsx        |  0
 .../home/my_workpads/my_workpads.tsx          | 18 +++--
 .../workpad_templates/workpad_templates.tsx   | 30 +++++---
 .../components/toolbar/toolbar.component.tsx  | 75 ++++++++++---------
 .../public/components/toolbar/toolbar.scss    |  5 ++
 .../empty_prompt.stories.storyshot            | 65 ----------------
 9 files changed, 80 insertions(+), 167 deletions(-)
 rename x-pack/plugins/canvas/public/components/home/{my_workpads => }/loading.tsx (100%)
 delete mode 100644 x-pack/plugins/canvas/storybook/public/components/home/my_workpads/__snapshots__/empty_prompt.stories.storyshot

diff --git a/x-pack/plugins/canvas/public/components/home/hooks/index.ts b/x-pack/plugins/canvas/public/components/home/hooks/index.ts
index 91e52948a7ba6..c4267a9857490 100644
--- a/x-pack/plugins/canvas/public/components/home/hooks/index.ts
+++ b/x-pack/plugins/canvas/public/components/home/hooks/index.ts
@@ -9,7 +9,7 @@ export { useCloneWorkpad } from './use_clone_workpad';
 export { useCreateWorkpad } from './use_create_workpad';
 export { useDeleteWorkpads } from './use_delete_workpad';
 export { useDownloadWorkpad } from './use_download_workpad';
-export { useFindTemplates, useFindTemplatesOnMount } from './use_find_templates';
-export { useFindWorkpads, useFindWorkpadsOnMount } from './use_find_workpad';
+export { useFindTemplates } from './use_find_templates';
+export { useFindWorkpads } from './use_find_workpad';
 export { useImportWorkpad } from './use_upload_workpad';
 export { useCreateFromTemplate } from './use_create_from_template';
diff --git a/x-pack/plugins/canvas/public/components/home/hooks/use_find_templates.ts b/x-pack/plugins/canvas/public/components/home/hooks/use_find_templates.ts
index 13ee289fe9867..9364a79987908 100644
--- a/x-pack/plugins/canvas/public/components/home/hooks/use_find_templates.ts
+++ b/x-pack/plugins/canvas/public/components/home/hooks/use_find_templates.ts
@@ -5,34 +5,11 @@
  * 2.0.
  */
 
-import { useState, useCallback } from 'react';
-import useMount from 'react-use/lib/useMount';
+import { useCallback } from 'react';
 
 import { useWorkpadService } from '../../../services';
-import { TemplateFindResponse } from '../../../services/workpad';
-
-const emptyResponse = { templates: [] };
 
 export const useFindTemplates = () => {
   const workpadService = useWorkpadService();
   return useCallback(async () => await workpadService.findTemplates(), [workpadService]);
 };
-
-export const useFindTemplatesOnMount = (): [boolean, TemplateFindResponse] => {
-  const [isMounted, setIsMounted] = useState(false);
-  const findTemplates = useFindTemplates();
-  const [templateResponse, setTemplateResponse] = useState<TemplateFindResponse>(emptyResponse);
-
-  const fetchTemplates = useCallback(async () => {
-    const foundTemplates = await findTemplates();
-    setTemplateResponse(foundTemplates || emptyResponse);
-    setIsMounted(true);
-  }, [findTemplates]);
-
-  useMount(() => {
-    fetchTemplates();
-    return () => setIsMounted(false);
-  });
-
-  return [isMounted, templateResponse];
-};
diff --git a/x-pack/plugins/canvas/public/components/home/hooks/use_find_workpad.ts b/x-pack/plugins/canvas/public/components/home/hooks/use_find_workpad.ts
index 3f8b0e6f630f5..10352d0472e8c 100644
--- a/x-pack/plugins/canvas/public/components/home/hooks/use_find_workpad.ts
+++ b/x-pack/plugins/canvas/public/components/home/hooks/use_find_workpad.ts
@@ -5,14 +5,10 @@
  * 2.0.
  */
 
-import { useState, useCallback } from 'react';
-import useMount from 'react-use/lib/useMount';
+import { useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 
-import { WorkpadFindResponse } from '../../../services/workpad';
-
 import { useNotifyService, useWorkpadService } from '../../../services';
-const emptyResponse = { total: 0, workpads: [] };
 
 export const useFindWorkpads = () => {
   const workpadService = useWorkpadService();
@@ -30,25 +26,6 @@ export const useFindWorkpads = () => {
   );
 };
 
-export const useFindWorkpadsOnMount = (): [boolean, WorkpadFindResponse] => {
-  const [isMounted, setIsMounted] = useState(false);
-  const findWorkpads = useFindWorkpads();
-  const [workpadResponse, setWorkpadResponse] = useState<WorkpadFindResponse>(emptyResponse);
-
-  const fetchWorkpads = useCallback(async () => {
-    const foundWorkpads = await findWorkpads();
-    setWorkpadResponse(foundWorkpads || emptyResponse);
-    setIsMounted(true);
-  }, [findWorkpads]);
-
-  useMount(() => {
-    fetchWorkpads();
-    return () => setIsMounted(false);
-  });
-
-  return [isMounted, workpadResponse];
-};
-
 const errors = {
   getFindFailureErrorMessage: () =>
     i18n.translate('xpack.canvas.error.useFindWorkpads.findFailureErrorMessage', {
diff --git a/x-pack/plugins/canvas/public/components/home/my_workpads/loading.tsx b/x-pack/plugins/canvas/public/components/home/loading.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/home/my_workpads/loading.tsx
rename to x-pack/plugins/canvas/public/components/home/loading.tsx
diff --git a/x-pack/plugins/canvas/public/components/home/my_workpads/my_workpads.tsx b/x-pack/plugins/canvas/public/components/home/my_workpads/my_workpads.tsx
index 4242e2e9d130f..f5d41313ff571 100644
--- a/x-pack/plugins/canvas/public/components/home/my_workpads/my_workpads.tsx
+++ b/x-pack/plugins/canvas/public/components/home/my_workpads/my_workpads.tsx
@@ -6,9 +6,9 @@
  */
 
 import React, { useState, useEffect, createContext, Dispatch, SetStateAction } from 'react';
-import { useFindWorkpadsOnMount } from './../hooks';
+import { useFindWorkpads } from './../hooks';
 import { FoundWorkpad } from '../../../services/workpad';
-import { Loading } from './loading';
+import { Loading } from '../loading';
 import { MyWorkpads as Component } from './my_workpads.component';
 
 interface Context {
@@ -19,12 +19,18 @@ interface Context {
 export const WorkpadsContext = createContext<Context | null>(null);
 
 export const MyWorkpads = () => {
-  const [isMounted, workpadResponse] = useFindWorkpadsOnMount();
-  const [workpads, setWorkpads] = useState(workpadResponse.workpads);
+  const findWorkpads = useFindWorkpads();
+  const [isMounted, setIsMounted] = useState(false);
+  const [workpads, setWorkpads] = useState<FoundWorkpad[]>([]);
 
   useEffect(() => {
-    setWorkpads(workpadResponse.workpads);
-  }, [workpadResponse]);
+    const mount = async () => {
+      const response = await findWorkpads('');
+      setIsMounted(true);
+      setWorkpads(response?.workpads || []);
+    };
+    mount();
+  }, [setIsMounted, findWorkpads]);
 
   if (!isMounted) {
     return <Loading />;
diff --git a/x-pack/plugins/canvas/public/components/home/workpad_templates/workpad_templates.tsx b/x-pack/plugins/canvas/public/components/home/workpad_templates/workpad_templates.tsx
index 352285e66424b..6171c05e11c8e 100644
--- a/x-pack/plugins/canvas/public/components/home/workpad_templates/workpad_templates.tsx
+++ b/x-pack/plugins/canvas/public/components/home/workpad_templates/workpad_templates.tsx
@@ -5,27 +5,33 @@
  * 2.0.
  */
 
-import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import React, { useState, useEffect } from 'react';
 
-import { useCreateFromTemplate, useFindTemplatesOnMount } from '../hooks';
+import { useCreateFromTemplate, useFindTemplates } from '../hooks';
 
 import { WorkpadTemplates as Component } from './workpad_templates.component';
+import { CanvasTemplate } from '../../../../types';
+import { Loading } from '../loading';
 
 export const WorkpadTemplates = () => {
-  const [isMounted, templateResponse] = useFindTemplatesOnMount();
+  const findTemplates = useFindTemplates();
+  const [isMounted, setIsMounted] = useState(false);
+  const [templates, setTemplates] = useState<CanvasTemplate[]>([]);
+
+  useEffect(() => {
+    const mount = async () => {
+      const response = await findTemplates();
+      setIsMounted(true);
+      setTemplates(response?.templates || []);
+    };
+    mount();
+  }, [setIsMounted, findTemplates]);
+
   const onCreateWorkpad = useCreateFromTemplate();
 
   if (!isMounted) {
-    return (
-      <EuiFlexGroup justifyContent="spaceAround" alignItems="center" style={{ minHeight: 600 }}>
-        <EuiFlexItem grow={false}>
-          <EuiLoadingSpinner size="xl" />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
+    return <Loading />;
   }
-  const { templates } = templateResponse;
 
   return <Component {...{ templates, onCreateWorkpad }} />;
 };
diff --git a/x-pack/plugins/canvas/public/components/toolbar/toolbar.component.tsx b/x-pack/plugins/canvas/public/components/toolbar/toolbar.component.tsx
index 13cc4db7c6217..dca549b6b38ed 100644
--- a/x-pack/plugins/canvas/public/components/toolbar/toolbar.component.tsx
+++ b/x-pack/plugins/canvas/public/components/toolbar/toolbar.component.tsx
@@ -93,43 +93,50 @@ export const Toolbar: FC<Props> = ({
     <div className="canvasToolbar hide-for-sharing">
       {activeTray !== null && <Tray done={() => setActiveTray(null)}>{trays[activeTray]}</Tray>}
       <div className="canvasToolbar__container">
-        <EuiFlexGroup alignItems="center" gutterSize="none" className="canvasToolbar__controls">
-          <EuiFlexItem grow={false}>
-            <RoutingButtonIcon
-              color="text"
-              to={getUrl(selectedPageNumber - 1)}
-              iconType="arrowLeft"
-              isDisabled={selectedPageNumber <= 1}
-              aria-label={strings.getPreviousPageAriaLabel()}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty color="text" onClick={() => toggleTray('pageManager')}>
-              {strings.getPageButtonLabel(selectedPageNumber, totalPages)}
-            </EuiButtonEmpty>
+        <EuiFlexGroup gutterSize="none" alignItems="center">
+          <EuiFlexItem grow={false} className="canvasToolbar__home">
+            {workpadName}
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <RoutingButtonIcon
-              color="text"
-              to={getUrl(selectedPageNumber + 1)}
-              iconType="arrowRight"
-              isDisabled={selectedPageNumber >= totalPages}
-              aria-label={strings.getNextPageAriaLabel()}
-            />
+            <EuiFlexGroup alignItems="center" gutterSize="none" className="canvasToolbar__controls">
+              <EuiFlexItem grow={false}>
+                <RoutingButtonIcon
+                  color="text"
+                  to={getUrl(selectedPageNumber - 1)}
+                  iconType="arrowLeft"
+                  isDisabled={selectedPageNumber <= 1}
+                  aria-label={strings.getPreviousPageAriaLabel()}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty color="text" onClick={() => toggleTray('pageManager')}>
+                  {strings.getPageButtonLabel(selectedPageNumber, totalPages)}
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <RoutingButtonIcon
+                  color="text"
+                  to={getUrl(selectedPageNumber + 1)}
+                  iconType="arrowRight"
+                  isDisabled={selectedPageNumber >= totalPages}
+                  aria-label={strings.getNextPageAriaLabel()}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem />
+              {elementIsSelected && isWriteable && (
+                <EuiFlexItem grow={false}>
+                  <EuiButtonEmpty
+                    color="text"
+                    iconType="editorCodeBlock"
+                    onClick={() => toggleTray('expression')}
+                    data-test-subj="canvasExpressionEditorButton"
+                  >
+                    {strings.getEditorButtonLabel()}
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+              )}
+            </EuiFlexGroup>
           </EuiFlexItem>
-          <EuiFlexItem />
-          {elementIsSelected && isWriteable && (
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                color="text"
-                iconType="editorCodeBlock"
-                onClick={() => toggleTray('expression')}
-                data-test-subj="canvasExpressionEditorButton"
-              >
-                {strings.getEditorButtonLabel()}
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          )}
         </EuiFlexGroup>
       </div>
     </div>
diff --git a/x-pack/plugins/canvas/public/components/toolbar/toolbar.scss b/x-pack/plugins/canvas/public/components/toolbar/toolbar.scss
index c46a2ec7a1e22..9433fdddbc8bb 100644
--- a/x-pack/plugins/canvas/public/components/toolbar/toolbar.scss
+++ b/x-pack/plugins/canvas/public/components/toolbar/toolbar.scss
@@ -20,6 +20,11 @@
   }
 }
 
+.canvasToolbar__home {
+  padding: $euiSizeM 0 $euiSizeM $euiSizeL;
+  height: 100%;
+}
+
 .canvasToolbar__controls {
   padding: $euiSizeM;
   height: 100%;
diff --git a/x-pack/plugins/canvas/storybook/public/components/home/my_workpads/__snapshots__/empty_prompt.stories.storyshot b/x-pack/plugins/canvas/storybook/public/components/home/my_workpads/__snapshots__/empty_prompt.stories.storyshot
deleted file mode 100644
index 39ec1e234ead5..0000000000000
--- a/x-pack/plugins/canvas/storybook/public/components/home/my_workpads/__snapshots__/empty_prompt.stories.storyshot
+++ /dev/null
@@ -1,65 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Home/Empty Prompt Empty Prompt 1`] = `
-<div
-  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive"
-  style={
-    Object {
-      "minHeight": 600,
-    }
-  }
->
-  <div
-    className="euiFlexItem euiFlexItem--flexGrowZero"
-  >
-    <div
-      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder"
-    >
-      <div
-        className="euiEmptyPrompt"
-        color="subdued"
-      >
-        <span
-          color="subdued"
-          data-euiicon-type="importAction"
-          size="xxl"
-        />
-        <div
-          className="euiSpacer euiSpacer--s"
-        />
-        <span
-          className="euiTextColor euiTextColor--subdued"
-        >
-          <h2
-            className="euiTitle euiTitle--medium"
-          >
-            Add your first workpad
-          </h2>
-          <div
-            className="euiSpacer euiSpacer--m"
-          />
-          <div
-            className="euiText euiText--medium"
-          >
-            <p>
-              Create a new workpad, start from a template, or import a workpad JSON file by dropping it here.
-            </p>
-            <p>
-              New to Canvas?
-               
-              <a
-                className="euiLink euiLink--primary"
-                href="home#/tutorial_directory/sampleData"
-                rel="noreferrer"
-              >
-                Add your first workpad
-              </a>
-              .
-            </p>
-          </div>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;