diff --git a/.yarnrc.yml b/.yarnrc.yml new file mode 100644 index 00000000..3186f3f0 --- /dev/null +++ b/.yarnrc.yml @@ -0,0 +1 @@ +nodeLinker: node-modules diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index d74e3e10..00000000 --- a/gulpfile.js +++ /dev/null @@ -1,30 +0,0 @@ -const gulp = require('gulp') -const watch = require('gulp-watch') -const gulpless = require('gulp-less') -const debug = require('gulp-debug') -var csso = require('gulp-csso') -const autoprefixer = require('gulp-autoprefixer') -const NpmImportPlugin = require('less-plugin-npm-import') - -gulp.task('watch', function () { - watch(['src/styles/*'], gulp.series(['less'])) -}) - -gulp.task('less', function () { - return gulp - .src('src/styles/*-theme.less') - .pipe(debug({ title: 'Less files:' })) - .pipe( - gulpless({ - javascriptEnabled: true, - plugins: [new NpmImportPlugin({ prefix: '~' })], - }) - ) - .pipe(autoprefixer()) - .pipe( - csso({ - debug: true, - }) - ) - .pipe(gulp.dest('./public')) -}) diff --git a/package.json b/package.json index 9b0059ed..3c3af108 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "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", @@ -12,7 +12,6 @@ "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 index 8d677530..9dcb634c 100644 --- 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
- } - return ( -
+ -
+ ) } -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 ( - + { + setIsDarkMode(value) + StorageHelper.setDarkModeInLocalStorage(value) + }, + }} > - - - - - - - ) - } + + + + + + ) } export default App diff --git a/src/containers/Dashboard.tsx b/src/containers/Dashboard.tsx index 5d9bfcf6..5f86809a 100644 --- a/src/containers/Dashboard.tsx +++ b/src/containers/Dashboard.tsx @@ -492,7 +492,7 @@ export default class Dashboard extends ApiComponent< + + + + )} + diff --git a/src/containers/apps/Apps.tsx b/src/containers/apps/Apps.tsx index 3c36d5dc..42bc3c2b 100644 --- a/src/containers/apps/Apps.tsx +++ b/src/containers/apps/Apps.tsx @@ -1,3 +1,4 @@ +import { Col, Row } from 'antd' import { RouteComponentProps } from 'react-router' import Toaster from '../../utils/Toaster' import ApiComponent from '../global/ApiComponent' @@ -73,24 +74,40 @@ export default class Apps extends ApiComponent< maxWidth: 1000, }} > - { - self.onCreateNewAppClicked(appName, hasPersistency) - }} - /> - {apiData.appDefinitions.length > 0 ? ( - - ) : ( -
+ + + { + self.onCreateNewAppClicked( + appName, + hasPersistency + ) + }} + /> + + + {apiData.appDefinitions.length > 0 && ( + + + + + )}
) diff --git a/src/containers/apps/AppsTable.tsx b/src/containers/apps/AppsTable.tsx index 96afd5b4..9323a66f 100644 --- a/src/containers/apps/AppsTable.tsx +++ b/src/containers/apps/AppsTable.tsx @@ -8,7 +8,7 @@ import { import { Card, Input, Row, Table, Tag, Tooltip } from 'antd' import { ColumnProps } from 'antd/lib/table' import { History } from 'history' -import React, { Component, Fragment } from 'react' +import { Component, Fragment } from 'react' import { connect } from 'react-redux' import { Link } from 'react-router-dom' import { IMobileComponent } from '../../models/ContainerProps' @@ -269,17 +269,22 @@ class AppsTable extends Component< - +
+
    {localize('apps_table.title', 'Your Apps')} - -
+
+ {self.props.isMobile && (
{searchAppInput}
)} - +
} > diff --git a/src/containers/apps/CreateNewApp.tsx b/src/containers/apps/CreateNewApp.tsx index 6d331f31..9dea7184 100644 --- a/src/containers/apps/CreateNewApp.tsx +++ b/src/containers/apps/CreateNewApp.tsx @@ -1,6 +1,5 @@ import { PlusCircleOutlined, QuestionCircleFilled } from '@ant-design/icons' -import { Button, Card, Checkbox, Col, Input, Row, Tooltip } from 'antd' -import Search from 'antd/lib/input/Search' +import { Button, Card, Checkbox, Divider, Input, Row, Tooltip } from 'antd' import { Component, Fragment } from 'react' import { connect } from 'react-redux' import { Link } from 'react-router-dom' @@ -43,103 +42,96 @@ class CreateNewApp extends Component< } > - - - - {self.props.isMobile ? ( - - - self.setState({ - appName: e.target.value, - }) - } - /> - - - ) : ( - - self.setState({ - appName: e.target.value, - }) - } - onSearch={(value) => - self.onCreateNewAppClicked() - } - /> - )} - -
- - + + {self.props.isMobile ? ( + + self.setState({ - hasPersistency: !!e.target.checked, + appName: e.target.value, }) } + /> + + + ) : ( + + self.setState({ + appName: e.target.value, + }) + } + onSearch={(value) => self.onCreateNewAppClicked()} + /> + )} + + + + self.setState({ + hasPersistency: !!e.target.checked, + }) + } + > + Has Persistent Data + +    + + + + + + + + + + +
+

+ {localize( + 'create_new_app.or_select_from', + 'Or Select From' + )} +

+ + {localize( + 'create_new_app.one_click_apps', + 'One-Click Apps/Databases' + )} + +
) } diff --git a/src/containers/apps/appDetails/AppConfigs.tsx b/src/containers/apps/appDetails/AppConfigs.tsx index e488f601..66044790 100644 --- a/src/containers/apps/appDetails/AppConfigs.tsx +++ b/src/containers/apps/appDetails/AppConfigs.tsx @@ -414,24 +414,28 @@ export default class AppConfigs extends Component< const app = this.props.apiData!.appDefinition return (
-

- Environmental Variables   - - - -

- -
- Bulk Edit {' '} - { - self.setState({ - envVarBulkEdit: val, - envVarBulkVals: '', - }) - }} - /> -
+ + +

+ Environmental Variables   + + + +

+ + +
+ Bulk Edit {' '} + { + self.setState({ + envVarBulkEdit: val, + envVarBulkVals: '', + }) + }} + /> +
+
- + @@ -138,7 +144,7 @@ export default class AppLogsView extends ApiComponent< self.onExpandLogClicked() }} > -

+ {this.state.expandedLogs ? ( ) : ( @@ -149,14 +155,13 @@ export default class AppLogsView extends ApiComponent< ? 'View' : 'Hide'}{' '} App Logs -

+ @@ -181,14 +186,14 @@ export default class AppLogsView extends ApiComponent< }) }} > -

+   {' '} {this.state.isWrapped - ? "Don't" - : ''}{' '} - wrap logs    -

+ ? "Don't wrap logs" + : 'Wrap logs'} +    + @@ -200,7 +205,7 @@ export default class AppLogsView extends ApiComponent< } style={{ padding: 5 }} > -