From f5a122aa76bd123e457eebd49ee52b5b53875790 Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Thu, 25 Apr 2024 13:13:36 -0400 Subject: [PATCH 1/4] Small PG UX updates --- .../PlacementGroupSelectOption.tsx | 2 +- .../PlacementGroupsSelect.tsx | 28 ++++++++++++++++--- .../components/TextTooltip/TextTooltip.tsx | 7 +++++ .../PlacementGroupsRow.tsx | 15 ++++++---- 4 files changed, 42 insertions(+), 10 deletions(-) diff --git a/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupSelectOption.tsx b/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupSelectOption.tsx index 3dc11d5ecda..8ba5ab40b81 100644 --- a/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupSelectOption.tsx +++ b/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupSelectOption.tsx @@ -15,7 +15,7 @@ import type { ListItemComponentsPropsOverrides } from '@mui/material/ListItem'; interface PlacementGroupSelectOptionProps { disabled?: boolean; - label: string; + label: JSX.Element; props: React.HTMLAttributes; selected?: boolean; value: PlacementGroup; diff --git a/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupsSelect.tsx b/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupsSelect.tsx index 8ac18bd25ad..5a0bc5cb274 100644 --- a/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupsSelect.tsx +++ b/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupsSelect.tsx @@ -4,6 +4,7 @@ import { SxProps } from '@mui/system'; import * as React from 'react'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; +import { Stack } from 'src/components/Stack'; import { TextFieldProps } from 'src/components/TextField'; import { hasPlacementGroupReachedCapacity } from 'src/features/PlacementGroups/utils'; import { useAllPlacementGroupsQuery } from 'src/queries/placementGroups'; @@ -71,8 +72,27 @@ export const PlacementGroupsSelect = (props: PlacementGroupsSelectProps) => { return null; } - const formatLabel = (placementGroup: PlacementGroup) => - `${placementGroup.label} (${AFFINITY_TYPES[placementGroup.affinity_type]})`; + const optionLabel = (placementGroup: PlacementGroup, selected?: boolean) => ( + + {placementGroup.label}{' '} + + ({AFFINITY_TYPES[placementGroup.affinity_type]}) + + + ); const placementGroupsOptions: PlacementGroup[] = placementGroups.filter( (placementGroup) => placementGroup.region === selectedRegion?.id @@ -96,7 +116,7 @@ export const PlacementGroupsSelect = (props: PlacementGroupsSelectProps) => { { disableClearable={!clearable} disabled={Boolean(!selectedRegion?.id) || disabled} errorText={errorText} - getOptionLabel={formatLabel} + getOptionLabel={(placementGroup: PlacementGroup) => placementGroup.label} id={id} label={label} loading={isLoading || loading} diff --git a/packages/manager/src/components/TextTooltip/TextTooltip.tsx b/packages/manager/src/components/TextTooltip/TextTooltip.tsx index fb51b2a4b5e..d9cb98a03e2 100644 --- a/packages/manager/src/components/TextTooltip/TextTooltip.tsx +++ b/packages/manager/src/components/TextTooltip/TextTooltip.tsx @@ -9,6 +9,10 @@ import type { TooltipProps } from '@mui/material/Tooltip'; import type { TypographyProps } from 'src/components/Typography'; export interface TextTooltipProps { + /** + * Props to pass to the Popper component + */ + PopperProps?: TooltipProps['PopperProps']; /** The text to hover on to display the tooltip */ displayText: string; /** If true, the tooltip will not have a min-width of 375px @@ -36,6 +40,7 @@ export interface TextTooltipProps { */ export const TextTooltip = (props: TextTooltipProps) => { const { + PopperProps, displayText, minWidth, placement, @@ -47,7 +52,9 @@ export const TextTooltip = (props: TextTooltipProps) => { return ( div': { minWidth: minWidth ? minWidth : 375, }, diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsRow.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsRow.tsx index ce1a2257027..900dc4a0906 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsRow.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsRow.tsx @@ -85,20 +85,25 @@ export const PlacementGroupsRow = React.memo( '0' ) : ( {assignedLinodes?.map((linode, idx) => ( - - {linode.label} + + {linode.label} ))} } displayText={`${assignedLinodes?.length ?? 0}`} minWidth={250} + placement="bottom-start" /> )}   of{' '} From 4ef538824090c4354bf96a067edebb442814ec6b Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Thu, 25 Apr 2024 13:36:46 -0400 Subject: [PATCH 2/4] Added changeset: Update Placement GroupTable Row linodes tooltip and SelectPlacementGroup option label --- .../.changeset/pr-10408-upcoming-features-1714066606151.md | 5 +++++ .../PlacementGroupsSelect/PlacementGroupsSelect.test.tsx | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 packages/manager/.changeset/pr-10408-upcoming-features-1714066606151.md diff --git a/packages/manager/.changeset/pr-10408-upcoming-features-1714066606151.md b/packages/manager/.changeset/pr-10408-upcoming-features-1714066606151.md new file mode 100644 index 00000000000..05ec6e0bac5 --- /dev/null +++ b/packages/manager/.changeset/pr-10408-upcoming-features-1714066606151.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Update Placement GroupTable Row linodes tooltip and SelectPlacementGroup option label ([#10408](https://github.com/linode/manager/pull/10408)) diff --git a/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupsSelect.test.tsx b/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupsSelect.test.tsx index 5ca36284321..e276ee809b7 100644 --- a/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupsSelect.test.tsx +++ b/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupsSelect.test.tsx @@ -102,10 +102,10 @@ describe('PlacementGroupSelect', () => { fireEvent.focus(select); fireEvent.change(select, { - target: { value: 'my-placement-group (Affinity)' }, + target: { value: 'my-placement-group' }, }); - const selectedRegionOption = getByText('my-placement-group (Affinity)'); + const selectedRegionOption = getByText('my-placement-group'); fireEvent.click(selectedRegionOption); expect( From 1e2a7d4b9a82b5341a4a507b8477a84257265c6f Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Fri, 26 Apr 2024 10:43:14 -0400 Subject: [PATCH 3/4] Feedback @bnussman-akamai & @mjac0bs --- ...r-10408-upcoming-features-1714066606151.md | 2 +- .../PlacementGroupSelectOption.tsx | 18 ++++++++++-- .../PlacementGroupsSelect.tsx | 28 ++----------------- .../PlacementGroupsDetailPanel.tsx | 9 +++++- 4 files changed, 26 insertions(+), 31 deletions(-) diff --git a/packages/manager/.changeset/pr-10408-upcoming-features-1714066606151.md b/packages/manager/.changeset/pr-10408-upcoming-features-1714066606151.md index 05ec6e0bac5..f860095a1bd 100644 --- a/packages/manager/.changeset/pr-10408-upcoming-features-1714066606151.md +++ b/packages/manager/.changeset/pr-10408-upcoming-features-1714066606151.md @@ -2,4 +2,4 @@ "@linode/manager": Upcoming Features --- -Update Placement GroupTable Row linodes tooltip and SelectPlacementGroup option label ([#10408](https://github.com/linode/manager/pull/10408)) +Update Placement Group Table Row linodes tooltip and SelectPlacementGroup option label ([#10408](https://github.com/linode/manager/pull/10408)) diff --git a/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupSelectOption.tsx b/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupSelectOption.tsx index 8ba5ab40b81..bc9c85d1c94 100644 --- a/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupSelectOption.tsx +++ b/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupSelectOption.tsx @@ -1,8 +1,9 @@ -import { PlacementGroup } from '@linode/api-v4'; +import { AFFINITY_TYPES, PlacementGroup } from '@linode/api-v4'; import { visuallyHidden } from '@mui/utils'; import React from 'react'; import { Box } from 'src/components/Box'; +import { Stack } from 'src/components/Stack'; import { Tooltip } from 'src/components/Tooltip'; import { PLACEMENT_GROUP_HAS_NO_CAPACITY } from 'src/features/PlacementGroups/constants'; @@ -15,7 +16,7 @@ import type { ListItemComponentsPropsOverrides } from '@mui/material/ListItem'; interface PlacementGroupSelectOptionProps { disabled?: boolean; - label: JSX.Element; + label: string; props: React.HTMLAttributes; selected?: boolean; value: PlacementGroup; @@ -63,7 +64,18 @@ export const PlacementGroupSelectOption = ({ aria-disabled={undefined} > - {label} + + {label} + + + ({AFFINITY_TYPES[value.affinity_type]}) + + {disabled && ( { return null; } - const optionLabel = (placementGroup: PlacementGroup, selected?: boolean) => ( - - {placementGroup.label}{' '} - - ({AFFINITY_TYPES[placementGroup.affinity_type]}) - - - ); - const placementGroupsOptions: PlacementGroup[] = placementGroups.filter( (placementGroup) => placementGroup.region === selectedRegion?.id ); @@ -116,7 +92,7 @@ export const PlacementGroupsSelect = (props: PlacementGroupsSelectProps) => { { mb: 1, width: '100%', }} + textFieldProps={{ + tooltipClasses: 'poo', + tooltipPosition: 'right', + tooltipText: PLACEMENT_GROUP_SELECT_TOOLTIP_COPY, + }} disabled={isPlacementGroupSelectDisabled} label={placementGroupSelectLabel} noOptionsMessage="There are no Placement Groups in this region." selectedPlacementGroup={selectedPlacementGroup} selectedRegion={selectedRegion} - textFieldProps={{ tooltipText: PLACEMENT_GROUP_SELECT_TOOLTIP_COPY }} /> {selectedRegion && hasRegionPlacementGroupCapability && (