[Canvas] SidebarContent refactor. (#111672)

* Refactored sidebar.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.tsx

@@ -12,7 +12,7 @@ import { ElementSettings as Component } from './element_settings.component';
 import { State, PositionedElement } from '../../../../types';
 
 interface Props {
-  selectedElementId: string;
+  selectedElementId: string | null;
 }
 
 const mapStateToProps = (state: State, { selectedElementId }: Props): StateProps => ({

x-pack/plugins/canvas/public/components/sidebar/sidebar.tsx

@@ -6,7 +6,6 @@
  */
 
 import React, { FunctionComponent } from 'react';
-// @ts-expect-error unconverted component
 import { SidebarContent } from './sidebar_content';
 
 interface Props {

x-pack/plugins/canvas/public/components/sidebar/sidebar_content/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { SidebarContent } from './sidebar_content';
+export { SidebarContent as SidebarContentComponent } from './sidebar_content.component';

x-pack/plugins/canvas/public/components/sidebar/sidebar_content/sidebar_content.component.tsx

@@ -6,17 +6,19 @@
  */
 
 import React, { Fragment } from 'react';
-import { connect } from 'react-redux';
-import { compose, branch, renderComponent } from 'recompose';
 import { EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { SidebarHeader } from '../../sidebar_header';
+import { MultiElementSettings } from '../multi_element_settings';
+import { GroupSettings } from '../group_settings';
+import { GlobalConfig } from '../global_config';
+import { ElementSettings } from '../element_settings';
 
-import { getSelectedToplevelNodes, getSelectedElementId } from '../../state/selectors/workpad';
-import { SidebarHeader } from '../sidebar_header';
-import { MultiElementSettings } from './multi_element_settings';
-import { GroupSettings } from './group_settings';
-import { GlobalConfig } from './global_config';
-import { ElementSettings } from './element_settings';
+interface SidebarContentProps {
+  commit?: Function;
+  selectedElementId: string | null;
+  selectedToplevelNodes: string[];
+}
 
 const strings = {
   getGroupedElementSidebarTitle: () =>
@@ -43,12 +45,7 @@ const strings = {
     }),
 };
 
-const mapStateToProps = (state) => ({
-  selectedToplevelNodes: getSelectedToplevelNodes(state),
-  selectedElementId: getSelectedElementId(state),
-});
-
-const MultiElementSidebar = () => (
+const MultiElementSidebar: React.FC = () => (
   <Fragment>
     <SidebarHeader title={strings.getMultiElementSidebarTitle()} />
     <EuiSpacer />
@@ -56,38 +53,38 @@ const MultiElementSidebar = () => (
   </Fragment>
 );
 
-const GroupedElementSidebar = () => (
+const GroupedElementSidebar: React.FC = () => (
   <Fragment>
-    <SidebarHeader title={strings.getGroupedElementSidebarTitle()} groupIsSelected />
+    <SidebarHeader title={strings.getGroupedElementSidebarTitle()} />
     <EuiSpacer />
     <GroupSettings />
   </Fragment>
 );
 
-const SingleElementSidebar = ({ selectedElementId }) => (
+const SingleElementSidebar: React.FC<{ selectedElementId: string | null }> = ({
+  selectedElementId,
+}) => (
   <Fragment>
-    <SidebarHeader title={strings.getSingleElementSidebarTitle()} showLayerControls />
+    <SidebarHeader title={strings.getSingleElementSidebarTitle()} />
     <ElementSettings selectedElementId={selectedElementId} />
   </Fragment>
 );
 
-const branches = [
-  // multiple elements are selected
-  branch(
-    ({ selectedToplevelNodes }) => selectedToplevelNodes.length > 1,
-    renderComponent(MultiElementSidebar)
-  ),
-  // a single, grouped element is selected
-  branch(
-    ({ selectedToplevelNodes }) =>
-      selectedToplevelNodes.length === 1 && selectedToplevelNodes[0].includes('group'),
-    renderComponent(GroupedElementSidebar)
-  ),
-  // a single element is selected
-  branch(
-    ({ selectedToplevelNodes }) => selectedToplevelNodes.length === 1,
-    renderComponent(SingleElementSidebar)
-  ),
-];
+export const SidebarContent: React.FC<SidebarContentProps> = ({
+  selectedToplevelNodes,
+  selectedElementId,
+}) => {
+  if (selectedToplevelNodes.length > 1) {
+    return <MultiElementSidebar />;
+  }
 
-export const SidebarContent = compose(connect(mapStateToProps), ...branches)(GlobalConfig);
+  if (selectedToplevelNodes.length === 1 && selectedToplevelNodes[0].includes('group')) {
+    return <GroupedElementSidebar />;
+  }
+
+  if (selectedToplevelNodes.length === 1) {
+    return <SingleElementSidebar selectedElementId={selectedElementId} />;
+  }
+
+  return <GlobalConfig />;
+};

x-pack/plugins/canvas/public/components/sidebar/sidebar_content/sidebar_content.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { getSelectedToplevelNodes, getSelectedElementId } from '../../../state/selectors/workpad';
+import { State } from '../../../../types';
+import { SidebarContent as Component } from './sidebar_content.component';
+
+interface SidebarContentProps {
+  commit?: Function;
+}
+
+export const SidebarContent: React.FC<SidebarContentProps> = ({ commit }) => {
+  const selectedToplevelNodes = useSelector<State, string[]>((state) =>
+    getSelectedToplevelNodes(state)
+  );
+
+  const selectedElementId = useSelector<State, string | null>((state) =>
+    getSelectedElementId(state)
+  );
+
+  return (
+    <Component
+      commit={commit}
+      selectedToplevelNodes={selectedToplevelNodes}
+      selectedElementId={selectedElementId}
+    />
+  );
+};