diff --git a/.github/workflows/ui.yaml b/.github/workflows/ui.yaml index e6f8a2a5092..088b169dd40 100644 --- a/.github/workflows/ui.yaml +++ b/.github/workflows/ui.yaml @@ -211,43 +211,43 @@ jobs: uses: DevExpress/testcafe-action@latest with: args: '"chrome:headless" web-app/tests/operator/login --skip-js-errors -c 3' -# all-operator-tests-2: -# timeout-minutes: 30 -# name: Operator UI Tests Part 2 -# needs: -# - compile-binary -# runs-on: ${{ matrix.os }} -# strategy: -# matrix: -# go-version: [ 1.21.x ] -# os: [ ubuntu-latest ] -# steps: -# - name: Check out code -# uses: actions/checkout@v3 -# - uses: actions/setup-node@v3 -# with: -# node-version: ${{ env.NVMRC }} -# - name: Install MinIO JS -# working-directory: ./ -# continue-on-error: false -# run: | -# yarn add minio -# - uses: actions/cache@v3 -# name: Operator Binary Cache -# with: -# path: | -# ./minio-operator -# key: ${{ runner.os }}-binary-${{ github.run_id }} -# -# # Runs a set of commands using the runners shell -# - name: Start Kind for Operator UI -# run: | -# "${GITHUB_WORKSPACE}/web-app/tests/scripts/operator.sh" -# -# - name: Run TestCafe Tests -# uses: DevExpress/testcafe-action@latest -# with: -# args: '"chrome:headless" web-app/tests/operator/tenant/test-1 --skip-js-errors -c 3' + all-operator-tests-2: + timeout-minutes: 30 + name: Operator UI Tests Part 2 + needs: + - compile-binary + runs-on: ${{ matrix.os }} + strategy: + matrix: + go-version: [ 1.21.x ] + os: [ ubuntu-latest ] + steps: + - name: Check out code + uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: ${{ env.NVMRC }} + - name: Install MinIO JS + working-directory: ./ + continue-on-error: false + run: | + yarn add minio + - uses: actions/cache@v3 + name: Operator Binary Cache + with: + path: | + ./minio-operator + key: ${{ runner.os }}-binary-${{ github.run_id }} + + # Runs a set of commands using the runners shell + - name: Start Kind for Operator UI + run: | + "${GITHUB_WORKSPACE}/web-app/tests/scripts/operator.sh" + + - name: Run TestCafe Tests + uses: DevExpress/testcafe-action@latest + with: + args: '"chrome:headless" web-app/tests/operator/tenant/test-1 --skip-js-errors -c 3' test-operatorapi-on-go: timeout-minutes: 30 diff --git a/web-app/package.json b/web-app/package.json index a1acb09c979..9bfafcb0d19 100644 --- a/web-app/package.json +++ b/web-app/package.json @@ -6,24 +6,15 @@ "dependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/traverse": "7.23.3", - "@emotion/react": "11.11.1", - "@emotion/styled": "11.11.0", - "@mui/icons-material": "5.11.16", - "@mui/lab": "^5.0.0-alpha.117", - "@mui/material": "5.13.6", - "@mui/styles": "5.13.2", - "@mui/x-date-pickers": "^5.0.15", "@reduxjs/toolkit": "1.9.7", - "@uiw/react-textarea-code-editor": "^2.1.1", "kbar": "^0.1.0-beta.39", "local-storage-fallback": "^4.1.1", "lodash": "^4.17.21", "luxon": "^3.3.0", - "mds": "https://github.com/minio/mds.git#v0.12.2", + "mds": "https://github.com/minio/mds.git#v0.13.0", "react": "^18.1.0", "react-copy-to-clipboard": "^5.0.2", "react-dom": "^18.1.0", - "react-grid-layout": "^1.2.0", "react-redux": "^8.0.5", "react-router-dom": "6.16.0", "react-virtualized": "^9.22.3", diff --git a/web-app/src/StyleHandler.tsx b/web-app/src/StyleHandler.tsx index 32ea9dd2343..e5a015920ea 100644 --- a/web-app/src/StyleHandler.tsx +++ b/web-app/src/StyleHandler.tsx @@ -15,66 +15,24 @@ // along with this program. If not, see . import React, { Fragment } from "react"; -import { - StyledEngineProvider, - Theme, - ThemeProvider, -} from "@mui/material/styles"; -import withStyles from "@mui/styles/withStyles"; -import theme from "./theme/main"; -import "react-virtualized/styles.css"; -import "react-grid-layout/css/styles.css"; -import "react-resizable/css/styles.css"; - -import { generateOverrideTheme } from "./utils/stylesUtils"; -import "./index.css"; import { useSelector } from "react-redux"; -import { AppState } from "./store"; import { GlobalStyles, ThemeHandler } from "mds"; +import { AppState } from "./store"; -declare module "@mui/styles/defaultTheme" { - // eslint-disable-next-line @typescript-eslint/no-empty-interface - interface DefaultTheme extends Theme {} -} +import "./index.css"; +import "react-virtualized/styles.css"; interface IStyleHandler { children: React.ReactNode; } const StyleHandler = ({ children }: IStyleHandler) => { - const colorVariants = useSelector( - (state: AppState) => state.system.overrideStyles, - ); - - let thm = theme; - let globalBody: any = {}; - - if (colorVariants) { - thm = generateOverrideTheme(colorVariants); - - globalBody = { backgroundColor: colorVariants.backgroundColor }; - } - - // Kept for Compatibility purposes. Once mds migration is complete then this will be removed - const GlobalCss = withStyles({ - // @global is handled by jss-plugin-global. - "@global": { - body: { - ...globalBody, - }, - }, - })(() => null); + const darkMode = useSelector((state: AppState) => state.system.darkMode); - // ThemeHandler is needed for MDS components theming. Eventually we will remove Theme Provider & use only mds themes. return ( - - - - {children} - - + {children} ); }; diff --git a/web-app/src/screens/Console/Common/DarkModeActivator.tsx b/web-app/src/screens/Console/Common/DarkModeActivator.tsx new file mode 100644 index 00000000000..c1f859ea30c --- /dev/null +++ b/web-app/src/screens/Console/Common/DarkModeActivator.tsx @@ -0,0 +1,48 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2023 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import React from "react"; +import { Button, DarkModeIcon } from "mds"; +import { useSelector } from "react-redux"; +import { AppState, useAppDispatch } from "../../../store"; +import { storeDarkMode } from "../../../utils/stylesUtils"; +import { setDarkMode } from "../../../systemSlice"; +import TooltipWrapper from "./TooltipWrapper/TooltipWrapper"; + +const DarkModeActivator = () => { + const dispatch = useAppDispatch(); + + const darkMode = useSelector((state: AppState) => state.system.darkMode); + + const darkModeActivator = () => { + const currentStatus = !!darkMode; + + dispatch(setDarkMode(!currentStatus)); + storeDarkMode(!currentStatus ? "on" : "off"); + }; + + return ( + +