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.

Sign up for GitHub

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

Update property when switching layer config panel #158

Merged
merged 3 commits into from
Jan 5, 2023
Merged

Update property when switching layer config panel #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d1e91c0
Update property when switching layer config panel
junqiu-lei Jan 4, 2023
9eef562
update hooks and warn modal
junqiu-lei Jan 4, 2023
d59062e
add warn toast when switching have unsaved layer
junqiu-lei Jan 5, 2023
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
2 changes: 0 additions & 2 deletions ...ashboards/public/components/layer_config/documents_config/document_layer_config_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@

import React, { Fragment } from 'react';
import { EuiSpacer, EuiTabbedContent } from '@elastic/eui';
import { IndexPattern } from '../../../../../../src/plugins/data/public';
import { DocumentLayerSpecification } from '../../../model/mapLayerType';
import { LayerBasicSettings } from '../layer_basic_settings';
import { DocumentLayerSource } from './document_layer_source';
Expand All @@ -15,7 +14,6 @@ interface Props {
selectedLayerConfig: DocumentLayerSpecification;
setSelectedLayerConfig: Function;
setIsUpdateDisabled: Function;
layersIndexPatterns: IndexPattern[];
isLayerExists: Function;
}

Expand Down
41 changes: 15 additions & 26 deletions maps_dashboards/public/components/layer_config/documents_config/document_layer_source.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,12 @@ interface Props {
setSelectedLayerConfig: Function;
selectedLayerConfig: DocumentLayerSpecification;
setIsUpdateDisabled: Function;
layersIndexPatterns: IndexPattern[];
}

export const DocumentLayerSource = ({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks unnecessary to keep the component DocumentLayerSource state of selectedNumber tooltipSelection, etc.

It could use layer config passed by props and update the layer config directly with setSelectedLayerConfig, like what we do in onFiltersUpdated. Layer config passed by props should be the only source of truth. What do you think?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, just updated the code, thanks!

setSelectedLayerConfig,
selectedLayerConfig,
setIsUpdateDisabled,
layersIndexPatterns,
}: Props) => {
const {
services: {
Expand All @@ -51,27 +49,20 @@ export const DocumentLayerSource = ({
const [indexPattern, setIndexPattern] = useState<IndexPattern | null>();
const [geoFields, setGeoFields] = useState<IndexPatternField[]>();
const [selectedField, setSelectedField] = useState<IndexPatternField | null | undefined>();
const [documentRequestNumber, setDocumentRequestNumber] = useState<number>(
selectedLayerConfig.source.documentRequestNumber
);
const [hasInvalidRequestNumber, setHasInvalidRequestNumber] = useState<boolean>(false);
const [showTooltips, setShowTooltips] = useState<boolean>(
selectedLayerConfig.source.showTooltips
);
const [selectedTooltipFields, setSelectedTooltipFields] = useState<string[]>(
selectedLayerConfig.source.tooltipFields
);

const errorsMap = {
datasource: ['Required'],
geoFields: ['Required'],
};

useEffect(() => {
const disableUpdate =
!indexPattern || !selectedField || documentRequestNumber < 1 || documentRequestNumber > 10000;
const disableUpdate = !indexPattern || !selectedField || hasInvalidRequestNumber;
setIsUpdateDisabled(disableUpdate);
}, [setIsUpdateDisabled, indexPattern, selectedField, documentRequestNumber]);
}, [setIsUpdateDisabled, indexPattern, selectedField, hasInvalidRequestNumber]);

const formatFieldToComboBox = (field?: IndexPatternField | null) => {
if (!field) return [];
Expand Down Expand Up @@ -124,8 +115,7 @@ export const DocumentLayerSource = ({

const onDocumentRequestNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
const selectedNumber = parseInt(value, 10) || 1;
setDocumentRequestNumber(selectedNumber);
const selectedNumber = parseInt(value, 10);
const source = { ...selectedLayerConfig.source, documentRequestNumber: selectedNumber };
setSelectedLayerConfig({ ...selectedLayerConfig, source });
};
Expand All @@ -135,7 +125,6 @@ export const DocumentLayerSource = ({
for (const option of options) {
tooltipSelection.push(option.label);
}
setSelectedTooltipFields(tooltipSelection);
const source = { ...selectedLayerConfig.source, tooltipFields: tooltipSelection };
setSelectedLayerConfig({ ...selectedLayerConfig, source });
};
Expand All @@ -153,14 +142,14 @@ export const DocumentLayerSource = ({
useEffect(() => {
const selectIndexPattern = async () => {
if (selectedLayerConfig.source.indexPatternId) {
const selectedIndexPattern = layersIndexPatterns.find(
(ip) => ip.id === selectedLayerConfig.source.indexPatternId
const selectedIndexPattern = await indexPatterns.get(
selectedLayerConfig.source.indexPatternId
);
setIndexPattern(selectedIndexPattern);
}
};
selectIndexPattern();
}, [indexPatterns]);
}, [indexPatterns, selectedLayerConfig.source.indexPatternId]);

// Update the fields list every time the index pattern is modified.
useEffect(() => {
Expand All @@ -174,11 +163,6 @@ export const DocumentLayerSource = ({
(field) => field.name === selectedLayerConfig.source.geoFieldName
);
setSelectedField(savedField);
if (selectedLayerConfig.source.indexPatternId === indexPattern?.id) {
setSelectedTooltipFields(selectedLayerConfig.source.tooltipFields);
} else {
setSelectedTooltipFields([]);
}
}, [indexPattern]);

useEffect(() => {
Expand All @@ -197,8 +181,11 @@ export const DocumentLayerSource = ({
}, [selectedField]);

useEffect(() => {
setHasInvalidRequestNumber(documentRequestNumber < 1 || documentRequestNumber > 10000);
}, [documentRequestNumber]);
setHasInvalidRequestNumber(
selectedLayerConfig.source.documentRequestNumber < 1 ||
selectedLayerConfig.source.documentRequestNumber > 10000
);
}, [selectedLayerConfig.source.documentRequestNumber]);

const onShowTooltipsChange = (event: { target: { checked: React.SetStateAction<boolean> } }) => {
setShowTooltips(event.target.checked);
Expand Down Expand Up @@ -270,7 +257,7 @@ export const DocumentLayerSource = ({
<EuiSpacer size="xs" />
<EuiFieldNumber
placeholder="Number of documents"
value={documentRequestNumber}
value={selectedLayerConfig.source.documentRequestNumber}
onChange={onDocumentRequestNumberChange}
aria-label="Use aria labels when no actual label is in use"
isInvalid={hasInvalidRequestNumber}
Expand Down Expand Up @@ -327,7 +314,9 @@ export const DocumentLayerSource = ({
<EuiSpacer size="xs" />
<EuiComboBox
options={tooltipFieldsOptions()}
selectedOptions={formatTooltipFieldsToComboBox(selectedTooltipFields)}
selectedOptions={formatTooltipFieldsToComboBox(
selectedLayerConfig.source.tooltipFields
)}
singleSelection={false}
onChange={onTooltipSelectionChange}
sortMatchesBy="startsWith"
Expand Down
39 changes: 21 additions & 18 deletions maps_dashboards/public/components/layer_config/documents_config/document_layer_style.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,21 +27,20 @@ interface Props {
}

export const DocumentLayerStyle = ({ setSelectedLayerConfig, selectedLayerConfig }: Props) => {
const [fillColor, setFillColor] = useColorPickerState(selectedLayerConfig?.style?.fillColor);
const [borderColor, setBorderColor] = useColorPickerState(
selectedLayerConfig?.style?.borderColor
);
const [borderThickness, setBorderThickness] = useState<number>(
selectedLayerConfig?.style?.borderThickness
);
const [markerSize, setMarkerSize] = useState<number>(selectedLayerConfig?.style?.markerSize);
const [fillColor, setFillColor] = useState(selectedLayerConfig?.style?.fillColor);
const [borderColor, setBorderColor] = useState(selectedLayerConfig?.style?.borderColor);
const [hasInvalidThickness, setHasInvalidThickness] = useState<boolean>(false);
const [hasInvalidSize, setHasInvalidSize] = useState<boolean>(false);
const geoTypeToggleButtonGroupPrefix = 'geoTypeToggleButtonGroup';
const [toggleGeoTypeIdSelected, setToggleGeoTypeIdSelected] = useState(
`${geoTypeToggleButtonGroupPrefix}__Point`
);

useEffect(() => {
setFillColor(selectedLayerConfig?.style?.fillColor);
setBorderColor(selectedLayerConfig?.style?.borderColor);
}, [selectedLayerConfig]);

useEffect(() => {
setSelectedLayerConfig({
...selectedLayerConfig,
Expand Down Expand Up @@ -70,7 +69,6 @@ export const DocumentLayerStyle = ({ setSelectedLayerConfig, selectedLayerConfig
borderThickness: Number(e.target.value),
},
});
setBorderThickness(Number(e.target.value));
};

const onMarkerSizeChange = (e: any) => {
Expand All @@ -81,24 +79,29 @@ export const DocumentLayerStyle = ({ setSelectedLayerConfig, selectedLayerConfig
markerSize: Number(e.target.value),
},
});
setMarkerSize(Number(e.target.value));
};

useEffect(() => {
if (borderThickness < 0 || borderThickness > 100) {
if (
selectedLayerConfig?.style?.borderThickness < 0 ||
selectedLayerConfig?.style?.borderThickness > 100
) {
setHasInvalidThickness(true);
} else {
setHasInvalidThickness(false);
}
}, [borderThickness]);
}, [selectedLayerConfig?.style?.borderThickness]);

useEffect(() => {
if (markerSize < 0 || markerSize > 100) {
if (
selectedLayerConfig?.style?.markerSize < 0 ||
selectedLayerConfig?.style?.markerSize > 100
) {
setHasInvalidSize(true);
} else {
setHasInvalidSize(false);
}
}, [markerSize]);
}, [selectedLayerConfig?.style?.markerSize]);

const toggleButtonsGeoType = [
{
Expand Down Expand Up @@ -193,13 +196,13 @@ export const DocumentLayerStyle = ({ setSelectedLayerConfig, selectedLayerConfig
<ColorPicker color={borderColor} setColor={setBorderColor} label="Border color" />
<WidthSelector
label="Border thickness"
size={borderThickness}
size={selectedLayerConfig?.style?.borderThickness}
onWidthChange={onBorderThicknessChange}
hasInvalid={hasInvalidThickness}
/>
<WidthSelector
label="Marker size"
size={markerSize}
size={selectedLayerConfig?.style?.markerSize}
onWidthChange={onMarkerSizeChange}
hasInvalid={hasInvalidSize}
/>
Expand All @@ -210,7 +213,7 @@ export const DocumentLayerStyle = ({ setSelectedLayerConfig, selectedLayerConfig
<ColorPicker color={fillColor} setColor={setFillColor} label="Fill color" />
<WidthSelector
label="Border thickness"
size={borderThickness}
size={selectedLayerConfig?.style?.borderThickness}
onWidthChange={onBorderThicknessChange}
hasInvalid={hasInvalidThickness}
/>
Expand All @@ -222,7 +225,7 @@ export const DocumentLayerStyle = ({ setSelectedLayerConfig, selectedLayerConfig
<ColorPicker color={borderColor} setColor={setBorderColor} label="Border color" />
<WidthSelector
label="Border thickness"
size={borderThickness}
size={selectedLayerConfig?.style?.borderThickness}
onWidthChange={onBorderThicknessChange}
hasInvalid={hasInvalidThickness}
/>
Expand Down
29 changes: 16 additions & 13 deletions maps_dashboards/public/components/layer_config/layer_config_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import { BaseMapLayerConfigPanel } from './index';
import { DASHBOARDS_MAPS_LAYER_TYPE } from '../../../common';
import { DocumentLayerConfigPanel } from './documents_config/document_layer_config_panel';
import { layersTypeIconMap } from '../../model/layersFunctions';
import { IndexPattern } from '../../../../../src/plugins/data/public';
import { CustomMapConfigPanel } from './custom_map_config/custom_map_config_panel';

interface Props {
Expand All @@ -39,9 +38,9 @@ interface Props {
removeLayer: Function;
isNewLayer: boolean;
setIsNewLayer: Function;
layersIndexPatterns: IndexPattern[];
updateIndexPatterns: Function;
isLayerExists: Function;
originLayerConfig: MapLayerSpecification | null;
setOriginLayerConfig: Function;
}

export const LayerConfigPanel = ({
Expand All @@ -52,27 +51,31 @@ export const LayerConfigPanel = ({
removeLayer,
isNewLayer,
setIsNewLayer,
layersIndexPatterns,
updateIndexPatterns,
isLayerExists,
originLayerConfig,
setOriginLayerConfig,
}: Props) => {
const [isUpdateDisabled, setIsUpdateDisabled] = useState(false);
const [originLayerConfig, setOriginLayerConfig] = useState<MapLayerSpecification | null>(null);
const [warnModalVisible, setWarnModalVisible] = useState(false);
const [unsavedModalVisible, setUnsavedModalVisible] = useState(false);

useEffect(() => {
setOriginLayerConfig(cloneDeep(selectedLayerConfig));
}, []);
if (originLayerConfig === null || originLayerConfig.id !== selectedLayerConfig.id) {
setOriginLayerConfig(cloneDeep(selectedLayerConfig));
}
}, [originLayerConfig, selectedLayerConfig]);

const discardChanges = () => {
closeLayerConfigPanel(false);
setSelectedLayerConfig(undefined);
setOriginLayerConfig(null);
setUnsavedModalVisible(false);
};

const onClose = () => {
if (isEqual(originLayerConfig, selectedLayerConfig)) {
discardChanges();
} else {
setWarnModalVisible(true);
setUnsavedModalVisible(true);
}
if (isNewLayer) {
removeLayer(selectedLayerConfig.id);
Expand All @@ -82,13 +85,14 @@ export const LayerConfigPanel = ({
const onUpdate = () => {
updateLayer();
closeLayerConfigPanel(false);
setOriginLayerConfig(null);
if (isNewLayer) {
setIsNewLayer(false);
}
};

const closeModal = () => {
setWarnModalVisible(false);
setUnsavedModalVisible(false);
};

return (
Expand Down Expand Up @@ -125,7 +129,6 @@ export const LayerConfigPanel = ({
selectedLayerConfig={selectedLayerConfig}
setSelectedLayerConfig={setSelectedLayerConfig}
setIsUpdateDisabled={setIsUpdateDisabled}
layersIndexPatterns={layersIndexPatterns}
isLayerExists={isLayerExists}
/>
)}
Expand Down Expand Up @@ -154,7 +157,7 @@ export const LayerConfigPanel = ({
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
{warnModalVisible && (
{unsavedModalVisible && (
<EuiModal onClose={closeModal}>
<EuiModalHeader>
<EuiModalHeaderTitle>Unsaved changes</EuiModalHeaderTitle>
Expand Down
Loading