diff --git a/src/pages/images/CustomIsoSelector.tsx b/src/pages/images/CustomIsoSelector.tsx index 4426337e9a..4ff1a36995 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: { @@ -105,7 +113,7 @@ const CustomIsoSelector: FC = ({ paginate={30} responsive sortable - className="u-table-layout--auto" + className="table-iso-select u-table-layout--auto" emptyStateMsg={ isLoading ? ( diff --git a/src/pages/storage/CustomVolumeSelectModal.tsx b/src/pages/storage/CustomVolumeSelectModal.tsx index 75b7101a43..0d180081a8 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, }, ], }; @@ -127,7 +135,7 @@ const CustomVolumeSelectModal: FC = ({ 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 c8d8479f00..4bb66c75d3 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 b46cfd494c..17c639a2e7 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; + } + } }