Modernizing ui (#73)

Modernizing ui
orangecoding · Mar 20, 2023 · d7c9c4b · d7c9c4b
1 parent 2c5eceb
commit d7c9c4b
Show file tree

Hide file tree

Showing 45 changed files with 1,247 additions and 1,289 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -203,10 +203,6 @@ module.exports = {
     // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md
     'react/self-closing-comp': 'warn',
 
-    // Enforce spaces before the closing bracket of self-closing JSX elements
-    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-space-before-closing.md
-    'react/jsx-space-before-closing': ['warn', 'always'],
-
     // Enforce component methods order
     // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md
     'react/sort-comp': 'off',
@@ -237,7 +233,7 @@ module.exports = {
 
     // only .jsx files may have JSX
     // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md
-    'react/jsx-filename-extension': ['error', { extensions: ['.js'] }],
+    'react/jsx-filename-extension': ['error', { extensions: ['.jsx'] }],
 
     // prevent accidental JS comments from being injected into JSX as text
     // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-comment-textnodes.md
@@ -282,15 +278,5 @@ module.exports = {
     // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-children-prop.md
     'react/no-children-prop': 'warn',
 
-    // Validate whitespace in and around the JSX opening and closing brackets
-    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md
-    'react/jsx-tag-spacing': [
-      'warn',
-      {
-        closingSlash: 'never',
-        beforeSelfClosing: 'always',
-        afterOpening: 'never',
-      },
-    ],
   },
 };
diff --git a/README.md b/README.md
@@ -27,11 +27,11 @@ yarn run start
 _Fredy_ will start with the default port, set to `9998`. You can access _Fredy_ by opening your browser at `http://localhost:9998`. The default login is `admin`, both for username and password. You should change the password as soon as possible when you plan to run Fredy on a server.
 
 <p align="center">
-  <img alt="Job Configuration" src="https://github.com/orangecoding/fredy/blob/master/doc/screenshot__1.png" width="30%">
+  <img alt="Job Configuration" src="https://github.com/orangecoding/fredy/blob/master/doc/screenshot1.png" width="30%">
 &nbsp; &nbsp; &nbsp; &nbsp;
-  <img alt="Job Analytics" src="https://github.com/orangecoding/fredy/blob/master/doc/screenshot2.png" width="30%">
+  <img alt="Job Analytics" src="https://github.com/orangecoding/fredy/blob/master/doc/screenshot_2.png" width="30%">
 &nbsp; &nbsp; &nbsp; &nbsp;  
-  <img alt="Job Overview" width="30%" src="https://github.com/orangecoding/fredy/blob/master/doc/screenshot3.png">
+  <img alt="Job Overview" width="30%" src="https://github.com/orangecoding/fredy/blob/master/doc/screenshot_3.png">
 </p>
 <p align="center">
 

diff --git a/doc/screenshot1.png b/doc/screenshot1.png
diff --git a/doc/screenshot2.png b/doc/screenshot2.png
diff --git a/doc/screenshot3.png b/doc/screenshot3.png
diff --git a/doc/screenshot_2.png b/doc/screenshot_2.png
diff --git a/doc/screenshot_3.png b/doc/screenshot_3.png
diff --git a/doc/screenshot__1.png b/doc/screenshot__1.png
diff --git a/index.html b/index.html
@@ -4,12 +4,11 @@
     <meta charset="UTF-8"
           name="viewport"
           content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2/dist/semantic.min.css">
     <meta name="google" content="notranslate">
 
     <title>Fredy</title>
 </head>
-<body>
+<body theme-mode="dark">
 
 <div id="fredy" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;"></div>
 </body>

diff --git a/package.json b/package.json
@@ -7,9 +7,9 @@
     "dev": "yarn && rm -rf ./ui/public/* && vite",
     "ui": "rm -rf ./ui/public/* && vite",
     "prod": "yarn && vite build --emptyOutDir",
-    "format": "prettier --write lib/**/*.js ui/src/**/*.js test/**/*.js *.js --single-quote --print-width 120",
+    "format": "prettier --write lib/**/*.js ui/src/**/*.jsx test/**/*.js *.js --single-quote --print-width 120",
     "test": "mocha --loader=esmock --timeout 3000000 test/**/*.test.js",
-    "lint": "eslint ./index.js ./lib/**/*.js ./test/**/*.js"
+    "lint": "eslint ./index.js ./lib/**/*.js ./test/**/*.js ./ui/src/**/*.jsx"
   },
   "husky": {
     "hooks": {
@@ -55,6 +55,7 @@
     "Firefox ESR"
   ],
   "dependencies": {
+    "@douyinfe/semi-ui": "2.31.0",
     "@rematch/core": "2.2.0",
     "@rematch/loading": "2.1.2",
     "@sendgrid/mail": "7.7.0",
@@ -65,7 +66,7 @@
     "handlebars": "4.7.7",
     "highcharts": "10.3.3",
     "highcharts-react-official": "3.2.0",
-    "lodash": "^4.17.21",
+    "lodash": "4.17.21",
     "lowdb": "5.1.0",
     "markdown": "^0.5.0",
     "nanoid": "4.0.1",
@@ -77,33 +78,31 @@
     "react-redux": "8.0.5",
     "react-router": "5.2.1",
     "react-router-dom": "5.3.0",
-    "react-switch": "7.0.0",
     "redux": "4.2.1",
     "redux-thunk": "2.4.2",
     "restana": "4.9.7",
-    "semantic-ui-react": "2.1.4",
     "serve-static": "1.15.0",
     "slack": "11.0.2",
     "string-similarity": "^4.0.4",
-    "vite": "4.1.4",
+    "vite": "4.2.0",
     "x-ray": "2.3.4"
   },
   "devDependencies": {
-    "esmock": "2.1.0",
-    "@babel/core": "7.21.0",
-    "@babel/eslint-parser": "7.19.1",
+    "@babel/core": "7.21.3",
+    "@babel/eslint-parser": "7.21.3",
     "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
     "chai": "4.3.7",
     "eslint": "8.36.0",
     "eslint-config-prettier": "8.7.0",
     "eslint-plugin-react": "7.32.2",
+    "esmock": "2.1.0",
     "history": "5.3.0",
     "husky": "4.3.8",
     "less": "4.1.3",
     "lint-staged": "13.2.0",
     "mocha": "10.2.0",
-    "prettier": "2.8.4",
+    "prettier": "2.8.5",
     "redux-logger": "3.0.6"
   }
 }
diff --git a/ui/src/App.jsx b/ui/src/App.jsx
@@ -3,13 +3,10 @@ import React, { useEffect } from 'react';
 import InsufficientPermission from './components/permission/InsufficientPermission';
 import PermissionAwareRoute from './components/permission/PermissionAwareRoute';
 import GeneralSettings from './views/generalSettings/GeneralSettings';
-import ToastsContainer from './components/toasts/ToastContainer';
 import JobMutation from './views/jobs/mutation/JobMutation';
 import UserMutator from './views/user/mutation/UserMutator';
-import ToastContext from './components/toasts/ToastContext';
 import JobInsight from './views/jobs/insights/JobInsight.jsx';
 import { useDispatch, useSelector } from 'react-redux';
-import useToast from './components/toasts/useToast';
 import { Switch, Redirect } from 'react-router-dom';
 import Logout from './components/logout/Logout';
 import Logo from './components/logo/Logo';
@@ -23,20 +20,21 @@ import './App.less';
 
 export default function FredyApp() {
   const dispatch = useDispatch();
-  const [showToast, onToastFinished, toasts] = useToast();
   const [loading, setLoading] = React.useState(true);
   const currentUser = useSelector((state) => state.user.currentUser);
 
   useEffect(() => {
     async function init() {
-      await dispatch.provider.getProvider();
-      await dispatch.jobs.getJobs();
-      await dispatch.jobs.getProcessingTimes();
-      await dispatch.notificationAdapter.getAdapter();
       await dispatch.user.getCurrentUser();
-
+      if (!needsLogin()) {
+        await dispatch.provider.getProvider();
+        await dispatch.jobs.getJobs();
+        await dispatch.jobs.getProcessingTimes();
+        await dispatch.notificationAdapter.getAdapter();
+      }
       setLoading(false);
     }
+
     init();
   }, [currentUser?.userId]);
 
@@ -56,44 +54,41 @@ export default function FredyApp() {
   return loading ? null : needsLogin() ? (
     login()
   ) : (
-    <ToastContext.Provider value={{ showToast }}>
-      <div className="app">
-        <div className="app__container">
-          <Logout />
-          <Logo width={190} white />
-          <Menu isAdmin={isAdmin()} />
-          <ToastsContainer toasts={toasts} onToastFinished={onToastFinished} />
-          <Switch>
-            <Route name="Insufficient Permission" path={'/403'} component={InsufficientPermission} />
-            <Route name="Create new Job" path={'/jobs/new'} component={JobMutation} />
-            <Route name="Edit a Job" path={'/jobs/edit/:jobId'} component={JobMutation} />
-            <Route name="Insights into a Job" path={'/jobs/insights/:jobId'} component={JobInsight} />
-            <Route name="Job overview" path={'/jobs'} component={Jobs} />
-            <PermissionAwareRoute
-              name="Create new User"
-              path="/users/new"
-              component={<UserMutator />}
-              currentUser={currentUser}
-            />
-            <PermissionAwareRoute
-              name="Edit a user"
-              path="/users/edit/:userId"
-              component={<UserMutator />}
-              currentUser={currentUser}
-            />
-            <PermissionAwareRoute name="Users" path="/users" component={<Users />} currentUser={currentUser} />
-            <PermissionAwareRoute
-              name="General Settings"
-              path="/generalSettings"
-              component={<GeneralSettings />}
-              currentUser={currentUser}
-            />
+    <div className="app">
+      <div className="app__container">
+        <Logout />
+        <Logo width={190} white />
+        <Menu isAdmin={isAdmin()} />
+        <Switch>
+          <Route name="Insufficient Permission" path={'/403'} component={InsufficientPermission} />
+          <Route name="Create new Job" path={'/jobs/new'} component={JobMutation} />
+          <Route name="Edit a Job" path={'/jobs/edit/:jobId'} component={JobMutation} />
+          <Route name="Insights into a Job" path={'/jobs/insights/:jobId'} component={JobInsight} />
+          <Route name="Job overview" path={'/jobs'} component={Jobs} />
+          <PermissionAwareRoute
+            name="Create new User"
+            path="/users/new"
+            component={<UserMutator />}
+            currentUser={currentUser}
+          />
+          <PermissionAwareRoute
+            name="Edit a user"
+            path="/users/edit/:userId"
+            component={<UserMutator />}
+            currentUser={currentUser}
+          />
+          <PermissionAwareRoute name="Users" path="/users" component={<Users />} currentUser={currentUser} />
+          <PermissionAwareRoute
+            name="General Settings"
+            path="/generalSettings"
+            component={<GeneralSettings />}
+            currentUser={currentUser}
+          />
 
-            <Redirect from="/" to={'/jobs'} />
-          </Switch>
-        </div>
+          <Redirect from="/" to={'/jobs'} />
+        </Switch>
       </div>
-    </ToastContext.Provider>
+    </div>
   );
 }
 

diff --git a/ui/src/App.less b/ui/src/App.less
@@ -4,11 +4,9 @@
   width:100%;
 
   &__container {
-    width: 100%;
-
     padding: 1rem 1rem;
-    background-color: #595959f5;
-    color: #f1f1f1;
+    color: var(--semi-color-text-0);
+    background-color: #232429;
   }
 }
 
@@ -18,4 +16,28 @@
 
 .ui.black.label, .ui.black.labels .label {
   background-color: #31303078!important;
+}
+
+a:link {
+  color: #54a9ff;
+  background-color: transparent;
+  text-decoration: none;
+}
+
+a:visited {
+  color: #54a9ff;
+  background-color: transparent;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #54a9ff;
+  background-color: transparent;
+  text-decoration: underline;
+}
+
+a:active {
+  color: #54a9ff;
+  background-color: transparent;
+  text-decoration: underline;
 }
diff --git a/ui/src/Index.jsx b/ui/src/Index.jsx
@@ -5,9 +5,11 @@ import { HashRouter } from 'react-router-dom';
 import { createHashHistory } from 'history';
 import { Provider } from 'react-redux';
 import { createRoot } from 'react-dom/client';
+import en_US from '@douyinfe/semi-ui/lib/es/locale/source/en_US';
+import { LocaleProvider } from '@douyinfe/semi-ui';
+
 const container = document.getElementById('fredy');
 const root = createRoot(container);
-
 const history = createHashHistory();
 
 import App from './App';
@@ -17,7 +19,9 @@ import './Index.less';
 root.render(
   <Provider store={reduxStore}>
     <HashRouter history={history}>
-      <App />
+      <LocaleProvider locale={en_US}>
+        <App />
+      </LocaleProvider>
     </HashRouter>
   </Provider>
 );
diff --git a/ui/src/Index.less b/ui/src/Index.less
@@ -2,5 +2,14 @@ body, html {
   margin: 0;
   height: 100%;
   width: 100%;
-  background-color: #595959f5;
+  background-color: #232429;
+}
+
+.semi-table-row-head{
+  background-color: #2b2b2b !important;
+  color: #fff !important;
+}
+
+.semi-table-row-cell {
+  background-color: #333333 !important;
 }
diff --git a/ui/src/components/headline/Headline.jsx b/ui/src/components/headline/Headline.jsx
@@ -1,12 +1,11 @@
 import React from 'react';
-import { Header } from 'semantic-ui-react';
+import { Typography } from '@douyinfe/semi-ui';
 
-import './Headline.less';
-
-export default function Headline({ text, size = 'medium', className = '' } = {}) {
+export default function Headline({ text, size = 3 } = {}) {
+  const { Title } = Typography;
   return (
-    <Header className={`headline ${className}`} size={size}>
+    <Title heading={size} style={{ marginBottom: '1rem' }}>
       {text}
-    </Header>
+    </Title>
   );
 }
diff --git a/ui/src/components/headline/Headline.less b/ui/src/components/headline/Headline.less
diff --git a/ui/src/components/logout/Logout.jsx b/ui/src/components/logout/Logout.jsx
@@ -1,20 +1,20 @@
 import React from 'react';
-import { Button } from 'semantic-ui-react';
+import { Button } from '@douyinfe/semi-ui';
 import { xhrPost } from '../../services/xhr';
-
+import { IconUser } from '@douyinfe/semi-icons';
 const Logout = function Logout() {
   return (
     <Button
-      content="Logout"
-      labelPosition="left"
-      icon="user"
-      size="mini"
+      icon={<IconUser />}
+      type="danger"
+      theme="solid"
       onClick={async () => {
         await xhrPost('/api/login/logout');
         location.reload();
       }}
-      negative
-    />
+    >
+      Logout
+    </Button>
   );
 };