diff --git a/src/pages/images/CustomIsoSelector.tsx b/src/pages/images/CustomIsoSelector.tsx index 4426337e9..9a905d740 100644 --- a/src/pages/images/CustomIsoSelector.tsx +++ b/src/pages/images/CustomIsoSelector.tsx @@ -39,7 +39,10 @@ const CustomIsoSelector: FC = ({ ]; const rows = images.map((image) => { + const selectIso = () => onSelect(image, "virtual-machine"); + return { + className: "u-row", columns: [ { content: ( @@ -49,16 +52,19 @@ const CustomIsoSelector: FC = ({ ), 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: @@ -66,6 +72,7 @@ const CustomIsoSelector: FC = ({ humanFileSize(+image.volume.config.size), role: "cell", "aria-label": "Size", + onClick: selectIso, }, { content: ( @@ -76,7 +83,7 @@ const CustomIsoSelector: FC = ({ ? "positive" : "" } - onClick={() => onSelect(image, "virtual-machine")} + onClick={selectIso} dense > Select @@ -85,6 +92,7 @@ const CustomIsoSelector: FC = ({ role: "cell", "aria-label": "Actions", className: "u-align--right", + onClick: selectIso, }, ], sortData: { @@ -102,10 +110,8 @@ const CustomIsoSelector: FC = ({ diff --git a/src/pages/storage/CustomVolumeSelectModal.tsx b/src/pages/storage/CustomVolumeSelectModal.tsx index 75b7101a4..d37f7340c 100644 --- a/src/pages/storage/CustomVolumeSelectModal.tsx +++ b/src/pages/storage/CustomVolumeSelectModal.tsx @@ -59,7 +59,10 @@ const CustomVolumeSelectModal: FC = ({ : 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 = ({ ), 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 = ({ role: "cell", "aria-label": "Actions", className: "u-align--right", + onClick: selectVolume, }, ], }; @@ -125,9 +133,8 @@ const CustomVolumeSelectModal: FC = ({ 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 ? ( diff --git a/src/sass/_custom_isos.scss b/src/sass/_custom_isos.scss index c8d8479f0..4bb66c75d 100644 --- 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 index b46cfd494..17c639a2e 100644 --- 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; + } + } }