@finos/legend-studio
Version:
152 lines • 8.05 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Copyright (c) 2020-present, Goldman Sachs
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { useState, useRef } from 'react';
import { observer } from 'mobx-react-lite';
import { Dialog, CustomSelectorInput, createFilter, compareLabelFn, } from '@finos/legend-art';
import { createClassMapping, createEnumerationMapping, getAllMappingElements, MappingEditorState, } from '../../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
import { guaranteeNonNullable, UnsupportedOperationError, } from '@finos/legend-shared';
import { useEditorStore } from '../../EditorStoreProvider.js';
import { PRIMITIVE_TYPE, fromElementPathToMappingElementId, Class, Enumeration, Association, } from '@finos/legend-graph';
import { BASIC_SET_IMPLEMENTATION_TYPE } from '../../../../stores/shared/ModelUtil.js';
import { getPackageableElementOptionalFormatter, } from '@finos/legend-application';
export const NewMappingElementModal = observer(() => {
const editorStore = useEditorStore();
const mappingEditorState = editorStore.getCurrentEditorState(MappingEditorState);
const spec = mappingEditorState.newMappingElementSpec;
// ID
const mappingIdInputRef = useRef(null);
const [id, setId] = useState('');
const handleIdChange = (event) => setId(event.target.value);
const mapping = mappingEditorState.mapping;
const mappingIds = getAllMappingElements(mapping).map((mappingElement) => mappingElement.id.value);
const isMappingIdUnique = !mappingIds.includes(id);
const showId = spec?.target &&
mappingIds.includes(fromElementPathToMappingElementId(spec.target.path));
// Target
const targetSelectorRef = useRef(null);
const options = [
...editorStore.enumerationOptions,
...editorStore.associationOptions,
...editorStore.classOptions,
].sort(compareLabelFn);
const filterOption = createFilter({
ignoreCase: true,
ignoreAccents: false,
stringify: (option) => option.value.path,
});
const selectedOption = spec?.target
? { label: spec.target.name, value: spec.target.path }
: null;
const handleTargetChange = (val) => {
mappingEditorState.createMappingElement({
target: val?.value,
showTarget: true,
openInAdjacentTab: Boolean(spec?.openInAdjacentTab),
});
const suggestedId = val?.value
? fromElementPathToMappingElementId(val.value.path)
: '';
setId(suggestedId && !mappingIds.includes(suggestedId) ? suggestedId : '');
};
// Class Mapping Type
const classMappingTypeSelectorRef = useRef(null);
const classMappingTypeOptions = [
{ value: BASIC_SET_IMPLEMENTATION_TYPE.INSTANCE, label: 'Instance' },
{ value: BASIC_SET_IMPLEMENTATION_TYPE.OPERATION, label: 'Operation' },
];
const initialClassMappingType = guaranteeNonNullable(classMappingTypeOptions[0]);
const [classMappingType, setClassMappingType] = useState(initialClassMappingType);
const changeClassMappingType = (val) => setClassMappingType(val);
// Dialog actions
const handleClose = () => mappingEditorState.setNewMappingElementSpec(undefined);
const handleEnter = () => {
if (spec) {
const suggestedId = spec.target
? fromElementPathToMappingElementId(spec.target.path)
: '';
setId(suggestedId && !mappingIds.includes(suggestedId) ? suggestedId : '');
setClassMappingType(initialClassMappingType);
// Set the focus properly depending on which input elements are shown
if (spec.showTarget) {
targetSelectorRef.current?.focus();
}
else {
if (showId) {
mappingIdInputRef.current?.focus();
}
else if (spec.target instanceof Class) {
classMappingTypeSelectorRef.current?.focus();
}
}
}
};
// Submit button
const disableCreateButton = !spec ||
!spec.target ||
!isMappingIdUnique ||
!id ||
(spec.target instanceof Class && !classMappingType);
const handleSubmit = () => {
if (spec) {
if (id && spec.target) {
let newMappingElement = undefined;
if (spec.target instanceof Class) {
if (classMappingType?.value) {
newMappingElement = createClassMapping(mapping, id, spec.target, classMappingType.value, editorStore);
}
}
else if (spec.target instanceof Enumeration) {
newMappingElement = createEnumerationMapping(mapping, id, spec.target, editorStore.graphManagerState.graph.getPrimitiveType(PRIMITIVE_TYPE.STRING));
}
else if (spec.target instanceof Association) {
throw new UnsupportedOperationError();
}
if (spec.postSubmitAction) {
spec.postSubmitAction(newMappingElement);
}
if (newMappingElement) {
mappingEditorState.openMappingElement(newMappingElement, spec.openInAdjacentTab);
}
}
handleClose();
}
};
const onSubmit = (event) => {
event.preventDefault();
handleSubmit();
};
// Title
const titleText = spec
? spec.showTarget
? 'Create New Mapping Element'
: `Create New ${spec.target instanceof Class
? 'Class'
: spec.target instanceof Enumeration
? 'Enumeration'
: 'Association'} Mapping ${spec.target ? `for ${spec.target.name}` : ''}`
: undefined;
return (_jsxs(Dialog, { open: Boolean(spec), onClose: handleClose, TransitionProps: {
onEnter: handleEnter,
}, classes: {
container: 'search-modal__container',
}, PaperProps: {
classes: {
root: 'search-modal__inner-container',
},
}, children: [spec && (_jsxs("form", { onSubmit: onSubmit, className: "modal search-modal new-mapping-element-modal", children: [titleText && _jsx("div", { className: "modal__title", children: titleText }), spec.showTarget && (_jsx(CustomSelectorInput, { ref: targetSelectorRef, options: options, filterOption: filterOption, onChange: handleTargetChange, value: selectedOption, formatOptionLabel: getPackageableElementOptionalFormatter(), placeholder: "Choose a target", isClearable: true })), showId && (_jsxs("div", { children: ["Default ID could not be used, please specify one:", _jsx("input", { className: "input new-mapping-element-modal__id-input", ref: mappingIdInputRef, spellCheck: false, value: id, onChange: handleIdChange, placeholder: "Mapping element ID" })] })), spec.target instanceof Class && (_jsx(CustomSelectorInput, { ref: classMappingTypeSelectorRef, options: classMappingTypeOptions, onChange: changeClassMappingType, value: classMappingType, placeholder: "Choose a class mapping type" })), _jsx("div", { className: "search-modal__actions", children: _jsx("button", { className: "btn btn--primary", disabled: disableCreateButton, color: "primary", children: "Create" }) })] })), !spec && _jsx("div", {})] }));
});
//# sourceMappingURL=NewMappingElementModal.js.map