[canvas] Restore Workpad Title/button to Home; fix mounting behavior

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';

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];
-};

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', {

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 />;

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 }} />;
 };

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>

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%;