From b73cc0889afc7065dffc182a457eea2415da4ea6 Mon Sep 17 00:00:00 2001 From: Hana Xu <115299789+hana-linode@users.noreply.github.com> Date: Mon, 18 Mar 2024 10:02:18 -0400 Subject: [PATCH] upcoming: [M3-7868] - Gecko Beta Demo feedback (#10284) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description ๐Ÿ“ Address feedback from the Gecko Beta Demo/Review meeting ## Changes ๐Ÿ”„ - Warning notice updates - Add period to end of sentences - Replace "standard pricing" warning text from the edge plan table to "billing" - Add warning text to the caution notice for edge migrations - Storage table column should display as normal (should not be N/A) for edge plans - Filter edge regions from Image Upload ## How to test ๐Ÿงช ### Prerequisites - Ensure your account has the correct customer tag (reach out for more info) ### Verification steps - Go to `/linodes/create` and select an Edge region - The edge plan table warning notice should say "billing" instead of "standard pricing" - The Storage column should display the storage amount instead of N/A - On the Linode landings table, open the action menu for a Linode located in an edge region and click on "Migrate" - There should be a warning bullet about edge migrations in the Caution notice - Go to `/images/create/upload` and open the region select dropdown - There should be no edge regions displayed --- ...r-10284-upcoming-features-1710432233464.md | 5 ++++ .../src/features/Images/ImageUpload.tsx | 3 ++- .../Linodes/LinodesCreate/AddonsPanel.tsx | 2 +- .../LinodeNetworking/AddIPDrawer.tsx | 2 +- .../Linodes/MigrateLinode/CautionNotice.tsx | 25 +++++++++++++------ .../Linodes/MigrateLinode/MigrateLinode.tsx | 12 +++++++++ .../components/PlansPanel/PlanSelection.tsx | 2 +- .../components/PlansPanel/PlansPanel.tsx | 3 +-- 8 files changed, 41 insertions(+), 13 deletions(-) create mode 100644 packages/manager/.changeset/pr-10284-upcoming-features-1710432233464.md diff --git a/packages/manager/.changeset/pr-10284-upcoming-features-1710432233464.md b/packages/manager/.changeset/pr-10284-upcoming-features-1710432233464.md new file mode 100644 index 00000000000..950b47f159e --- /dev/null +++ b/packages/manager/.changeset/pr-10284-upcoming-features-1710432233464.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Gecko Beta Demo feedback ([#10284](https://github.com/linode/manager/pull/10284)) diff --git a/packages/manager/src/features/Images/ImageUpload.tsx b/packages/manager/src/features/Images/ImageUpload.tsx index ca60b30101d..4b3c6e2b2c3 100644 --- a/packages/manager/src/features/Images/ImageUpload.tsx +++ b/packages/manager/src/features/Images/ImageUpload.tsx @@ -1,9 +1,9 @@ import { APIError } from '@linode/api-v4/lib/types'; import { Theme } from '@mui/material/styles'; -import { makeStyles } from 'tss-react/mui'; import * as React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; +import { makeStyles } from 'tss-react/mui'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Checkbox } from 'src/components/Checkbox'; @@ -275,6 +275,7 @@ export const ImageUpload: React.FC = (props) => { errorText={errorMap.region} handleSelection={setRegion} label="Region" + regionFilter="core" // Images service will not be supported for Gecko Beta regions={regions} required selectedId={region} diff --git a/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.tsx index 39253c34ba7..416ef83e430 100644 --- a/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.tsx +++ b/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.tsx @@ -196,7 +196,7 @@ export const AddonsPanel = React.memo((props: AddonsPanelProps) => { {isEdgeRegionSelected && ( )} diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx index be89b5cc64d..0ea5b71cc17 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx @@ -182,7 +182,7 @@ export const AddIPDrawer = (props: Props) => { {linodeIsInEdgeRegion && ( )} diff --git a/packages/manager/src/features/Linodes/MigrateLinode/CautionNotice.tsx b/packages/manager/src/features/Linodes/MigrateLinode/CautionNotice.tsx index e1bc89ebd58..2e101b4f8eb 100644 --- a/packages/manager/src/features/Linodes/MigrateLinode/CautionNotice.tsx +++ b/packages/manager/src/features/Linodes/MigrateLinode/CautionNotice.tsx @@ -10,6 +10,7 @@ import { API_MAX_PAGE_SIZE } from 'src/constants'; import { useLinodeVolumesQuery } from 'src/queries/volumes'; interface Props { + edgeRegionWarning?: string; error?: string; hasConfirmed: boolean; linodeId: number | undefined; @@ -19,6 +20,15 @@ interface Props { } export const CautionNotice = React.memo((props: Props) => { + const { + edgeRegionWarning, + error, + hasConfirmed, + linodeId, + metadataWarning, + migrationTimeInMins, + setConfirmed, + } = props; const theme = useTheme(); // This is not great, but lets us get all of the volumes for a Linode while keeping @@ -26,12 +36,12 @@ export const CautionNotice = React.memo((props: Props) => { // because the event handler automatically updates stored paginated data. // We can safely do this because linodes can't have more than 64 volumes. const { data: volumesData } = useLinodeVolumesQuery( - props.linodeId ?? -1, + linodeId ?? -1, { page_size: API_MAX_PAGE_SIZE, }, {}, - props.linodeId !== undefined + linodeId !== undefined ); const amountOfAttachedVolumes = volumesData?.results ?? 0; @@ -89,20 +99,21 @@ export const CautionNotice = React.memo((props: Props) => {
  • When this migration begins, we estimate it will take approximately{' '} {DateTime.local() - .plus({ minutes: props.migrationTimeInMins }) + .plus({ minutes: migrationTimeInMins }) .toRelative() ?.replace('in', '')}{' '} to complete.
    • - {props.metadataWarning ?
  • {props.metadataWarning}
    • : null} + {metadataWarning &&
  • {metadataWarning}
    • } + {edgeRegionWarning &&
  • {edgeRegionWarning}
    • } - {props.error && } + {error && } props.setConfirmed(!props.hasConfirmed)} + checked={hasConfirmed} + onChange={() => setConfirmed(!hasConfirmed)} text="Accept" /> diff --git a/packages/manager/src/features/Linodes/MigrateLinode/MigrateLinode.tsx b/packages/manager/src/features/Linodes/MigrateLinode/MigrateLinode.tsx index 652ad7072b3..81809ac47c9 100644 --- a/packages/manager/src/features/Linodes/MigrateLinode/MigrateLinode.tsx +++ b/packages/manager/src/features/Linodes/MigrateLinode/MigrateLinode.tsx @@ -7,6 +7,7 @@ import { Box } from 'src/components/Box'; import { Button } from 'src/components/Button/Button'; import { Dialog } from 'src/components/Dialog/Dialog'; import { Notice } from 'src/components/Notice/Notice'; +import { getIsEdgeRegion } from 'src/components/RegionSelect/RegionSelect.utils'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; import { MBpsInterDC } from 'src/constants'; @@ -144,6 +145,16 @@ export const MigrateLinode = React.memo((props: Props) => { : undefined; }, [flags.metadata, linode, regionsData, selectedRegion]); + const linodeIsInEdgeRegion = getIsEdgeRegion( + regionsData ?? [], + linode?.region ?? '' + ); + + const edgeRegionWarning = + flags.gecko && linodeIsInEdgeRegion + ? 'Edge sites may only be migrated to other Edge sites.' + : undefined; + if (!linode) { return null; } @@ -224,6 +235,7 @@ export const MigrateLinode = React.memo((props: Props) => { notifications={notifications} /> */} { {type.vcpus} - {type.disk === 0 ? 'N/A' : convertMegabytesTo(type.disk, true)} + {convertMegabytesTo(type.disk, true)} {shouldShowTransfer && type.transfer ? ( diff --git a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx index 80ce6a88185..6b93da07f6f 100644 --- a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx @@ -103,7 +103,6 @@ export const PlansPanel = (props: Props) => { delete plan.transfer; return { ...plan, - disk: 0, price: { hourly: 0, monthly: 0, @@ -169,7 +168,7 @@ export const PlansPanel = (props: Props) => { /> {showEdgePlanTable && ( )}