[7.x] [Canvas][tech-debt] Refactor Toolbar (completes Kill Recompose.…

…pure) (#73309) (#74048)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/canvas/i18n/components.ts

@@ -913,6 +913,13 @@ export const ComponentStrings = {
       i18n.translate('xpack.canvas.toolbar.workpadManagerCloseButtonLabel', {
         defaultMessage: 'Close',
       }),
+    getErrorMessage: (message: string) =>
+      i18n.translate('xpack.canvas.toolbar.errorMessage', {
+        defaultMessage: 'TOOLBAR ERROR: {message}',
+        values: {
+          message,
+        },
+      }),
   },
   ToolbarTray: {
     getCloseTrayAriaLabel: () =>

x-pack/plugins/canvas/public/components/toolbar/__examples__/toolbar.stories.tsx

@@ -4,36 +4,30 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-/*
- TODO: uncomment and fix this test to address storybook errors as a result of nested component dependencies - https://github.com/elastic/kibana/issues/58289
- */
-
-/*
-import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-import { Toolbar } from '../toolbar';
+import { Toolbar } from '../toolbar.component';
+
+// @ts-expect-error untyped local
+import { getDefaultElement } from '../../../state/defaults';
 
 storiesOf('components/Toolbar', module)
-  .addDecorator(story => (
-    <div
-      style={{
-        width: '200px',
-      }}
-    >
-      {story()}
-    </div>
-  ))
-  .add('with null metric', () => (
+  .add('no element selected', () => (
     <Toolbar
-      setTray={action('setTray')}
-      nextPage={action('nextPage')}
-      previousPage={action('previousPage')}
-      setShowWorkpadManager={action('setShowWorkpadManager')}
+      isWriteable={true}
       selectedPageNumber={1}
       totalPages={1}
-      showWorkpadManager={false}
+      workpadId={'abc'}
+      workpadName={'My Canvas Workpad'}
+    />
+  ))
+  .add('element selected', () => (
+    <Toolbar
       isWriteable={true}
+      selectedElement={getDefaultElement()}
+      selectedPageNumber={1}
+      totalPages={1}
+      workpadId={'abc'}
+      workpadName={'My Canvas Workpad'}
     />
   ));
-*/

x-pack/plugins/canvas/public/components/navbar/index.js → x-pack/plugins/canvas/public/components/toolbar/index.ts

@@ -4,7 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-import { Navbar as Component } from './navbar';
-
-export const Navbar = pure(Component);
+export { Toolbar } from './toolbar';
+export { Toolbar as ToolbarComponent } from './toolbar.component';