Allow spaces in policy names (minio#3482)

fix-1 fix-2 fix-3 fix-4 fix-5 fix-6 fix-7 fix-8 fix-9 fix-10 Lint fix.10 fix-11 removed more stuff Fixed errors fixes-12 display objects info added types and initial top bar Update Bar Updated mds version Update latest More integration fixes Update mds more fixes migrated to redux types Added missing components more migrations updates tabs information adjusts arrow-positioning fix select check asdf Updated delete modal fix inspect modal Update Retention modal asdf Update Legal Hold modal screen Share mdoal fix update preview adjustments more fixes Delete Tag fix
bexsoft · Dec 12, 2024 · 7ac2f43 · 7ac2f43
1 parent 2e66a13
commit 7ac2f43
Show file tree

Hide file tree

Showing 269 changed files with 5,301 additions and 20,225 deletions.
diff --git a/web-app/package.json b/web-app/package.json
@@ -5,14 +5,15 @@
   "homepage": ".",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.14.0",
     "@reduxjs/toolkit": "^1.9.7",
     "clsx": "^2.1.1",
     "http-status-codes": "^2.3.0",
     "kbar": "^0.1.0-beta.45",
     "local-storage-fallback": "^4.1.2",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
-    "mds": "https://github.com/minio/mds.git#v1.0.4",
+    "mds": "https://github.com/minio/mds.git#v3.1.9",
     "react": "^18.3.1",
     "react-component-export-image": "^1.0.6",
     "react-copy-to-clipboard": "^5.1.0",
@@ -26,7 +27,6 @@
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
     "recharts": "^2.12.7",
-    "styled-components": "5.3.11",
     "superagent": "^9.0.2",
     "tinycolor2": "^1.6.0"
   },
@@ -99,5 +99,5 @@
     "cookie": "^0.7.2"
   },
   "main": "index.js",
-  "packageManager": "yarn@4.4.0"
+  "packageManager": "yarn@4.5.3"
 }
diff --git a/web-app/src/StyleHandler.tsx b/web-app/src/StyleHandler.tsx
@@ -18,7 +18,6 @@ import React, { Fragment } from "react";
 import { GlobalStyles, ThemeHandler } from "mds";
 import "react-virtualized/styles.css";
 
-import { generateOverrideTheme } from "./utils/stylesUtils";
 import "./index.css";
 import { useSelector } from "react-redux";
 import { AppState } from "./store";
@@ -33,16 +32,16 @@ const StyleHandler = ({ children }: IStyleHandler) => {
   );
   const darkMode = useSelector((state: AppState) => state.system.darkMode);
 
-  let thm = undefined;
+  /*let thm = undefined;
 
   if (colorVariants) {
     thm = generateOverrideTheme(colorVariants);
-  }
+  }*/
 
   return (
     <Fragment>
-      <GlobalStyles />
-      <ThemeHandler darkMode={darkMode} customTheme={thm}>
+      <ThemeHandler darkMode={darkMode}>
+        <GlobalStyles />
         {children}
       </ThemeHandler>
     </Fragment>

diff --git a/web-app/src/common/MoreLink.tsx b/web-app/src/common/MoreLink.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { ArrowIcon, Box } from "mds";
+import { ArrowRightIcon, Box } from "mds";
 
 const MoreLink = ({
   LeadingIcon,
@@ -74,7 +74,7 @@ const MoreLink = ({
             marginTop: 2,
           }}
         >
-          <ArrowIcon style={{ width: 12 }} />
+          <ArrowRightIcon style={{ width: 12 }} />
         </Box>
       </Box>
     </a>

diff --git a/...eens/Console/Dashboard/dashboardThunks.ts → web-app/src/common/MultipleBase.tsx b/...eens/Console/Dashboard/dashboardThunks.ts → web-app/src/common/MultipleBase.tsx
@@ -14,22 +14,31 @@
 // 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 { createAsyncThunk } from "@reduxjs/toolkit";
-import { setErrorSnackMessage } from "../../../systemSlice";
-import { api } from "api";
-import { errorToHandler } from "api/errors";
+import { styled } from "mds";
 
-export const getUsageAsync = createAsyncThunk(
-  "dashboard/getUsageAsync",
-  async (_, { getState, rejectWithValue, dispatch }) => {
-    return api.admin
-      .adminInfo()
-      .then((res) => {
-        return res.data;
-      })
-      .catch((err) => {
-        dispatch(setErrorSnackMessage(errorToHandler(err.error)));
-        return rejectWithValue(err);
-      });
+const MultipleBase = styled.div(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: 4,
+  borderRadius: 12,
+  backgroundColor: theme.colors["Color/Neutral/Bg/colorBgShell"],
+  "& #expand-options .button-label": {
+    display: "none",
   },
-);
+  "& .selectionElm": {
+    fontSize: 12,
+    fontStyle: "normal",
+    fontWeight: 600,
+    lineHeight: "16px",
+    letterSpacing: "0.5px",
+  },
+  "& .detSelection": {
+    display: "flex",
+    alignItems: "center",
+    gap: 24,
+    padding: "0 4px",
+  },
+}));
+
+export default MultipleBase;
diff --git a/web-app/src/common/utils.ts b/web-app/src/common/utils.ts
@@ -523,3 +523,15 @@ export const safeDecodeURIComponent = (value: any) => {
     return value;
   }
 };
+
+// calculate last modify time
+export const calculateLastModifyTime = (lastModified: string) => {
+  const currentTime = new Date();
+  const modifiedTime = new Date(lastModified);
+
+  const difTime = currentTime.getTime() - modifiedTime.getTime();
+
+  const formatTime = niceDaysInt(difTime, "ms");
+
+  return formatTime.trim() !== "" ? `${formatTime} ago` : "Just now";
+};
diff --git a/web-app/src/screens/AnonymousAccess/AnonymousAccess.tsx b/web-app/src/screens/AnonymousAccess/AnonymousAccess.tsx
@@ -55,7 +55,7 @@ const AnonymousAccess = () => {
         <div style={{ flexShrink: 1, display: "flex", flexDirection: "row" }}>
           <Button
             id={"go-to-login"}
-            variant={"text"}
+            variant={"primary-ghost"}
             onClick={() => {
               dispatch(resetSession());
               dispatch(resetSystem());

diff --git a/web-app/src/screens/Console/Account/Account.tsx b/web-app/src/screens/Console/Account/Account.tsx
@@ -16,16 +16,16 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import {
-  AccountIcon,
-  AddIcon,
+  UserRoundIcon,
+  PlusIcon,
   Box,
   Button,
   DataTable,
   DeleteIcon,
   Grid,
   HelpBox,
   PageLayout,
-  PasswordKeyIcon,
+  KeyRoundIcon,
 } from "mds";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
@@ -253,8 +253,8 @@ const Account = () => {
                   id={"change-password"}
                   onClick={() => setChangePasswordModalOpen(true)}
                   label={`Change Password`}
-                  icon={<PasswordKeyIcon />}
-                  variant={"regular"}
+                  icon={<KeyRoundIcon />}
+                  variant={"secondary"}
                   disabled={userIDP}
                 />
               </SecureComponent>
@@ -270,8 +270,8 @@ const Account = () => {
                     navigate(`${IAM_PAGES.ACCOUNT_ADD}`);
                   }}
                   label={`Create access key`}
-                  icon={<AddIcon />}
-                  variant={"callAction"}
+                  icon={<PlusIcon />}
+                  variant={"primary"}
                 />
               </SecureComponent>
             </Box>
@@ -292,7 +292,7 @@ const Account = () => {
           <Grid item xs={12} sx={{ marginTop: 15 }}>
             <HelpBox
               title={"Learn more about ACCESS KEYS"}
-              iconComponent={<AccountIcon />}
+              icon={<UserRoundIcon />}
               help={
                 <Fragment>
                   MinIO access keys are child identities of an authenticated

diff --git a/web-app/src/screens/Console/Account/AddServiceAccountHelpBox.tsx b/web-app/src/screens/Console/Account/AddServiceAccountHelpBox.tsx
@@ -16,10 +16,10 @@
 import React from "react";
 import {
   Box,
-  HelpIconFilled,
-  IAMPoliciesIcon,
-  PasswordKeyIcon,
-  ServiceAccountIcon,
+  CircleHelpIcon,
+  ShieldCheckIcon,
+  KeyRoundIcon,
+  UserRoundCheckIcon,
 } from "mds";
 
 const FeatureItem = ({
@@ -77,13 +77,13 @@ const AddServiceAccountHelpBox = () => {
           },
         }}
       >
-        <HelpIconFilled />
+        <CircleHelpIcon />
         <div>Learn more about Access Keys</div>
       </Box>
       <Box sx={{ fontSize: "14px", marginBottom: "15px" }}>
         <Box sx={{ paddingBottom: "20px" }}>
           <FeatureItem
-            icon={<ServiceAccountIcon />}
+            icon={<UserRoundCheckIcon />}
             description={`Create Access Keys`}
           />
           <Box sx={{ paddingTop: "20px" }}>
@@ -94,7 +94,7 @@ const AddServiceAccountHelpBox = () => {
         </Box>
         <Box sx={{ paddingBottom: "20px" }}>
           <FeatureItem
-            icon={<PasswordKeyIcon />}
+            icon={<KeyRoundIcon />}
             description={`Assign Custom Credentials`}
           />
           <Box sx={{ paddingTop: "10px" }}>
@@ -111,7 +111,7 @@ const AddServiceAccountHelpBox = () => {
         </Box>
         <Box sx={{ paddingBottom: "20px" }}>
           <FeatureItem
-            icon={<IAMPoliciesIcon />}
+            icon={<ShieldCheckIcon />}
             description={`Assign Access Policies`}
           />
           <Box sx={{ paddingTop: "10px" }}>

diff --git a/web-app/src/screens/Console/Account/AddServiceAccountScreen.tsx b/web-app/src/screens/Console/Account/AddServiceAccountScreen.tsx
@@ -18,18 +18,17 @@ import React, { Fragment, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   BackLink,
-  Button,
-  PageLayout,
-  PasswordKeyIcon,
-  ServiceAccountCredentialsIcon,
-  Grid,
   Box,
+  Button,
+  DateTimeInput,
   FormLayout,
+  Grid,
   InputBox,
-  Switch,
-  ServiceAccountIcon,
-  HelpTip,
-  DateTimeInput,
+  KeyRoundIcon,
+  PageLayout,
+  SquareUserRoundIcon,
+  Toggle,
+  UserRoundCheckIcon,
 } from "mds";
 import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
 import { NewServiceAccount } from "../Common/CredentialsPrompt/types";
@@ -163,7 +162,7 @@ const AddServiceAccount = () => {
         <PageLayout>
           <FormLayout
             helpBox={<AddServiceAccountHelpBox />}
-            icon={<ServiceAccountCredentialsIcon />}
+            icon={<SquareUserRoundIcon />}
             title={"Create Access Key"}
           >
             <form
@@ -183,7 +182,7 @@ const AddServiceAccount = () => {
                 onChange={(e) => {
                   setAccessKey(e.target.value);
                 }}
-                startIcon={<ServiceAccountIcon />}
+                startIcon={<UserRoundCheckIcon />}
               />
               <InputBox
                 value={secretKey}
@@ -195,9 +194,9 @@ const AddServiceAccount = () => {
                 onChange={(e) => {
                   setSecretKey(e.target.value);
                 }}
-                startIcon={<PasswordKeyIcon />}
+                startIcon={<KeyRoundIcon />}
               />
-              <Switch
+              <Toggle
                 value="serviceAccountPolicy"
                 id="serviceAccountPolicy"
                 name="serviceAccountPolicy"
@@ -206,31 +205,17 @@ const AddServiceAccount = () => {
                   setIsRestrictedByPolicy(event.target.checked);
                 }}
                 label={"Restrict beyond user policy"}
-                description={
+                helper={
                   "You can specify an optional JSON-formatted IAM policy to further restrict Access Key access to a subset of the actions and resources explicitly allowed for the parent user. Additional access beyond that of the parent user cannot be implemented through these policies."
                 }
               />
               {isRestrictedByPolicy && (
                 <Grid item xs={12}>
                   <Box>
-                    <HelpTip
-                      content={
-                        <Fragment>
-                          <a
-                            target="blank"
-                            href="https://min.io/docs/minio/kubernetes/upstream/administration/identity-access-management/policy-based-access-control.html#policy-document-structure"
-                          >
-                            Guide to access policy structure
-                          </a>
-                        </Fragment>
-                      }
-                      placement="right"
-                    >
-                      <PanelTitle>
-                        Current User Policy - edit the JSON to remove
-                        permissions for this Access Key
-                      </PanelTitle>
-                    </HelpTip>
+                    <PanelTitle>
+                      Current User Policy - edit the JSON to remove permissions
+                      for this Access Key
+                    </PanelTitle>
                   </Box>
                   <Grid item xs={12} sx={{ ...modalStyleUtils.formScrollable }}>
                     <CodeMirrorWrapper
@@ -314,16 +299,15 @@ const AddServiceAccount = () => {
                 <Button
                   id={"clear"}
                   type="button"
-                  variant="regular"
+                  variant="secondary"
                   onClick={resetForm}
                   label={"Clear"}
                 />
 
                 <Button
                   id={"create-sa"}
                   type="submit"
-                  variant="callAction"
-                  color="primary"
+                  variant="primary"
                   label={"Create"}
                 />
               </Grid>