From 153da1a904ccac9e54986f1be0d8802072220b49 Mon Sep 17 00:00:00 2001 From: FancMa01 Date: Mon, 18 Mar 2024 14:58:08 -0600 Subject: [PATCH] Mfancher/package bugfixes (#710) * fix breadcrumb * Bug Fixes --- .../application/Assets/TitleRenderer.js | 57 ++++++------ .../components/application/Assets/index.js | 1 + .../components/application/Graph/GraphX6.js | 3 +- .../src/components/application/Graph/Shape.js | 2 +- .../Graph/Toolbar/VersionsButton.js | 21 +---- .../application/templates/FileTemplate.jsx | 92 ++++++++++++------- .../src/components/common/BreadCrumbs.js | 8 +- .../src/components/common/MonacoEditor.js | 10 +- client-reactjs/src/index.css | 4 + client-reactjs/src/redux/actions/Groups.js | 3 + 10 files changed, 112 insertions(+), 89 deletions(-) diff --git a/client-reactjs/src/components/application/Assets/TitleRenderer.js b/client-reactjs/src/components/application/Assets/TitleRenderer.js index a63d98a12..d1f5e0a44 100644 --- a/client-reactjs/src/components/application/Assets/TitleRenderer.js +++ b/client-reactjs/src/components/application/Assets/TitleRenderer.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { DeleteOutlined, EyeOutlined, FilePdfOutlined, FolderOutlined, PlusOutlined } from '@ant-design/icons'; import { useDispatch } from 'react-redux'; -import { Dropdown, Menu } from 'antd'; +import { Dropdown } from 'antd'; import { selectGroup } from '../../../redux/actions/Groups'; import Text from '../../common/Text'; @@ -19,56 +19,59 @@ const TitleRenderer = ({ nodeData, handleMenuClick }) => { const GroupMenu = () => { const items = [ + { + key: 'Group', + label: , + icon: , + }, + ]; + + const extraItems = [ { key: 'Edit-Group', - name: , + label: , icon: , }, { key: 'Delete-Group', - name: , + label: , icon: , }, { key: 'Move-Group', - name: , + label: , icon: , }, { key: 'Print-Assets', - name: , + label: , icon: , }, ]; - const onClick = (props) => { - props.domEvent.stopPropagation(); - setVisible(false); - handleMenuClick(props, nodeData); - }; - const isRootNode = nodeData.key === '0-0'; - return ( - - }> - {} - - {!isRootNode && - items.map((item) => { - return ( - - {item.name} - - ); - })} - - ); + + if (!isRootNode) { + extraItems.map((item) => { + items.push(item); + }); + } + return items; }; + const onClick = (props) => { + props.domEvent.stopPropagation(); + setVisible(false); + handleMenuClick(props, nodeData); + }; return (
  • {nodeData.title} - } onOpenChange={onVisibleChange}> + e.stopPropagation()} />
    • diff --git a/client-reactjs/src/components/application/Assets/index.js b/client-reactjs/src/components/application/Assets/index.js index 07fb6c715..222a81166 100644 --- a/client-reactjs/src/components/application/Assets/index.js +++ b/client-reactjs/src/components/application/Assets/index.js @@ -78,6 +78,7 @@ const Assets = () => { useEffect(() => { //application changed if (application?.applicationId) { + console.log(groupsReducer.tree); if (groupsReducer.tree.length === 0 || groupsReducer.error) { fetchGroups(); // run this function on initial load to populate tree and datalist; } diff --git a/client-reactjs/src/components/application/Graph/GraphX6.js b/client-reactjs/src/components/application/Graph/GraphX6.js index 34d471706..24e4fa6fd 100644 --- a/client-reactjs/src/components/application/Graph/GraphX6.js +++ b/client-reactjs/src/components/application/Graph/GraphX6.js @@ -22,8 +22,7 @@ import { getWorkingCopyGraph, saveWorkingCopyGraph } from '../../common/CommonUt const NOTIFICATION_CONF = { placement: 'top', style: { - width: 'auto', - maxWidth: '750px', + width: '400px', }, }; diff --git a/client-reactjs/src/components/application/Graph/Shape.js b/client-reactjs/src/components/application/Graph/Shape.js index 60e9a0536..105b5f588 100644 --- a/client-reactjs/src/components/application/Graph/Shape.js +++ b/client-reactjs/src/components/application/Graph/Shape.js @@ -112,7 +112,7 @@ const ports = { class Node extends React.Component { shouldComponentUpdate() { const { node } = this.props; - console.log(this.props); + if (node) { // Graph does not detect changes in nodes data when toggle collapse, need to mention it here manually if (node.hasChanged('data') || node.data?.isCollapsed) { diff --git a/client-reactjs/src/components/application/Graph/Toolbar/VersionsButton.js b/client-reactjs/src/components/application/Graph/Toolbar/VersionsButton.js index a297f8ce5..81071f912 100644 --- a/client-reactjs/src/components/application/Graph/Toolbar/VersionsButton.js +++ b/client-reactjs/src/components/application/Graph/Toolbar/VersionsButton.js @@ -40,8 +40,7 @@ const { confirm } = Modal; const NOTIFICATION_CONF = { placement: 'top', style: { - width: 'auto', - maxWidth: '750px', + width: '500px', }, }; @@ -153,13 +152,7 @@ const VersionsButton = ({ graphRef }) => { if (!response.ok) handleError(response); const result = await response.json(); - graphRef.current - .unfreeze() - .enableSelection() - .enableRubberband() - .enableSnapline() - .enableSharpSnapline() - .hideTools(); + // graphRef.current.enableSelection().enableRubberband().enableSnapline().enableSharpSnapline().hideTools(); graphRef.current.fromJSON(result.graph); if (isPermanent) { @@ -199,13 +192,7 @@ const VersionsButton = ({ graphRef }) => { setClickedVersion({ id: '', name: '', description: '' }); } else { // When change is not permanent we need to cancel most of the interactions to avoid editing graph. - graphRef.current - .freeze() - .disableSelection() - .disableRubberband() - .disableSnapline() - .disableSharpSnapline() - .hideTools(); + // graphRef.current.disableSelection().disableRubberband().disableSnapline().disableSharpSnapline().hideTools(); // Only versions in DB can be executed, updated value will reflect in modal execute button; graphRef.current.dataflowVersionId = version.id; @@ -404,7 +391,7 @@ const VersionsButton = ({ graphRef }) => { if (wcGraph) { // making sure that graph is not frozen and updates reflects on ui - graphRef.current.unfreeze(); + // graphRef.current.unfreeze(); graphRef.current.fromJSON(wcGraph); } diff --git a/client-reactjs/src/components/application/templates/FileTemplate.jsx b/client-reactjs/src/components/application/templates/FileTemplate.jsx index 8fbd79cb4..41a3bc775 100644 --- a/client-reactjs/src/components/application/templates/FileTemplate.jsx +++ b/client-reactjs/src/components/application/templates/FileTemplate.jsx @@ -174,46 +174,67 @@ function FileTemplate({ match, selectedAsset = {}, displayingInModal, onClose }) setMonitoringDetails((prev) => ({ ...prev, landingZonePath })); }; + const validateForms = async () => { + let validationError = null; + let formData = {}; + + try { + formData = await form.validateFields(); + } catch (err) { + validationError = err; + } + + return { validationError, formData }; + }; + //Save file template const saveFileTemplate = async () => { - await form.validateFields(); - const { - title, - cluster, - fileNamePattern, - searchString, - description, - setFileMonitoring, - landingZone, - machine, - dirToMonitor, - shouldMonitorSubDirs, - } = form.getFieldsValue(); - const url = `/api/fileTemplate/read/saveFileTemplate`; - const body = JSON.stringify({ - title, - assetId, - groupId, - cluster, - description, - searchString, - fileNamePattern, - fileLayoutData: layoutData, - application_id: applicationId, - sampleLayoutFile: sampleFileForLayout, - metaData: { - isAssociated: true, - fileMonitoringTemplate: setFileMonitoring, + try { + const data = await validateForms(); + + if (data.validationError?.errorFields) { + throw new Error('Validation failed, please check form fields again.'); + } + + const { + title, + cluster, + fileNamePattern, + searchString, + description, + setFileMonitoring, landingZone, machine, - lzPath: landingZoneMonitoringDetails.landingZonePath, - directory: dirToMonitor, - monitorSubDirs: shouldMonitorSubDirs, - licenses: selectedLicenses, - }, - }); - try { + dirToMonitor, + shouldMonitorSubDirs, + } = form.getFieldsValue(); + + const url = `/api/fileTemplate/read/saveFileTemplate`; + const body = JSON.stringify({ + title, + assetId, + groupId, + cluster, + description, + searchString, + fileNamePattern, + fileLayoutData: layoutData, + application_id: applicationId, + sampleLayoutFile: sampleFileForLayout, + metaData: { + isAssociated: true, + fileMonitoringTemplate: setFileMonitoring, + landingZone, + machine, + lzPath: landingZoneMonitoringDetails.landingZonePath, + directory: dirToMonitor, + monitorSubDirs: shouldMonitorSubDirs, + licenses: selectedLicenses, + }, + }); + const response = await fetch(url, { headers: authHeader(), method: 'POST', body }); + if (!response.ok) throw Error('Unable to save template'); message.success('Template Saved'); @@ -231,6 +252,7 @@ function FileTemplate({ match, selectedAsset = {}, displayingInModal, onClose }) history.push(`/${application.applicationId}/assets`); } } catch (err) { + console.log(err); message.error(err.message); } }; diff --git a/client-reactjs/src/components/common/BreadCrumbs.js b/client-reactjs/src/components/common/BreadCrumbs.js index 71585b4d0..e936ac24d 100644 --- a/client-reactjs/src/components/common/BreadCrumbs.js +++ b/client-reactjs/src/components/common/BreadCrumbs.js @@ -3,6 +3,7 @@ import { Breadcrumb } from 'antd'; import { withRouter } from 'react-router-dom'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; + class BreadCrumbs extends Component { render() { // const { t } = this.props; // translation @@ -10,11 +11,14 @@ class BreadCrumbs extends Component { const getBreadCrumbs = () => { const { location, application } = this.props; + //grab the application id from redux applicationReducer + const pathSnippets = location.pathname.split('/'); //rebuild pathSnippets with label and value - const newPathSnippets = pathSnippets.map((item) => { - if (item === application.applicationId || item === 'admin') return { label: 'Home', value: item }; + const newPathSnippets = pathSnippets.map((item, index) => { + if (item === application.applicationId || item === 'admin' || index === 1) + return { label: 'Home', value: item }; return { label: item, value: item }; }); diff --git a/client-reactjs/src/components/common/MonacoEditor.js b/client-reactjs/src/components/common/MonacoEditor.js index 1c7862f1c..17966b767 100644 --- a/client-reactjs/src/components/common/MonacoEditor.js +++ b/client-reactjs/src/components/common/MonacoEditor.js @@ -1,5 +1,6 @@ import React from 'react'; import { default as Monaco } from '@monaco-editor/react'; + // import { loader } from '@monaco-editor/react'; // https://github.com/suren-atoyan/monaco-react/issues/217#issuecomment-980800802 @@ -9,6 +10,7 @@ const MonacoEditor = ({ onChange, value = '', targetDomId = '', lang = 'markdown const config = { markdown: { height: '300px', + onChange: (text) => onChange({ target: { name: 'description', value: text } }), options: { lineNumbers: 'off', @@ -19,8 +21,8 @@ const MonacoEditor = ({ onChange, value = '', targetDomId = '', lang = 'markdown cursorBlinking: 'smooth', minimap: { enabled: false }, scrollbar: { - horizontalScrollbarSize: 3, - verticalScrollbarSize: 3, + horizontalScrollbarSize: 0, + verticalScrollbarSize: 0, }, }, }, @@ -32,15 +34,13 @@ const MonacoEditor = ({ onChange, value = '', targetDomId = '', lang = 'markdown }, }; - console.log(config); - return ( ); diff --git a/client-reactjs/src/index.css b/client-reactjs/src/index.css index 705d4e38f..591d128bf 100644 --- a/client-reactjs/src/index.css +++ b/client-reactjs/src/index.css @@ -1122,3 +1122,7 @@ div.tooltip { font-family: inherit !important; color: rgba(0, 0, 0, 1) !important; } + +.monacoEditor { + border: 1px solid #d9d9d9; +} diff --git a/client-reactjs/src/redux/actions/Groups.js b/client-reactjs/src/redux/actions/Groups.js index e764928fc..19e958d2e 100644 --- a/client-reactjs/src/redux/actions/Groups.js +++ b/client-reactjs/src/redux/actions/Groups.js @@ -26,7 +26,10 @@ export const getGroupsTree = (applicationId) => { const tree = await response.json(); + console.log(tree); + const dataList = generateList(tree); + console.log(dataList); dispatch(fetchGroupsTreeSuccess({ tree, dataList })); } catch (error) {