[Controls] [Portable Dashboards] Add control group renderer example plugin

examples/controls_example/kibana.json

@@ -0,0 +1,11 @@
+{
+  "id": "controlsExample",
+  "owner": {
+    "name": "Kibana Presentation",
+    "githubTeam": "kibana-presentation"
+  },
+  "version": "1.0.0",
+  "kibanaVersion": "kibana",
+  "ui": true,
+  "requiredPlugins": ["data", "developerExamples", "presentationUtil", "controls"]
+}

examples/controls_example/public/app.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import type { DataView } from '@kbn/data-views-plugin/public';
+import { AppMountParameters } from '@kbn/core/public';
+import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
+import { ControlsExampleStartDeps } from './plugin';
+import { BasicReduxExample } from './basic_redux_example';
+
+interface Props {
+  dataView: DataView;
+}
+
+const ControlsExamples = ({ dataView }: Props) => {
+  return (
+    <KibanaPageTemplate>
+      <KibanaPageTemplate.Header pageTitle="Controls as a Building Block" />
+      <KibanaPageTemplate.Section>
+        <BasicReduxExample dataView={dataView} />
+      </KibanaPageTemplate.Section>
+    </KibanaPageTemplate>
+  );
+};
+
+export const renderApp = async (
+  { data }: ControlsExampleStartDeps,
+  { element }: AppMountParameters
+) => {
+  const dataViews = await data.dataViews.find('kibana_sample_data_ecommerce');
+  if (dataViews.length > 0) {
+    ReactDOM.render(<ControlsExamples dataView={dataViews[0]} />, element);
+  }
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

examples/controls_example/public/basic_redux_example.tsx

@@ -0,0 +1,133 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useMemo, useState } from 'react';
+
+import {
+  LazyControlGroupRenderer,
+  ControlGroupContainer,
+  ControlGroupInput,
+  useControlGroupContainerContext,
+  ControlStyle,
+} from '@kbn/controls-plugin/public';
+import { withSuspense } from '@kbn/presentation-util-plugin/public';
+import type { DataView } from '@kbn/data-views-plugin/public';
+import {
+  EuiButtonGroup,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { getDefaultControlGroupInput } from '@kbn/controls-plugin/common';
+
+interface Props {
+  dataView: DataView;
+}
+const ControlGroupRenderer = withSuspense(LazyControlGroupRenderer);
+
+export const BasicReduxExample = ({ dataView }: Props) => {
+  const [myControlGroup, setControlGroup] = useState<ControlGroupContainer>();
+  const [currentControlStyle, setCurrentControlStyle] = useState<ControlStyle>('oneLine');
+
+  const ControlGroupReduxWrapper = useMemo(() => {
+    if (myControlGroup) return myControlGroup.getReduxEmbeddableTools().Wrapper;
+  }, [myControlGroup]);
+
+  const ButtonControls = () => {
+    const {
+      useEmbeddableDispatch,
+      actions: { setControlStyle },
+    } = useControlGroupContainerContext();
+    const dispatch = useEmbeddableDispatch();
+
+    return (
+      <>
+        <EuiFlexGroup alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiText>
+              <p>Choose a style for your control group:</p>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiButtonGroup
+              legend="Text style"
+              options={[
+                {
+                  id: `oneLine`,
+                  label: 'One line',
+                  value: 'oneLine' as ControlStyle,
+                },
+                {
+                  id: `twoLine`,
+                  label: 'Two lines',
+                  value: 'twoLine' as ControlStyle,
+                },
+              ]}
+              idSelected={currentControlStyle}
+              onChange={(id, value) => {
+                setCurrentControlStyle(value);
+                dispatch(setControlStyle(value));
+              }}
+              type="single"
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="m" />
+      </>
+    );
+  };
+
+  return (
+    <>
+      <EuiTitle>
+        <h2>Basic Redux Example</h2>
+      </EuiTitle>
+      <EuiText>
+        <p>
+          This example uses the redux context from the control group container in order to
+          dynamically change the style of the control group.
+        </p>
+      </EuiText>
+      <EuiSpacer size="m" />
+      <EuiPanel hasBorder={true}>
+        {ControlGroupReduxWrapper && (
+          <ControlGroupReduxWrapper>
+            <ButtonControls />
+          </ControlGroupReduxWrapper>
+        )}
+
+        <ControlGroupRenderer
+          onEmbeddableLoad={async (controlGroup) => {
+            setControlGroup(controlGroup);
+          }}
+          getCreationOptions={async (controlGroupInputBuilder) => {
+            const initialInput: Partial<ControlGroupInput> = {
+              ...getDefaultControlGroupInput(),
+              defaultControlWidth: 'small',
+            };
+            await controlGroupInputBuilder.addDataControlFromField(initialInput, {
+              dataViewId: dataView.id ?? 'kibana_sample_data_ecommerce',
+              fieldName: 'customer_first_name.keyword',
+            });
+            await controlGroupInputBuilder.addDataControlFromField(initialInput, {
+              dataViewId: dataView.id ?? 'kibana_sample_data_ecommerce',
+              fieldName: 'customer_last_name.keyword',
+              width: 'medium',
+              grow: false,
+              title: 'Last Name',
+            });
+            return initialInput;
+          }}
+        />
+      </EuiPanel>
+    </>
+  );
+};

examples/controls_example/public/index.ts

@@ -0,0 +1,13 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ControlsExamplePlugin } from './plugin';
+
+export function plugin() {
+  return new ControlsExamplePlugin();
+}

examples/controls_example/public/plugin.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import {
+  AppMountParameters,
+  AppNavLinkStatus,
+  CoreSetup,
+  CoreStart,
+  Plugin,
+} from '@kbn/core/public';
+import { DataPublicPluginStart } from '@kbn/data-plugin/public';
+import { DeveloperExamplesSetup } from '@kbn/developer-examples-plugin/public';
+import img from './control_group_image.png';
+
+interface SetupDeps {
+  developerExamples: DeveloperExamplesSetup;
+}
+
+export interface ControlsExampleStartDeps {
+  data: DataPublicPluginStart;
+}
+
+export class ControlsExamplePlugin
+  implements Plugin<void, void, SetupDeps, ControlsExampleStartDeps>
+{
+  public setup(core: CoreSetup<ControlsExampleStartDeps>, { developerExamples }: SetupDeps) {
+    core.application.register({
+      id: 'controlsExamples',
+      title: 'Controls examples',
+      navLinkStatus: AppNavLinkStatus.hidden,
+      async mount(params: AppMountParameters) {
+        const [, depsStart] = await core.getStartServices();
+        const { renderApp } = await import('./app');
+        return renderApp(depsStart, params);
+      },
+    });
+
+    developerExamples.register({
+      appId: 'controlsExamples',
+      title: 'Controls as a Building Block',
+      description: `Showcases different ways to embed a control group into your app`,
+      image: img,
+    });
+  }
+
+  public start(core: CoreStart) {}
+
+  public stop() {}
+}

examples/controls_example/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./target/types"
+  },
+  "include": [
+    "index.ts",
+    "common/**/*.ts",
+    "public/**/*.ts",
+    "public/**/*.tsx",
+    "server/**/*.ts",
+    "../../typings/**/*"
+  ],
+  "exclude": [],
+  "kbn_references": [
+    { "path": "../../src/core/tsconfig.json" },
+    { "path": "../developer_examples/tsconfig.json" },
+    { "path": "../../src/plugins/data/tsconfig.json" },
+    { "path": "../../src/plugins/controls/tsconfig.json" },
+    { "path": "../../src/plugins/presentation_util/tsconfig.json" }
+  ]
+}