fix(instance) make rows in iso and custom-volume modals clickable WD-…

…8689 Signed-off-by: David Edler <david.edler@canonical.com>
canonical · Feb 26, 2024 · 260d004 · 260d004
1 parent 4e0bebd
commit 260d004
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git a/src/pages/images/CustomIsoSelector.tsx b/src/pages/images/CustomIsoSelector.tsx
@@ -39,7 +39,10 @@ const CustomIsoSelector: FC<Props> = ({
   ];
 
   const rows = images.map((image) => {
+    const selectIso = () => onSelect(image, "virtual-machine");
+
     return {
+      className: "u-row",
       columns: [
         {
           content: (
@@ -49,23 +52,27 @@ const CustomIsoSelector: FC<Props> = ({
           ),
           role: "cell",
           "aria-label": "Name",
+          onClick: selectIso,
         },
         {
           content: image.pool,
           role: "cell",
           "aria-label": "Storage pool",
+          onClick: selectIso,
         },
         {
           content: isoTimeToString(new Date(image.created_at).toISOString()),
           role: "cell",
           "aria-label": "Uploaded at",
+          onClick: selectIso,
         },
         {
           content:
             image.volume?.config.size &&
             humanFileSize(+image.volume.config.size),
           role: "cell",
           "aria-label": "Size",
+          onClick: selectIso,
         },
         {
           content: (
@@ -76,7 +83,7 @@ const CustomIsoSelector: FC<Props> = ({
                   ? "positive"
                   : ""
               }
-              onClick={() => onSelect(image, "virtual-machine")}
+              onClick={selectIso}
               dense
             >
               Select
@@ -85,6 +92,7 @@ const CustomIsoSelector: FC<Props> = ({
           role: "cell",
           "aria-label": "Actions",
           className: "u-align--right",
+          onClick: selectIso,
         },
       ],
       sortData: {
@@ -102,10 +110,9 @@ const CustomIsoSelector: FC<Props> = ({
         <MainTable
           headers={headers}
           rows={rows}
-          paginate={30}
           responsive
           sortable
-          className="u-table-layout--auto"
+          className="table-iso-select u-table-layout--auto"
           emptyStateMsg={
             isLoading ? (
               <Loader text="Loading images..." />

diff --git a/src/pages/storage/CustomVolumeSelectModal.tsx b/src/pages/storage/CustomVolumeSelectModal.tsx
@@ -59,7 +59,10 @@ const CustomVolumeSelectModal: FC<Props> = ({
     : volumes
         .sort((a, b) => (a.created_at > b.created_at ? -1 : 1))
         .map((volume) => {
+          const selectVolume = () => handleSelect(volume);
+
           return {
+            className: "u-row",
             columns: [
               {
                 content: (
@@ -72,21 +75,25 @@ const CustomVolumeSelectModal: FC<Props> = ({
                 ),
                 role: "cell",
                 "aria-label": "Name",
+                onClick: selectVolume,
               },
               {
                 content: volume.pool,
                 role: "cell",
                 "aria-label": "Storage pool",
+                onClick: selectVolume,
               },
               {
                 content: renderContentType(volume),
                 role: "cell",
                 "aria-label": "Content type",
+                onClick: selectVolume,
               },
               {
                 content: volume.used_by?.length,
                 role: "cell",
                 "aria-label": "Used by",
+                onClick: selectVolume,
               },
               {
                 content: (
@@ -108,6 +115,7 @@ const CustomVolumeSelectModal: FC<Props> = ({
                 role: "cell",
                 "aria-label": "Actions",
                 className: "u-align--right",
+                onClick: selectVolume,
               },
             ],
           };
@@ -125,9 +133,8 @@ const CustomVolumeSelectModal: FC<Props> = ({
           id="volume-select-table"
           headers={headers}
           rows={rows}
-          paginate={30}
           sortable
-          className="u-table-layout--auto"
+          className="table-volume-select u-table-layout--auto"
           emptyStateMsg={
             isLoading || isFetching ? (
               <Loader text="Loading volumes..." />

diff --git a/src/sass/_custom_isos.scss b/src/sass/_custom_isos.scss
@@ -13,4 +13,11 @@
   .iso-name {
     max-width: 20rem;
   }
+
+  .table-iso-select {
+    .u-row:hover {
+      background-color: $colors--light-theme--background-hover;
+      cursor: pointer;
+    }
+  }
 }
diff --git a/src/sass/_storage_volume_form.scss b/src/sass/_storage_volume_form.scss
@@ -21,4 +21,11 @@
     min-height: 100%;
     padding-bottom: 0;
   }
+
+  .table-volume-select {
+    .u-row:hover {
+      background-color: $colors--light-theme--background-hover;
+      cursor: pointer;
+    }
+  }
 }