github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 18:51:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

[controls] complete control input builder API (#146764)

Browse source 
ControlGroupRenderer API changes
* Added parameter `initialInput: Partial<ControlGroupInput>,` to
getCreationOptions method signature so consumers don't need to call
`getDefaultControlGroupInput`
* Rename prop onEmbeddableLoad -> onLoadComplete
* Rename prop getCreationOptions -> getInitialInput

controlGroupInputBuilder API changes
* Added `addOptionsListControl` method that allows users to pass
selectedOptions
* Added `addRangeSliderControl`
* Added `addTimeSliderControl`

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Devon Thomson <devon.thomson@elastic.co>
This commit is contained in:
Nathan Reese 2022-12-01 16:38:43 -07:00 • committed by GitHub
parent f95414f76f
commit 15ed59d6f0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 209 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

23
examples/controls_example/public/app.tsx
View file

@ -9,23 +9,23 @@
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) => {
const ControlsExamples = ({ dataViewId }: { dataViewId?: string }) => {
const examples = dataViewId ? (
<>
<BasicReduxExample dataViewId={dataViewId} />
</>
) : (
<div>{'Please install e-commerce sample data to run controls examples.'}</div>
);
return (
<KibanaPageTemplate>
<KibanaPageTemplate.Header pageTitle="Controls as a Building Block" />
<KibanaPageTemplate.Section>
<BasicReduxExample dataView={dataView} />
</KibanaPageTemplate.Section>
<KibanaPageTemplate.Section>{examples}</KibanaPageTemplate.Section>
</KibanaPageTemplate>
);
};
@ -35,8 +35,7 @@ export const renderApp = async (
{ element }: AppMountParameters
) => {
const dataViews = await data.dataViews.find('kibana_sample_data_ecommerce');
if (dataViews.length > 0) {
ReactDOM.render(<ControlsExamples dataView={dataViews[0]} />, element);
}
const dataViewId = dataViews.length > 0 ? dataViews[0].id : undefined;
ReactDOM.render(<ControlsExamples dataViewId={dataViewId} />, element);
return () => ReactDOM.unmountComponentAtNode(element);
};

39
examples/controls_example/public/basic_redux_example.tsx
View file

@ -11,12 +11,10 @@ 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,
@ -26,27 +24,24 @@ import {
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');
export const BasicReduxExample = ({ dataViewId }: { dataViewId: string }) => {
const [controlGroup, setControlGroup] = useState<ControlGroupContainer>();
const ControlGroupReduxWrapper = useMemo(() => {
if (myControlGroup) return myControlGroup.getReduxEmbeddableTools().Wrapper;
}, [myControlGroup]);
if (controlGroup) return controlGroup.getReduxEmbeddableTools().Wrapper;
}, [controlGroup]);
const ButtonControls = () => {
const {
useEmbeddableDispatch,
useEmbeddableSelector: select,
actions: { setControlStyle },
} = useControlGroupContainerContext();
const dispatch = useEmbeddableDispatch();
const controlStyle = select((state) => state.explicitInput.controlStyle);
return (
<>
@ -71,9 +66,8 @@ export const BasicReduxExample = ({ dataView }: Props) => {
value: 'twoLine' as ControlStyle,
},
]}
idSelected={currentControlStyle}
idSelected={controlStyle}
onChange={(id, value) => {
setCurrentControlStyle(value);
dispatch(setControlStyle(value));
}}
type="single"
@ -105,20 +99,17 @@ export const BasicReduxExample = ({ dataView }: Props) => {
)}
<ControlGroupRenderer
onEmbeddableLoad={async (controlGroup) => {
setControlGroup(controlGroup);
onLoadComplete={async (newControlGroup) => {
setControlGroup(newControlGroup);
}}
getCreationOptions={async (controlGroupInputBuilder) => {
const initialInput: Partial<ControlGroupInput> = {
...getDefaultControlGroupInput(),
defaultControlWidth: 'small',
};
await controlGroupInputBuilder.addDataControlFromField(initialInput, {
dataViewId: dataView.id ?? 'kibana_sample_data_ecommerce',
getInitialInput={async (initialInput, builder) => {
await builder.addDataControlFromField(initialInput, {
dataViewId,
fieldName: 'customer_first_name.keyword',
width: 'small',
});
await controlGroupInputBuilder.addDataControlFromField(initialInput, {
dataViewId: dataView.id ?? 'kibana_sample_data_ecommerce',
await builder.addDataControlFromField(initialInput, {
dataViewId,
fieldName: 'customer_last_name.keyword',
width: 'medium',
grow: false,