UI code arrangement

superstreamlabs · Jan 1, 2024 · 3013056 · 3013056
1 parent 8d5d4c1
commit 3013056
Show file tree

Hide file tree

Showing 43 changed files with 395 additions and 442 deletions.
diff --git a/ui_src/src/App.js b/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(() => {

diff --git a/ui_src/src/PrivateRoute.js b/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;

diff --git a/ui_src/src/assets/images/TimeFill.svg → ui_src/src/assets/images/timeFill.svg b/ui_src/src/assets/images/TimeFill.svg → ui_src/src/assets/images/timeFill.svg
diff --git a/ui_src/src/components/cloneModal/index.js b/ui_src/src/components/cloneModal/index.js
@@ -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">

diff --git a/ui_src/src/components/cloneModal/style.scss b/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;

diff --git a/ui_src/src/components/customSelect/index.js b/ui_src/src/components/customSelect/index.js
@@ -28,7 +28,7 @@ import pathDomains from 'router';
 
 const { Option } = Select;
 
-const CustomSelect = ({ options, onChange, value, placeholder, type = 'schema', handleCreateNew }) => {
+const CustomSelect = ({ options, onChange, value, placeholder, type = 'schema', handleCreateNew, showCreatedBy = true }) => {
     const history = useHistory();
 
     const handleChange = (e) => {
@@ -107,10 +107,12 @@ const CustomSelect = ({ options, onChange, value, placeholder, type = 'schema',
                                     />
                                     <p className="schema-name">{schema?.name || schema}</p>
                                 </div>
-                                <p className="created-by">
-                                    {type === 'schema' ? <>{schema?.type} &#8226; </> : null}
-                                    {parsingDate(schema?.created_at)}
-                                </p>
+                                {showCreatedBy &&
+                                    <p className="created-by">
+                                        {type === 'schema' ? <>{schema?.type} &#8226; </> : null}
+                                        {parsingDate(schema?.created_at)}
+                                    </p>
+                                }
                             </>
                         </Option>
                     );

diff --git a/ui_src/src/components/functionsOverview/index.js b/ui_src/src/components/functionsOverview/index.js
@@ -13,7 +13,6 @@
 import './style.scss';
 
 import React from 'react';
-
 import { ReactComponent as RemoveFunctionIcon } from 'assets/images/removeFunctionIcon.svg';
 import { ReactComponent as ArrowFunctionIcon } from 'assets/images/arrowFunction.svg';
 import OverflowTip from 'components/tooltip/overflowtip';
@@ -26,7 +25,7 @@ const FunctionsOverview = (props) => {
 
     return (
         <div className={horizontal ? 'function-overview-container horizontal' : 'function-overview-container'}>
-            {functions.map((func, index) => {
+            {functions?.map((func, index) => {
                 return (
                     <div className={horizontal ? 'function-list-container horizontal' : 'function-list-container'} key={index}>
                         <div className="func-wrapper">

diff --git a/ui_src/src/components/produceMessages/index.js b/ui_src/src/components/produceMessages/index.js
@@ -136,7 +136,7 @@ const ProduceMessages = ({ stationName, cancel, produceMessagesRef, setLoading }
                     <p className="field-title">JSON-based value</p>
                     <div className="generate-action" onClick={() => generateMessage()}>
                         <RefreshIcon width={14} />
-                        <span>Re-generate</span>
+                        <span>Generate example</span>
                     </div>
                 </div>
                 <div className="message-example">
@@ -179,8 +179,8 @@ const ProduceMessages = ({ stationName, cancel, produceMessagesRef, setLoading }
                                                     backgroundColorType="none"
                                                     borderColorType="gray"
                                                     height="40px"
-                                                    onBlur={(e) => creationForm.setFieldsValue({ [name]: e.target.value })}
-                                                    onChange={(e) => creationForm.setFieldsValue({ [name]: e.target.value })}
+                                                    onBlur={(e) => creationForm.setFieldsValue({[name]: e.target.value})}
+                                                    onChange={(e) => creationForm.setFieldsValue({[name]: e.target.value})}
                                                     value={formFields.key}
                                                 />
                                             </Form.Item>
@@ -202,8 +202,8 @@ const ProduceMessages = ({ stationName, cancel, produceMessagesRef, setLoading }
                                                     backgroundColorType="none"
                                                     borderColorType="gray"
                                                     height="40px"
-                                                    onBlur={(e) => creationForm.setFieldsValue({ [name]: e.target.value })}
-                                                    onChange={(e) => creationForm.setFieldsValue({ [name]: e.target.value })}
+                                                    onBlur={(e) => creationForm.setFieldsValue({[name]: e.target.value})}
+                                                    onChange={(e) => creationForm.setFieldsValue({[name]: e.target.value})}
                                                     value={formFields.header}
                                                 />
                                             </Form.Item>
@@ -223,17 +223,13 @@ const ProduceMessages = ({ stationName, cancel, produceMessagesRef, setLoading }
                     <Divider className="seperator" />
                     <div className="by-pass-switcher">
                         <TitleComponent
-                            headerTitle="Ignore enforced schema"
+                            headerTitle="Bypass schema enforcement"
                             cloudOnly={isCloud() ? false : true}
                             typeTitle="sub-header"
                             headerDescription="Check this box to avoid schema validation"
                         />
                         <Form.Item className="form-input" name="bypass_schema" initialValue={isCloud() ? false : true}>
-                            <Switcher
-                                disabled={!isCloud()}
-                                onChange={(e) => creationForm.setFieldsValue({ bypass_schema: e })}
-                                checked={isCloud() ? formFields.bypass_schema : true}
-                            />
+                            <Switcher disabled={!isCloud()} onChange={(e) => creationForm.setFieldsValue({'bypass_schema': e})} checked={isCloud() ? formFields.bypass_schema : true} />
                         </Form.Item>
                     </div>
                     <Divider className="seperator" />
@@ -252,7 +248,7 @@ const ProduceMessages = ({ stationName, cancel, produceMessagesRef, setLoading }
                                 height="45px"
                                 width="100%"
                                 options={partitons}
-                                onChange={(e) => creationForm.setFieldsValue({ partition_number: e.target.value })}
+                                onChange={(e) => creationForm.setFieldsValue({'partition_number': e.target.value})}
                                 popupClassName="select-options"
                                 disabled={!isCloud()}
                             />
@@ -266,7 +262,7 @@ const ProduceMessages = ({ stationName, cancel, produceMessagesRef, setLoading }
                             <InputNumberComponent
                                 min={1}
                                 max={isCloud() ? 1000 : 1}
-                                onChange={(e) => creationForm.setFieldsValue({ amount: e })}
+                                onChange={(e) => creationForm.setFieldsValue({'amount': e})}
                                 value={formFields.amount}
                                 placeholder={formFields.amount || 1}
                                 disabled={!isCloud()}