diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx index 2434713be..f99e8a699 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx @@ -68,12 +68,17 @@ export const ThroughputBucketsComponent: FC = ( key: NoDefaultThroughputSelectedKey, text: "No Default Throughput Bucket Selected", }; - const throughputBucketOptions: IDropdownOption[] = throughputBuckets - .filter((bucket) => bucket.maxThroughputPercentage !== 100) - .map((bucket) => ({ - key: bucket.id, - text: `Bucket ${bucket.id} - ${bucket.maxThroughputPercentage}%`, - })); + + const throughputBucketOptions: IDropdownOption[] = throughputBuckets.map((bucket) => ({ + key: bucket.id, + text: `Bucket ${bucket.id} - ${bucket.maxThroughputPercentage}%`, + disabled: bucket.maxThroughputPercentage === 100, + ...(bucket.maxThroughputPercentage === 100 && { + data: { + tooltip: `Bucket ${bucket.id} is not active.`, + }, + }), + })); return [noDefaultThroughputBucketSelected, ...throughputBucketOptions]; }; @@ -206,8 +211,20 @@ export const ThroughputBucketsComponent: FC = ( NoDefaultThroughputSelectedKey } onChange={(_, option) => onDefaultBucketToggle(option.key as number, true)} - styles={{ root: { width: "50%" } }} onRenderLabel={onRenderDefaultThroughputBucketLabel} + onRenderOption={(option: IDropdownOption) => { + const tooltip: string = option?.data?.tooltip; + if (!tooltip) { + return <>{option?.text}; + } + + return ( + + {option?.text} + + ); + }} + styles={{ root: { width: "50%" } }} /> );