Merge pull request #1580 from memphisdev/RND-318-ui-code-arrangement

Rnd 318 UI code arrangement

ui_src/jsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

ui_src/src/App.js

@@ -10,7 +10,7 @@
 // Additional Use Grant: You may make use of the Licensed Work (i) only as part of your own product or service, provided it is not a message broker or a message queue product or service; and (ii) provided that you do not use, provide, distribute, or make available the Licensed Work as a Service.
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 
-import './App.scss';
+import 'App.scss';
 
 import { Switch, Route, withRouter } from 'react-router-dom';
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
@@ -30,42 +30,42 @@ import {
     LOCAL_STORAGE_USER_PASS_BASED_AUTH,
     USER_IMAGE,
     LOCAL_STORAGE_PLAN
-} from './const/localStorageConsts';
-import { CLOUD_URL, HANDLE_REFRESH_INTERVAL, WS_PREFIX } from './config';
-import { isCheckoutCompletedTrue, isCloud } from './services/valueConvertor';
-import { ReactComponent as InfoNotificationIcon } from './assets/images/infoNotificationIcon.svg';
-import { handleRefreshTokenRequest, httpRequest } from './services/http';
-import { ReactComponent as RedirectIcon } from './assets/images/redirectIcon.svg';
-import { ReactComponent as SuccessIcon } from './assets/images/successIcon.svg';
-import { ReactComponent as CloseIcon } from './assets/images/closeNotification.svg';
-import { showMessages, useGetAllowedActions } from './services/genericServices';
-import StationOverview from './domain/stationOverview';
-import { ReactComponent as ErrorIcon } from './assets/images/errorIcon.svg';
-import MessageJourney from './domain/messageJourney';
-import Administration from './domain/administration';
-import { ApiEndpoints } from './const/apiEndpoints';
-import { ReactComponent as WarnIcon } from './assets/images/warnIcon.svg';
-import AppWrapper from './components/appWrapper';
-import StationsList from './domain/stationsList';
-import SchemaManagment from './domain/schema';
-import PrivateRoute from './PrivateRoute';
-import AuthService from './services/auth';
-import Overview from './domain/overview';
-import Loader from './components/loader';
-import Functions from './domain/functions';
-import { Context } from './hooks/store';
-import pathDomains from './router';
-import Users from './domain/users';
-import { planType } from "./const/globalConst";
+} from 'const/localStorageConsts';
+import { CLOUD_URL, HANDLE_REFRESH_INTERVAL, WS_PREFIX } from 'config';
+import { isCheckoutCompletedTrue, isCloud } from 'services/valueConvertor';
+import { ReactComponent as InfoNotificationIcon } from 'assets/images/infoNotificationIcon.svg';
+import { handleRefreshTokenRequest, httpRequest } from 'services/http';
+import { ReactComponent as RedirectIcon } from 'assets/images/redirectIcon.svg';
+import { ReactComponent as SuccessIcon } from 'assets/images/successIcon.svg';
+import { ReactComponent as CloseIcon } from 'assets/images/closeNotification.svg';
+import { showMessages, useGetAllowedActions } from 'services/genericServices';
+import StationOverview from 'domain/stationOverview';
+import { ReactComponent as ErrorIcon } from 'assets/images/errorIcon.svg';
+import MessageJourney from 'domain/messageJourney';
+import Administration from 'domain/administration';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { ReactComponent as WarnIcon } from 'assets/images/warnIcon.svg';
+import AppWrapper from 'components/appWrapper';
+import StationsList from 'domain/stationsList';
+import SchemaManagment from 'domain/schema';
+import PrivateRoute from 'PrivateRoute';
+import AuthService from 'services/auth';
+import Overview from 'domain/overview';
+import Loader from 'components/loader';
+import Functions from 'domain/functions';
+import { Context } from 'hooks/store';
+import pathDomains from 'router';
+import Users from 'domain/users';
+import { planType } from "const/globalConst";
 
 let SysLogs = undefined;
 let Login = undefined;
 let Signup = undefined;
 
 if (!isCloud()) {
-    SysLogs = require('./domain/sysLogs').default;
-    Login = require('./domain/login').default;
-    Signup = require('./domain/signup').default;
+    SysLogs = require('domain/sysLogs').default;
+    Login = require('domain/login').default;
+    Signup = require('domain/signup').default;
 }
 
 const App = withRouter(() => {

ui_src/src/PrivateRoute.js

@@ -11,13 +11,12 @@
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 
 import React from 'react';
-import {} from 'react-router-dom';
 import { Route, Redirect } from 'react-router-dom';
 
-import AuthService from './services/auth';
-import { isCloud } from './services/valueConvertor';
-import { CLOUD_URL } from './config';
-import pathDomains from './router';
+import AuthService from 'services/auth';
+import { isCloud } from 'services/valueConvertor';
+import { CLOUD_URL } from 'config';
+import pathDomains from 'router';
 
 function PrivateRoute(props) {
     const { component: Component, ...rest } = props;

ui_src/src/components/Input/index.js

@@ -15,7 +15,7 @@ import './style.scss';
 import { Input as InputDesign } from 'antd';
 import React from 'react';
 
-import { getBorderRadius, getFontColor, getBackgroundColor, getBorderColor, getBoxShadows } from '../../utils/styleTemplates';
+import { getBorderRadius, getFontColor, getBackgroundColor, getBorderColor, getBoxShadows } from 'utils/styleTemplates';
 
 const Input = (props) => {
     const {

ui_src/src/components/Tabs/index.js

@@ -19,10 +19,10 @@ import './style.scss';
 import { Tabs } from 'antd';
 import React from 'react';
 
-import TooltipComponent from '../tooltip/tooltip';
-import CheckboxComponent from '../checkBox';
+import TooltipComponent from 'components/tooltip/tooltip';
+import CheckboxComponent from 'components/checkBox';
 import { PriorityHighRounded } from '@material-ui/icons';
-import CloudOnly from '../cloudOnly';
+import CloudOnly from 'components/cloudOnly';
 
 const CustomTabs = ({ tabs, onChange, value, disabled, length, tooltip, icon = false, checkbox = false, defaultActiveKey, tabsCounter, icons }) => {
     return (

ui_src/src/components/appWrapper/index.js

@@ -10,7 +10,7 @@
 // Additional Use Grant: You may make use of the Licensed Work (i) only as part of your own product or service, provided it is not a message broker or a message queue product or service; and (ii) provided that you do not use, provide, distribute, or make available the Licensed Work as a Service.
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 
-import SideBar from '../sideBar';
+import SideBar from 'components/sideBar';
 
 function AppWrapper({ content }) {
     return (

ui_src/src/components/asyncTasks/index.js

@@ -15,14 +15,14 @@ import './style.scss';
 import React, { useContext, useEffect, useState } from 'react';
 import { StringCodec, JSONCodec } from 'nats.ws';
 import { Divider, Popover } from 'antd';
-import { parsingDate } from '../../services/valueConvertor';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { ReactComponent as AsyncIcon } from '../../assets/images/asyncIcon.svg';
-import { ReactComponent as TaskIcon } from '../../assets/images/task.svg';
-import { httpRequest } from '../../services/http';
-import { ReactComponent as CollapseArrowIcon } from '../../assets/images/collapseArrow.svg';
-import { Context } from '../../hooks/store';
-import OverflowTip from '../tooltip/overflowtip';
+import { parsingDate } from 'services/valueConvertor';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { ReactComponent as AsyncIcon } from 'assets/images/asyncIcon.svg';
+import { ReactComponent as TaskIcon } from 'assets/images/task.svg';
+import { httpRequest } from 'services/http';
+import { ReactComponent as CollapseArrowIcon } from 'assets/images/collapseArrow.svg';
+import { Context } from 'hooks/store';
+import OverflowTip from 'components/tooltip/overflowtip';
 
 const AsyncTasks = ({ height, overView }) => {
     const [state, dispatch] = useContext(Context);

ui_src/src/components/button/index.js

@@ -15,8 +15,8 @@ import './style.scss';
 import { Button as ButtonDesign } from 'antd';
 import React from 'react';
 
-import { getBorderRadius, getFontColor, getBackgroundColor, getBoxShadows, getBorderColor } from '../../utils/styleTemplates';
-import TooltipComponent from '../tooltip/tooltip';
+import { getBorderRadius, getFontColor, getBackgroundColor, getBoxShadows, getBorderColor } from 'utils/styleTemplates';
+import TooltipComponent from 'components/tooltip/tooltip';
 
 const Button = ({
     width,

ui_src/src/components/cloneModal/index.js

@@ -12,11 +12,11 @@
 
 import './style.scss';
 import React, { useState } from 'react';
-import Button from '../button';
+import Button from 'components/button';
 import { FiDownload } from 'react-icons/fi';
-import Copy from '../copy';
-import CustomTabs from '../Tabs';
-import { githubUrls } from '../../const/globalConst';
+import Copy from 'components/copy';
+import CustomTabs from 'components/Tabs';
+import { githubUrls } from 'const/globalConst';
 import { SiLinux, SiApple, SiWindows11 } from 'react-icons/si';
 
 const CloneModal = ({ type }) => {
@@ -66,18 +66,13 @@ const CloneModal = ({ type }) => {
             )}
             {type === 'cli' && (
                 <>
-                    <p className="create-func-cli">
-                        <label>Step 1:</label>Install Memphis CLI
-                    </p>
                     <div className="url-wrapper">
                         <p className="url-text"> {githubUrls[type][tabValue]}</p>
                         <div className="icon">
                             <Copy width="18" data={githubUrls[type][tabValue]} />
                         </div>
                     </div>
-                    <p className="create-func-cli">
-                        <label>Step 2:</label>Create a basic Memphis function template
-                    </p>
+                    <p className="create-func-cli">Create a basic Memphis function template</p>
                     <div className="url-wrapper">
                         <p className="url-text"> {githubUrls[type]?.code}</p>
                         <div className="icon">

ui_src/src/components/cloneModal/style.scss

@@ -61,11 +61,6 @@
         font-size: 14px;
         font-family: 'InterMedium';
         margin: 15px 0px 5px 0px;
-        label {
-            color: var(--purple);
-            font-weight: 600;
-            margin-right: 5px;
-        }
     }
     .footer {
         border-top: 1px solid #e4e4e4;

ui_src/src/components/cloudModal/index.js

@@ -13,15 +13,15 @@
 import './style.scss';
 
 import React from 'react';
-import { ReactComponent as FunctionIntegrateIcon } from '../../assets/images/functionIntegrate.svg';
-import BundleBanner from '../../assets/images/banners/bundle1.webp';
-import CloudBanner from '../../assets/images/banners/cloud2.webp';
-import FunctionsBanner from '../../assets/images/banners/function3.webp';
-import UpgradeBanner from '../../assets/images/banners/upgrade4.webp';
-import UpgradePlans from '../upgradePlans';
-import Modal from '../modal';
-import Button from '../button';
-import { sendTrace } from '../../services/genericServices';
+import { ReactComponent as FunctionIntegrateIcon } from 'assets/images/functionIntegrate.svg';
+import BundleBanner from 'assets/images/banners/bundle1.webp';
+import CloudBanner from 'assets/images/banners/cloud2.webp';
+import FunctionsBanner from 'assets/images/banners/function3.webp';
+import UpgradeBanner from 'assets/images/banners/upgrade4.webp';
+import UpgradePlans from 'components/upgradePlans';
+import Modal from 'components/modal';
+import Button from 'components/button';
+import { sendTrace } from 'services/genericServices';
 
 const CloudModal = ({ type, open, handleClose }) => {
     const content = {

ui_src/src/components/cloudOnly/index.js

@@ -13,8 +13,8 @@
 import './style.scss';
 
 import React, { useState } from 'react';
-import { ReactComponent as CloudOnlyIcon } from '../../assets/images/cloudOnlyIcon.svg';
-import CloudModal from '../cloudModal/';
+import { ReactComponent as CloudOnlyIcon } from 'assets/images/cloudOnlyIcon.svg';
+import CloudModal from 'components/cloudModal/';
 
 const CloudOnly = () => {
     const [openCloudModal, setOpenCloudModal] = useState(false);

ui_src/src/components/colorPicker/index.js

@@ -12,7 +12,7 @@
 
 import './style.scss';
 import React from 'react';
-import { ColorPalette } from '../../const/globalConst';
+import { ColorPalette } from 'const/globalConst';
 
 const ColorPicker = ({ onChange, value }) => {
     return (

ui_src/src/components/connectToHub/index.js

@@ -17,10 +17,10 @@ import { makeStyles } from '@material-ui/core/styles';
 import Dialog from '@material-ui/core/Dialog';
 import React, { useState } from 'react';
 
-import { ReactComponent as CloseIcon } from '../../assets/images/close.svg';
-import Input from '../Input';
-import Button from '../button';
-import CheckboxComponent from '../checkBox';
+import { ReactComponent as CloseIcon } from 'assets/images/close.svg';
+import Input from 'components/Input';
+import Button from 'components/button';
+import CheckboxComponent from 'components/checkBox';
 
 const useStyles = makeStyles((theme) => ({
     root: {

ui_src/src/components/connectorError/index.js

@@ -13,13 +13,13 @@
 import './style.scss';
 
 import React, { useEffect, useState } from 'react';
-import Modal from '../modal';
-import Spinner from '../spinner';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { httpRequest } from '../../services/http';
-import { parsingDate } from '../../services/valueConvertor';
-import OverflowTip from '../tooltip/overflowtip';
-import { sendTrace } from '../../services/genericServices';
+import Modal from 'components/modal';
+import Spinner from 'components/spinner';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { parsingDate } from 'services/valueConvertor';
+import OverflowTip from 'components/tooltip/overflowtip';
+import { sendTrace } from 'services/genericServices';
 const logsColumns = [
     {
         key: '1',

ui_src/src/components/connectorInfo/index.js

@@ -13,12 +13,12 @@
 import './style.scss';
 
 import React, { useEffect, useState } from 'react';
-import Modal from '../modal';
-import Spinner from '../spinner';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { httpRequest } from '../../services/http';
-import { sendTrace } from '../../services/genericServices';
-import { connectorTypesSource, connectorTypesSink } from '../../connectors';
+import Modal from 'components/modal';
+import Spinner from 'components/spinner';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { sendTrace } from 'services/genericServices';
+import { connectorTypesSource, connectorTypesSink } from 'connectors';
 
 const ConnectorInfo = ({ open, clickOutside, connectorId }) => {
     const [loading, setLoading] = useState(false);

ui_src/src/components/connectorModal/index.js

@@ -14,22 +14,22 @@ import './style.scss';
 
 import React, { useContext, useEffect, useState } from 'react';
 import { Divider, Form, Result } from 'antd';
-import { StationStoreContext } from '../../domain/stationOverview';
-import { ReactComponent as ConnectorIcon } from '../../assets/images/connectorIcon.svg';
-import InputNumberComponent from '../InputNumber';
-import TitleComponent from '../titleComponent';
-import SelectComponent from '../select';
+import { StationStoreContext } from 'domain/stationOverview';
+import { ReactComponent as ConnectorIcon } from 'assets/images/connectorIcon.svg';
+import InputNumberComponent from 'components/InputNumber';
+import TitleComponent from 'components/titleComponent';
+import SelectComponent from 'components/select';
 import { Select } from 'antd';
-import Input from '../Input';
-import Modal from '../modal';
-import Spinner from '../spinner';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { httpRequest } from '../../services/http';
-import CloudModal from '../cloudModal';
-import { isCloud } from '../../services/valueConvertor';
-import { sendTrace } from '../../services/genericServices';
-import { connectorTypesSource } from '../../connectors';
-import { connectorTypesSink } from '../../connectors';
+import Input from 'components/Input';
+import Modal from 'components/modal';
+import Spinner from 'components/spinner';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import CloudModal from 'components/cloudModal';
+import { isCloud } from 'services/valueConvertor';
+import { sendTrace } from 'services/genericServices';
+import { connectorTypesSource } from 'connectors';
+import { connectorTypesSink } from 'connectors';
 
 const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
     const [stationState, stationDispatch] = useContext(StationStoreContext);

ui_src/src/components/consumerWithStatus/index.js

@@ -11,7 +11,7 @@
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 import './style.scss';
 import React from 'react';
-import StatusIndication from '../indication';
+import StatusIndication from 'components/indication';
 
 const ConsumerWithStatus = ({ name, count, is_active }) => {
     return (

ui_src/src/components/copy/index.js

@@ -11,8 +11,8 @@
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 
 import React, { useState } from 'react';
-import { ReactComponent as CopyIcon } from '../../assets/images/copy.svg';
-import { ReactComponent as CopiedIcon } from '../../assets/images/copied.svg';
+import { ReactComponent as CopyIcon } from 'assets/images/copy.svg';
+import { ReactComponent as CopiedIcon } from 'assets/images/copied.svg';
 import './style.scss';
 import { Popover } from 'antd';