minio · dvaldivia · Jul 28, 2023 · Jul 7, 2023
diff --git a/portal-ui/e2e/lifecycle.spec.ts b/portal-ui/e2e/lifecycle.spec.ts
@@ -64,7 +64,7 @@ test.describe("Add Lifecycle Rule Modal in bucket settings tests for object vers
       await createBucketPage.createVersionedBucket(versionedBucketName);
       await bucketListPage.clickOnBucketRow(versionedBucketName);
       bucketSummaryPage = bucketSummaryPage(versionedBucketName);
-      await bucketSummaryPage.clickOnTab("Lifecycle"); //Tab Text is used.
+      await bucketSummaryPage.clickOnTab("lifecycle"); //Tab Text is used.
     });
 
     await test.step("Check if object version option is available on a versioned bucket", async () => {
@@ -93,7 +93,7 @@ test.describe("Add Lifecycle Rule Modal in bucket settings tests for object vers
       await createBucketPage.createBucket(nonVersionedBucketName);
       await bucketListPage.clickOnBucketRow(nonVersionedBucketName);
       bucketSummaryPage = bucketSummaryPage(versionedBucketName);
-      await bucketSummaryPage.clickOnTab("Lifecycle");
+      await bucketSummaryPage.clickOnTab("lifecycle");
     });
 
     await test.step("Check if object version option is NOT available on a non versioned bucket", async () => {

diff --git a/portal-ui/e2e/pom/BucketSummaryPage.tsx b/portal-ui/e2e/pom/BucketSummaryPage.tsx
@@ -27,9 +27,8 @@ export class BucketSummaryPage {
     await this.clickOnTab(`Summary`);
   }
 
-  async clickOnTab(tabName: string) {
-    const page = this.page;
-    await page.getByRole("tab", { name: tabName }).click();
+  async clickOnTab(tabID: string) {
+    await this.getLocator(`#${tabID}`).click();
 
     // await page.goto(`${BUCKET_LIST_PAGE}/${this.bucketName}/admin/${tabName}`);
   }
@@ -41,6 +40,6 @@ export class BucketSummaryPage {
 
   async getObjectVersionOption() {
     await this.page.getByRole("button", { name: "Add Lifecycle Rule" }).click();
-    return this.getLocator("#object_version");
+    return this.getLocator("#object_version-select > div").nth(0);
   }
 }
diff --git a/portal-ui/e2e/pom/CreateBucketPage.tsx b/portal-ui/e2e/pom/CreateBucketPage.tsx
@@ -32,9 +32,9 @@ export class CreateBucketPage {
   initLocators() {
     this.submitBtn = this.getLocator("#create-bucket");
     this.clearBtn = this.getLocator("#clear");
-    this.versioningToggle = this.getLocator("#versioned");
-    this.lockingToggle = this.getLocator("#locking");
-    this.quotaToggle = this.getLocator("#bucket_quota");
+    this.versioningToggle = this.getLocator("#versioned-switch");
+    this.lockingToggle = this.getLocator("#locking-switch");
+    this.quotaToggle = this.getLocator("#bucket_quota-switch");
     this.bucketNamingRules = this.getLocator("#toggle-naming-rules");
     this.bucketNameInput = this.getLocator("#bucket-name");
   }

diff --git a/portal-ui/package.json b/portal-ui/package.json
@@ -18,7 +18,7 @@
     "local-storage-fallback": "^4.1.1",
     "lodash": "^4.17.21",
     "luxon": "^3.3.0",
-    "mds": "https://github.com/minio/mds.git#v0.7.0",
+    "mds": "https://github.com/minio/mds.git#v0.8.2",
     "react": "^18.1.0",
     "react-component-export-image": "^1.0.6",
     "react-copy-to-clipboard": "^5.0.2",

diff --git a/portal-ui/src/common/types.ts b/portal-ui/src/common/types.ts
@@ -97,3 +97,8 @@ export interface IEmbeddedCustomStyles {
   inputBox: IEmbeddedInputBox;
   switch: IEmbeddedSwitch;
 }
+
+export interface SelectorTypes {
+  label: any;
+  value: string;
+}
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx
@@ -17,18 +17,14 @@
 import React, { Fragment, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
-import { Paper } from "@mui/material";
-import Tabs from "@mui/material/Tabs";
-import Tab from "@mui/material/Tab";
-
-import { TabPanel } from "../../../shared/tabs";
-import TableWrapper from "../../Common/TableWrapper/TableWrapper";
+import { DataTable, SectionTitle, Tabs } from "mds";
+import { api } from "api";
+import { errorToHandler } from "api/errors";
 import {
   CONSOLE_UI_RESOURCE,
   IAM_PAGES,
   IAM_SCOPES,
 } from "../../../../common/SecureComponent/permissions";
-import PanelTitle from "../../Common/PanelTitle/PanelTitle";
 import {
   hasPermission,
   SecureComponent,
@@ -38,15 +34,6 @@ import { setErrorSnackMessage, setHelpName } from "../../../../systemSlice";
 import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 import { useAppDispatch } from "../../../../store";
 import { Policy, ServiceAccounts } from "../../../../api/consoleApi";
-import { api } from "api";
-import { errorToHandler } from "api/errors";
-
-function a11yProps(index: any) {
-  return {
-    id: `simple-tab-${index}`,
-    "aria-controls": `simple-tabpanel-${index}`,
-  };
-}
 
 const AccessDetails = () => {
   const dispatch = useAppDispatch();
@@ -55,7 +42,7 @@ const AccessDetails = () => {
 
   const loadingBucket = useSelector(selBucketDetailsLoading);
 
-  const [curTab, setCurTab] = useState<number>(0);
+  const [curTab, setCurTab] = useState<string>("simple-tab-0");
   const [loadingPolicies, setLoadingPolicies] = useState<boolean>(true);
   const [bucketPolicy, setBucketPolicy] = useState<Policy[] | undefined>([]);
   const [loadingUsers, setLoadingUsers] = useState<boolean>(true);
@@ -158,65 +145,63 @@ const AccessDetails = () => {
 
   return (
     <Fragment>
-      <PanelTitle>Access Audit</PanelTitle>
+      <SectionTitle separator>Access Audit</SectionTitle>
       <Tabs
-        value={curTab}
-        onChange={(e: React.ChangeEvent<{}>, newValue: number) => {
+        currentTabOrPath={curTab}
+        onTabClick={(newValue: string) => {
           setCurTab(newValue);
         }}
-        indicatorColor="primary"
-        textColor="primary"
-        aria-label="cluster-tabs"
-        variant="scrollable"
-        scrollButtons="auto"
-      >
-        {displayPoliciesList && <Tab label="Policies" {...a11yProps(0)} />}
-        {displayUsersList && <Tab label="Users" {...a11yProps(1)} />}
-      </Tabs>
-      <Paper>
-        <TabPanel index={0} value={curTab}>
-          <SecureComponent
-            scopes={[IAM_SCOPES.ADMIN_LIST_USER_POLICIES]}
-            resource={bucketName}
-            errorProps={{ disabled: true }}
-          >
-            {bucketPolicy && (
-              <TableWrapper
-                noBackground={true}
-                itemActions={PolicyActions}
-                columns={[{ label: "Name", elementKey: "name" }]}
-                isLoading={loadingPolicies}
-                records={bucketPolicy}
-                entityName="Policies"
-                idField="name"
-              />
-            )}
-          </SecureComponent>
-        </TabPanel>
-
-        <TabPanel index={1} value={curTab}>
-          <SecureComponent
-            scopes={[
-              IAM_SCOPES.ADMIN_GET_POLICY,
-              IAM_SCOPES.ADMIN_LIST_USERS,
-              IAM_SCOPES.ADMIN_LIST_GROUPS,
-            ]}
-            resource={bucketName}
-            matchAll
-            errorProps={{ disabled: true }}
-          >
-            <TableWrapper
-              noBackground={true}
-              itemActions={userTableActions}
-              columns={[{ label: "User", elementKey: "accessKey" }]}
-              isLoading={loadingUsers}
-              records={bucketUsers}
-              entityName="Users"
-              idField="accessKey"
-            />
-          </SecureComponent>
-        </TabPanel>
-      </Paper>
+        horizontal
+        options={[
+          {
+            tabConfig: { label: "Policies", id: "simple-tab-0" },
+            content: (
+              <SecureComponent
+                scopes={[IAM_SCOPES.ADMIN_LIST_USER_POLICIES]}
+                resource={bucketName}
+                errorProps={{ disabled: true }}
+              >
+                {bucketPolicy && (
+                  <DataTable
+                    noBackground={true}
+                    itemActions={PolicyActions}
+                    columns={[{ label: "Name", elementKey: "name" }]}
+                    isLoading={loadingPolicies}
+                    records={bucketPolicy}
+                    entityName="Policies"
+                    idField="name"
+                  />
+                )}
+              </SecureComponent>
+            ),
+          },
+          {
+            tabConfig: { label: "Users", id: "simple-tab-1" },
+            content: (
+              <SecureComponent
+                scopes={[
+                  IAM_SCOPES.ADMIN_GET_POLICY,
+                  IAM_SCOPES.ADMIN_LIST_USERS,
+                  IAM_SCOPES.ADMIN_LIST_GROUPS,
+                ]}
+                resource={bucketName}
+                matchAll
+                errorProps={{ disabled: true }}
+              >
+                <DataTable
+                  noBackground={true}
+                  itemActions={userTableActions}
+                  columns={[{ label: "User", elementKey: "accessKey" }]}
+                  isLoading={loadingUsers}
+                  records={bucketUsers}
+                  entityName="Users"
+                  idField="accessKey"
+                />
+              </SecureComponent>
+            ),
+          },
+        ]}
+      />
     </Fragment>
   );
 };