upcoming: [M3-7868] - Gecko Beta Demo feedback (#10284)

## 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

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))

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> = (props) => {
             errorText={errorMap.region}
             handleSelection={setRegion}
             label="Region"
+            regionFilter="core" // Images service will not be supported for Gecko Beta
             regions={regions}
             required
             selectedId={region}

packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.tsx

@@ -196,7 +196,7 @@ export const AddonsPanel = React.memo((props: AddonsPanelProps) => {
         </Typography>
         {isEdgeRegionSelected && (
           <Notice
-            text="Backups and Private IP are currently not available for Edge regions"
+            text="Backups and Private IP are currently not available for Edge regions."
             variant="warning"
           />
         )}

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx

@@ -182,7 +182,7 @@ export const AddIPDrawer = (props: Props) => {
           {linodeIsInEdgeRegion && (
             <Notice
               sx={{ fontSize: 15 }}
-              text="Private IP is currently not available for Edge regions"
+              text="Private IP is currently not available for Edge regions."
               variant="warning"
             />
           )}

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,19 +20,28 @@ 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
   // the React Query store in a paginated shape. We want to keep data in a paginated shape
   // 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) => {
         <li>
           When this migration begins, we estimate it will take approximately{' '}
           {DateTime.local()
-            .plus({ minutes: props.migrationTimeInMins })
+            .plus({ minutes: migrationTimeInMins })
             .toRelative()
             ?.replace('in', '')}{' '}
           to complete.
         </li>
-        {props.metadataWarning ? <li>{props.metadataWarning}</li> : null}
+        {metadataWarning && <li>{metadataWarning}</li>}
+        {edgeRegionWarning && <li>{edgeRegionWarning}</li>}
       </ul>
-      {props.error && <Notice text={props.error} variant="error" />}
+      {error && <Notice text={error} variant="error" />}
       <Checkbox
         sx={{
           marginLeft: theme.spacing(2),
         }}
-        checked={props.hasConfirmed}
-        onChange={() => props.setConfirmed(!props.hasConfirmed)}
+        checked={hasConfirmed}
+        onChange={() => setConfirmed(!hasConfirmed)}
         text="Accept"
       />
     </StyledRootDiv>

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}
       /> */}
       <CautionNotice
+        edgeRegionWarning={edgeRegionWarning}
         hasConfirmed={hasConfirmed}
         linodeId={linodeId}
         metadataWarning={metadataMigrateWarning}

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

@@ -219,7 +219,7 @@ export const PlanSelection = (props: PlanSelectionProps) => {
             {type.vcpus}
           </TableCell>
           <TableCell center data-qa-storage noWrap>
-            {type.disk === 0 ? 'N/A' : convertMegabytesTo(type.disk, true)}
+            {convertMegabytesTo(type.disk, true)}
           </TableCell>
           {shouldShowTransfer && type.transfer ? (
             <TableCell center data-qa-transfer>

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 && (
               <Notice
-                text="Edge region pricing is temporarily $0 during the beta period, after which standard pricing will begin."
+                text="Edge region pricing is temporarily $0 during the beta period, after which billing will begin."
                 variant="warning"
               />
             )}