feat: [UIE-8193] - Tooltip for Create/Resize Database table (#11223)

* feat: [UIE-8193] - Tooltip for Create/Resize Database table

* Added changeset: Tooltip for 'Usable Storage' in Create/Resize Database Table

* feat: [UIE-8193] - Tooltip context for small screens

packages/manager/.changeset/pr-11223-added-1730985113933.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Tooltip for 'Usable Storage' in Create/Resize Database Table ([#11223](https://github.com/linode/manager/pull/11223))

packages/manager/src/components/SelectionCard/CardBase.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import { useFlags } from 'src/hooks/useFlags';
+
 import {
   CardBaseGrid,
   CardBaseHeading,
@@ -36,6 +38,18 @@ export const CardBase = (props: CardBaseProps) => {
     sxSubheading,
   } = props;
 
+  const flags = useFlags();
+
+  const isDatabaseCreateFlow = location.pathname.includes('/databases/create');
+  const isDatabaseResizeFlow =
+    location.pathname.match(/\/databases\/.*\/(\d+\/resize)/)?.[0] ===
+    location.pathname;
+
+  const isDatabaseGA =
+    !flags.dbaasV2?.beta &&
+    flags.dbaasV2?.enabled &&
+    (isDatabaseCreateFlow || isDatabaseResizeFlow);
+
   const renderSubheadings = subheadings.map((subheading, idx) => {
     const subHeadingIsString = typeof subheading === 'string';
 
@@ -46,7 +60,9 @@ export const CardBase = (props: CardBaseProps) => {
         key={idx}
         sx={sxSubheading}
       >
-        {subheading}
+        {subHeadingIsString && isDatabaseGA
+          ? subheading?.replace('Storage', 'Usable Storage')
+          : subheading}
       </CardBaseSubheading>
     );
   });

packages/manager/src/components/TooltipIcon.tsx

@@ -11,7 +11,7 @@ import * as React from 'react';
 import type { TooltipProps } from '@linode/ui';
 import type { SxProps, Theme } from '@mui/material/styles';
 
-type TooltipIconStatus =
+export type TooltipIconStatus =
   | 'error'
   | 'help'
   | 'info'

packages/manager/src/features/components/PlansPanel/PlanContainer.tsx

@@ -14,7 +14,7 @@ import { PlanSelectionTable } from './PlanSelectionTable';
 import type { PlanWithAvailability } from './types';
 import type { Region } from '@linode/api-v4';
 import type { LinodeTypeClass } from '@linode/api-v4/lib/linodes';
-
+import type { Theme } from '@mui/material/styles';
 export interface PlanContainerProps {
   allDisabledPlans: PlanWithAvailability[];
   currentPlanHeading?: string;
@@ -65,6 +65,10 @@ export const PlanContainer = (props: PlanContainerProps) => {
   const shouldDisplayNoRegionSelectedMessage =
     !selectedRegionId && !isDatabaseCreateFlow && !isDatabaseResizeFlow;
 
+  const isDatabaseGA =
+    !flags.dbaasV2?.beta &&
+    flags.dbaasV2?.enabled &&
+    (isDatabaseCreateFlow || isDatabaseResizeFlow);
   interface PlanSelectionDividerTable {
     header?: string;
     planFilter?: (plan: PlanWithAvailability) => boolean;
@@ -142,6 +146,18 @@ export const PlanContainer = (props: PlanContainerProps) => {
   return (
     <Grid container spacing={2}>
       <Hidden lgUp={isCreate} mdUp={!isCreate}>
+        {isCreate && isDatabaseGA && (
+          <Typography
+            sx={(theme: Theme) => ({
+              marginBottom: theme.spacing(2),
+              marginLeft: theme.spacing(1),
+              marginTop: theme.spacing(1),
+            })}
+          >
+            Usable storage is smaller than the actual plan storage due to the
+            overhead from the database platform.
+          </Typography>
+        )}
         {shouldDisplayNoRegionSelectedMessage ? (
           <Notice
             spacingLeft={8}
@@ -215,6 +231,7 @@ export const PlanContainer = (props: PlanContainerProps) => {
                 renderPlanSelection={renderPlanSelection}
                 showNetwork={showNetwork}
                 showTransfer={showTransfer}
+                showUsableStorage={isDatabaseCreateFlow || isDatabaseResizeFlow}
               />
             )
           )}

packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx

@@ -11,6 +11,7 @@ import { PLAN_SELECTION_NO_REGION_SELECTED_MESSAGE } from 'src/utilities/pricing
 import { StyledTable, StyledTableCell } from './PlanContainer.styles';
 
 import type { PlanWithAvailability } from './types';
+import type { TooltipIconStatus } from 'src/components/TooltipIcon';
 
 interface PlanSelectionFilterOptionsTable {
   header?: string;
@@ -27,6 +28,7 @@ interface PlanSelectionTableProps {
   shouldDisplayNoRegionSelectedMessage: boolean;
   showNetwork?: boolean;
   showTransfer?: boolean;
+  showUsableStorage?: boolean;
 }
 
 const tableCells = [
@@ -54,6 +56,7 @@ export const PlanSelectionTable = (props: PlanSelectionTableProps) => {
     shouldDisplayNoRegionSelectedMessage,
     showNetwork: shouldShowNetwork,
     showTransfer: shouldShowTransfer,
+    showUsableStorage,
   } = props;
   const flags = useFlags();
 
@@ -70,6 +73,29 @@ export const PlanSelectionTable = (props: PlanSelectionTableProps) => {
     [plans, filterOptions, flags.gpuv2]
   );
 
+  const showUsableStorageTooltip = (cellName: string) =>
+    cellName === 'Usable Storage';
+
+  const showTooltip = (
+    status: TooltipIconStatus,
+    text: JSX.Element | string,
+    width?: number
+  ) => {
+    return (
+      <TooltipIcon
+        sxTooltipIcon={{
+          height: 12,
+          marginTop: '-2px',
+          ml: 0.5,
+          px: 0,
+          py: 0,
+        }}
+        status={status}
+        text={text}
+        width={width}
+      />
+    );
+  };
   return (
     <StyledTable
       aria-label={`List of ${filterOptions?.header ?? 'Linode'} Plans`}
@@ -86,6 +112,14 @@ export const PlanSelectionTable = (props: PlanSelectionTableProps) => {
             ) {
               return null;
             }
+            if (
+              showUsableStorage &&
+              !flags.dbaasV2?.beta &&
+              flags.dbaasV2?.enabled &&
+              cellName === 'Storage'
+            ) {
+              cellName = 'Usable Storage';
+            }
             return (
               <StyledTableCell
                 center={center}
@@ -97,19 +131,17 @@ export const PlanSelectionTable = (props: PlanSelectionTableProps) => {
                 {isPlanCell && filterOptions?.header
                   ? filterOptions?.header
                   : cellName}
-                {showTransferTooltip(cellName) && (
-                  <TooltipIcon
-                    sxTooltipIcon={{
-                      height: 12,
-                      marginTop: '-2px',
-                      ml: 0.5,
-                      px: 0,
-                      py: 0,
-                    }}
-                    status="help"
-                    text="Some plans do not include bundled network transfer. If the transfer allotment is 0, all outbound network transfer is subject to standard charges."
-                  />
-                )}
+                {showTransferTooltip(cellName) &&
+                  showTooltip(
+                    'help',
+                    'Some plans do not include bundled network transfer. If the transfer allotment is 0, all outbound network transfer is subject to standard charges.'
+                  )}
+                {showUsableStorageTooltip(cellName) &&
+                  showTooltip(
+                    'help',
+                    'Usable storage is smaller than the actual plan storage due to the overhead from the database platform.',
+                    240
+                  )}
               </StyledTableCell>
             );
           })}