Mfancher/package bugfixes (#710)

* fix breadcrumb

* Bug Fixes

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: <Text text="New Group" />,
+        icon: <PlusOutlined />,
+      },
+    ];
+
+    const extraItems = [
       {
         key: 'Edit-Group',
-        name: <Text text="View" />,
+        label: <Text text="View" />,
         icon: <EyeOutlined />,
       },
       {
         key: 'Delete-Group',
-        name: <Text text="Delete" />,
+        label: <Text text="Delete" />,
         icon: <DeleteOutlined />,
       },
       {
         key: 'Move-Group',
-        name: <Text text="Move" />,
+        label: <Text text="Move" />,
         icon: <FolderOutlined />,
       },
       {
         key: 'Print-Assets',
-        name: <Text text="Print Assets" />,
+        label: <Text text="Print Assets" />,
         icon: <FilePdfOutlined />,
       },
     ];
 
-    const onClick = (props) => {
-      props.domEvent.stopPropagation();
-      setVisible(false);
-      handleMenuClick(props, nodeData);
-    };
-
     const isRootNode = nodeData.key === '0-0';
-    return (
-      <Menu mode="inline" theme="dark" onClick={onClick}>
-        <Menu.Item key="Group" icon={<PlusOutlined />}>
-          {<Text text="New Group" />}
-        </Menu.Item>
-        {!isRootNode &&
-          items.map((item) => {
-            return (
-              <Menu.Item key={item.key} icon={item.icon}>
-                {item.name}
-              </Menu.Item>
-            );
-          })}
-      </Menu>
-    );
+
+    if (!isRootNode) {
+      extraItems.map((item) => {
+        items.push(item);
+      });
+    }
+    return items;
   };
 
+  const onClick = (props) => {
+    props.domEvent.stopPropagation();
+    setVisible(false);
+    handleMenuClick(props, nodeData);
+  };
   return (
     <li className="group-title">
       <span className="group-options">{nodeData.title}</span>
-      <Dropdown open={visible} trigger={['click']} menu={<GroupMenu />} onOpenChange={onVisibleChange}>
+      <Dropdown
+        open={visible}
+        trigger={['click']}
+        menu={{ items: GroupMenu(), onClick }}
+        onOpenChange={onVisibleChange}>
         <i className="fa fa-bars" onClick={(e) => e.stopPropagation()} />
       </Dropdown>
     </li>

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;
       }

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',
   },
 };
 

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) {

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);
     }
 

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);
     }
   };

client-reactjs/src/components/common/BreadCrumbs.js

@@ -3,18 +3,22 @@ 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
 
     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 };
       });
 

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 (
     <Monaco
       value={value}
       language={lang}
       {...config[lang]} // get rest of config depending on editor type
       {...rest} // all other props
-      className="ant-input" // give ant input field styles
+      className="ant-input monacoEditor" // give ant input field styles
       path={lang + targetDomId} // will make this model unique
     />
   );

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;
+}

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) {