Updated components to mds (#1895)

minio · Nov 29, 2023 · 9983417 · 9983417
1 parent eaf5f0c
commit 9983417
Show file tree

Hide file tree

Showing 22 changed files with 624 additions and 1,273 deletions.
diff --git 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
@@ -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
@@ -15,66 +15,24 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 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 (
     <Fragment>
       <GlobalStyles />
-      <GlobalCss />
-      <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={thm}>
-          <ThemeHandler>{children}</ThemeHandler>
-        </ThemeProvider>
-      </StyledEngineProvider>
+      <ThemeHandler darkMode={darkMode}>{children}</ThemeHandler>
     </Fragment>
   );
 };

diff --git a/web-app/src/common/SecureComponent/__tests__/accessControl.test.ts b/web-app/src/common/SecureComponent/__tests__/accessControl.test.ts
@@ -14,6 +14,7 @@
 //  You should have received a copy of the GNU Affero General Public License
 //  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
+import "../../../utils/matchMedia";
 import hasPermission from "../accessControl";
 import { store } from "../../../store";
 import { IAM_PAGES, IAM_PAGES_PERMISSIONS, IAM_SCOPES } from "../permissions";

diff --git a/web-app/src/common/__tests__/utils.test.ts b/web-app/src/common/__tests__/utils.test.ts
@@ -14,6 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
+import "../../utils/matchMedia";
 import {
   erasureCodeCalc,
   getBytes,

diff --git a/web-app/src/screens/Console/Common/DarkModeActivator.tsx 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 <http://www.gnu.org/licenses/>.
+
+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 (
+    <TooltipWrapper tooltip={`${darkMode ? "Light" : "Dark"} Mode`}>
+      <Button
+        id={"dark-mode-activator"}
+        icon={<DarkModeIcon />}
+        onClick={darkModeActivator}
+      />
+    </TooltipWrapper>
+  );
+};
+
+export default DarkModeActivator;
diff --git a/web-app/src/screens/Console/Common/PageHeaderWrapper/PageHeaderWrapper.tsx b/web-app/src/screens/Console/Common/PageHeaderWrapper/PageHeaderWrapper.tsx
@@ -16,6 +16,7 @@
 
 import React, { Fragment } from "react";
 import { PageHeader } from "mds";
+import DarkModeActivator from "../DarkModeActivator";
 
 interface IPageHeaderWrapper {
   label: React.ReactNode;
@@ -31,7 +32,12 @@ const PageHeaderWrapper = ({
   return (
     <PageHeader
       label={label}
-      actions={<Fragment>{actions}</Fragment>}
+      actions={
+        <Fragment>
+          {actions}
+          <DarkModeActivator />
+        </Fragment>
+      }
       middleComponent={middleComponent}
     />
   );

diff --git a/web-app/src/screens/Console/Common/TLSCertificate/TLSCertificate.tsx b/web-app/src/screens/Console/Common/TLSCertificate/TLSCertificate.tsx
@@ -15,14 +15,19 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { AlertCloseIcon, Box, CertificateIcon, IconButton } from "mds";
+import {
+  AlertCloseIcon,
+  Box,
+  CertificateIcon,
+  IconButton,
+  TimeIcon,
+  LanguageIcon,
+  EventBusyIcon,
+} from "mds";
 import { DateTime, Duration } from "luxon";
 import styled from "styled-components";
 import get from "lodash/get";
 import { ICertificateInfo } from "../../Tenants/types";
-import LanguageIcon from "@mui/icons-material/Language";
-import EventBusyIcon from "@mui/icons-material/EventBusy";
-import AccessTimeIcon from "@mui/icons-material/AccessTime";
 
 const CertificateContainer = styled.div(({ theme }) => ({
   position: "relative",
@@ -194,7 +199,7 @@ const TLSCertificate = ({
             <span>{expiry.toFormat("yyyy/MM/dd")}</span>
           </Box>
           <Box className={"certificateExpiry"}>
-            <AccessTimeIcon color="inherit" fontSize="small" />
+            <TimeIcon />
             &nbsp;
             <span className={"label"}>Expires in:&nbsp;</span>
             <span className={certificateExpiration}>{daysToExpiryHuman}</span>

diff --git a/web-app/src/screens/Console/Tenants/AddTenant/AddTenant.tsx b/web-app/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
@@ -153,7 +153,7 @@ const AddTenant = () => {
         }
       />
 
-      <PageLayout>
+      <PageLayout variant={"constrained"}>
         {addSending && (
           <Grid item xs={12}>
             <ProgressBar />

diff --git a/web-app/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider/IDPBuiltIn.tsx b/web-app/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider/IDPBuiltIn.tsx
@@ -15,9 +15,16 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { IconButton, Tooltip, InputBox, AddIcon, RemoveIcon, Box } from "mds";
+import {
+  IconButton,
+  Tooltip,
+  InputBox,
+  AddIcon,
+  RemoveIcon,
+  Box,
+  ShuffleIcon,
+} from "mds";
 import { useSelector } from "react-redux";
-import CasinoIcon from "@mui/icons-material/Casino"; // TODO: Implement this in mds
 import {
   addIDPNewKeyPair,
   isPageValid,
@@ -184,7 +191,7 @@ const IDPBuiltIn = () => {
                     }}
                     size={"small"}
                   >
-                    <CasinoIcon />
+                    <ShuffleIcon />
                   </IconButton>
                 </Tooltip>
               </Box>

diff --git a/web-app/src/screens/Console/Tenants/ListTenants/TenantCapacity.tsx b/web-app/src/screens/Console/Tenants/ListTenants/TenantCapacity.tsx
@@ -20,6 +20,8 @@ import { Cell, Pie, PieChart } from "recharts";
 import { CapacityValue, CapacityValues } from "./types";
 import { niceBytesInt } from "../../../../common/utils";
 import UsageBar, { ISizeBarItem } from "../../Common/UsageBar/UsageBar";
+import { useTheme } from "styled-components";
+import get from "lodash/get";
 
 interface ITenantCapacity {
   totalCapacity: number;
@@ -47,7 +49,9 @@ const TenantCapacity = ({
     "#2781B0",
   ];
 
-  const BGColor = "#ededed";
+  const theme = useTheme();
+
+  const BGColor = `${get(theme, "borderColor", "#ededed")}70`;
 
   const totalUsedSpace = usedSpaceVariants.reduce((acc, currValue) => {
     return acc + currValue.value;
@@ -82,14 +86,14 @@ const TenantCapacity = ({
       });
   }
 
-  let standardTierColor = "#07193E";
+  let standardTierColor = get(theme, "signalColors.main", "#07193E");
 
   const usedPercentage = (standardTier.value * 100) / totalCapacity;
 
   if (usedPercentage >= 90) {
-    standardTierColor = "#C83B51";
+    standardTierColor = get(theme, "signalColors.danger", "#C83B51");
   } else if (usedPercentage >= 75) {
-    standardTierColor = "#FFAB0F";
+    standardTierColor = get(theme, "signalColors.warning", "#FFAB0F");
   }
 
   const plotValues: CapacityValue[] = [