From 2e7d2ef0df8a5565fb1e1ca9b4e1784ab341f619 Mon Sep 17 00:00:00 2001 From: heenawter Date: Thu, 12 May 2022 17:49:18 -0600 Subject: [PATCH] Clean up code --- .../component/control_frame_component.tsx | 4 +-- .../control_group/control_group_strings.ts | 4 +++ .../control_group/editor/control_editor.tsx | 29 ++++++++++--------- .../control_group/editor/create_control.tsx | 26 ++++++++++------- .../control_group/editor/edit_control.tsx | 10 +++++-- .../components/field_picker/field_picker.tsx | 11 +++++-- .../controls/options_list.ts | 4 +-- .../controls/range_slider.ts | 4 +-- .../controls/replace_controls.ts | 3 +- .../page_objects/dashboard_page_controls.ts | 17 ++++++----- 10 files changed, 66 insertions(+), 46 deletions(-) diff --git a/src/plugins/controls/public/control_group/component/control_frame_component.tsx b/src/plugins/controls/public/control_group/component/control_frame_component.tsx index d76483c760f01..dabe351376b7f 100644 --- a/src/plugins/controls/public/control_group/component/control_frame_component.tsx +++ b/src/plugins/controls/public/control_group/component/control_frame_component.tsx @@ -58,9 +58,7 @@ export const ControlFrame = ({ if (embeddableRoot.current && embeddable) { embeddable.render(embeddableRoot.current); } - const subscription = embeddable?.getInput$().subscribe((newInput) => { - setTitle(newInput.title); - }); + const subscription = embeddable?.getInput$().subscribe((newInput) => setTitle(newInput.title)); return () => { subscription?.unsubscribe(); }; diff --git a/src/plugins/controls/public/control_group/control_group_strings.ts b/src/plugins/controls/public/control_group/control_group_strings.ts index d922b28598cf8..47b89a073c4e0 100644 --- a/src/plugins/controls/public/control_group/control_group_strings.ts +++ b/src/plugins/controls/public/control_group/control_group_strings.ts @@ -80,6 +80,10 @@ export const ControlGroupStrings = { i18n.translate('controls.controlGroup.manageControl.selectFieldMessage', { defaultMessage: 'Please select a field', }), + getSelectDataViewMessage: () => + i18n.translate('controls.controlGroup.manageControl.selectDataViewMessage', { + defaultMessage: 'Please select a data view', + }), }, management: { getAddControlTitle: () => diff --git a/src/plugins/controls/public/control_group/editor/control_editor.tsx b/src/plugins/controls/public/control_group/editor/control_editor.tsx index 62b7ec84b9bf9..2266e2ff23b87 100644 --- a/src/plugins/controls/public/control_group/editor/control_editor.tsx +++ b/src/plugins/controls/public/control_group/editor/control_editor.tsx @@ -56,7 +56,7 @@ interface EditControlProps { isCreate: boolean; title?: string; width: ControlWidth; - onSave: (type: string, factory?: IEditableControlFactory) => void; + onSave: (type?: string) => void; onCancel: () => void; removeControl?: () => void; updateTitle: (title?: string) => void; @@ -107,11 +107,10 @@ export const ControlEditor = ({ embeddable ? embeddable.getInput().fieldName : undefined ); - const getCompatibleControlTypes = (dataView?: DataView) => { - if (!dataView) return {}; + const doubleLinkFields = (dataView: DataView) => { + // double link the parent-child relationship specifically for case-sensitivity support for options lists const fieldRegistry: DataControlFieldRegistry = {}; - // double link the parent-child relationship specifically for case-sensitivity support for options lists for (const field of dataView.fields.getAll()) { if (!fieldRegistry[field.name]) { fieldRegistry[field.name] = { field, compatibleControlTypes: [] }; @@ -127,6 +126,12 @@ export const ControlEditor = ({ fieldRegistry[parentFieldName].childFieldName = field.name; } } + return fieldRegistry; + }; + + const getCompatibleControlTypes = (dataView?: DataView) => { + if (!dataView) return {}; + const fieldRegistry: DataControlFieldRegistry = doubleLinkFields(dataView); const controlFactories = getControlTypes().map( (controlType) => getControlFactory(controlType) as IEditableControlFactory @@ -143,7 +148,6 @@ export const ControlEditor = ({ } }); setState((s) => ({ ...s, fieldRegistry })); - // setSelectedField(Object.keys(fieldRegistry)[0]); }; useMount(() => { @@ -160,12 +164,12 @@ export const ControlEditor = ({ dataView = await get(initialId); } if (!mounted) return; + getCompatibleControlTypes(dataView); setState((s) => ({ ...s, selectedDataView: dataView, dataViewListItems, })); - getCompatibleControlTypes(dataView); })(); return () => { mounted = false; @@ -207,12 +211,14 @@ export const ControlEditor = ({ onTypeEditorChange({ dataViewId }); setSelectedField(undefined); get(dataViewId).then((newDataView) => { - setState((s) => ({ ...s, selectedDataView: newDataView })); getCompatibleControlTypes(newDataView); + setState((s) => ({ ...s, selectedDataView: newDataView })); }); }} trigger={{ - label: state.selectedDataView?.title ?? 'Select data view', + label: + state.selectedDataView?.title ?? + ControlGroupStrings.manageControl.getSelectDataViewMessage(), }} /> @@ -229,11 +235,6 @@ export const ControlEditor = ({ parentFieldName: state.fieldRegistry?.[field.name].parentFieldName, childFieldName: state.fieldRegistry?.[field.name].childFieldName, }); - // console.log('on select field:'); - // console.log('File registry: ', state.fieldRegistry); - // console.log('----> field: ', field.name); - // console.log('----> parent: ', state.fieldRegistry?.[field.name].parentFieldName); - // console.log('----> child: ', state.fieldRegistry?.[field.name].childFieldName); const newDefaultTitle = field.displayName ?? field.name; setDefaultTitle(newDefaultTitle); @@ -322,7 +323,7 @@ export const ControlEditor = ({ iconType="check" color="primary" disabled={!controlEditorValid} - onClick={() => controlType && onSave(controlType, factory as IEditableControlFactory)} + onClick={() => onSave(controlType)} > {ControlGroupStrings.manageControl.getSaveChangesTitle()} diff --git a/src/plugins/controls/public/control_group/editor/create_control.tsx b/src/plugins/controls/public/control_group/editor/create_control.tsx index be7bead6fe493..b1f3e64df946c 100644 --- a/src/plugins/controls/public/control_group/editor/create_control.tsx +++ b/src/plugins/controls/public/control_group/editor/create_control.tsx @@ -73,6 +73,21 @@ export const CreateControlButton = ({ }); }; + const onSave = (ref: OverlayRef, type?: string) => { + if (!type) { + reject(); + ref.close(); + return; + } + + const factory = getControlFactory(type) as IEditableControlFactory; + if (factory.presaveTransformFunction) { + inputToReturn = factory.presaveTransformFunction(inputToReturn); + } + resolve({ type, controlInput: inputToReturn }); + ref.close(); + }; + const flyoutInstance = openFlyout( toMountPoint( @@ -83,16 +98,7 @@ export const CreateControlButton = ({ width={defaultControlWidth ?? DEFAULT_CONTROL_WIDTH} updateTitle={(newTitle) => (inputToReturn.title = newTitle)} updateWidth={updateDefaultWidth} - onSave={(type: string, factory?: IEditableControlFactory) => { - if (!factory) { - factory = getControlFactory(type) as IEditableControlFactory; - } - if (factory.presaveTransformFunction) { - inputToReturn = factory.presaveTransformFunction(inputToReturn); - } - resolve({ type, controlInput: inputToReturn }); - flyoutInstance.close(); - }} + onSave={(type) => onSave(flyoutInstance, type)} onCancel={() => onCancel(flyoutInstance)} onTypeEditorChange={(partialInput) => (inputToReturn = { ...inputToReturn, ...partialInput }) diff --git a/src/plugins/controls/public/control_group/editor/edit_control.tsx b/src/plugins/controls/public/control_group/editor/edit_control.tsx index 9cffdc68ae17c..62c9258ef435f 100644 --- a/src/plugins/controls/public/control_group/editor/edit_control.tsx +++ b/src/plugins/controls/public/control_group/editor/edit_control.tsx @@ -103,7 +103,13 @@ export const EditControlButton = ({ embeddableId }: { embeddableId: string }) => }); }; - const onSave = (type: string, ref: OverlayRef) => { + const onSave = (ref: OverlayRef, type?: string) => { + if (!type) { + reject(); + ref.close(); + return; + } + // if the control now has a new type, need to replace the old factory with // one of the correct new type if (latestPanelState.current.type !== type) { @@ -135,7 +141,7 @@ export const EditControlButton = ({ embeddableId }: { embeddableId: string }) => onTypeEditorChange={(partialInput) => { inputToReturn = { ...inputToReturn, ...partialInput }; }} - onSave={(type) => onSave(type, flyoutInstance)} + onSave={(type) => onSave(flyoutInstance, type)} removeControl={() => { openConfirm(ControlGroupStrings.management.deleteControls.getSubtitle(), { confirmButtonText: ControlGroupStrings.management.deleteControls.getConfirm(), diff --git a/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx b/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx index a9a7798aeefcf..3c8a084f2686b 100644 --- a/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx +++ b/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx @@ -21,7 +21,6 @@ import './field_picker.scss'; export interface FieldPickerProps { dataView?: DataView; selectedFieldName?: string; - // showFields?: string[]; filterPredicate?: (f: DataViewField) => boolean; onSelectField?: (selectedField: DataViewField) => void; } @@ -29,12 +28,12 @@ export interface FieldPickerProps { export const FieldPicker = ({ dataView, onSelectField, - // showFields, filterPredicate, selectedFieldName, }: FieldPickerProps) => { const [nameFilter, setNameFilter] = useState(''); const [typesFilter, setTypesFilter] = useState([]); + // Retrieve, filter, and sort fields from data view const fields = dataView ? sortBy( @@ -49,7 +48,13 @@ export const FieldPicker = ({ ) : []; - const uniqueTypes = dataView ? uniq(fields.map((f) => f.type as string)) : []; + const uniqueTypes = dataView + ? uniq( + dataView.fields + .filter((f) => (filterPredicate ? filterPredicate(f) : true)) + .map((f) => f.type as string) + ) + : []; return ( { const secondId = (await dashboardControls.getAllControlIds())[1]; await dashboardControls.editExistingControl(secondId); - await dashboardControls.controlsEditorSetfield('FlightDelayMin'); + await dashboardControls.controlsEditorSetfield('FlightDelayMin', RANGE_SLIDER_CONTROL); await dashboardControls.controlEditorSave(); await dashboardControls.rangeSliderWaitForLoading(); diff --git a/test/functional/apps/dashboard_elements/controls/replace_controls.ts b/test/functional/apps/dashboard_elements/controls/replace_controls.ts index 75b06ec0e05b2..3697300e1b7d3 100644 --- a/test/functional/apps/dashboard_elements/controls/replace_controls.ts +++ b/test/functional/apps/dashboard_elements/controls/replace_controls.ts @@ -28,8 +28,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const changeFieldType = async (controlId: string, newField: string, expectedType?: string) => { await dashboardControls.editExistingControl(controlId); - await dashboardControls.controlsEditorSetfield(newField); - if (expectedType) await dashboardControls.controlEditorVerifyType(expectedType); + await dashboardControls.controlsEditorSetfield(newField, expectedType); await dashboardControls.controlEditorSave(); }; diff --git a/test/functional/page_objects/dashboard_page_controls.ts b/test/functional/page_objects/dashboard_page_controls.ts index ea9be180d571b..0685958a696f1 100644 --- a/test/functional/page_objects/dashboard_page_controls.ts +++ b/test/functional/page_objects/dashboard_page_controls.ts @@ -88,8 +88,7 @@ export class DashboardPageControls extends FtrService { await this.retry.try(async () => { await this.testSubjects.existOrFail('control-editor-flyout'); }); - const autoSelectedType = await this.testSubjects.getVisibleText('control-editor-type'); - expect(autoSelectedType).to.equal(CONTROL_DISPLAY_NAMES.default); + await this.controlEditorVerifyType('default'); } /* ----------------------------------------------------------- @@ -259,8 +258,7 @@ export class DashboardPageControls extends FtrService { if (dataViewTitle) await this.controlsEditorSetDataView(dataViewTitle); - if (fieldName) await this.controlsEditorSetfield(fieldName); - await this.controlEditorVerifyType(controlType); + if (fieldName) await this.controlsEditorSetfield(fieldName, controlType); if (title) await this.controlEditorSetTitle(title); if (width) await this.controlEditorSetWidth(width); @@ -410,7 +408,11 @@ export class DashboardPageControls extends FtrService { await this.testSubjects.click(`data-view-picker-${dataViewTitle}`); } - public async controlsEditorSetfield(fieldName: string, shouldSearch: boolean = false) { + public async controlsEditorSetfield( + fieldName: string, + expectedType?: string, + shouldSearch: boolean = false + ) { this.log.debug(`Setting control field to ${fieldName}`); if (shouldSearch) { await this.testSubjects.setValue('field-search-input', fieldName); @@ -419,14 +421,13 @@ export class DashboardPageControls extends FtrService { await this.testSubjects.existOrFail(`field-picker-select-${fieldName}`); }); await this.testSubjects.click(`field-picker-select-${fieldName}`); + if (expectedType) await this.controlEditorVerifyType(expectedType); } public async controlEditorVerifyType(type: string) { - this.log.debug(`Verifying that control type has type ${type}`); + this.log.debug(`Verifying that the control editor picked the type ${type}`); const autoSelectedType = await this.testSubjects.getVisibleText('control-editor-type'); expect(autoSelectedType).to.equal(CONTROL_DISPLAY_NAMES[type]); - - // await this.testSubjects.click(`create-${type}-control`); } // Options List editor functions