@finos/legend-application-studio
Version:
Legend Studio application core
173 lines • 13.3 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 { observer } from 'mobx-react-lite';
import { useEditorStore } from '../../EditorStoreProvider.js';
import { CheckCircleIcon, CopyIcon, Dialog, Modal, ModalBody, ModalFooter, ModalFooterButton, ModalHeader, ModalTitle, PanelContent, PanelHeader, PanelHeaderActions, RocketIcon, EyeIcon, ModalHeaderActions, CustomSelectorInput, } from '@finos/legend-art';
import { generateUrlToDeployOnOpen, IngestDefinitionEditorState, } from '../../../../stores/editor/editor-state/element-editor-state/ingest/IngestDefinitionEditorState.js';
import { CodeEditor } from '@finos/legend-lego/code-editor';
import React, { useEffect, useState } from 'react';
import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
import { flowResult } from 'mobx';
import { useAuth } from 'react-oidc-context';
import { IngestDefinitionDeploymentResponse, IngestDefinitionValidationResponse, } from '@finos/legend-server-lakehouse';
import { useApplicationNavigationContext } from '@finos/legend-application';
import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
import { LINEAGE_VIEW_MODE, LineageViewerContent, } from '@finos/legend-query-builder';
const IngestValidationError = observer((props) => {
const { state, validateResponse } = props;
const applicationStore = state.editorStore.applicationStore;
const closeModal = () => state.setValidateAndDeployResponse(undefined);
return (_jsx(Dialog, { open: true, classes: {
root: 'editor-modal__root-container',
container: 'editor-modal__container',
paper: 'editor-modal__content',
}, onClose: closeModal, children: _jsxs(Modal, { darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled, className: "editor-modal", children: [_jsx(ModalHeader, { children: _jsx(ModalTitle, { title: 'Validation Error' }) }), _jsx(ModalBody, { children: _jsx(PanelContent, { children: _jsx(CodeEditor, { inputValue: JSON.stringify(validateResponse, null, 2), isReadOnly: true, language: CODE_EDITOR_LANGUAGE.JSON }) }) }), _jsx(ModalFooter, { children: _jsx(ModalFooterButton, { onClick: closeModal, text: "Close", type: "secondary" }) })] }) }));
});
const IngestDeploymentResponseModal = observer((props) => {
const { closeModal, deploymentResponse, copyHandler } = props;
const copyURN = (text) => {
copyHandler(text, 'Ingest URN copied to clipboard');
};
return (_jsx(Dialog, { open: true, classes: {
root: 'ingestion-modal__root-container',
container: 'ingestion-modal__container',
paper: 'ingestion-modal__content',
}, children: _jsxs(Modal, { darkMode: true, className: "ingestion-modal", children: [_jsx(ModalHeader, { children: _jsx(ModalTitle, { icon: _jsx(CheckCircleIcon, { className: "ingestion-modal--success" }), title: "Deployment Response" }) }), _jsxs(ModalBody, { children: [_jsxs("div", { className: "ingestion-modal__urn", children: [_jsxs("div", { className: "ingestion-modal__urn__info", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Deployment URN" }), _jsx("div", { className: "ingestion-modal__urn__value", children: deploymentResponse.ingestDefinitionUrn })] }), _jsx("div", { className: "ingestion-modal__urn__copy", children: _jsx("button", { className: "ingestion-modal__urn__copy--btn", tabIndex: -1, title: "Copy", onClick: () => {
copyURN(deploymentResponse.ingestDefinitionUrn);
}, children: _jsx(CopyIcon, {}) }) })] }), _jsxs("div", { className: "ingestion-modal__write", children: [_jsx("div", { className: "ingestion-modal__write__label", children: "Write Location" }), _jsx("div", { className: "ingestion-modal__write--value", children: deploymentResponse.write_location ? (_jsx(CodeEditor, { inputValue: JSON.stringify(deploymentResponse.write_location, null, 2), isReadOnly: true, language: CODE_EDITOR_LANGUAGE.JSON, extraEditorOptions: {
wordWrap: 'on',
}, hideActionBar: true })) : (_jsx("div", { className: "ingestion-modal__write--no-value", children: "No write location provided" })) })] })] }), _jsx(ModalFooter, { children: _jsx(ModalFooterButton, { onClick: closeModal, text: "Close", type: "secondary" }) })] }) }));
});
export const IngestLineageModal = observer((props) => {
const { ingestDefinitionEditorState } = props;
const matviewFunctions = ingestDefinitionEditorState.ingest.TEMPORARY_MATVIEW_FUNCTION_DATA_SETS;
const matviewNames = ingestDefinitionEditorState.ingest.TEMPORARY_MATVIEW_FUNCTION_DATA_SETS?.map((dataset) => dataset.name) ?? [];
const [selectedMatview, setSelectedMatview] = useState(undefined);
useEffect(() => {
if (!selectedMatview && matviewFunctions && matviewFunctions.length > 0) {
setSelectedMatview(matviewFunctions[0]);
}
}, [matviewFunctions, selectedMatview]);
useEffect(() => {
ingestDefinitionEditorState.lineageState.setSelectedTab(LINEAGE_VIEW_MODE.DATABASE_LINEAGE);
}, [ingestDefinitionEditorState.lineageState]);
if (!matviewFunctions || matviewFunctions.length === 0) {
return null;
}
const isDarkMode = !ingestDefinitionEditorState.lineageState.applicationStore.layoutService
.TEMPORARY__isLightColorThemeEnabled;
const closeLineageViewer = () => {
ingestDefinitionEditorState.lineageState.setLineageData(undefined);
ingestDefinitionEditorState.lineageState.setSelectedTab(LINEAGE_VIEW_MODE.DATABASE_LINEAGE);
ingestDefinitionEditorState.lineageState.clearPropertySelections();
};
const datasetOptions = matviewNames
.map((name, index) => {
const dataset = matviewFunctions[index];
if (dataset) {
return {
label: name,
value: dataset,
};
}
return null;
})
.filter((option) => option !== null);
const handleDatasetChange = (option) => {
if (option?.value) {
setSelectedMatview(option.value);
flowResult(ingestDefinitionEditorState.generateLineage(option.value)).catch(ingestDefinitionEditorState.editorStore.applicationStore
.alertUnhandledError);
}
};
return (_jsx(_Fragment, { children: _jsx(Dialog, { open: Boolean(ingestDefinitionEditorState.lineageState.lineageData), onClose: closeLineageViewer, children: _jsxs(Modal, { className: "editor-modal", darkMode: isDarkMode, children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { title: "LineageViewer" }), _jsx(ModalHeaderActions, { children: _jsx(CustomSelectorInput, { options: datasetOptions, onChange: handleDatasetChange, value: selectedMatview
? {
label: selectedMatview.name,
value: selectedMatview,
}
: null, darkMode: isDarkMode }) })] }), _jsx(ModalBody, { children: _jsx("div", { className: "lineage-viewer", style: { height: '100%' }, children: _jsx(LineageViewerContent, { lineageState: ingestDefinitionEditorState.lineageState }) }) }), _jsx(ModalFooter, { className: "editor-modal__footer", children: _jsx(ModalFooterButton, { onClick: closeLineageViewer, text: "Close", type: "secondary" }) })] }) }) }));
});
export const IngestDefinitionEditor = observer(() => {
const editorStore = useEditorStore();
const ingestDefinitionEditorState = editorStore.tabManagerState.getCurrentEditorState(IngestDefinitionEditorState);
const ingestDef = ingestDefinitionEditorState.ingest;
const auth = useAuth();
const deployIngest = () => {
// Trigger OAuth flow if not authenticated
if (!auth.isAuthenticated) {
// remove this redirect if we move to do oauth at the beginning of opening studio
auth
.signinRedirect({
state: generateUrlToDeployOnOpen(ingestDefinitionEditorState),
})
.catch(editorStore.applicationStore.alertUnhandledError);
return;
}
// Use the token for deployment
const token = auth.user?.access_token;
if (token) {
flowResult(ingestDefinitionEditorState.deploy(token)).catch(editorStore.applicationStore.alertUnhandledError);
}
else {
editorStore.applicationStore.notificationService.notifyError('Authentication failed. No token available.');
}
};
const renderDeploymentResponse = () => {
const response = ingestDefinitionEditorState.deploymentResponse;
if (response instanceof IngestDefinitionValidationResponse) {
return (_jsx(IngestValidationError, { state: ingestDefinitionEditorState, validateResponse: response }));
}
else if (response instanceof IngestDefinitionDeploymentResponse) {
const copyHanlder = (text, successMessage) => {
ingestDefinitionEditorState.editorStore.applicationStore.clipboardService
.copyTextToClipboard(text)
.then(() => ingestDefinitionEditorState.editorStore.applicationStore.notificationService.notifySuccess(successMessage, undefined, 2500))
.catch(ingestDefinitionEditorState.editorStore.applicationStore
.alertUnhandledError);
};
return (_jsx(IngestDeploymentResponseModal, { closeModal: () => ingestDefinitionEditorState.setValidateAndDeployResponse(undefined), deploymentResponse: response, copyHandler: copyHanlder }));
}
return null;
};
const isValid = ingestDefinitionEditorState.validForDeployment;
const isValidForLineage = ingestDefinitionEditorState.validForLineageViewer;
useEffect(() => {
ingestDefinitionEditorState.generateElementGrammar();
}, [ingestDefinitionEditorState]);
useApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.INGEST_DEFINITION_EDITOR);
useEffect(() => {
if (ingestDefinitionEditorState.deployOnOpen) {
flowResult(ingestDefinitionEditorState.init_with_deploy(auth)).catch(editorStore.applicationStore.alertUnhandledError);
}
}, [
auth,
editorStore.applicationStore.alertUnhandledError,
ingestDefinitionEditorState,
]);
const viewLineage = () => {
const firstMatViewQuery = ingestDefinitionEditorState.ingest
.TEMPORARY_MATVIEW_FUNCTION_DATA_SETS?.[0];
if (firstMatViewQuery) {
flowResult(ingestDefinitionEditorState.generateLineage(firstMatViewQuery)).catch(editorStore.applicationStore.alertUnhandledError);
}
else {
editorStore.applicationStore.notificationService.notifyError('No MatView datasets available for lineage generation');
}
};
return (_jsxs("div", { className: "data-product-editor", children: [_jsx(PanelHeader, { title: "Ingest", titleContent: ingestDef.name, darkMode: true, isReadOnly: true }), _jsxs(PanelContent, { children: [_jsx(PanelHeader, { title: "deployment", darkMode: true, children: _jsx(PanelHeaderActions, { children: _jsxs("div", { className: "panel__header__actions", children: [_jsx("div", { className: "btn__dropdown-combo btn__dropdown-combo--primary", children: _jsxs("button", { className: "btn__dropdown-combo__label", onClick: viewLineage, tabIndex: -1, disabled: !isValidForLineage, children: [_jsx(EyeIcon, { className: "btn__dropdown-combo__label__icon" }), _jsx("div", { className: "btn__dropdown-combo__label__title", children: "Lineage" })] }) }), _jsx("div", { className: "btn__dropdown-combo btn__dropdown-combo--primary", children: _jsxs("button", { className: "btn__dropdown-combo__label", onClick: deployIngest, title: ingestDefinitionEditorState.validationMessage, tabIndex: -1, disabled: !isValid, children: [_jsx(RocketIcon, { className: "btn__dropdown-combo__label__icon" }), _jsx("div", { className: "btn__dropdown-combo__label__title", children: "Deploy" })] }) })] }) }) }), _jsx(PanelContent, { children: _jsx(CodeEditor, { inputValue: ingestDefinitionEditorState.textContent, isReadOnly: true, language: CODE_EDITOR_LANGUAGE.PURE }) }), _jsx(IngestLineageModal, { ingestDefinitionEditorState: ingestDefinitionEditorState }), renderDeploymentResponse()] })] }));
});
//# sourceMappingURL=IngestDefinitionEditor.js.map