@finos/legend-studio
Version:
155 lines • 12.8 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, useEffect, useRef } from 'react';
import { ProjectSelector } from './ProjectSelector.js';
import { WorkspaceSelector } from './WorkspaceSelector.js';
import { observer } from 'mobx-react-lite';
import { clsx, Dialog, SquareIcon, compareLabelFn, CustomSelectorInput, PanelLoadingIndicator, CheckSquareIcon, MarkdownTextViewer, AssistantIcon, } from '@finos/legend-art';
import { useWorkspaceSetupStore, withWorkspaceSetupStore, } from './WorkspaceSetupStoreProvider.js';
import { useParams } from 'react-router';
import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
import { generateEditorRoute, } from '../../stores/LegendStudioRouter.js';
import { flowResult } from 'mobx';
import { WorkspaceType } from '@finos/legend-server-sdlc';
import { useApplicationStore, DocumentationLink, useApplicationNavigationContext, } from '@finos/legend-application';
import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../stores/LegendStudioDocumentation.js';
import { CreateProjectModal } from './ProjectCreateModal.js';
import { ActivityBarMenu } from '../editor/ActivityBar.js';
import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../stores/LegendStudioApplicationNavigationContext.js';
import { useLegendStudioApplicationStore } from '../LegendStudioBaseStoreProvider.js';
const CreateWorkspaceModal = observer(() => {
const setupStore = useWorkspaceSetupStore();
const applicationStore = useApplicationStore();
const { loadProjectsState, createOrImportProjectState, createWorkspaceState, showCreateWorkspaceModal, } = setupStore;
const isFetchingProjects = loadProjectsState.isInProgress;
const projectSelectorRef = useRef(null);
const workspaceNameInputRef = useRef(null);
const [currentProjectId, setCurrentProjectId] = useState(setupStore.currentProjectId);
const [workspaceName, setWorkspaceName] = useState('');
const [isGroupWorkspace, setIsGroupWorkspace] = useState(false);
const workspaceType = isGroupWorkspace
? WorkspaceType.GROUP
: WorkspaceType.USER;
const projectOptions = setupStore.projectOptions.sort(compareLabelFn);
const selectedOption = projectOptions.find((option) => option.value === currentProjectId) ?? null;
const dispatchingActions = createWorkspaceState.isInProgress ||
createOrImportProjectState.isInProgress;
const onSelectionChange = (val) => {
if ((val !== null || selectedOption !== null) &&
(!val || !selectedOption || val.value !== selectedOption.value)) {
setCurrentProjectId(val?.value);
workspaceNameInputRef.current?.focus();
}
};
const projectSelectorPlaceholder = isFetchingProjects
? 'Loading projects'
: loadProjectsState.hasFailed
? 'Error fetching projects'
: projectOptions.length
? 'Choose an existing project'
: 'You have no projects, please create or acquire access for at least one';
const closeModal = () => {
setupStore.setShowCreateWorkspaceModal(false);
};
const createWorkspace = () => {
if (currentProjectId && workspaceName) {
flowResult(setupStore.createWorkspace(currentProjectId, workspaceName, workspaceType)).catch(applicationStore.alertUnhandledError);
}
};
const changeWorkspaceName = (event) => setWorkspaceName(event.target.value);
const handleSubmit = (event) => {
event.preventDefault();
createWorkspace();
};
const handleEnter = () => {
if (currentProjectId) {
workspaceNameInputRef.current?.focus();
}
else {
projectSelectorRef.current?.focus();
}
};
const toggleGroupWorkspace = (event) => {
event.preventDefault();
setIsGroupWorkspace(!isGroupWorkspace);
};
return (_jsx(Dialog, { open: showCreateWorkspaceModal, onClose: closeModal, TransitionProps: {
onEnter: handleEnter,
}, classes: { container: 'search-modal__container' }, PaperProps: { classes: { root: 'search-modal__inner-container' } }, children: _jsxs("div", { className: "modal modal--dark workspace-setup__create-workspace-modal", children: [_jsxs("div", { className: "modal__title", children: ["Create Workspace", _jsx(DocumentationLink, { className: "workspace-setup__create-workspace-modal__doc__create-workspace", documentationKey: LEGEND_STUDIO_DOCUMENTATION_KEY.CREATE_WORKSPACE })] }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(PanelLoadingIndicator, { isLoading: setupStore.createWorkspaceState.isInProgress }), _jsxs("div", { className: "panel__content__form workspace-setup__create-workspace-modal__form workspace-setup__create-workspace-modal__form__workspace", children: [_jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Project Name" }), _jsx(CustomSelectorInput, { className: "workspace-setup-selector__input workspace-setup__workspace__selector", ref: projectSelectorRef, options: projectOptions, disabled: dispatchingActions ||
isFetchingProjects ||
!projectOptions.length, isLoading: isFetchingProjects, onChange: onSelectionChange, value: selectedOption, placeholder: projectSelectorPlaceholder, isClearable: true, escapeClearsValue: true, darkMode: true })] }), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Workspace Name" }), _jsx("input", { className: "workspace-setup__create-workspace-modal__form__workspace-name__input", ref: workspaceNameInputRef, spellCheck: false, disabled: dispatchingActions, placeholder: "MyWorkspace", value: workspaceName, onChange: changeWorkspaceName })] }), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Group Workspace" }), _jsxs("div", { className: "panel__content__form__section__toggler", children: [_jsx("button", { onClick: toggleGroupWorkspace, type: "button" // prevent this toggler being activated on form submission
, className: clsx('panel__content__form__section__toggler__btn', {
'panel__content__form__section__toggler__btn--toggled': isGroupWorkspace,
}), tabIndex: -1, children: isGroupWorkspace ? _jsx(CheckSquareIcon, {}) : _jsx(SquareIcon, {}) }), _jsx("div", { className: "panel__content__form__section__toggler__prompt", children: "Group workspaces can be edited by all users in the corresponding project." })] })] })] }), _jsx("div", { className: "panel__content__form__actions", children: _jsx("button", { disabled: dispatchingActions || !workspaceName || !currentProjectId, className: "btn btn--dark", children: "Create" }) })] })] }) }));
});
const WorkspaceSetupContent = observer(() => {
const setupStore = useWorkspaceSetupStore();
const applicationStore = useLegendStudioApplicationStore();
const projectSelectorRef = useRef(null);
const workspaceSelectorRef = useRef(null);
const proceedButtonRef = useRef(null);
const documentation = applicationStore.documentationService.getDocEntry(LEGEND_STUDIO_DOCUMENTATION_KEY.SETUP_WORKSPACE);
const isCreatingWorkspace = setupStore.createWorkspaceState.isInProgress;
const isCreatingOrImportingProject = setupStore.createOrImportProjectState.isInProgress;
const disableProceedButton = !setupStore.currentProjectId ||
!setupStore.currentWorkspaceCompositeId ||
isCreatingWorkspace ||
isCreatingOrImportingProject;
const onProjectChange = (focusNext) => focusNext
? workspaceSelectorRef.current?.focus()
: projectSelectorRef.current?.focus();
const onWorkspaceChange = (focusNext) => focusNext
? proceedButtonRef.current?.focus()
: workspaceSelectorRef.current?.focus();
const handleCreateProjectModal = () => setupStore.setShowCreateProjectModal(true);
const handleCreateWorkspaceModal = () => setupStore.setShowCreateWorkspaceModal(true);
const handleProceed = () => {
if (setupStore.currentProjectId &&
setupStore.currentProject &&
setupStore.currentWorkspaceCompositeId &&
setupStore.currentWorkspace) {
applicationStore.navigator.goTo(generateEditorRoute(setupStore.currentProjectId, setupStore.currentWorkspace.workspaceId, setupStore.currentWorkspace.workspaceType));
}
};
const toggleAssistant = () => applicationStore.assistantService.toggleAssistant();
useEffect(() => {
if (!disableProceedButton) {
proceedButtonRef.current?.focus();
}
}, [disableProceedButton]);
return (_jsx("div", { className: "app__page", children: _jsxs("div", { className: "workspace-setup", children: [_jsxs("div", { className: "workspace-setup__body", children: [_jsx("div", { className: "activity-bar", children: _jsx(ActivityBarMenu, {}) }), _jsx("div", { className: "workspace-setup__content", "data-testid": LEGEND_STUDIO_TEST_ID.SETUP__CONTENT, children: _jsxs("div", { className: "workspace-setup__content__main", children: [_jsxs("div", { className: "workspace-setup__title", children: [_jsxs("div", { className: "workspace-setup__title__header", children: ["Setup Workspace", _jsx(DocumentationLink, { className: "workspace-setup__doc__setup-workspace", documentationKey: LEGEND_STUDIO_DOCUMENTATION_KEY.SETUP_WORKSPACE })] }), documentation?.markdownText && (_jsx("div", { className: "workspace-setup__title__documentation", children: _jsx(MarkdownTextViewer, { value: documentation.markdownText }) }))] }), _jsxs("div", { children: [_jsx(ProjectSelector, { ref: projectSelectorRef, onChange: onProjectChange, create: handleCreateProjectModal }), _jsx(WorkspaceSelector, { ref: workspaceSelectorRef, onChange: onWorkspaceChange, create: handleCreateWorkspaceModal }), _jsx("div", { className: "workspace-setup__actions", children: _jsx("button", { ref: proceedButtonRef, className: "workspace-setup__next-btn btn--dark", onClick: handleProceed, disabled: disableProceedButton, children: "Edit Workspace" }) })] }), setupStore.showCreateProjectModal && _jsx(CreateProjectModal, {}), setupStore.showCreateWorkspaceModal && _jsx(CreateWorkspaceModal, {})] }) })] }), _jsxs("div", { "data-testid": LEGEND_STUDIO_TEST_ID.STATUS_BAR, className: "editor__status-bar", children: [_jsx("div", { className: "editor__status-bar__left" }), _jsx("div", { className: "editor__status-bar__right", children: _jsx("button", { className: clsx('editor__status-bar__action editor__status-bar__action__toggler', {
'editor__status-bar__action__toggler--active': !applicationStore.assistantService.isHidden,
}), onClick: toggleAssistant, tabIndex: -1, title: "Toggle assistant", children: _jsx(AssistantIcon, {}) }) })] })] }) }));
});
export const WorkspaceSetup = withWorkspaceSetupStore(observer(() => {
const params = useParams();
const setupStore = useWorkspaceSetupStore();
const applicationStore = useApplicationStore();
useEffect(() => {
setupStore.setCurrentProjectId(params.projectId);
setupStore.init(params.workspaceId, params.groupWorkspaceId);
}, [setupStore, params]);
useEffect(() => {
flowResult(setupStore.fetchProjects()).catch(applicationStore.alertUnhandledError);
if (setupStore.currentProjectId) {
flowResult(setupStore.fetchWorkspaces(setupStore.currentProjectId)).catch(applicationStore.alertUnhandledError);
}
}, [applicationStore, setupStore]);
useApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.SETUP);
return _jsx(WorkspaceSetupContent, {});
}));
//# sourceMappingURL=WorkspaceSetup.js.map