Migrate to antd 5 (#139)

* Migrate to latest v4 Signed-off-by: Mihovil Ilakovac <[email protected]> * Upgrade to v5 Signed-off-by: Mihovil Ilakovac <[email protected]> * Update to antd 5 (WIP) * Linting Signed-off-by: Mihovil Ilakovac <[email protected]> * Formatting * Fixes Dashboard. Cleanup * Cleanup * Revert design change * Apps list to have the same width as before * Fixed build * Fixed build --------- Signed-off-by: Mihovil Ilakovac <[email protected]> Co-authored-by: Kasra Bigdeli <[email protected]>
caprover · Apr 21, 2024 · 7f857b4 · 7f857b4
1 parent 52aac6f
commit 7f857b4
Show file tree

Hide file tree

Showing 34 changed files with 3,052 additions and 4,937 deletions.
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/gulpfile.js b/gulpfile.js
diff --git a/package.json b/package.json
@@ -4,15 +4,14 @@
     "private": true,
     "dependencies": {
         "@craco/craco": "^6.4.5",
-        "antd": "^4.16.10",
+        "antd": "5.x",
         "axios": "^0.21.1",
         "classnames": "^2.2.6",
         "deep-equal": "^2.0.5",
         "moment": "^2.29.1",
         "prettier": "^2.2.1",
         "qrcode": "^1.5.0",
         "react": "^18.2.0",
-        "react-css-theme-switcher": "^0.3.0",
         "react-dom": "^18.2.0",
         "react-markdown": "^6.0.3",
         "react-redux": "^8.0.5",
@@ -29,9 +28,9 @@
         "formatter-write": "prettier --write './src/**/*.ts*'",
         "tslint": "tslint -c tslint.json -p tsconfig.json",
         "tslint-fix": "tslint --fix -c tslint.json -p tsconfig.json",
-        "start": "export NODE_OPTIONS=--openssl-legacy-provider && npx gulp less && craco start",
+        "start": "export NODE_OPTIONS=--openssl-legacy-provider && craco start",
         "less-watch": "npx gulp watch",
-        "build": "export NODE_OPTIONS=--openssl-legacy-provider && npx gulp less && craco build",
+        "build": "export NODE_OPTIONS=--openssl-legacy-provider && craco build",
         "test": "craco test",
         "test:e2e--open": "cypress open",
         "test:e2e": "cypress run",
@@ -65,21 +64,15 @@
         "@types/deep-equal": "^1.0.1",
         "@types/jest": "^26.0.15",
         "@types/node": "^12.0.0",
-        "@types/react": "18.0.26",
-        "@types/react-dom": "^18.2.1",
-        "@types/react-redux": "^7.1.16",
-        "@types/react-router": "^5.1.11",
-        "@types/react-router-dom": "^5.1.7",
         "@types/qrcode": "^1.4.2",
+        "@types/react": "^18.2.22",
+        "@types/react-dom": "^18.2.7",
+        "@types/react-redux": "^7.1.31",
+        "@types/react-router": "^5.1.20",
+        "@types/react-router-dom": "^5.3.3",
         "@types/utf8": "^2.1.6",
         "cypress": "^12.5.1",
-        "gulp": "^4.0.2",
         "gulp-autoprefixer": "^8.0.0",
-        "gulp-csso": "^4.0.1",
-        "gulp-debug": "^4.0.0",
-        "gulp-less": "^5.0.0",
-        "gulp-watch": "^5.0.1",
-        "less-plugin-npm-import": "^2.1.0",
         "tslint": "^6.1.3",
         "tslint-config-prettier": "^1.18.0",
         "typescript": "^4.1.5"

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,16 +1,14 @@
-import { ConfigProvider } from 'antd'
-import { Component } from 'react'
-import {
-    ThemeSwitcherProvider,
-    useThemeSwitcher,
-} from 'react-css-theme-switcher'
+import { App as AntdApp, ConfigProvider, theme } from 'antd'
+import { useState } from 'react'
 import { Provider } from 'react-redux'
 import { HashRouter, Route, Switch } from 'react-router-dom'
 import { applyMiddleware, createStore } from 'redux'
 import thunk from 'redux-thunk'
 import Login from './containers/Login'
 import PageRoot from './containers/PageRoot'
+import DarkModeContext from './contexts/DarkModeContext'
 import reducers from './redux/reducers'
+import './styles/style.css'
 import CrashReporter from './utils/CrashReporter'
 import { currentLanguageOption } from './utils/Language'
 import StorageHelper from './utils/StorageHelper'
@@ -19,58 +17,55 @@ CrashReporter.getInstance().init()
 
 const createStoreWithMiddleware = applyMiddleware(thunk)(createStore)
 const store = createStoreWithMiddleware(reducers)
-type AppState = {
-    isDarkMode: boolean
-}
-
-const themes = {
-    dark: `dark-theme.css`,
-    light: `light-theme.css`,
-}
 
 const MainComponent = () => {
-    const { status } = useThemeSwitcher()
-
-    if (status === 'loading') {
-        // Just an empty div until styles load
-        return <div></div>
-    }
-
     return (
-        <div className="full-screen">
+        <AntdApp className="full-screen">
             <HashRouter>
                 <Switch>
                     <Route path="/login/" component={Login} />
                     <Route path="/" component={PageRoot} />
                 </Switch>
             </HashRouter>
-        </div>
+        </AntdApp>
     )
 }
 
-class App extends Component<{}, AppState> {
-    constructor(props: any) {
-        super(props)
-        this.state = {
-            isDarkMode: StorageHelper.getDarkModeFromLocalStorage(),
-        }
-    }
+function App() {
+    const { defaultAlgorithm, darkAlgorithm } = theme
+    const [isDarkMode, setIsDarkMode] = useState(
+        StorageHelper.getDarkModeFromLocalStorage()
+    )
 
-    render() {
-        return (
-            <ThemeSwitcherProvider
-                themeMap={themes}
-                defaultTheme={this.state.isDarkMode ? 'dark' : 'light'}
-                insertionPoint="styles-insertion-point"
+    return (
+        <ConfigProvider
+            theme={{
+                algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
+                token: {
+                    colorPrimary: '#1b8ad3',
+                    colorLink: '#1b8ad3',
+                    fontFamily: `QuickSand, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+                        'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+                        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,
+                },
+            }}
+            locale={currentLanguageOption.antdLocale}
+        >
+            <DarkModeContext.Provider
+                value={{
+                    isDarkMode,
+                    setIsDarkMode: (value) => {
+                        setIsDarkMode(value)
+                        StorageHelper.setDarkModeInLocalStorage(value)
+                    },
+                }}
             >
-                <ConfigProvider locale={currentLanguageOption.antdLocale}>
-                    <Provider store={store}>
-                        <MainComponent />
-                    </Provider>
-                </ConfigProvider>
-            </ThemeSwitcherProvider>
-        )
-    }
+                <Provider store={store}>
+                    <MainComponent />
+                </Provider>
+            </DarkModeContext.Provider>
+        </ConfigProvider>
+    )
 }
 
 export default App
diff --git a/src/containers/Dashboard.tsx b/src/containers/Dashboard.tsx
@@ -492,7 +492,7 @@ export default class Dashboard extends ApiComponent<
                             <Row justify="end">
                                 <Button
                                     disabled={this.state.isForceChangingDomain}
-                                    type="ghost"
+                                    ghost
                                     onClick={() => {
                                         self.setState({
                                             isForceChangingDomain: true,

diff --git a/src/containers/LoggedInCatchAll.tsx b/src/containers/LoggedInCatchAll.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { RouteComponentProps } from 'react-router'
 import ApiManager from '../api/ApiManager'
 import AppConstants from '../utils/AppConstants'

diff --git a/src/containers/Login.tsx b/src/containers/Login.tsx
@@ -1,5 +1,5 @@
 import { LockOutlined } from '@ant-design/icons'
-import { Button, Card, Collapse, Input, Radio, Row, Select } from 'antd'
+import { Button, Card, Collapse, Input, Radio, Row, Layout, Select } from 'antd'
 import React, { ReactComponentElement } from 'react'
 import { Redirect, RouteComponentProps } from 'react-router'
 import ApiManager from '../api/ApiManager'
@@ -72,15 +72,8 @@ export default class Login extends ApiComponent<RouteComponentProps<any>, any> {
         if (ApiManager.isLoggedIn()) return <Redirect to="/" />
 
         return (
-            <div>
-                <div
-                    style={{
-                        position: 'absolute',
-                        left: '50%',
-                        top: '50%',
-                        transform: 'translate(-50%,-50%)',
-                    }}
-                >
+            <Layout className="full-screen">
+                <Row justify="center" align="middle" className="full-screen">
                     <Card
                         title={localize(
                             'login_form.cap_rover',
@@ -112,8 +105,8 @@ export default class Login extends ApiComponent<RouteComponentProps<any>, any> {
                             hasOtp={self.state.hasOtp}
                         />
                     </Card>
-                </div>
-            </div>
+                </Row>
+            </Layout>
         )
     }
 }