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

[Control Group] Add override options of openAddDataControlFlyout (#153007)

Browse source 
## Summary

This PR adds the option to provide, custom props when calling
`openAddDataControlFlyout`. For example, users of the API may want
different placeholder than default for any new options list that is
added.

Currently, in security solution, we need a custom placeholder for newly
added controls. Hence, this PR. Please let me know if this is not the
best way to do this.



https://user-images.githubusercontent.com/7485038/232775198-a111d711-ffba-4d26-8c70-c2af08008e05.mov
This commit is contained in:
Jatin Kathuria 2023-04-19 16:58:48 +02:00 • committed by GitHub
parent 271d9aa68c
commit 6d8d1708fe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 55 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

33
examples/controls_example/public/edit_example.tsx
View file

@ -21,18 +21,23 @@ import {
EuiTitle,
} from '@elastic/eui';
import { ViewMode } from '@kbn/embeddable-plugin/public';
import { OPTIONS_LIST_CONTROL, RANGE_SLIDER_CONTROL } from '@kbn/controls-plugin/common';
import {
LazyControlGroupRenderer,
ControlGroupContainer,
ControlGroupInput,
ACTION_EDIT_CONTROL,
ACTION_DELETE_CONTROL,
} from '@kbn/controls-plugin/public';
import { withSuspense } from '@kbn/presentation-util-plugin/public';
import { ACTION_EDIT_CONTROL, ACTION_DELETE_CONTROL } from '@kbn/controls-plugin/public';
import { ControlInputTransform } from '@kbn/controls-plugin/common/types';
const ControlGroupRenderer = withSuspense(LazyControlGroupRenderer);
const INPUT_KEY = 'kbnControls:saveExample:input';
const WITH_CUSTOM_PLACEHOLDER = 'Custom Placeholder';
export const EditExample = () => {
const [isSaving, setIsSaving] = useState(false);
const [isLoading, setIsLoading] = useState(false);
@ -85,6 +90,7 @@ export const EditExample = () => {
setToggleIconIdToSelectedMapIcon({
[ACTION_EDIT_CONTROL]: disabledActions.includes(ACTION_EDIT_CONTROL),
[ACTION_DELETE_CONTROL]: disabledActions.includes(ACTION_DELETE_CONTROL),
[WITH_CUSTOM_PLACEHOLDER]: false,
});
} catch (e) {
// ignore parse errors
@ -94,6 +100,24 @@ export const EditExample = () => {
return input;
}
const controlInputTransform: ControlInputTransform = (newState, type) => {
if (type === OPTIONS_LIST_CONTROL && toggleIconIdToSelectedMapIcon[WITH_CUSTOM_PLACEHOLDER]) {
return {
...newState,
placeholder: 'Custom Placeholder',
};
}
if (type === RANGE_SLIDER_CONTROL) {
return {
...newState,
value: ['0', '4'],
};
}
return newState;
};
return (
<>
<EuiTitle>
@ -111,7 +135,7 @@ export const EditExample = () => {
iconType="plusInCircle"
isDisabled={controlGroup === undefined}
onClick={() => {
controlGroup!.openAddDataControlFlyout();
controlGroup!.openAddDataControlFlyout(controlInputTransform);
}}
>
Add control
@ -132,6 +156,11 @@ export const EditExample = () => {
label: 'Disable delete action',
value: ACTION_DELETE_CONTROL,
},
{
id: WITH_CUSTOM_PLACEHOLDER,
label: WITH_CUSTOM_PLACEHOLDER,
value: WITH_CUSTOM_PLACEHOLDER,
},
]}
idToSelectedMap={toggleIconIdToSelectedMapIcon}
type="multi"