Skip to content

Commit

Permalink
Clean up flyout logic
Browse files Browse the repository at this point in the history
  • Loading branch information
@Heenawter
Heenawter committed May 26, 2023
1 parent e402117 commit 256c251
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 39 deletions.
14 changes: 5 additions & 9 deletions src/plugins/controls/public/control_group/actions/edit_control_flyout.tsx
View file
Expand Up @@ -40,9 +40,8 @@ export const EditControlFlyout = ({

const [currentGrow, setCurrentGrow] = useState(panel.grow);
const [currentWidth, setCurrentWidth] = useState(panel.width);
const [inputToReturn, setInputToReturn] = useState<Partial<DataControlInput>>({});

const onCancel = () => {
const onCancel = (inputToReturn: Partial<DataControlInput>) => {
if (
isEqual(panel.explicitInput, {
...panel.explicitInput,
Expand All @@ -66,15 +65,15 @@ export const EditControlFlyout = ({
});
};

const onSave = async (type?: string) => {
const onSave = async (inputToReturn: Partial<DataControlInput>, type?: string) => {
if (!type) {
closeFlyout();
return;
}
const factory = getControlFactory(type) as IEditableControlFactory;
if (!factory) throw new EmbeddableFactoryNotFoundError(type);
if (factory.presaveTransformFunction) {
setInputToReturn(factory.presaveTransformFunction(inputToReturn, embeddable));
inputToReturn = factory.presaveTransformFunction(inputToReturn, embeddable);
}

if (currentWidth !== panel.width)
Expand All @@ -93,14 +92,11 @@ export const EditControlFlyout = ({
grow={panel.grow}
embeddable={embeddable}
title={embeddable.getTitle()}
onCancel={() => onCancel()}
onCancel={onCancel}
setLastUsedDataViewId={(lastUsed) => controlGroup.setLastUsedDataViewId(lastUsed)}
updateWidth={(newWidth) => setCurrentWidth(newWidth)}
updateGrow={(newGrow) => setCurrentGrow(newGrow)}
onTypeEditorChange={(partialInput) => {
setInputToReturn({ ...inputToReturn, ...partialInput });
}}
onSave={(type) => onSave(type)}
onSave={onSave}
removeControl={() => {
closeFlyout();
removeControl();
Expand Down
47 changes: 25 additions & 22 deletions src/plugins/controls/public/control_group/editor/control_editor.tsx
View file
Expand Up @@ -14,7 +14,7 @@
* Side Public License, v 1.
*/

import React, { useEffect, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import useMount from 'react-use/lib/useMount';
import useAsync from 'react-use/lib/useAsync';

Expand Down Expand Up @@ -47,6 +47,7 @@ import {
import { ControlGroupStrings } from '../control_group_strings';
import {
ControlEmbeddable,
ControlInput,
ControlWidth,
DataControlInput,
IEditableControlFactory,
Expand All @@ -61,15 +62,14 @@ interface EditControlProps {
isCreate: boolean;
title?: string;
width: ControlWidth;
onSave: (type?: string) => void;
onSave: (inputToReturn: Partial<DataControlInput>, type?: string) => void;
grow: boolean;
onCancel: () => void;
onCancel: (inputToReturn: Partial<DataControlInput>) => void;
removeControl?: () => void;
updateGrow?: (grow: boolean) => void;
updateWidth: (newWidth: ControlWidth) => void;
getRelevantDataViewId?: () => string | undefined;
setLastUsedDataViewId?: (newDataViewId: string) => void;
onTypeEditorChange: (partial: Partial<DataControlInput>) => void;
}

const FieldPicker = withSuspense(LazyFieldPicker, null);
Expand All @@ -86,7 +86,6 @@ export const ControlEditor = ({
removeControl,
updateGrow,
updateWidth,
onTypeEditorChange,
getRelevantDataViewId,
setLastUsedDataViewId,
}: EditControlProps) => {
Expand All @@ -97,15 +96,27 @@ export const ControlEditor = ({

const controlGroup = useControlGroupContainer();
const editorConfig = controlGroup.select((state) => state.componentState.editorConfig);

const [currentGrow, setCurrentGrow] = useState(grow);
const [currentWidth, setCurrentWidth] = useState(width);
const [defaultTitle, setDefaultTitle] = useState<string>();
const [currentTitle, setCurrentTitle] = useState(title ?? '');
const [currentWidth, setCurrentWidth] = useState(width);
const [currentGrow, setCurrentGrow] = useState(grow);
const [controlEditorValid, setControlEditorValid] = useState(false);
const [selectedDataViewId, setSelectedDataViewId] = useState<string>();
const [selectedField, setSelectedField] = useState<string | undefined>(
embeddable ? embeddable.getInput().fieldName : undefined
);
const [selectedDataViewId, setSelectedDataViewId] = useState<string>();
const [customSettings, setCustomSettings] = useState<Partial<ControlInput>>();

const currentInput: Partial<DataControlInput> = useMemo(
() => ({
fieldName: selectedField,
dataViewId: selectedDataViewId,
title: currentTitle === '' ? defaultTitle ?? selectedField : currentTitle,
...customSettings,
}),
[currentTitle, defaultTitle, selectedField, selectedDataViewId, customSettings]
);

useMount(() => {
let mounted = true;
Expand All @@ -117,7 +128,6 @@ export const ControlEditor = ({
const initialId =
embeddable?.getInput().dataViewId ?? getRelevantDataViewId?.() ?? (await getDefaultId());
if (initialId) {
onTypeEditorChange({ dataViewId: initialId });
setSelectedDataViewId(initialId);
}
})();
Expand Down Expand Up @@ -153,6 +163,8 @@ export const ControlEditor = ({
[selectedField, setControlEditorValid, selectedDataView]
);

// useEffect(() => {}, []);

const controlType =
selectedField && fieldRegistry && fieldRegistry[selectedField].compatibleControlTypes[0];
const factory = controlType && getControlFactory(controlType);
Expand Down Expand Up @@ -184,7 +196,6 @@ export const ControlEditor = ({
onChangeDataViewId={(dataViewId) => {
setLastUsedDataViewId?.(dataViewId);
if (dataViewId === selectedDataViewId) return;
onTypeEditorChange({ dataViewId });
setSelectedField(undefined);
setSelectedDataViewId(dataViewId);
}}
Expand All @@ -206,17 +217,12 @@ export const ControlEditor = ({
selectedFieldName={selectedField}
dataView={selectedDataView}
onSelectField={(field) => {
const newInput: Partial<DataControlInput> = {
fieldName: field.name,
};
const newDefaultTitle = field.displayName ?? field.name;
setDefaultTitle(newDefaultTitle);
setSelectedField(field.name);
if (!currentTitle || currentTitle === defaultTitle) {
setCurrentTitle(newDefaultTitle);
newInput.title = newDefaultTitle;
}
onTypeEditorChange(newInput);
}}
selectableProps={{ isLoading: dataViewListLoading || dataViewLoading }}
/>
Expand Down Expand Up @@ -252,9 +258,6 @@ export const ControlEditor = ({
value={currentTitle}
onChange={(e) => {
setCurrentTitle(e.target.value);
onTypeEditorChange({
title: e.target.value === '' ? defaultTitle : e.target.value,
});
}}
/>
</EuiFormRow>
Expand Down Expand Up @@ -309,7 +312,7 @@ export const ControlEditor = ({
)}
>
<CustomSettings
onChange={onTypeEditorChange}
onChange={(settings) => setCustomSettings(settings)}
initialInput={embeddable?.getInput()}
fieldType={fieldRegistry?.[selectedField].field.type}
/>
Expand All @@ -324,7 +327,7 @@ export const ControlEditor = ({
flush="left"
color="danger"
onClick={() => {
onCancel();
onCancel(currentInput);
removeControl();
}}
>
Expand All @@ -341,7 +344,7 @@ export const ControlEditor = ({
aria-label={`cancel-${title}`}
data-test-subj="control-editor-cancel"
iconType="cross"
onClick={() => onCancel()}
onClick={() => onCancel(currentInput)}
>
{ControlGroupStrings.manageControl.getCancelTitle()}
</EuiButtonEmpty>
Expand All @@ -353,7 +356,7 @@ export const ControlEditor = ({
iconType="check"
color="primary"
disabled={!controlEditorValid}
onClick={() => onSave(controlType)}
onClick={() => onSave(currentInput, controlType)}
>
{ControlGroupStrings.manageControl.getSaveChangesTitle()}
</EuiButton>
Expand Down
10 changes: 3 additions & 7 deletions src/plugins/controls/public/control_group/editor/open_add_data_control_flyout.tsx
View file
Expand Up @@ -45,8 +45,7 @@ export function openAddDataControlFlyout(
theme: { theme$ },
} = pluginServices.getServices();

let controlInput: Partial<DataControlInput> = {};
const onCancel = () => {
const onCancel = (controlInput: Partial<DataControlInput>) => {
if (Object.keys(controlInput).length === 0) {
this.closeAllFlyouts();
return;
Expand Down Expand Up @@ -75,7 +74,7 @@ export function openAddDataControlFlyout(
grow={this.getInput().defaultControlGrow ?? DEFAULT_CONTROL_GROW}
updateWidth={(defaultControlWidth) => this.updateInput({ defaultControlWidth })}
updateGrow={(defaultControlGrow: boolean) => this.updateInput({ defaultControlGrow })}
onSave={async (type) => {
onSave={async (controlInput, type) => {
this.closeAllFlyouts();
if (!type) {
return;
Expand Down Expand Up @@ -114,9 +113,6 @@ export function openAddDataControlFlyout(
}
}}
onCancel={onCancel}
onTypeEditorChange={(partialInput) =>
(controlInput = { ...controlInput, ...partialInput })
}
/>
</ControlGroupContainerContext.Provider>,
{ theme$ }
Expand All @@ -125,7 +121,7 @@ export function openAddDataControlFlyout(
'aria-label': ControlGroupStrings.manageControl.getFlyoutCreateTitle(),
outsideClickCloses: false,
onClose: () => {
onCancel();
onCancel({});
},
// @ts-ignore - TODO: Remove this once https://github.com/elastic/eui/pull/6645 lands in Kibana
focusTrapProps: { scrollLock: true },
Expand Down
5 changes: 4 additions & 1 deletion src/plugins/dashboard/public/dashboard_container/embeddable/api/overlays/save_modal.tsx
View file
Expand Up @@ -104,7 +104,7 @@ export class DashboardSaveModal extends React.Component<Props, State> {
}}
/>
) : undefined;

console.log('here');
return (
<Fragment>
<EuiFormRow
Expand All @@ -114,11 +114,13 @@ export class DashboardSaveModal extends React.Component<Props, State> {
defaultMessage="Description"
/>
}
fullWidth
>
<EuiTextArea
data-test-subj="dashboardDescription"
value={this.state.description}
onChange={this.onDescriptionChange}
fullWidth
/>
</EuiFormRow>

Expand All @@ -131,6 +133,7 @@ export class DashboardSaveModal extends React.Component<Props, State> {
defaultMessage="This changes the time filter to the currently selected time each time this dashboard is loaded."
/>
}
fullWidth
>
<EuiSwitch
data-test-subj="storeTimeWithDashboard"
Expand Down

0 comments on commit 256c251

Please sign in to comment.