From a5f89bb6d71ffce7c6555c03374acb3f591f6257 Mon Sep 17 00:00:00 2001
From: jinapurapu <65002498+jinapurapu@users.noreply.github.com>
Date: Thu, 27 Oct 2022 00:19:20 -0700
Subject: [PATCH] Improve Tier status accessibility  (#2409)

---
 portal-ui/src/icons/TierOfflineIcon.tsx       | 37 +++++++++++++++
 portal-ui/src/icons/TierOnlineIcon.tsx        | 35 ++++++++++++++
 .../ListTiersConfiguration.tsx                | 46 +++++++++----------
 3 files changed, 95 insertions(+), 23 deletions(-)
 create mode 100644 portal-ui/src/icons/TierOfflineIcon.tsx
 create mode 100644 portal-ui/src/icons/TierOnlineIcon.tsx

diff --git a/portal-ui/src/icons/TierOfflineIcon.tsx b/portal-ui/src/icons/TierOfflineIcon.tsx
new file mode 100644
index 000000000..ae1972cb7
--- /dev/null
+++ b/portal-ui/src/icons/TierOfflineIcon.tsx
@@ -0,0 +1,37 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 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 * as React from "react";
+import { SVGProps } from "react";
+
+const TierOfflineIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+  >
+    <path
+      id="offline-icon"
+      d="M91.4,4.551l-.825-.825-2.44,2.439L85.7,3.726l-.825.825L87.312,6.99,84.873,9.429l.825.825,2.439-2.439,2.44,2.439.825-.825L88.961,6.99Zm-.155,9.44H85.027l-3.89-4.279V4.269L85.027-.01h6.219l3.89,4.279V9.711Z"
+      transform="translate(-81.136 0.01)"
+      fill="#c83b51"
+      fill-rule="evenodd"
+    />
+  </svg>
+);
+
+export default TierOfflineIcon;
diff --git a/portal-ui/src/icons/TierOnlineIcon.tsx b/portal-ui/src/icons/TierOnlineIcon.tsx
new file mode 100644
index 000000000..9ac7c64e7
--- /dev/null
+++ b/portal-ui/src/icons/TierOnlineIcon.tsx
@@ -0,0 +1,35 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 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 * as React from "react";
+import { SVGProps } from "react";
+
+const TierOnlineIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+  >
+    <path
+      id="online-icon"
+      d="M7,14a7.052,7.052,0,0,1-1.411-.142,6.962,6.962,0,0,1-2.5-1.053A7.02,7.02,0,0,1,.55,9.725,6.965,6.965,0,0,1,.142,8.411a7.068,7.068,0,0,1,0-2.821A6.962,6.962,0,0,1,1.2,3.086,7.02,7.02,0,0,1,4.275.55,6.965,6.965,0,0,1,5.589.142a7.068,7.068,0,0,1,2.821,0,6.962,6.962,0,0,1,2.5,1.053,7.02,7.02,0,0,1,2.536,3.08,6.965,6.965,0,0,1,.408,1.314,7.068,7.068,0,0,1,0,2.821,6.962,6.962,0,0,1-1.053,2.5,7.02,7.02,0,0,1-3.08,2.536,6.965,6.965,0,0,1-1.314.408A7.052,7.052,0,0,1,7,14ZM3.958,6h0L2.953,7.008l3.016,3.016L10.995,5,9.99,3.992,5.969,8.013,3.958,6Z"
+      fill="#4ccb92"
+    />
+  </svg>
+);
+
+export default TierOnlineIcon;
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
index 37f5e8514..c8e3cc3b1 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
@@ -31,12 +31,7 @@ import {
   tableStyles,
   typesSelection,
 } from "../../Common/FormComponents/common/styleLibrary";
-import {
-  AddIcon,
-  CircleIcon,
-  TiersIcon,
-  TiersNotAvailableIcon,
-} from "../../../../icons";
+import { AddIcon, TiersIcon, TiersNotAvailableIcon } from "../../../../icons";
 
 import { ITierElement, ITierResponse } from "./types";
 import { ErrorResponseHandler } from "../../../../common/types";
@@ -65,7 +60,8 @@ import { useNavigate } from "react-router-dom";
 import { useAppDispatch } from "../../../../store";
 import { hasPermission } from "../../../../common/SecureComponent";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
-
+import TierOnlineIcon from "../../../../icons/TierOnlineIcon";
+import TierOfflineIcon from "../../../../icons/TierOfflineIcon";
 const UpdateTierCredentialsModal = withSuspense(
   React.lazy(() => import("./UpdateTierCredentialsModal"))
 );
@@ -233,35 +229,38 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
   const renderTierStatus = (item: boolean) => {
     if (item) {
       return (
-        <Box
+        <Grid
+          container
           sx={{
             display: "flex",
             alignItems: "center",
-            "& .min-icon": {
-              width: "18px",
-              height: "22px",
-              fill: "#4CCB92",
-            },
+            justifyItems: "start",
+            color: "#4CCB92",
+            fontSize: "8px",
           }}
+          flexDirection={"column"}
+          display={"flex"}
         >
-          <CircleIcon />
-        </Box>
+          <TierOnlineIcon />
+          ONLINE
+        </Grid>
       );
     }
     return (
-      <Box
+      <Grid
+        container
         sx={{
           display: "flex",
           alignItems: "center",
-          "& .min-icon": {
-            width: "18px",
-            height: "22px",
-            fill: "#C83B51",
-          },
+          color: "#C83B51",
+          fontSize: "8px",
         }}
+        flexDirection={"column"}
+        display={"flex"}
       >
-        <CircleIcon />
-      </Box>
+        <TierOfflineIcon />
+        OFFLINE
+      </Grid>
     );
   };
 
@@ -364,6 +363,7 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
                 overrideClass={classes.searchField}
                 value={filter}
               />
+
               <div className={classes.rightActionButtons}>
                 <Button
                   id={"refresh-list"}