@finos/legend-application-studio
Version:
Legend Studio application core
409 lines • 29 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 { useApplicationStore, DEFAULT_TAB_SIZE, } from '@finos/legend-application';
import { compareLabelFn, clsx, CustomSelectorInput, TimesIcon, Dialog, ControlledDropdownMenu, CaretDownIcon, MenuContentItem, MenuContent, Modal, ModalBody, ModalFooter, ModalHeader, PanelLoadingIndicator, TreeView, ChevronDownIcon, ChevronRightIcon, ContextMenu, CompressIcon, SubjectIcon, ViewHeadlineIcon, ExpandAllIcon, BlankPanelContent, VersionsIcon, RepoIcon, ModalFooterButton, Button, Panel, PanelHeader, PanelHeaderActions, PanelHeaderActionItem, PanelContentLists, } from '@finos/legend-art';
import { MASTER_SNAPSHOT_ALIAS, SNAPSHOT_VERSION_ALIAS, } from '@finos/legend-server-depot';
import { ActionState, assertErrorThrown, guaranteeNonNullable, isNonNullable, LogEvent, prettyCONSTName, compareSemVerVersions, } from '@finos/legend-shared';
import { generateGAVCoordinates } from '@finos/legend-storage';
import { flowResult } from 'mobx';
import { observer } from 'mobx-react-lite';
import { forwardRef, useEffect, useRef, useState } from 'react';
import { ProjectConfigurationEditorState } from '../../../../stores/editor/editor-state/project-configuration-editor-state/ProjectConfigurationEditorState.js';
import { ConflictTreeNodeData, ConflictVersionNodeData, buildDependencyNodeChildren, DEPENDENCY_REPORT_TAB, openAllDependencyNodesInTree, ProjectDependencyTreeNodeData, } from '../../../../stores/editor/editor-state/project-configuration-editor-state/ProjectDependencyEditorState.js';
import { LEGEND_STUDIO_APP_EVENT } from '../../../../__lib__/LegendStudioEvent.js';
import { generateViewProjectByGAVRoute, generateViewProjectRoute, generateViewVersionRoute, } from '../../../../__lib__/LegendStudioNavigation.js';
import { LEGEND_STUDIO_TEST_ID } from '../../../../__lib__/LegendStudioTesting.js';
import { useEditorStore } from '../../EditorStoreProvider.js';
const buildProjectOption = (project) => ({
label: project.coordinates,
value: project,
});
const ProjectDependencyActions = observer((props) => {
const { dependencyEditorState: dependencyEditorState } = props;
const hasConflicts = dependencyEditorState.dependencyReport?.conflicts.length;
const viewTree = () => {
if (dependencyEditorState.dependencyReport) {
dependencyEditorState.setReportTab(DEPENDENCY_REPORT_TAB.EXPLORER);
}
};
const viewConflict = () => {
if (dependencyEditorState.dependencyReport) {
dependencyEditorState.setReportTab(DEPENDENCY_REPORT_TAB.CONFLICTS);
}
};
return (_jsxs("div", { className: "project-dependency-editor__info", children: [_jsx(Button, { onClick: viewTree, disabled: !dependencyEditorState.dependencyReport, title: "View Dependency Explorer", text: "View Dependency Explorer" }), Boolean(hasConflicts) && (_jsx(Button, { className: "project-dependency-editor__conflicts-btn", text: "View Conflicts", onClick: viewConflict, disabled: !dependencyEditorState.dependencyReport?.conflicts.length, title: "View any conflicts in your dependencies" }))] }));
});
const formatOptionLabel = (option) => (_jsxs("div", { className: "project-dependency-editor__label", children: [_jsx("div", { className: "project-dependency-editor__label__tag", children: option.value.projectId }), _jsx("div", { className: "project-dependency-editor__label__name", children: option.value.coordinates })] }));
const DependencyTreeNodeContextMenu = observer(forwardRef(function DependencyTreeNodeContextMenu(props, ref) {
const { node } = props;
const applicationStore = useApplicationStore();
const getViewProjectUrl = () => {
let groupId;
let artifactId;
let versionId;
if (node instanceof ConflictTreeNodeData) {
groupId = node.conflict.groupId;
artifactId = node.conflict.artifactId;
}
else if (node instanceof ConflictVersionNodeData) {
groupId = node.versionConflict.conflict.groupId;
artifactId = node.versionConflict.conflict.artifactId;
versionId = node.versionConflict.version.versionId;
}
else if (node instanceof ProjectDependencyTreeNodeData) {
groupId = node.value.groupId;
artifactId = node.value.artifactId;
versionId = node.value.versionId;
}
return generateViewProjectByGAVRoute(guaranteeNonNullable(groupId), guaranteeNonNullable(artifactId), versionId === MASTER_SNAPSHOT_ALIAS
? SNAPSHOT_VERSION_ALIAS
: versionId);
};
const getSDLCProjectUrl = () => {
if (node instanceof ConflictTreeNodeData) {
const version = node.conflict.versions[0];
return version
? generateViewProjectRoute(version.projectId)
: undefined;
}
else if (node instanceof ConflictVersionNodeData) {
return generateViewVersionRoute(node.versionConflict.version.projectId, node.versionConflict.version.artifactId);
}
else if (node instanceof ProjectDependencyTreeNodeData) {
return generateViewVersionRoute(node.value.projectId, node.value.versionId);
}
return undefined;
};
const sdlcProjectUrl = getSDLCProjectUrl();
const viewProjectUrl = getViewProjectUrl();
const viewProject = () => {
applicationStore.navigationService.navigator.visitAddress(applicationStore.navigationService.navigator.generateAddress(viewProjectUrl));
};
const viewSDLCProject = () => {
if (sdlcProjectUrl) {
applicationStore.navigationService.navigator.visitAddress(applicationStore.navigationService.navigator.generateAddress(sdlcProjectUrl));
}
};
return (_jsxs(MenuContent, { "data-testid": LEGEND_STUDIO_TEST_ID.EXPLORER_CONTEXT_MENU, children: [_jsx(MenuContentItem, { onClick: viewProject, children: "Visit Project" }), _jsx(MenuContentItem, { disabled: !sdlcProjectUrl, onClick: viewSDLCProject, children: "Visit SDLC Project" })] }));
}));
const DependencyTreeNodeContainer = (props) => {
const { node, level, stepPaddingInRem, onNodeSelect } = props;
const isExpandable = Boolean(node.childrenIds?.length);
const selectNode = () => onNodeSelect?.(node);
const value = node.value;
const nodeExpandIcon = isExpandable ? (node.isOpen ? (_jsx(ChevronDownIcon, {})) : (_jsx(ChevronRightIcon, {}))) : (_jsx("div", {}));
return (_jsx(ContextMenu, { content: _jsx(DependencyTreeNodeContextMenu, { node: node }), menuProps: { elevation: 7 }, children: _jsxs("div", { className: clsx('tree-view__node__container project-dependency-explorer-tree__node__container', {
'menu__trigger--on-menu-open': !node.isSelected,
}, {
'project-dependency-explorer-tree__node__container--selected': node.isSelected,
}), style: {
paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 1)}rem`,
}, onClick: selectNode, children: [_jsx("div", { className: "tree-view__node__icon project-dependency-explorer-tree__node__icon", children: _jsx("div", { className: "project-dependency-explorer-tree__node__icon__expand", children: nodeExpandIcon }) }), _jsx("button", { className: "tree-view__node__label project-dependency-explorer-tree__node__label", tabIndex: -1, title: value.id, children: value.artifactId }), _jsx("div", { className: "project-dependency-explorer-tree__node__version", children: _jsx("button", { className: "project-dependency-explorer-tree__node__version-btn", title: value.versionId, tabIndex: -1, children: value.versionId }) })] }) }));
};
const DependencyTreeView = (props) => {
const { treeData, setTreeData } = props;
const onNodeExpand = (node) => {
if (node.childrenIds?.length) {
node.isOpen = !node.isOpen;
node.childrenIds
.map((id) => treeData.nodes.get(id))
.filter(isNonNullable)
.forEach((c) => buildDependencyNodeChildren(c, treeData.nodes));
}
setTreeData({ ...treeData });
};
const onNodeSelect = (node) => {
buildDependencyNodeChildren(node, treeData.nodes);
onNodeExpand(node);
setTreeData({ ...treeData });
};
const getChildNodes = (node) => {
if (!node.childrenIds || node.childrenIds.length === 0) {
return [];
}
const childrenNodes = node.childrenIds
.map((id) => treeData.nodes.get(id))
.filter(isNonNullable);
return childrenNodes;
};
return (_jsx(TreeView, { components: {
TreeNodeContainer: DependencyTreeNodeContainer,
}, treeData: treeData, getChildNodes: getChildNodes, onNodeSelect: onNodeSelect, innerProps: {
onNodeExpand,
} }));
};
const ConflictTreeNodeContainer = (props) => {
const { node, level, stepPaddingInRem, onNodeSelect } = props;
const isExpandable = Boolean(node.childrenIds?.length);
const selectNode = () => onNodeSelect?.(node);
const nodeExpandIcon = isExpandable ? (node.isOpen ? (_jsx(ChevronDownIcon, {})) : (_jsx(ChevronRightIcon, {}))) : (_jsx("div", {}));
return (_jsx(ContextMenu, { content: _jsx(DependencyTreeNodeContextMenu, { node: node }), menuProps: { elevation: 7 }, children: _jsxs("div", { className: clsx('tree-view__node__container project-dependency-explorer-tree__node__container', {
'menu__trigger--on-menu-open': !node.isSelected,
}, {
'project-dependency-explorer-tree__node__container--selected': node.isSelected,
}), style: {
paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 1)}rem`,
}, onClick: selectNode, children: [_jsxs("div", { className: clsx('tree-view__node__icon project-dependency-explorer-tree__node__icon', {
'tree-view__node__icon project-dependency-explorer-tree__node__icon__with__type': node instanceof ConflictTreeNodeData ||
node instanceof ConflictVersionNodeData,
}), children: [_jsx("div", { className: "project-dependency-explorer-tree__node__icon__expand", children: nodeExpandIcon }), node instanceof ConflictTreeNodeData && (_jsx("div", { className: "project-dependency-explorer-tree__node__icon__type", children: _jsx(RepoIcon, {}) })), node instanceof ConflictVersionNodeData && (_jsx("div", { className: "project-dependency-explorer-tree__node__icon__type", children: _jsx(VersionsIcon, {}) }))] }), _jsx("button", { className: "tree-view__node__label project-dependency-explorer-tree__node__label", tabIndex: -1, title: node.description, children: node.label }), node instanceof ProjectDependencyTreeNodeData && (_jsx("div", { className: "project-dependency-explorer-tree__node__version", children: _jsx("button", { className: "project-dependency-explorer-tree__node__version-btn", title: node.value.versionId, tabIndex: -1, children: node.value.versionId }) }))] }) }));
};
const ConflictDependencyTreeView = (props) => {
const { treeData, setTreeData } = props;
const onNodeExpand = (node) => {
if (node.childrenIds?.length) {
node.isOpen = !node.isOpen;
}
setTreeData({ ...treeData });
};
const onNodeSelect = (node) => {
onNodeExpand(node);
setTreeData({ ...treeData });
};
const getChildNodes = (node) => {
if (!node.childrenIds || node.childrenIds.length === 0) {
return [];
}
const childrenNodes = node.childrenIds
.map((id) => treeData.nodes.get(id))
.filter(isNonNullable);
return childrenNodes;
};
return (_jsx(TreeView, { components: {
TreeNodeContainer: ConflictTreeNodeContainer,
}, treeData: treeData, getChildNodes: getChildNodes, onNodeSelect: onNodeSelect, innerProps: {
onNodeExpand,
} }));
};
const collapseTreeData = (treeData) => {
Array.from(treeData.nodes.values()).forEach((node) => {
node.isOpen = false;
});
};
export const getConflictsString = (report) => Array.from(report.conflictInfo.entries())
.map(([k, conflictVersionPaths]) => {
const base = `project:\n${' '.repeat(DEFAULT_TAB_SIZE) +
generateGAVCoordinates(k.groupId, k.artifactId, undefined)}`;
const versionConflictString = conflictVersionPaths
.map((conflictVersion) => {
const versions = `version: ${conflictVersion.version.versionId}\n`;
const paths = `paths:\n${conflictVersion.pathsToVersion
.map((p, idx) => `${' '.repeat(DEFAULT_TAB_SIZE) + (idx + 1)}:\n${p
.map((l) => l.id)
.join('>')}`)
.join('\n')}`;
return versions + paths;
})
.join('\n');
return `${base}\n${versionConflictString}`;
})
.join('\n\n');
const ProjectDependencyConflictViewer = observer((props) => {
const { report, dependencyEditorState } = props;
const hasConflict = Boolean(report.conflicts.length);
const collapseTree = () => {
dependencyEditorState.conflictStates?.forEach((c) => {
const treeData = c.treeData;
Array.from(treeData.nodes.values()).forEach((n) => (n.isOpen = false));
c.setTreeData({ ...treeData });
});
};
const expandAllNodes = () => {
dependencyEditorState.expandAllConflicts();
};
useEffect(() => {
if (hasConflict && !dependencyEditorState.conflictStates) {
dependencyEditorState.buildConflictPaths();
}
}, [dependencyEditorState, hasConflict]);
return (_jsxs(Panel, { className: "project-dependency-explorer", children: [_jsx(PanelHeader, { title: "conflicts", children: _jsxs(PanelHeaderActions, { children: [_jsx(PanelHeaderActionItem, { title: "Collapse Tree", disabled: !hasConflict || !dependencyEditorState.conflictStates, onClick: collapseTree, children: _jsx(CompressIcon, {}) }), _jsx(PanelHeaderActionItem, { title: "Expand All Conflict Paths", disabled: !hasConflict || !dependencyEditorState.conflictStates, onClick: expandAllNodes, children: _jsx(ExpandAllIcon, {}) })] }) }), _jsxs("div", { className: "project-dependency-explorer__content", children: [hasConflict && dependencyEditorState.conflictStates && (_jsx("div", { children: dependencyEditorState.conflictStates.map((c) => (_jsx(ConflictDependencyTreeView, { treeData: c.treeData, setTreeData: (treeData) => c.setTreeData(treeData) }, c.uuid))) })), !hasConflict && _jsx(BlankPanelContent, { children: "No Conflicts" })] })] }));
});
const ProjectDependencyReportModal = observer((props) => {
const { dependencyEditorState } = props;
const applicationStore = dependencyEditorState.editorStore.applicationStore;
const reportTab = dependencyEditorState.reportTab;
const tabs = Object.values(DEPENDENCY_REPORT_TAB);
const changeTab = (tab) => () => dependencyEditorState.setReportTab(tab);
const dependencyReport = dependencyEditorState.dependencyReport;
const closeModal = () => dependencyEditorState.setReportTab(undefined);
const [flattenView, setFlattenView] = useState(false);
const [isExpandingDependencies, setIsExpandingDependencies] = useState(false);
const setTreeData = (val) => {
dependencyEditorState.setTreeData(val, flattenView);
};
const toggleViewAsListOrAsTree = () => {
setFlattenView(!flattenView);
};
const treeData = flattenView
? dependencyEditorState.flattenDependencyTreeData
: dependencyEditorState.dependencyTreeData;
const collapseTree = () => {
if (treeData) {
collapseTreeData(treeData);
setTreeData({ ...treeData });
}
};
const openAllDependencyNodes = () => {
if (treeData && dependencyReport) {
setIsExpandingDependencies(true);
openAllDependencyNodesInTree(treeData, dependencyReport.graph);
setTreeData({ ...treeData });
setIsExpandingDependencies(false);
}
};
return (_jsx(Dialog, { open: Boolean(dependencyEditorState.reportTab), onClose: closeModal, classes: {
root: 'editor-modal__root-container',
container: 'editor-modal__container',
paper: 'editor-modal__content',
}, children: _jsxs(Modal, { darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled, className: "editor-modal", children: [_jsx(ModalHeader, { title: "Dependency Explorer" }), _jsx(ModalBody, { children: _jsxs("div", { className: "panel project-dependency-report", children: [_jsx(PanelLoadingIndicator, { isLoading: Boolean(isExpandingDependencies ||
dependencyEditorState.expandConflictsState.isInProgress ||
dependencyEditorState.buildConflictPathState.isInProgress) }), _jsx("div", { className: "panel__header project-dependency-report__tabs__header", children: _jsx("div", { className: "project-dependency-report__tabs", children: tabs.map((tab) => (_jsx("button", { onClick: changeTab(tab), className: clsx('project-dependency-report__tab', {
'project-dependency-report__tab--active': tab === reportTab,
}), children: prettyCONSTName(tab) }, tab))) }) }), reportTab === DEPENDENCY_REPORT_TAB.EXPLORER && (_jsxs(Panel, { className: "project-dependency-explorer", children: [_jsxs(PanelHeader, { children: [_jsx("div", { className: "panel__header__title", children: _jsx("div", { className: "panel__header__title__label", children: "explorer" }) }), _jsxs(PanelHeaderActions, { children: [!flattenView && (_jsxs(_Fragment, { children: [_jsx(PanelHeaderActionItem, { disabled: !treeData, onClick: collapseTree, title: "Collapse Tree", children: _jsx(CompressIcon, {}) }), _jsx(PanelHeaderActionItem, { disabled: !treeData || !dependencyReport, onClick: openAllDependencyNodes, title: "Expand All Dependencies", children: _jsx(ExpandAllIcon, {}) })] })), _jsx("div", { className: "panel__header__action query-builder__functions-explorer__custom-icon", children: flattenView ? (_jsx(SubjectIcon, { title: "View as Tree", onClick: toggleViewAsListOrAsTree })) : (_jsx(ViewHeadlineIcon, { title: "View as Flatten List", onClick: toggleViewAsListOrAsTree })) })] })] }), _jsx("div", { className: "project-dependency-explorer__content", children: treeData && (_jsx(DependencyTreeView, { treeData: treeData, setTreeData: setTreeData })) })] })), reportTab === DEPENDENCY_REPORT_TAB.CONFLICTS &&
dependencyReport && (_jsx(ProjectDependencyConflictViewer, { report: dependencyReport, dependencyEditorState: dependencyEditorState }))] }) }), _jsx(ModalFooter, { children: _jsx(ModalFooterButton, { onClick: closeModal, text: "Close", type: "secondary" }) })] }) }));
});
const ProjectVersionDependencyEditor = observer((props) => {
// init
const { projectDependency, deleteValue, isReadOnly, projects } = props;
const projectDependencyData = projects.get(projectDependency.projectId);
const editorStore = useEditorStore();
const applicationStore = useApplicationStore();
const projectSelectorRef = useRef(null);
const versionSelectorRef = useRef(null);
const configState = editorStore.projectConfigurationEditorState;
const dependencyEditorState = configState.projectDependencyEditorState;
const versions = configState.versions.get(projectDependency.projectId) ?? [];
const [fetchSelectedProjectVersionsStatus] = useState(ActionState.create());
// project
const selectedProject = configState.projects.get(projectDependency.projectId);
const selectedProjectOption = selectedProject
? buildProjectOption(selectedProject)
: null;
const projectDisabled = !configState.associatedProjectsAndVersionsFetched ||
configState.isReadOnly;
const projectsOptions = Array.from(configState.projects.values())
.map(buildProjectOption)
.sort(compareLabelFn);
const onProjectSelectionChange = async (val) => {
if ((val !== null || selectedProjectOption !== null) &&
(!val ||
!selectedProjectOption ||
val.value !== selectedProjectOption.value)) {
projectDependency.setProjectId(val?.value.coordinates ?? '');
projectDependency.setVersionId('');
if (val) {
try {
fetchSelectedProjectVersionsStatus.inProgress();
const _versions = await editorStore.depotServerClient.getVersions(guaranteeNonNullable(projectDependency.groupId), guaranteeNonNullable(projectDependency.artifactId), true);
configState.versions.set(val.value.coordinates, _versions);
if (_versions.length) {
projectDependency.setVersionId(guaranteeNonNullable(_versions[_versions.length - 1]));
flowResult(dependencyEditorState.fetchDependencyReport()).catch(applicationStore.alertUnhandledError);
}
else {
projectDependency.setVersionId('');
}
}
catch (error) {
assertErrorThrown(error);
editorStore.applicationStore.notificationService.notifyError(error);
}
finally {
fetchSelectedProjectVersionsStatus.reset();
}
}
}
};
// version
const version = projectDependency.versionId;
const versionOptions = versions
.toSorted((v1, v2) => compareSemVerVersions(v2, v1))
.map((v) => {
if (v === MASTER_SNAPSHOT_ALIAS) {
return { value: v, label: SNAPSHOT_VERSION_ALIAS };
}
return { value: v, label: v };
});
const selectedVersionOption = versionOptions.find((v) => v.value === version) ?? null;
const versionDisabled = Boolean(!versions.length || !projectDependency.projectId.length) ||
!configState.associatedProjectsAndVersionsFetched ||
isReadOnly;
const onVersionSelectionChange = (val) => {
if ((val !== null || selectedVersionOption !== null) &&
(!val ||
!selectedVersionOption ||
val.value !== selectedVersionOption.value)) {
try {
projectDependency.setVersionId(val?.value ?? '');
flowResult(dependencyEditorState.fetchDependencyReport()).catch(applicationStore.alertUnhandledError);
}
catch (error) {
assertErrorThrown(error);
applicationStore.logService.error(LogEvent.create(LEGEND_STUDIO_APP_EVENT.SDLC_MANAGER_FAILURE), error);
}
}
};
const viewProject = () => {
applicationStore.navigationService.navigator.visitAddress(applicationStore.navigationService.navigator.generateAddress(generateViewProjectByGAVRoute(guaranteeNonNullable(projectDependency.groupId), guaranteeNonNullable(projectDependency.artifactId), projectDependency.versionId === MASTER_SNAPSHOT_ALIAS
? SNAPSHOT_VERSION_ALIAS
: projectDependency.versionId)));
};
// NOTE: This assumes that the dependant project is in the same studio instance as the current project
// In the future, the studio instance may be part of the project data
const viewSDLCProject = () => {
if (projectDependencyData) {
applicationStore.navigationService.navigator.visitAddress(applicationStore.navigationService.navigator.generateAddress(projectDependency.versionId === MASTER_SNAPSHOT_ALIAS
? generateViewProjectRoute(projectDependencyData.projectId)
: generateViewVersionRoute(projectDependencyData.projectId, projectDependency.versionId)));
}
};
const projectSelectorPlaceholder = !projectDependency.projectId.length
? 'Choose project'
: versionDisabled
? 'No project version found. Please create a new one.'
: 'Select version';
return (_jsxs("div", { className: "project-dependency-editor", children: [_jsx(CustomSelectorInput, { className: "project-dependency-editor__selector", inputRef: projectSelectorRef, disabled: projectDisabled, options: projectsOptions, isClearable: true, escapeClearsValue: true, onChange: (val) => {
onProjectSelectionChange(val).catch(applicationStore.alertUnhandledError);
}, value: selectedProjectOption, isLoading: configState.fetchingProjectVersionsState.isInProgress, formatOptionLabel: formatOptionLabel, darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled }), _jsx(CustomSelectorInput, { className: "project-dependency-editor__selector", inputRef: versionSelectorRef, options: versionOptions, isClearable: true, escapeClearsValue: true, onChange: onVersionSelectionChange, value: selectedVersionOption, disabled: versionDisabled, placeholder: fetchSelectedProjectVersionsStatus.isInProgress
? 'Fetching project versions'
: projectSelectorPlaceholder, isLoading: editorStore.projectConfigurationEditorState
.fetchingProjectVersionsState.isInProgress ||
fetchSelectedProjectVersionsStatus.isInProgress, darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled }), _jsxs(ControlledDropdownMenu, { className: "project-dependency-editor__visit-project-btn__dropdown-trigger btn--medium", content: _jsxs(MenuContent, { children: [_jsx(MenuContentItem, { disabled: !selectedProject || !selectedVersionOption, onClick: viewProject, title: "View project", children: "Project" }), _jsx(MenuContentItem, { title: "View SDLC project", disabled: !selectedProject ||
!selectedVersionOption ||
!projectDependencyData, onClick: viewSDLCProject, children: "SDLC project" })] }), children: ["Go to... ", _jsx(CaretDownIcon, { title: "Show more options..." })] }), _jsx("button", { className: "project-dependency-editor__remove-btn btn--dark btn--caution", disabled: isReadOnly, onClick: deleteValue, tabIndex: -1, title: "Close", children: _jsx(TimesIcon, {}) })] }));
});
export const ProjectDependencyEditor = observer(() => {
const editorStore = useEditorStore();
const applicationStore = useApplicationStore();
const configState = editorStore.tabManagerState.getCurrentEditorState(ProjectConfigurationEditorState);
const dependencyEditorState = configState.projectDependencyEditorState;
const currentProjectConfiguration = configState.currentProjectConfiguration;
const deleteProjectDependency = (val) => () => {
currentProjectConfiguration.deleteProjectDependency(val);
flowResult(dependencyEditorState.fetchDependencyReport()).catch(applicationStore.alertUnhandledError);
};
const isReadOnly = editorStore.isInViewerMode;
const isLoading = configState.updatingConfigurationState.isInProgress ||
configState.fetchingProjectVersionsState.isInProgress ||
dependencyEditorState.fetchingDependencyInfoState.isInProgress;
return (_jsxs(PanelContentLists, { children: [isLoading && (_jsx("div", { className: "project-dependency-editor__progress-msg", children: configState.updatingConfigurationState.isInProgress
? `Updating configuration...`
: configState.fetchingProjectVersionsState.isInProgress
? `Fetching dependency versions`
: 'Updating project dependency tree and potential conflicts' })), _jsx(ProjectDependencyActions, { dependencyEditorState: dependencyEditorState }), currentProjectConfiguration.projectDependencies.map((projectDependency) => (_jsx(ProjectVersionDependencyEditor, { projectDependency: projectDependency, deleteValue: deleteProjectDependency(projectDependency), isReadOnly: isReadOnly, projects: configState.projects }, projectDependency._UUID))), dependencyEditorState.reportTab && (_jsx(ProjectDependencyReportModal, { tab: dependencyEditorState.reportTab, dependencyEditorState: dependencyEditorState }))] }));
});
//# sourceMappingURL=ProjectDependencyEditor.js.map