upcoming: [M3-7980] - Update PlacementGroups linodes tooltip and SelectPlacementGroup option label

packages/manager/.changeset/pr-10408-upcoming-features-1714066606151.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Update Placement Group Table Row linodes tooltip and SelectPlacementGroup option label ([#10408](https://github.com/linode/manager/pull/10408))

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';
 
@@ -63,7 +64,18 @@ export const PlacementGroupSelectOption = ({
         aria-disabled={undefined}
       >
         <Box alignItems="center" display="flex" flexGrow={1}>
-          {label}
+          <Stack alignItems="center" direction="row" flexGrow={1} gap={2}>
+            <Stack>{label}</Stack>
+            <Stack flexGrow={1} />
+            <Stack
+              sx={{
+                position: 'relative',
+                right: selected ? 14 : 34,
+              }}
+            >
+              ({AFFINITY_TYPES[value.affinity_type]})
+            </Stack>
+          </Stack>
           {disabled && (
             <Box
               sx={visuallyHidden}

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(

packages/manager/src/components/PlacementGroupsSelect/PlacementGroupsSelect.tsx

@@ -1,6 +1,4 @@
-import { AFFINITY_TYPES } from '@linode/api-v4';
 import { APIError } from '@linode/api-v4/lib/types';
-import { SxProps } from '@mui/system';
 import * as React from 'react';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
@@ -11,6 +9,7 @@ import { useAllPlacementGroupsQuery } from 'src/queries/placementGroups';
 import { PlacementGroupSelectOption } from './PlacementGroupSelectOption';
 
 import type { PlacementGroup, Region } from '@linode/api-v4';
+import type { SxProps } from '@mui/system';
 
 export interface PlacementGroupsSelectProps {
   clearable?: boolean;
@@ -71,9 +70,6 @@ export const PlacementGroupsSelect = (props: PlacementGroupsSelectProps) => {
     return null;
   }
 
-  const formatLabel = (placementGroup: PlacementGroup) =>
-    `${placementGroup.label} (${AFFINITY_TYPES[placementGroup.affinity_type]})`;
-
   const placementGroupsOptions: PlacementGroup[] = placementGroups.filter(
     (placementGroup) => placementGroup.region === selectedRegion?.id
   );
@@ -96,7 +92,7 @@ export const PlacementGroupsSelect = (props: PlacementGroupsSelectProps) => {
           <PlacementGroupSelectOption
             disabled={isDisabledPlacementGroup(option, selectedRegion)}
             key={option.id}
-            label={formatLabel(option)}
+            label={option.label}
             props={props}
             selected={selected}
             value={option}
@@ -109,7 +105,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}

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 (
     <StyledRootTooltip
       PopperProps={{
+        ...PopperProps,
         sx: {
+          ...PopperProps?.sx,
           '& > div': {
             minWidth: minWidth ? minWidth : 375,
           },

packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.tsx

@@ -123,12 +123,15 @@ export const PlacementGroupsDetailPanel = (props: Props) => {
             mb: 1,
             width: '100%',
           }}
+          textFieldProps={{
+            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 && (
           <Button
@@ -142,6 +145,9 @@ export const PlacementGroupsDetailPanel = (props: Props) => {
               mt: -0.75,
               p: 0,
             })}
+            sxEndIcon={{
+              color: theme.color.grey4,
+            }}
             onClick={() => setIsCreatePlacementGroupDrawerOpen(true)}
             tooltipText="This region has reached its Placement Group capacity."
             variant="text"

packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsRow.tsx

@@ -85,20 +85,25 @@ export const PlacementGroupsRow = React.memo(
             '0'
           ) : (
             <TextTooltip
+              PopperProps={{
+                sx: {
+                  '& .MuiTooltip-tooltip': {
+                    transform: 'translateX(-16px) !important',
+                  },
+                },
+              }}
               tooltipText={
                 <List>
                   {assignedLinodes?.map((linode, idx) => (
-                    <ListItem
-                      key={`pg-linode-${idx}`}
-                      sx={{ paddingBottom: 0.5, paddingTop: 0.5 }}
-                    >
-                      {linode.label}
+                    <ListItem key={`pg-linode-${idx}`} sx={{ p: 0.5 }}>
+                      <Link to={`linodes/${linode.id}`}>{linode.label}</Link>
                     </ListItem>
                   ))}
                 </List>
               }
               displayText={`${assignedLinodes?.length ?? 0}`}
               minWidth={250}
+              placement="bottom-start"
             />
           )}
           &nbsp; of{' '}