[Canvas] Filters panel. (#116592)

* Added new GlobalConfig layout.

* Added filter components.

* Added filterViews and their transforming.

* Refactored getFilterFormatter method.

* Added types.

* Added hook for connecting to the canvas store.

* Added filter types.

* Fixed the style of filter view.

* Added sidebar reducer and saved groupByOption there.

* Added strict type.

* Added time formatting and translations.

* added invalid date translation.

* Added components to the view of filter.

* Fixed some bugs and done refactoring.

* Added unit tests for filter.ts lib.

* Refactored use_canvas_filters and added unit tests for filter_adapters.

* Fixed format.

* Added test to groupFiltersBy function.

* Added default (beta) FiltersGroup story.

* Refactored the code.

* Storybook and snapshot for FiltersGroup component.

* Added utils for WorkpadFilters storybook.

* FilterComponent storybook and snapshot added.

* WorkpadFiltersComponent storybook and snapshots added.

* WorkpadFilters redux storybook added.

* Added element without group to the redux WorkpadFilters storybook.

* Updated snapshot for filter.component.

* Moved filter views to a workpad_filters directory.

* Fixed styles of the filter component.

* Changed FunctionComponent to FC.

* filter_group.tsx to filter_group.component.tsx

* Added default to the groupFiltersByField

* Added DEFAULT_GROUP_BY_FIELD.

* filters_group.stories to filters_group.component.stories

* Updated snapshots.

Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/canvas/common/lib/constants.ts

@@ -6,6 +6,7 @@
  */
 
 import { SHAREABLE_RUNTIME_NAME } from '../../shareable_runtime/constants_static';
+import { FilterField } from '../../types';
 
 export const CANVAS_TYPE = 'canvas-workpad';
 export const CUSTOM_ELEMENT_TYPE = 'canvas-element';
@@ -25,6 +26,7 @@ export const SESSIONSTORAGE_LASTPATH = 'lastPath:canvas';
 export const FETCH_TIMEOUT = 30000; // 30 seconds
 export const DEFAULT_WORKPAD_CSS = '.canvasPage {\n\n}';
 export const DEFAULT_ELEMENT_CSS = '.canvasRenderEl{\n\n}';
+export const DEFAULT_GROUP_BY_FIELD: FilterField = 'filterGroup';
 export const VALID_IMAGE_TYPES = ['gif', 'jpeg', 'png', 'svg+xml'];
 export const ASSET_MAX_SIZE = 25000;
 export const ELEMENT_SHIFT_OFFSET = 10;

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

@@ -0,0 +1,15 @@
+/*
+ * 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, { FC } from 'react';
+import { WorkpadFilters } from '../../workpad_filters';
+// @ts-expect-error unconverted component
+import { SidebarSection } from '../sidebar_section';
+
+export const FilterConfig: FC = () => {
+  return <WorkpadFilters />;
+};

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

@@ -0,0 +1,29 @@
+/*
+ * 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, { Fragment, FC } from 'react';
+// @ts-expect-error unconverted component
+import { ElementConfig } from '../../element_config';
+// @ts-expect-error unconverted component
+import { PageConfig } from '../../page_config';
+import { WorkpadConfig } from '../../workpad_config';
+// @ts-expect-error unconverted component
+import { SidebarSection } from '../sidebar_section';
+
+export const GeneralConfig: FC = () => {
+  return (
+    <Fragment>
+      <SidebarSection>
+        <WorkpadConfig />
+        <ElementConfig />
+      </SidebarSection>
+      <SidebarSection>
+        <PageConfig />
+      </SidebarSection>
+    </Fragment>
+  );
+};

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

@@ -0,0 +1,62 @@
+/*
+ * 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, { Fragment, FC } from 'react';
+import { EuiTabbedContent, EuiTitle, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { GeneralConfig } from './general_config';
+import { FilterConfig } from './filter_config';
+
+const strings = {
+  getTitle: () =>
+    i18n.translate('xpack.canvas.globalConfig.title', {
+      defaultMessage: 'Workpad settings',
+    }),
+  getGeneralLabel: () =>
+    i18n.translate('xpack.canvas.globalConfig.general', {
+      defaultMessage: 'General',
+    }),
+  getFilterLabel: () =>
+    i18n.translate('xpack.canvas.globalConfig.filter', {
+      defaultMessage: 'Filter',
+    }),
+};
+
+export const GlobalConfig: FC = () => {
+  const tabs = [
+    {
+      id: 'general',
+      name: strings.getGeneralLabel(),
+      content: (
+        <div className="canvasSidebar__pop">
+          <EuiSpacer size="m" />
+          <GeneralConfig />
+        </div>
+      ),
+    },
+    {
+      id: 'filter',
+      name: strings.getFilterLabel(),
+      content: (
+        <div className="canvasSidebar__pop">
+          <FilterConfig />
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <Fragment>
+      <div className="canvasLayout__sidebarHeader">
+        <EuiTitle size="xs">
+          <h4>{strings.getTitle()}</h4>
+        </EuiTitle>
+      </div>
+      <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} size="s" />
+    </Fragment>
+  );
+};

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

@@ -0,0 +1,8 @@
+/*
+ * 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 { GlobalConfig } from './global_config';

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

@@ -51,8 +51,12 @@
   min-width: 0;
 }
 
+.canvasSidebar__expandable {
+  width: 100%;
+}
+
 .canvasSidebar__expandable + .canvasSidebar__expandable {
-  margin-top: 0;
+  margin-top: 1px;
 
   .canvasSidebar__accordion:before {
     display: none;
@@ -87,6 +91,9 @@
     bottom: 0;
   }
 }
+.canvasSidebar__accordion.filtersSidebar__accordion {
+  margin: auto;
+}
 
 .canvasSidebar__accordionContent {
   padding-top: $euiSize;

x-pack/plugins/canvas/public/components/workpad_config/workpad_config.component.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { FunctionComponent, useState } from 'react';
+import React, { FC, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   EuiFieldText,
@@ -16,7 +16,6 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
-  EuiTitle,
   EuiToolTip,
   EuiTextArea,
   EuiAccordion,
@@ -76,10 +75,6 @@ const strings = {
     i18n.translate('xpack.canvas.workpadConfig.widthLabel', {
       defaultMessage: 'Width',
     }),
-  getTitle: () =>
-    i18n.translate('xpack.canvas.workpadConfig.title', {
-      defaultMessage: 'Workpad settings',
-    }),
   getUSLetterButtonLabel: () =>
     i18n.translate('xpack.canvas.workpadConfig.USLetterButtonLabel', {
       defaultMessage: 'US Letter',
@@ -101,7 +96,7 @@ export interface Props {
   setWorkpadVariables: (vars: CanvasVariable[]) => void;
 }
 
-export const WorkpadConfig: FunctionComponent<Props> = (props) => {
+export const WorkpadConfig: FC<Props> = (props) => {
   const [css, setCSS] = useState(props.css);
   const { size, name, setSize, setName, setWorkpadCSS, variables, setWorkpadVariables } = props;
   const rotate = () => setSize({ width: size.height, height: size.width });
@@ -127,14 +122,6 @@ export const WorkpadConfig: FunctionComponent<Props> = (props) => {
 
   return (
     <div>
-      <div className="canvasLayout__sidebarHeaderWorkpad">
-        <EuiTitle size="xs">
-          <h4>{strings.getTitle()}</h4>
-        </EuiTitle>
-      </div>
-
-      <EuiSpacer size="m" />
-
       <EuiFormRow label={strings.getNameLabel()} display="rowCompressed">
         <EuiFieldText compressed value={name} onChange={(e) => setName(e.target.value)} />
       </EuiFormRow>