Mfancher/new package updates

client-reactjs/package.json

@@ -3,29 +3,33 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@ant-design/charts": "^1.4.2",
+    "@ant-design/charts": "^2.0.3",
+    "@ant-design/plots": "2.1.14",
     "@ant-design/icons": "^4.7.0",
     "@antv/layout": "^0.1.31",
-    "@antv/x6": "^1.31.0",
-    "@antv/x6-react-components": "^1.1.15",
-    "@antv/x6-react-shape": "^1.6.0",
+    "@antv/x6": "^2.18.1",
+    "@antv/x6-plugin-stencil": "^2.1.5",
+    "@antv/x6-react-components": "^2.0.8",
+    "@antv/x6-react-shape": "^2.2.3",
     "@azure/msal-browser": "^2.21.0",
     "@azure/msal-react": "^1.1.0",
     "@monaco-editor/react": "^4.4.5",
-    "antd": "^4.21.3",
+    "antd": "^5.13.2",
     "cronstrue": "^2.14.0",
     "d3-color": "^3.1.0",
+    "dayjs": "^1.11.10",
     "downloadjs": "^1.4.7",
     "font-awesome": "^4.7.0",
     "http-proxy-middleware": "^1.0.6",
     "i18next": "^21.9.1",
     "i18next-http-backend": "^1.4.1",
     "jspdf": "^2.3.1",
     "jwt-decode": "^2.2.0",
+    "moment": "^2.30.1",
     "papaparse": "^5.2.0",
     "re-resizable": "^6.9.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-i18next": "^11.18.4",
     "react-markdown": "^5.0.3",
     "react-redux": "^7.2.2",

client-reactjs/src/components/admin/AddRegulations.js

@@ -148,11 +148,11 @@ class AddRegulations extends Component {
       <div>
         <Modal
           title={this.state.title}
-          visible={true}
+          open={true}
           onOk={this.handleOk.bind(this)}
           onCancel={this.handleCancel}
           destroyOnClose={true}
-          bodyStyle={{ height: '560px' }}
+          styles={{ height: '560px' }}
           okText="Save">
           <Form layout="vertical">
             <Form.Item {...formItemLayout} label="Compliance :">

client-reactjs/src/components/admin/ClusterDetails.jsx

@@ -148,15 +148,15 @@ function ClusterDetails() {
           </Form>
           {directoryDetails ? (
             <div style={{ marginTop: '20px' }}>
-              <Card title="Basic Details" size="small" headStyle={{ fontWeight: 700 }}>
+              <Card title="Basic Details" size="small">
                 <Descriptions column={1} size="small" labelStyle={{ fontWeight: 500 }}>
                   <Descriptions.Item label="Total Directories">{directoryDetails.directoryCount}</Descriptions.Item>
                   <Descriptions.Item label="Total Files">{directoryDetails.fileCount}</Descriptions.Item>
                 </Descriptions>
               </Card>
 
               {directoryDetails?.oldestFile ? (
-                <Card title="Oldest File" size="small" headStyle={{ fontWeight: 700 }} style={{ marginTop: '2px' }}>
+                <Card title="Oldest File" size="small" style={{ marginTop: '2px' }}>
                   <Descriptions column={1} size="small">
                     {Object.keys(directoryDetails.oldestFile).map((key) => (
                       <Descriptions key={key} label={key}>
@@ -168,11 +168,7 @@ function ClusterDetails() {
               ) : null}
 
               {directoryDetails?.filesAndDirectories.length > 0 ? (
-                <Card
-                  title="Files and Directories"
-                  size="small"
-                  headStyle={{ fontWeight: 700 }}
-                  style={{ marginTop: '2px' }}>
+                <Card title="Files and Directories" size="small" style={{ marginTop: '2px' }}>
                   {directoryDetails?.filesAndDirectories.map((directory, index) => (
                     <Collapse
                       key={index}

client-reactjs/src/components/admin/Clusters.jsx

@@ -254,7 +254,7 @@ function Clusters() {
       />
 
       <Modal
-        visible={addClusterModalVisible}
+        open={addClusterModalVisible}
         onCancel={handleCancel}
         okText={<Text text="Add" />}
         onOk={addCluster}
@@ -322,7 +322,7 @@ function Clusters() {
       </Modal>
 
       <Modal
-        visible={clusterDetailModalVisible}
+        open={clusterDetailModalVisible}
         onCancel={handleCancel}
         okText={<Text text="Close" />}
         onOk={handleCancel}

client-reactjs/src/components/admin/Compliance/Constraints/ConstraintForm.js

@@ -75,7 +75,7 @@ const ConstraintForm = ({ modal, onClose }) => {
       onOk={handleOk}
       onCancel={onClose}
       okText={getOKtext()}
-      visible={modal.isOpen}
+      open={modal.isOpen}
       confirmLoading={sending.loading}>
       <Form layout="vertical" form={form}>
         <Form.Item

client-reactjs/src/components/admin/Compliance/Constraints/ConstraintsTags.js

@@ -61,7 +61,7 @@ const TagWithPopUp = ({ record, file, showAll }) => {
         width={1000}
         footer={null}
         closable={false}
-        visible={visible}
+        open={visible}
         title={record.name}
         onCancel={() => setVisible(false)}>
         <ConstraintDescription record={record} />

client-reactjs/src/components/admin/Compliance/Propagation/Propagation.js

@@ -72,7 +72,7 @@ const Propagation = () => {
           width={1000}
           title={<Text>Would you like to compare against base line?</Text>}
           onCancel={() => setModal({ isOpen: false })}
-          visible={modal.isOpen}
+          open={modal.isOpen}
           footer={[
             <Button key="current" type="secondary" onClick={handleUseCurrentState}>
               <Text> Use Current State</Text>

client-reactjs/src/components/admin/Consumers.js

@@ -466,7 +466,7 @@ class Consumers extends Component {
                 />
               </>
             }
-            visible={this.state.showAddConsumer}
+            open={this.state.showAddConsumer}
             onOk={this.handleAddConsumerOk.bind(this)}
             onCancel={this.handleAddConsumerCancel}
             confirmLoading={confirmLoading}
@@ -586,8 +586,8 @@ class Consumers extends Component {
                 <Form.Item label="AD Group">
                   <AutoComplete
                     className="certain-category-search"
-                    dropdownClassName="certain-category-search-dropdown"
-                    dropdownMatchSelectWidth={false}
+                    popupClassName="certain-category-search-dropdown"
+                    popupMatchSelectWidth={false}
                     dropdownStyle={{ width: 300 }}
                     size="large"
                     style={{ width: '100%' }}

client-reactjs/src/components/admin/Integrations/Integrations.js

@@ -153,7 +153,7 @@ const Integrations = () => {
       <br />
       <Table size="small" columns={columns} dataSource={integrations} rowKey={(record) => record.id} />
       <Modal
-        visible={modalVisible}
+        open={modalVisible}
         width={modalWidth}
         onCancel={cancelModal}
         maskClosable={false}

client-reactjs/src/components/admin/Users.js

@@ -273,7 +273,7 @@ class Users extends Component {
         <div>
           <Modal
             title="Add User"
-            visible={this.state.showAddUsers}
+            open={this.state.showAddUsers}
             onOk={this.handleAddUserOk}
             onCancel={this.handleAddUserCancel}
             confirmLoading={confirmLoading}>

client-reactjs/src/components/admin/apps/AddApplication.jsx

@@ -63,9 +63,12 @@ function AddApplication(props) {
       const appWithSameTitleExists = props.applications.some((app) => app.title === form.getFieldValue('title'));
       if (appWithSameTitleExists) return message.error('App with same title already exists');
     }
-    await form.validateFields();
+
+    await validateForms();
+
     try {
       const fieldValues = form.getFieldsValue();
+
       let payload = {
         ...fieldValues,
         user_id: props.user.username,
@@ -110,6 +113,20 @@ function AddApplication(props) {
     }
   };
 
+  //validate forms before saving
+  const validateForms = async () => {
+    let validationError = null;
+    let formData = {};
+
+    try {
+      formData = await form.validateFields();
+    } catch (err) {
+      validationError = err;
+    }
+
+    return { validationError, formData };
+  };
+
   // CANCEL / CLOSE MODAL WHEN CANCEL OR 'X' IS CLICKED
   const handleModalCancel = () => {
     props.closeAddApplicationModal();
@@ -119,7 +136,7 @@ function AddApplication(props) {
   //JSX
   return (
     <Modal
-      visible={props.showAddApplicationModal}
+      open={props.showAddApplicationModal}
       title={
         props?.selectedApplication?.title ? (
           <>
@@ -157,7 +174,8 @@ function AddApplication(props) {
       <Form className="formInModal" form={form} initialValues={{ visibility: 'Private' }}>
         <Form.Item
           {...formItemLayout}
-          label={<Text text="Title" />}
+          label="Title"
+          labelAlign="left"
           name="title"
           validateTrigger={['onChange', 'onBlur']}
           rules={[
@@ -178,7 +196,8 @@ function AddApplication(props) {
         </Form.Item>
 
         <Form.Item
-          label={<Text text="Description" />}
+          label="Description"
+          labelAlign="left"
           name="description"
           {...formItemLayout}
           validateTrigger={['onChange', 'onBlur']}
@@ -204,7 +223,8 @@ function AddApplication(props) {
 
         <Form.Item
           {...formItemLayout}
-          label={<Text text="Visibility" />}
+          label="Visibility"
+          labelAlign="left"
           rules={[
             {
               required: props.isCreatingNewApp || isEditing,