Made reusable component for Usage clarifying content

Author: Jillian Inapurapu

portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx

@@ -38,6 +38,7 @@ import {
 } from "../../../../common/SecureComponent/permissions";
 import { hasPermission } from "../../../../common/SecureComponent";
 import { Bucket } from "../../../../api/consoleApi";
+import { usageClarifyingContent } from "screens/Console/Dashboard/BasicDashboard/ReportedUsage";
 
 const BucketItemMain = styled.div(({ theme }) => ({
   border: `${get(theme, "borderColor", "#eaeaea")} 1px solid`,
@@ -221,33 +222,7 @@ const BucketListItem = ({
           {bucket.details?.versioning && (
             <HelpTip
               content={
-                <Fragment>
-                  <div>
-                    <strong> Not what you expected?</strong>
-                    <br />
-                    This Usage value is comparable to{" "}
-                    <strong>mc du --versions</strong> which represents the size
-                    of all object versions that exist in the bucket.
-                    <br />
-                    Running{" "}
-                    <a
-                      target="_blank"
-                      href="https://min.io/docs/minio/linux/reference/minio-mc/mc-du.html"
-                    >
-                      mc du
-                    </a>{" "}
-                    without the <strong>--versions</strong> flag or{" "}
-                    <a
-                      target="_blank"
-                      href="https://man7.org/linux/man-pages/man1/df.1.html"
-                    >
-                      df
-                    </a>{" "}
-                    will provide different values corresponding to the size of
-                    all <strong>current</strong> versions and the physical disk
-                    space occupied respectively.
-                  </div>
-                </Fragment>
+                usageClarifyingContent
               }
               placement="top"
             >

portal-ui/src/screens/Console/Dashboard/BasicDashboard/ReportedUsage.tsx

@@ -53,6 +53,34 @@ const ReportedUsageMain = styled.div(({ theme }) => ({
     },
   },
 }));
+export const usageClarifyingContent = 
+  <Fragment>
+  <div>
+    <strong> Not what you expected?</strong>
+    <br />
+    This Usage value is comparable to{" "}
+    <strong>mc du --versions</strong> which represents the size of
+    all object versions that exist in the buckets.
+    <br />
+    Running{" "}
+    <a
+      target="_blank"
+      href="https://min.io/docs/minio/linux/reference/minio-mc/mc-du.html"
+    >
+      mc du
+    </a>{" "}
+    without the <strong>--versions</strong> flag or{" "}
+    <a
+      target="_blank"
+      href="https://man7.org/linux/man-pages/man1/df.1.html"
+    >
+      df
+    </a>{" "}
+    will provide different values corresponding to the size of all{" "}
+    <strong>current</strong> versions and the physical disk space
+    occupied respectively.
+  </div>
+</Fragment>
 
 const ReportedUsage = ({
   usageValue,
@@ -63,6 +91,7 @@ const ReportedUsage = ({
   total: number | string;
   unit: string;
 }) => {
+  
   const plotValues = [
     { value: total, color: "#D6D6D6", label: "Free Space" },
     {
@@ -81,33 +110,7 @@ const ReportedUsage = ({
 
         <HelpTip
           content={
-            <Fragment>
-              <div>
-                <strong> Not what you expected?</strong>
-                <br />
-                This Usage value is comparable to{" "}
-                <strong>mc du --versions</strong> which represents the size of
-                all object versions that exist in the buckets.
-                <br />
-                Running{" "}
-                <a
-                  target="_blank"
-                  href="https://min.io/docs/minio/linux/reference/minio-mc/mc-du.html"
-                >
-                  mc du
-                </a>{" "}
-                without the <strong>--versions</strong> flag or{" "}
-                <a
-                  target="_blank"
-                  href="https://man7.org/linux/man-pages/man1/df.1.html"
-                >
-                  df
-                </a>{" "}
-                will provide different values corresponding to the size of all{" "}
-                <strong>current</strong> versions and the physical disk space
-                occupied respectively.
-              </div>
-            </Fragment>
+            usageClarifyingContent
           }
           placement="left"
         >

portal-ui/src/screens/Console/ObjectBrowser/OBBucketList.tsx

@@ -51,6 +51,7 @@ import { Bucket } from "../../../api/consoleApi";
 import { api } from "../../../api";
 import { errorToHandler } from "../../../api/errors";
 import HelpMenu from "../HelpMenu";
+import { usageClarifyingContent } from "../Dashboard/BasicDashboard/ReportedUsage";
 
 const OBListBuckets = () => {
   const dispatch = useAppDispatch();
@@ -223,35 +224,7 @@ const OBListBuckets = () => {
                       >
                         <HelpTip
                           content={
-                            <Fragment>
-                              <div>
-                                <strong> Not what you expected?</strong>
-                                <br />
-                                This Usage value is comparable to{" "}
-                                <strong>mc du --versions</strong> which
-                                represents the size of all object versions that
-                                exist in the bucket.
-                                <br />
-                                Running{" "}
-                                <a
-                                  target="_blank"
-                                  href="https://min.io/docs/minio/linux/reference/minio-mc/mc-du.html"
-                                >
-                                  mc du
-                                </a>{" "}
-                                without the <strong>--versions</strong> flag or{" "}
-                                <a
-                                  target="_blank"
-                                  href="https://man7.org/linux/man-pages/man1/df.1.html"
-                                >
-                                  df
-                                </a>{" "}
-                                will provide different values corresponding to
-                                the size of all <strong>current</strong>{" "}
-                                versions and the physical disk space occupied
-                                respectively.
-                              </div>
-                            </Fragment>
+                           usageClarifyingContent
                           }
                           placement="right"
                         >