@@ -45,6 +45,9 @@ import type {
4545} from './constants' ;
4646import type { Filter , Image } from '@linode/api-v4' ;
4747import type { LinkProps } from '@tanstack/react-router' ;
48+ import type { IMAGE_SELECT_TABLE_SHARE_GROUP_CREATE_PENDO_IDS } from 'src/components/ImageSelect/constants' ;
49+
50+ type SelectionMode = 'multi' | 'single' ;
4851
4952interface Props {
5053 /**
@@ -56,6 +59,7 @@ interface Props {
5659 * Error message to display above the table, e.g. from form validation.
5760 */
5861 errorText ?: string ;
62+
5963 /**
6064 * Determines whether additional filtering of images should be applied, typically if there is a StackScript selected.
6165 */
@@ -69,12 +73,18 @@ interface Props {
6973 */
7074 pendoIDs :
7175 | typeof IMAGE_SELECT_TABLE_LINODE_CREATE_PENDO_IDS
72- | typeof IMAGE_SELECT_TABLE_LINODE_REBUILD_PENDO_IDS ;
76+ | typeof IMAGE_SELECT_TABLE_LINODE_REBUILD_PENDO_IDS
77+ | typeof IMAGE_SELECT_TABLE_SHARE_GROUP_CREATE_PENDO_IDS ;
7378 queryParamsPrefix ?: string ;
7479 /**
75- * The ID of the currently selected image .
80+ * The IDs of the currently selected images, when using multi-select mode with checkboxes .
7681 */
77- selectedImageId ?: null | string ;
82+ selectedImageIds : string [ ] ;
83+ /**
84+ * Whether this table should use single-select mode with radio buttons, or multi-select mode with checkboxes.
85+ * The default is single select.
86+ */
87+ selectionMode : SelectionMode ;
7888}
7989
8090type OptionType = { label : string ; value : string } ;
@@ -87,7 +97,8 @@ export const ImageSelectTable = (props: Props) => {
8797 onSelect,
8898 pendoIDs,
8999 queryParamsPrefix,
90- selectedImageId,
100+ selectionMode,
101+ selectedImageIds,
91102 } = props ;
92103
93104 const theme = useTheme ( ) ;
@@ -261,29 +272,31 @@ export const ImageSelectTable = (props: Props) => {
261272 < Hidden lgDown >
262273 < TableHeaderCell > Replicated in</ TableHeaderCell >
263274 </ Hidden >
264- < Hidden smDown >
265- < TableHeaderCell
266- style = { { whiteSpace : 'nowrap' , ...TABLE_CELL_BASE_STYLE } }
267- >
268- < Stack alignItems = "center" direction = "row" >
269- Share Group
270- < TooltipIcon
271- data-pendo-id = { pendoIDs . shareGroupInfoIcon }
272- status = "info"
273- sxTooltipIcon = { {
274- padding : '4px' ,
275- } }
276- text = { SHARE_GROUP_COLUMN_HEADER_TOOLTIP }
277- tooltipPosition = "right"
278- />
279- </ Stack >
280- </ TableHeaderCell >
281- </ Hidden >
275+ { selectionMode === 'single' && (
276+ < Hidden smDown >
277+ < TableHeaderCell
278+ style = { { whiteSpace : 'nowrap' , ...TABLE_CELL_BASE_STYLE } }
279+ >
280+ < Stack alignItems = "center" direction = "row" >
281+ Share Group
282+ < TooltipIcon
283+ data-pendo-id = { pendoIDs . shareGroupInfoIcon }
284+ status = "info"
285+ sxTooltipIcon = { {
286+ padding : '4px' ,
287+ } }
288+ text = { SHARE_GROUP_COLUMN_HEADER_TOOLTIP }
289+ tooltipPosition = "right"
290+ />
291+ </ Stack >
292+ </ TableHeaderCell >
293+ </ Hidden >
294+ ) }
282295 < Hidden lgDown >
283296 < TableHeaderCell
284297 style = { { whiteSpace : 'nowrap' , ...TABLE_CELL_BASE_STYLE } }
285298 >
286- Size
299+ { selectionMode === 'single' ? ' Size' : 'Original Image' }
287300 </ TableHeaderCell >
288301 </ Hidden >
289302 < TableHeaderCell
@@ -324,7 +337,8 @@ export const ImageSelectTable = (props: Props) => {
324337 onSelect = { ( ) => onSelect ( image ) }
325338 pendoIDs = { pendoIDs }
326339 regions = { regions ?? [ ] }
327- selected = { image . id === selectedImageId }
340+ selectedImageIds = { selectedImageIds }
341+ selectionMode = { selectionMode }
328342 timezone = { profile ?. timezone }
329343 />
330344 ) ) }
0 commit comments