From f7fe8361af0507dc185d4546ff5b6095daa62205 Mon Sep 17 00:00:00 2001
From: Peter Makowski <me+git@petermakowski.io>
Date: Wed, 8 Nov 2023 14:25:36 +0200
Subject: [PATCH] refactor: update meter component

---
 package.json                                  |  2 +-
 .../StorageTable/PoolSelect/PoolSelect.tsx    | 13 ++---
 .../KVMResourceMeter/KVMResourceMeter.tsx     | 18 +++----
 .../StoragePopover/StoragePopover.tsx         | 53 ++++++++++---------
 yarn.lock                                     |  8 +--
 5 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/package.json b/package.json
index 26527ec879..dcf2d912cf 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@canonical/maas-react-components": "1.3.0",
+    "@canonical/maas-react-components": "1.5.0",
     "@canonical/macaroon-bakery": "1.3.2",
     "@canonical/react-components": "0.46.0",
     "@reduxjs/toolkit": "1.9.3",
diff --git a/src/app/kvm/components/KVMForms/ComposeForm/StorageTable/PoolSelect/PoolSelect.tsx b/src/app/kvm/components/KVMForms/ComposeForm/StorageTable/PoolSelect/PoolSelect.tsx
index 41a4490a9d..38581a08a5 100644
--- a/src/app/kvm/components/KVMForms/ComposeForm/StorageTable/PoolSelect/PoolSelect.tsx
+++ b/src/app/kvm/components/KVMForms/ComposeForm/StorageTable/PoolSelect/PoolSelect.tsx
@@ -131,8 +131,10 @@ const generateDropdownContent = (
                     value: free >= 0 ? free : 0,
                   },
                 ]}
-                label={
-                  free >= 0 ? (
+                max={pool.total}
+              >
+                <Meter.Label>
+                  {free >= 0 ? (
                     <ul className="p-inline-list u-no-margin--bottom">
                       <li
                         className="p-inline-list__item"
@@ -163,10 +165,9 @@ const generateDropdownContent = (
                       Only {byteDisplay(freeBytes, true)} GB available in {name}
                       .
                     </div>
-                  )
-                }
-                max={pool.total}
-              />
+                  )}
+                </Meter.Label>
+              </Meter>
             </div>
           </button>
         );
diff --git a/src/app/kvm/components/KVMResourceMeter/KVMResourceMeter.tsx b/src/app/kvm/components/KVMResourceMeter/KVMResourceMeter.tsx
index 59974c9831..2d38a43f3b 100644
--- a/src/app/kvm/components/KVMResourceMeter/KVMResourceMeter.tsx
+++ b/src/app/kvm/components/KVMResourceMeter/KVMResourceMeter.tsx
@@ -95,8 +95,12 @@ const KVMResourceMeter = ({
             value: free > 0 ? free : 0,
           },
         ]}
-        label={
-          detailed ? (
+        max={total}
+        size="small"
+        variant={segmented ? "segmented" : "regular"}
+      >
+        <Meter.Label className="u-align--right">
+          {detailed ? (
             <div>
               <div className="p-text--x-small-capitalised u-text--muted u-sv-1">
                 Total
@@ -110,13 +114,9 @@ const KVMResourceMeter = ({
             >
               {`${formattedAllocated} of ${formattedTotal}${formattedUnit} allocated`}
             </small>
-          )
-        }
-        labelClassName="u-align--right"
-        max={total}
-        segmented={segmented}
-        small
-      />
+          )}
+        </Meter.Label>
+      </Meter>
     </div>
   );
 };
diff --git a/src/app/kvm/components/StorageColumn/StoragePopover/StoragePopover.tsx b/src/app/kvm/components/StorageColumn/StoragePopover/StoragePopover.tsx
index 5cde7f6eb1..7822c76fc3 100644
--- a/src/app/kvm/components/StorageColumn/StoragePopover/StoragePopover.tsx
+++ b/src/app/kvm/components/StorageColumn/StoragePopover/StoragePopover.tsx
@@ -91,35 +91,38 @@ const StoragePopover = ({
                         value: freeBytes > 0 ? freeBytes : 0,
                       },
                     ]}
-                    label={
-                      <ul className="p-inline-list u-no-margin--bottom">
-                        <li
-                          className="p-inline-list__item"
-                          data-testid="pool-allocated"
-                        >
-                          <i className="p-circle--link is-inline"></i>
-                          {`${allocated.value}${allocated.unit}`}
-                        </li>
-                        {showOthers && (
+                    max={pool.total}
+                  >
+                    <Meter.Label>
+                      {
+                        <ul className="p-inline-list u-no-margin--bottom">
                           <li
                             className="p-inline-list__item"
-                            data-testid="pool-others"
+                            data-testid="pool-allocated"
                           >
-                            <i className="p-circle--positive is-inline"></i>
-                            {`${other.value}${other.unit}`}
+                            <i className="p-circle--link is-inline"></i>
+                            {`${allocated.value}${allocated.unit}`}
                           </li>
-                        )}
-                        <li
-                          className="p-inline-list__item"
-                          data-testid="pool-free"
-                        >
-                          <i className="p-circle--link-faded is-inline"></i>
-                          {`${free.value}${free.unit}`}
-                        </li>
-                      </ul>
-                    }
-                    max={pool.total}
-                  />
+                          {showOthers && (
+                            <li
+                              className="p-inline-list__item"
+                              data-testid="pool-others"
+                            >
+                              <i className="p-circle--positive is-inline"></i>
+                              {`${other.value}${other.unit}`}
+                            </li>
+                          )}
+                          <li
+                            className="p-inline-list__item"
+                            data-testid="pool-free"
+                          >
+                            <i className="p-circle--link-faded is-inline"></i>
+                            {`${free.value}${free.unit}`}
+                          </li>
+                        </ul>
+                      }
+                    </Meter.Label>
+                  </Meter>
                 </div>
               </Fragment>
             );
diff --git a/yarn.lock b/yarn.lock
index c594fb7e07..8d22d3ac46 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2907,10 +2907,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@canonical/maas-react-components@1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@canonical/maas-react-components/-/maas-react-components-1.3.0.tgz#5daa2302b7a1a061b4dad3aeb2337646810601cb"
-  integrity sha512-CVB0WHv1u0uViq0LGLvoa6dtbQEZlPP/+ovgHFJhEgbvLj9NxIfsfP/4P3OzmK/6BhGXFtwN5BKMvi55UcWlbg==
+"@canonical/maas-react-components@1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@canonical/maas-react-components/-/maas-react-components-1.5.0.tgz#3cda970c9f95a1379f22fddd37e9c94eb7e345b2"
+  integrity sha512-pef2X+mf/W+/3q3kkIBrD9gHjb0z0S+JghDkd0mlmYuCbGxb+PqXk0vzlyEfzbIsltI0H/UEJLtNhM6kVTtD9A==
 
 "@canonical/macaroon-bakery@1.3.2":
   version "1.3.2"