Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Controls] Control Group Embeddable and Management Experience #111065

Merged
merged 33 commits into from
Oct 5, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
961871f
added dndKit to package.json
ThomThomson Aug 12, 2021
82dc233
Merge branch 'master' of github.com:elastic/kibana into controls/dndK…
ThomThomson Aug 31, 2021
672b4b2
fix package json
ThomThomson Aug 31, 2021
0cdf909
Control group editing experience V2
ThomThomson Sep 2, 2021
36e21df
Merge branch 'master' of github.com:elastic/kibana into controls/dndK…
ThomThomson Sep 7, 2021
1cfb999
built control group embeddable, stubbed controls service, stubbed add…
ThomThomson Sep 10, 2021
121c104
Control group embeddable creation and deletion working. Inline editin…
ThomThomson Sep 14, 2021
e50493c
Management, validation, restore previous input on cancel
ThomThomson Sep 15, 2021
09236b5
Fix types, fix file capitilization, reenable set all widths function
ThomThomson Sep 20, 2021
983229c
working on clones
andreadelrio Sep 21, 2021
93344cb
Merge branch 'master' of github.com:elastic/kibana into controls/dndK…
ThomThomson Sep 21, 2021
695a657
fix truncation
andreadelrio Sep 21, 2021
aef2049
renamed element
andreadelrio Sep 21, 2021
cdb50c1
Fix i18n, package.json merge conflict, fix embeddable parenting.
ThomThomson Sep 21, 2021
6488ebd
Reorganize controls file structure
ThomThomson Sep 21, 2021
7231eca
small style changes
andreadelrio Sep 21, 2021
0e52eba
Add confirmation modals for canceling creation and edits of controls.…
ThomThomson Sep 22, 2021
8ae7d29
prevent jumping in twoLine dragging
andreadelrio Sep 22, 2021
26076b7
type fix
ThomThomson Sep 27, 2021
6aba47e
Merge branch 'master' of github.com:elastic/kibana into controls/dndK…
ThomThomson Sep 27, 2021
3fce9cf
Merge branch 'controls/dndKitDragDrop' of https://github.com/ThomThom…
ThomThomson Sep 28, 2021
1aaae93
Merge pull request #11 from andreadelrio/dndControls-design-1
ThomThomson Sep 28, 2021
e87794b
fix style lint and types
ThomThomson Sep 28, 2021
17a64e5
Id updates from review feedback
ThomThomson Sep 29, 2021
08f8c71
Merge branch 'master' of github.com:elastic/kibana into controls/dndK…
ThomThomson Sep 29, 2021
75d8fb3
Apply suggestions from code review
ThomThomson Oct 1, 2021
279741c
Merge branch 'master' of github.com:elastic/kibana into controls/dndK…
ThomThomson Oct 4, 2021
930e551
Merge branch 'master' into controls/dndKitDragDrop
kibanamachine Oct 4, 2021
c8a0b53
fix package.json
ThomThomson Oct 4, 2021
8a99e89
Merge branch 'controls/dndKitDragDrop' of https://github.com/ThomThom…
ThomThomson Oct 4, 2021
2bec309
clean up flyouts
andreadelrio Oct 4, 2021
e90f201
Merge pull request #12 from andreadelrio/dndFlyouts
ThomThomson Oct 4, 2021
b7a328f
Type fixes
ThomThomson Oct 4, 2021
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .ci/.storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,12 @@ const aliases = require('../../src/dev/storybook/aliases.ts').storybookAliases;

config.refs = {};

// Required due to https://github.com/storybookjs/storybook/issues/13834
config.babel = async (options) => ({
...options,
plugins: ['@babel/plugin-transform-typescript', ...options.plugins],
});

for (const alias of Object.keys(aliases).filter((a) => a !== 'ci_composite')) {
// snake_case -> Title Case
const title = alias
Expand Down
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,9 @@
"yarn": "^1.21.1"
},
"dependencies": {
"@dnd-kit/core": "^3.1.1",
"@dnd-kit/sortable": "^4.0.0",
"@dnd-kit/utilities": "^2.0.0",
"@babel/runtime": "^7.15.4",
"@elastic/apm-rum": "^5.9.1",
"@elastic/apm-rum-react": "^1.3.1",
Expand Down
1 change: 1 addition & 0 deletions src/plugins/embeddable/public/lib/containers/container.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export abstract class Container<
parent?: Container
) {
super(input, output, parent);
this.getFactory = getFactory; // Currently required for using in storybook due to https://github.com/storybookjs/storybook/issues/13834
this.subscription = this.getInput$()
// At each update event, get both the previous and current state
.pipe(startWith(input), pairwise())
Expand Down
Original file line number Diff line number Diff line change
@@ -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 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 { InputControlFactory } from '../types';
import { ControlsService } from '../controls_service';
import { flightFields, getEuiSelectableOptions } from './flights';
import { OptionsListEmbeddableFactory } from '../control_types/options_list';

export const getControlsServiceStub = () => {
const controlsServiceStub = new ControlsService();

const optionsListFactoryStub = new OptionsListEmbeddableFactory(
({ field, search }) =>
new Promise((r) => setTimeout(() => r(getEuiSelectableOptions(field, search)), 500)),
() => Promise.resolve(['demo data flights']),
() => Promise.resolve(flightFields)
);

// cast to unknown because the stub cannot use the embeddable start contract to transform the EmbeddableFactoryDefinition into an EmbeddableFactory
const optionsListControlFactory = optionsListFactoryStub as unknown as InputControlFactory;
optionsListControlFactory.getDefaultInput = () => ({});
controlsServiceStub.registerInputControlType(optionsListControlFactory);
return controlsServiceStub;
};
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const panelStyle = {

const kqlBarStyle = { background: bar, padding: 16, minHeight, fontStyle: 'italic' };

const inputBarStyle = { background: '#fff', padding: 4, minHeight };
const inputBarStyle = { background: '#fff', padding: 4 };

const layout = (OptionStory: Story) => (
<EuiFlexGroup style={{ background }} direction="column">
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/*
* 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, { useEffect, useMemo } from 'react';
import uuid from 'uuid';

import { decorators } from './decorators';
import { providers } from '../../../services/storybook';
import { getControlsServiceStub } from './controls_service_stub';
import { ControlGroupContainerFactory } from '../control_group/control_group_container_factory';

export default {
title: 'Controls',
description: '',
decorators,
};

const ControlGroupStoryComponent = () => {
const embeddableRoot: React.RefObject<HTMLDivElement> = useMemo(() => React.createRef(), []);

providers.overlays.start({});
const overlays = providers.overlays.getService();

const controlsServiceStub = getControlsServiceStub();

useEffect(() => {
(async () => {
const factory = new ControlGroupContainerFactory(controlsServiceStub, overlays);
const controlGroupContainerEmbeddable = await factory.create({
inheritParentState: {
useQuery: false,
useFilters: false,
useTimerange: false,
},
controlStyle: 'oneLine',
id: uuid.v4(),
panels: {},
});
if (controlGroupContainerEmbeddable && embeddableRoot.current) {
controlGroupContainerEmbeddable.render(embeddableRoot.current);
}
})();
}, [embeddableRoot, controlsServiceStub, overlays]);

return <div ref={embeddableRoot} />;
};

export const ControlGroupStory = () => <ControlGroupStoryComponent />;
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
/*
* 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, { useEffect, useMemo, useState } from 'react';
import classNames from 'classnames';
import {
EuiButtonIcon,
EuiFormControlLayout,
EuiFormLabel,
EuiFormRow,
EuiToolTip,
} from '@elastic/eui';
import { ControlGroupContainer } from '../control_group/control_group_container';
import { useChildEmbeddable } from '../hooks/use_child_embeddable';
import { ControlStyle } from '../types';
import { ControlFrameStrings } from './control_frame_strings';

export interface ControlFrameProps {
container: ControlGroupContainer;
customPrepend?: JSX.Element;
controlStyle: ControlStyle;
enableActions?: boolean;
onRemove?: () => void;
embeddableId: string;
onEdit?: () => void;
}

export const ControlFrame = ({
customPrepend,
enableActions,
embeddableId,
controlStyle,
container,
onRemove,
onEdit,
}: ControlFrameProps) => {
const embeddableRoot: React.RefObject<HTMLDivElement> = useMemo(() => React.createRef(), []);
const embeddable = useChildEmbeddable({ container, embeddableId });

const [title, setTitle] = useState<string>();

const usingTwoLineLayout = controlStyle === 'twoLine';

useEffect(() => {
if (embeddableRoot.current && embeddable) {
embeddable.render(embeddableRoot.current);
}
const subscription = embeddable?.getInput$().subscribe((newInput) => setTitle(newInput.title));
return () => subscription?.unsubscribe();
}, [embeddable, embeddableRoot]);

const floatingActions = (
<div
className={classNames('controlFrame--floatingActions', {
'controlFrame--floatingActions-twoLine': usingTwoLineLayout,
'controlFrame--floatingActions-oneLine': !usingTwoLineLayout,
})}
>
<EuiToolTip content={ControlFrameStrings.floatingActions.getEditButtonTitle()}>
<EuiButtonIcon
aria-label={ControlFrameStrings.floatingActions.getEditButtonTitle()}
iconType="pencil"
onClick={onEdit}
color="text"
/>
</EuiToolTip>
<EuiToolTip content={ControlFrameStrings.floatingActions.getRemoveButtonTitle()}>
<EuiButtonIcon
aria-label={ControlFrameStrings.floatingActions.getRemoveButtonTitle()}
onClick={onRemove}
iconType="cross"
color="danger"
/>
</EuiToolTip>
</div>
);

const form = (
<EuiFormControlLayout
className={'controlFrame--formControlLayout'}
fullWidth
prepend={
<>
{customPrepend ?? null}
{usingTwoLineLayout ? undefined : (
<EuiFormLabel className="controlFrame--formControlLayout__label" htmlFor={embeddableId}>
{title}
</EuiFormLabel>
)}
</>
}
>
<div
className={classNames('controlFrame--control', {
'controlFrame--twoLine': controlStyle === 'twoLine',
'controlFrame--oneLine': controlStyle === 'oneLine',
})}
id={`controlFrame--${embeddableId}`}
ref={embeddableRoot}
/>
</EuiFormControlLayout>
);

return (
<>
{enableActions && floatingActions}
<EuiFormRow fullWidth label={usingTwoLineLayout ? title : undefined}>
{form}
</EuiFormRow>
</>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/*
* 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 { i18n } from '@kbn/i18n';

export const ControlFrameStrings = {
floatingActions: {
getEditButtonTitle: () =>
i18n.translate('presentationUtil.inputControls.controlGroup.floatingActions.editTitle', {
defaultMessage: 'Manage control',
}),
getRemoveButtonTitle: () =>
i18n.translate('presentationUtil.inputControls.controlGroup.floatingActions.removeTitle', {
defaultMessage: 'Remove control',
}),
},
};
Loading