@finos/legend-studio
Version:
203 lines • 23.8 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 } from 'react';
import { observer } from 'mobx-react-lite';
import { clsx, Dialog, TimesIcon, PanelLoadingIndicator, PencilIcon, MarkdownTextViewer, } from '@finos/legend-art';
import { useWorkspaceSetupStore } from './WorkspaceSetupStoreProvider.js';
import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
import { isNumber } from '@finos/legend-shared';
import { flowResult } from 'mobx';
import { DocumentationLink, useConditionedApplicationNavigationContext, } from '@finos/legend-application';
import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../stores/LegendStudioDocumentation.js';
import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../stores/LegendStudioApplicationNavigationContext.js';
import { useLegendStudioApplicationStore } from '../LegendStudioBaseStoreProvider.js';
var CREATE_PROJECT_MODAL_TAB;
(function (CREATE_PROJECT_MODAL_TAB) {
CREATE_PROJECT_MODAL_TAB["CREATE"] = "CREATE";
CREATE_PROJECT_MODAL_TAB["IMPORT"] = "IMPORT";
})(CREATE_PROJECT_MODAL_TAB || (CREATE_PROJECT_MODAL_TAB = {}));
const CreateNewProjectTab = observer(() => {
const setupStore = useWorkspaceSetupStore();
const applicationStore = useLegendStudioApplicationStore();
const documentation = applicationStore.documentationService.getDocEntry(LEGEND_STUDIO_DOCUMENTATION_KEY.CREATE_PROJECT);
const allowCreatingNewProject = setupStore.sdlcServerClient.features.canCreateProject;
const [projectName, setProjectName] = useState('');
const [groupId, setGroupId] = useState('');
const [artifactId, setArtifactId] = useState('');
const [description, setDescription] = useState('');
const changeDescription = (event) => {
setDescription(event.target.value);
};
const changeGroupId = (event) => {
setGroupId(event.target.value);
};
const changeProjectName = (event) => setProjectName(event.target.value);
const changeArtifactId = (event) => {
setArtifactId(event.target.value);
};
// tags
const [tagValue, setTagValue] = useState('');
const [tagsArray, setTagsArray] = useState([]);
// NOTE: `showEditInput` is either boolean (to hide/show the add value button) or a number (index of the item being edited)
const [showEditTagValueInput, setShowEditTagValueInput] = useState(false);
const showAddTagInput = () => setShowEditTagValueInput(true);
const showEditTagInput = (value, idx) => () => {
setTagValue(value);
setShowEditTagValueInput(idx);
};
const hideAddOrEditTagInput = () => {
setShowEditTagValueInput(false);
setTagValue('');
};
const changeTagInputValue = (event) => setTagValue(event.target.value);
const addValue = () => {
if (tagValue && !tagsArray.includes(tagValue)) {
setTagsArray([...tagsArray, tagValue]);
}
hideAddOrEditTagInput();
};
const updateTag = (idx) => () => {
if (tagValue && !tagsArray.includes(tagValue)) {
tagsArray[idx] = tagValue;
setTagsArray(tagsArray);
hideAddOrEditTagInput();
}
};
const deleteTag = (idx) => () => {
const tags = [...tagsArray];
tags.splice(idx, 1);
setTagsArray(tags);
// Since we keep track of the value currently being edited using the index, we have to account for it as we delete entry
if (isNumber(showEditTagValueInput) && showEditTagValueInput > idx) {
setShowEditTagValueInput(showEditTagValueInput - 1);
}
};
const dispatchingActions = setupStore.createOrImportProjectState.isInProgress ||
setupStore.createWorkspaceState.isInProgress;
const disableSubmit = dispatchingActions || !projectName || !artifactId || !groupId;
const handleSubmit = (event) => {
event.preventDefault();
if (projectName && groupId && artifactId) {
if (allowCreatingNewProject) {
flowResult(setupStore.createProject(projectName, description, groupId, artifactId, tagsArray)).catch(applicationStore.alertUnhandledError);
}
}
};
if (!allowCreatingNewProject) {
return (_jsxs("div", { className: "workspace-setup__create-project-modal__form panel__content__form", children: [_jsx("div", { className: "panel__content__form__section workspace-setup__create-project-modal__form__unsupported", children: "SDLC server does not support creating new projects" }), documentation?.markdownText && (_jsx("div", { className: "panel__content__form__section", children: _jsx(MarkdownTextViewer, { value: documentation.markdownText }) }))] }));
}
return (_jsxs("form", { onSubmit: handleSubmit, children: [_jsx(PanelLoadingIndicator, { isLoading: setupStore.createOrImportProjectState.isInProgress }), _jsxs("div", { className: "workspace-setup__create-project-modal__form panel__content__form", children: [documentation?.markdownText && (_jsx("div", { className: "panel__content__form__section", children: _jsx(MarkdownTextViewer, { value: documentation.markdownText }) })), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Project Name" }), _jsx("input", { className: "panel__content__form__section__input", spellCheck: false, placeholder: "MyProject", value: projectName, onChange: changeProjectName })] }), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Description" }), _jsx("textarea", { className: "panel__content__form__section__textarea", spellCheck: false, value: description, onChange: changeDescription })] }), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Group ID" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "The domain for artifacts generated as part of the project build pipeline and published to an artifact repository" }), _jsx("input", { className: "panel__content__form__section__input", spellCheck: false, placeholder: "org.finos.legend.*", value: groupId, onChange: changeGroupId })] }), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Artifact ID" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "The identifier (within the domain specified by group ID) for artifacts generated as part of the project build pipeline and published to an artifact repository" }), _jsx("input", { className: "panel__content__form__section__input", placeholder: "my-project", spellCheck: false, value: artifactId, onChange: changeArtifactId })] }), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Tags" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "List of annotations to categorize projects" }), _jsx("div", { className: "panel__content__form__section__list" }), _jsxs("div", { className: "panel__content__form__section__list__items", "data-testid": LEGEND_STUDIO_TEST_ID.PANEL_CONTENT_FORM_SECTION_LIST_ITEMS, children: [tagsArray.map((value, idx) => (
// NOTE: since the value must be unique, we will use it as the key
_jsx("div", { className: showEditTagValueInput === idx
? 'panel__content__form__section__list__new-item'
: 'panel__content__form__section__list__item', children: showEditTagValueInput === idx ? (_jsxs(_Fragment, { children: [_jsx("input", { className: "panel__content__form__section__input panel__content__form__section__list__new-item__input", spellCheck: false, value: tagValue, onChange: changeTagInputValue }), _jsxs("div", { className: "panel__content__form__section__list__new-item__actions", children: [_jsx("button", { className: "panel__content__form__section__list__new-item__add-btn btn btn--dark", disabled: tagsArray.includes(tagValue), onClick: updateTag(idx), tabIndex: -1, children: "Save" }), _jsx("button", { className: "panel__content__form__section__list__new-item__cancel-btn btn btn--dark", onClick: hideAddOrEditTagInput, tabIndex: -1, children: "Cancel" })] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "panel__content__form__section__list__item__value", children: value }), _jsxs("div", { className: "panel__content__form__section__list__item__actions", children: [_jsx("button", { className: "panel__content__form__section__list__item__edit-btn", onClick: showEditTagInput(value, idx), tabIndex: -1, children: _jsx(PencilIcon, {}) }), _jsx("button", { className: "panel__content__form__section__list__item__remove-btn", onClick: deleteTag(idx), tabIndex: -1, children: _jsx(TimesIcon, {}) })] })] })) }, value))), showEditTagValueInput === true && (_jsxs("div", { className: "panel__content__form__section__list__new-item", children: [_jsx("input", { className: "panel__content__form__section__input panel__content__form__section__list__new-item__input", spellCheck: false, value: tagValue, onChange: changeTagInputValue }), _jsxs("div", { className: "panel__content__form__section__list__new-item__actions", children: [_jsx("button", { className: "panel__content__form__section__list__new-item__add-btn btn btn--dark", disabled: tagsArray.includes(tagValue), onClick: addValue, tabIndex: -1, children: "Save" }), _jsx("button", { className: "panel__content__form__section__list__new-item__cancel-btn btn btn--dark", onClick: hideAddOrEditTagInput, tabIndex: -1, children: "Cancel" })] })] }))] }), showEditTagValueInput !== true && (_jsx("div", { className: "panel__content__form__section__list__new-item__add", children: _jsx("button", { className: "panel__content__form__section__list__new-item__add-btn btn btn--dark", onClick: showAddTagInput, tabIndex: -1, children: "Add Value" }) }))] })] }), _jsx("div", { className: "panel__content__form__actions", children: _jsx("button", { disabled: disableSubmit, className: "btn btn--dark workspace-setup__create-project-modal__submit-btn", onClick: handleSubmit, children: "Create" }) })] }));
});
const ImportProjectTab = observer(() => {
const setupStore = useWorkspaceSetupStore();
const applicationStore = useLegendStudioApplicationStore();
const importProjectSuccessReport = setupStore.importProjectSuccessReport;
const documentation = applicationStore.documentationService.getDocEntry(LEGEND_STUDIO_DOCUMENTATION_KEY.IMPORT_PROJECT);
const [projectIdentifier, setProjectIdentifier] = useState('');
const [groupId, setGroupId] = useState('');
const [artifactId, setArtifactId] = useState('');
const [description, setDescription] = useState('');
const changeDescription = (event) => {
setDescription(event.target.value);
};
const changeGroupId = (event) => {
setGroupId(event.target.value);
};
const changeProjectIdentifier = (event) => setProjectIdentifier(event.target.value);
const changeArtifactId = (event) => {
setArtifactId(event.target.value);
};
// tags
const [tagValue, setTagValue] = useState('');
const [tagsArray, setTagsArray] = useState([]);
// NOTE: `showEditInput` is either boolean (to hide/show the add value button) or a number (index of the item being edited)
const [showEditTagValueInput, setShowEditTagValueInput] = useState(false);
const showAddTagInput = () => setShowEditTagValueInput(true);
const showEditTagInput = (value, idx) => () => {
setTagValue(value);
setShowEditTagValueInput(idx);
};
const hideAddOrEditTagInput = () => {
setShowEditTagValueInput(false);
setTagValue('');
};
const changeTagInputValue = (event) => setTagValue(event.target.value);
const addValue = () => {
if (tagValue && !tagsArray.includes(tagValue)) {
setTagsArray([...tagsArray, tagValue]);
}
hideAddOrEditTagInput();
};
const updateTag = (idx) => () => {
if (tagValue && !tagsArray.includes(tagValue)) {
tagsArray[idx] = tagValue;
setTagsArray(tagsArray);
hideAddOrEditTagInput();
}
};
const deleteTag = (idx) => () => {
const tags = [...tagsArray];
tags.splice(idx, 1);
setTagsArray(tags);
// Since we keep track of the value currently being edited using the index, we have to account for it as we delete entry
if (isNumber(showEditTagValueInput) && showEditTagValueInput > idx) {
setShowEditTagValueInput(showEditTagValueInput - 1);
}
};
const dispatchingActions = setupStore.createOrImportProjectState.isInProgress ||
setupStore.createWorkspaceState.isInProgress;
const disableSubmit = dispatchingActions || !projectIdentifier || !artifactId || !groupId;
const handleSubmit = (event) => {
event.preventDefault();
if (importProjectSuccessReport) {
applicationStore.navigator.openNewWindow(importProjectSuccessReport.reviewUrl);
}
else {
if (projectIdentifier && groupId && artifactId) {
flowResult(setupStore.importProject(projectIdentifier, groupId, artifactId)).catch(applicationStore.alertUnhandledError);
}
}
};
return (_jsxs("form", { onSubmit: handleSubmit, children: [_jsx(PanelLoadingIndicator, { isLoading: setupStore.createOrImportProjectState.isInProgress }), _jsxs("div", { className: "workspace-setup__create-project-modal__form panel__content__form", children: [documentation?.markdownText && (_jsx("div", { className: "panel__content__form__section", children: _jsx(MarkdownTextViewer, { value: documentation.markdownText }) })), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Project ID" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "The ID of the project in the underlying version-control system" }), _jsx("input", { className: "panel__content__form__section__input", spellCheck: false, placeholder: "1234", value: projectIdentifier, disabled: Boolean(importProjectSuccessReport), onChange: changeProjectIdentifier })] }), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Description" }), _jsx("textarea", { className: "panel__content__form__section__textarea", spellCheck: false, value: description, onChange: changeDescription })] }), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Group ID" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "The domain for artifacts generated as part of the project build pipeline and published to an artifact repository" }), _jsx("input", { className: "panel__content__form__section__input", spellCheck: false, placeholder: "org.finos.legend.*", value: groupId, disabled: Boolean(importProjectSuccessReport), onChange: changeGroupId })] }), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Artifact ID" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "The identifier (within the domain specified by group ID) for artifacts generated as part of the project build pipeline and published to an artifact repository" }), _jsx("input", { className: "panel__content__form__section__input", placeholder: "my-project", spellCheck: false, value: artifactId, disabled: Boolean(importProjectSuccessReport), onChange: changeArtifactId })] }), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Tags" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "List of annotations to categorize projects" }), _jsx("div", { className: "panel__content__form__section__list" }), _jsxs("div", { className: "panel__content__form__section__list__items", "data-testid": LEGEND_STUDIO_TEST_ID.PANEL_CONTENT_FORM_SECTION_LIST_ITEMS, children: [tagsArray.map((value, idx) => (
// NOTE: since the value must be unique, we will use it as the key
_jsx("div", { className: showEditTagValueInput === idx
? 'panel__content__form__section__list__new-item'
: 'panel__content__form__section__list__item', children: showEditTagValueInput === idx ? (_jsxs(_Fragment, { children: [_jsx("input", { className: "panel__content__form__section__input panel__content__form__section__list__new-item__input", spellCheck: false, value: tagValue, onChange: changeTagInputValue }), _jsxs("div", { className: "panel__content__form__section__list__new-item__actions", children: [_jsx("button", { className: "panel__content__form__section__list__new-item__add-btn btn btn--dark", disabled: tagsArray.includes(tagValue), onClick: updateTag(idx), tabIndex: -1, children: "Save" }), _jsx("button", { className: "panel__content__form__section__list__new-item__cancel-btn btn btn--dark", onClick: hideAddOrEditTagInput, tabIndex: -1, children: "Cancel" })] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "panel__content__form__section__list__item__value", children: value }), _jsxs("div", { className: "panel__content__form__section__list__item__actions", children: [_jsx("button", { className: "panel__content__form__section__list__item__edit-btn", onClick: showEditTagInput(value, idx), tabIndex: -1, children: _jsx(PencilIcon, {}) }), _jsx("button", { className: "panel__content__form__section__list__item__remove-btn", onClick: deleteTag(idx), tabIndex: -1, children: _jsx(TimesIcon, {}) })] })] })) }, value))), showEditTagValueInput === true && (_jsxs("div", { className: "panel__content__form__section__list__new-item", children: [_jsx("input", { className: "panel__content__form__section__input panel__content__form__section__list__new-item__input", spellCheck: false, value: tagValue, onChange: changeTagInputValue }), _jsxs("div", { className: "panel__content__form__section__list__new-item__actions", children: [_jsx("button", { className: "panel__content__form__section__list__new-item__add-btn btn btn--dark", disabled: tagsArray.includes(tagValue), onClick: addValue, tabIndex: -1, children: "Save" }), _jsx("button", { className: "panel__content__form__section__list__new-item__cancel-btn btn btn--dark", onClick: hideAddOrEditTagInput, tabIndex: -1, children: "Cancel" })] })] }))] }), showEditTagValueInput !== true && (_jsx("div", { className: "panel__content__form__section__list__new-item__add", children: _jsx("button", { className: "panel__content__form__section__list__new-item__add-btn btn btn--dark", onClick: showAddTagInput, tabIndex: -1, children: "Add Value" }) }))] }), Boolean(importProjectSuccessReport) && (_jsx("div", { className: "workspace-setup__create-project-modal__success", children: _jsxs("div", { className: "workspace-setup__create-project-modal__success__label", children: [_jsx("span", { className: "workspace-setup__create-project-modal__success__label__text", children: "The SDLC server has successfully registered your project. To complete the import, please commit the following" }), _jsx("a", { className: "workspace-setup__create-project-modal__success__label__link", href: importProjectSuccessReport?.reviewUrl, rel: "noopener noreferrer", target: "_blank", children: "review." })] }) }))] }), _jsx("div", { className: "panel__content__form__actions", children: _jsx("button", { disabled: disableSubmit, className: "btn btn--dark workspace-setup__create-project-modal__submit-btn", onClick: handleSubmit, children: importProjectSuccessReport ? 'Review' : 'Import' }) })] }));
});
export const CreateProjectModal = observer(() => {
const setupStore = useWorkspaceSetupStore();
const allowCreatingNewProject = setupStore.sdlcServerClient.features.canCreateProject;
const [selectedTab, setSelectedTab] = useState(allowCreatingNewProject
? CREATE_PROJECT_MODAL_TAB.CREATE
: CREATE_PROJECT_MODAL_TAB.IMPORT);
const closeModal = () => {
setupStore.setShowCreateProjectModal(false);
setupStore.setImportProjectSuccessReport(undefined);
};
const switchTab = (val) => () => setSelectedTab(val);
useConditionedApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.SETUP_CREATE_PROJECT_DIALOG, setupStore.showCreateProjectModal);
return (_jsx(Dialog, { open: setupStore.showCreateProjectModal, onClose: closeModal, classes: { container: 'search-modal__container' }, PaperProps: { classes: { root: 'search-modal__inner-container' } }, children: _jsxs("div", { className: "modal modal--dark workspace-setup__create-project-modal", children: [_jsx("div", { className: "workspace-setup__create-project-modal__header", children: _jsx("div", { className: "workspace-setup__create-project-modal__header__label", children: "Create Project" }) }), _jsxs("div", { className: "workspace-setup__create-project-modal__header__tabs", children: [_jsxs("button", { onClick: switchTab(CREATE_PROJECT_MODAL_TAB.CREATE), className: clsx('workspace-setup__create-project-modal__header__tab', {
'workspace-setup__create-project-modal__header__tab--active': selectedTab === CREATE_PROJECT_MODAL_TAB.CREATE,
}), children: ["Create New Project", _jsx(DocumentationLink, { className: "workspace-setup__create-project-modal__header__tab__doc", documentationKey: LEGEND_STUDIO_DOCUMENTATION_KEY.CREATE_PROJECT })] }), _jsxs("button", { onClick: switchTab(CREATE_PROJECT_MODAL_TAB.IMPORT), className: clsx('workspace-setup__create-project-modal__header__tab', {
'workspace-setup__create-project-modal__header__tab--active': selectedTab === CREATE_PROJECT_MODAL_TAB.IMPORT,
}), children: ["Import Project", _jsx(DocumentationLink, { className: "workspace-setup__create-project-modal__header__tab__doc", documentationKey: LEGEND_STUDIO_DOCUMENTATION_KEY.IMPORT_PROJECT })] })] }), _jsxs("div", { className: "workspace-setup__create-project-modal__content", children: [selectedTab === CREATE_PROJECT_MODAL_TAB.CREATE && (_jsx(CreateNewProjectTab, {})), selectedTab === CREATE_PROJECT_MODAL_TAB.IMPORT && (_jsx(ImportProjectTab, {}))] })] }) }));
});
//# sourceMappingURL=ProjectCreateModal.js.map