From edba0d286daa347a66bc1052028a7d89274105b7 Mon Sep 17 00:00:00 2001 From: mpolotsk Date: Thu, 7 Nov 2024 12:36:35 +0100 Subject: [PATCH 1/2] feat: [UIE-8193] - Tooltip for Create/Resize Database table --- .../manager/src/components/TooltipIcon.tsx | 2 +- .../components/PlansPanel/PlanContainer.tsx | 1 + .../PlansPanel/PlanSelectionTable.tsx | 67 +++++++++++++++---- 3 files changed, 56 insertions(+), 14 deletions(-) diff --git a/packages/manager/src/components/TooltipIcon.tsx b/packages/manager/src/components/TooltipIcon.tsx index b5ad2776429..24f504d5bb5 100644 --- a/packages/manager/src/components/TooltipIcon.tsx +++ b/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' diff --git a/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx b/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx index b1201e0a3d0..d21760bef6f 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx @@ -215,6 +215,7 @@ export const PlanContainer = (props: PlanContainerProps) => { renderPlanSelection={renderPlanSelection} showNetwork={showNetwork} showTransfer={showTransfer} + showUsableStorage={isDatabaseCreateFlow || isDatabaseResizeFlow} /> ) )} diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx index 4cd06f4a678..5a7ae25e019 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx @@ -1,16 +1,19 @@ import * as React from 'react'; +import { Link } from 'src/components/Link'; import { TableBody } from 'src/components/TableBody'; import { TableHead } from 'src/components/TableHead'; import { TableRow } from 'src/components/TableRow'; import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty'; import { TooltipIcon } from 'src/components/TooltipIcon'; +import { Typography } from 'src/components/Typography'; import { useFlags } from 'src/hooks/useFlags'; import { PLAN_SELECTION_NO_REGION_SELECTED_MESSAGE } from 'src/utilities/pricing/constants'; import { StyledTable, StyledTableCell } from './PlanContainer.styles'; import type { PlanWithAvailability } from './types'; +import type { TooltipIconStatus } from 'src/components/TooltipIcon'; interface PlanSelectionFilterOptionsTable { header?: string; @@ -27,6 +30,7 @@ interface PlanSelectionTableProps { shouldDisplayNoRegionSelectedMessage: boolean; showNetwork?: boolean; showTransfer?: boolean; + showUsableStorage?: boolean; } const tableCells = [ @@ -54,6 +58,7 @@ export const PlanSelectionTable = (props: PlanSelectionTableProps) => { shouldDisplayNoRegionSelectedMessage, showNetwork: shouldShowNetwork, showTransfer: shouldShowTransfer, + showUsableStorage, } = props; const flags = useFlags(); @@ -70,6 +75,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 ( + + ); + }; return ( { ) { return null; } + if ( + showUsableStorage && + !flags.dbaasV2?.beta && + flags.dbaasV2?.enabled && + cellName === 'Storage' + ) { + cellName = 'Usable Storage'; + } return ( { {isPlanCell && filterOptions?.header ? filterOptions?.header : cellName} - {showTransferTooltip(cellName) && ( - - )} + {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.{' '} + + Learn more + + . + , + 240 + )} ); })} From fd49dbd249826f12fc647e9dca30449673a6f7e1 Mon Sep 17 00:00:00 2001 From: mpolotsk Date: Fri, 8 Nov 2024 16:42:29 +0100 Subject: [PATCH 2/2] feat: [UIE-8193] - Tooltip context for small screens --- .../src/components/SelectionCard/CardBase.tsx | 18 +++++++++++++++++- .../components/PlansPanel/PlanContainer.tsx | 18 +++++++++++++++++- .../PlansPanel/PlanSelectionTable.tsx | 11 +---------- 3 files changed, 35 insertions(+), 12 deletions(-) diff --git a/packages/manager/src/components/SelectionCard/CardBase.tsx b/packages/manager/src/components/SelectionCard/CardBase.tsx index 09bb450ec65..d30d3943694 100644 --- a/packages/manager/src/components/SelectionCard/CardBase.tsx +++ b/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} ); }); diff --git a/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx b/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx index d21760bef6f..afbe31915f6 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx +++ b/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 ( + {isCreate && isDatabaseGA && ( + ({ + 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. + + )} {shouldDisplayNoRegionSelectedMessage ? ( { {showUsableStorageTooltip(cellName) && showTooltip( 'help', - - Usable storage is smaller than the actual plan storage due - to the overhead from the database platform.{' '} - - Learn more - - . - , + 'Usable storage is smaller than the actual plan storage due to the overhead from the database platform.', 240 )}