upcoming: [M3-7702] - Update Region Select for edge sites #10194

hana-akamai · 2024-02-14T17:50:07Z

Description 📝

Update our Region Select to support edge regions for Project Gecko

Changes 🔄

New site_type property to the Region type
New gecko feature flag
New icon to indicate an Edge region and updates to support displaying it

Preview 📷

How to test 🧪

Prerequisites

(How to setup test environment)

Turn on the MSW and Gecko feature flag in DevTools

Verification steps

(How to verify changes)

Go to /linodes/create and open the Region Select dropdown. You should see an icon next to the Gecko Edge Test region and also icon helper text next to the region select.
You should not see the icon or icon helper text for Marketplace, Cloning, or Images

yarn test RegionSelect
yarn test RegionSelect.utils

As an Author I have considered 🤔

Check all that apply

packages/api-v4/src/regions/types.ts

hana-akamai · 2024-02-20T18:26:41Z

packages/manager/src/components/Autocomplete/Autocomplete.tsx

+            endAdornment: (
+              <React.Fragment>
+                {textFieldProps?.InputProps?.endAdornment}
+                {params.InputProps.endAdornment}
+              </React.Fragment>
+            ),


Add support for displaying end adornments and the select dropdown arrow at the same time

mjac0bs

Confirmed that:

I see the icon and helper text for the mock edge site in the Linodes region dropdown.
I do not see the icon or helper text for the region dropdown in other places it is used.
Light and dark mode color looks good.

Any test coverage to come for edge sites in the region dropdown?

I left just a few minor punctuation and styling suggestions.

Edit: Also seeing the following unit test failure locally, so 943b272 might not have addressed the issue completely.

packages/manager/src/components/RegionSelect/RegionSelect.tsx

mjac0bs · 2024-02-20T21:14:53Z

packages/manager/src/featureFlags.ts

@@ -47,6 +47,7 @@ export interface Flags {
  databaseScaleUp: boolean;
  databases: boolean;
  firewallNodebalancer: boolean;
+  gecko: boolean;


This PR slips the new feature flag in. Can we call that out in the PR description too, just for completeness?

You may want to consider using a object flag as we discussed recently. Something tells me gecko is going to have more than one parameter we will want to control individually. CC @jaalah-akamai

@abailly-akamai I'll look into using an object flag in a separate PR

packages/manager/src/components/RegionSelect/RegionSelect.tsx

bnussman-akamai · 2024-02-20T21:18:50Z

packages/manager/src/components/RegionSelect/RegionSelect.tsx

+  // Hide edge sites from Marketplace, Cloning, and Images
+  const unsupportedEdgeEntities = [
+    'Clone Linode',
+    'Images',
+    'One-Click',
+  ].includes(createType);


I wonder if it will bother people that we won't allow users to deploy Marketplace apps to edge regions in Cloud Manager.

We won't allow it for now but may in the future. The Gecko team needs time to test and curate a Marketplace for edge regions.

hana-akamai · 2024-02-21T17:13:56Z

@mjac0bs @bnussman-akamai great feedback, addressed!

mjac0bs

Thanks for addressing the feedback -- confirmed the above styling issues look good now and thanks for test coverage!

Do we have a plan for accessibility of the end adornment in the region select via aria? Using voice over, that icon is not read out and I don't think the user is able to view the tooltip, so they would not be able to distinguish edge sites (other than by name).

Approving pending that is addressed.

Also, I'm not sure what's going on with CI for this PR. It failed initially, so I restarted the PR in jenkins, and now it's showing e2es passing but not sure why the rest of CI is still pending. Unit tests pass locally.

abailly-akamai · 2024-02-22T19:01:33Z

packages/manager/src/featureFlags.ts

@@ -47,6 +47,7 @@ export interface Flags {
  databaseScaleUp: boolean;
  databases: boolean;
  firewallNodebalancer: boolean;
+  gecko: boolean;


You may want to consider using a object flag as we discussed recently. Something tells me gecko is going to have more than one parameter we will want to control individually. CC @jaalah-akamai

abailly-akamai · 2024-02-22T19:08:27Z

packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx

+          region.site_type === 'edge' &&
+          region.capabilities.includes(currentCapability)
+      )
+  );


I'd love to see a isGeckoEnabled util to which you pass your entities (useFlags can be invoked in the util) and tested as such. In doing so, we need to make those entities type safe

github-actions · 2024-02-22T19:11:11Z

Coverage Report: ✅
Base Coverage: 81.33%
Current Coverage: 81.35%

bnussman-akamai · 2024-02-26T14:17:22Z

packages/manager/src/components/RegionSelect/RegionSelect.tsx

+                  icon={<EdgeServer />}
+                  status="other"
+                  sxTooltipIcon={sxEdgeIcon}
+                  text="This region is an Edge server."


Suggested change

text="This region is an Edge server."

text="This region is an Edge site."

abailly-akamai

Thanks for the changes! - second pass looks great - 🚢 ✅

abailly-akamai · 2024-02-26T14:32:12Z

packages/manager/src/components/RegionSelect/RegionSelect.styles.ts

+    color: 'inherit',
+    display: 'flex',
+    marginLeft: 8,
+    padding: '8px 0',


nitpick (no need to address but good to keep in mind for the future) - while sizing an svg with hard coded values is totally fine, we can use theme spacing units for, well, spacing, especially for values we know to be 8 or multiple of 8. Who knows if the compact theme will ever make a comeback :D

hana-akamai added 12 commits February 8, 2024 17:23

display edge icon in region select

0085711

add icon explanation

51d836c

fix selected edge icon position

0b76b65

feature flag code

d958911

hide edge servers in marketplace region dropdown

0b99524

hide edge sites from Image Upload region select

761b64b

hide linodes located in an edge region from Image create dropdown

1f54275

hide edge sites from Create NodeBalancers region select

d14625b

hide edge sites from Create LKE region select

7853c45

fix position styling

cda698e

fix arrow icon in region select

f8ec5fc

Merge branch 'develop' into M3-7702-gecko-mvp-region-select-edge-site

9b24228

hana-akamai added the Gecko Beta Relating to Gecko project label Feb 14, 2024

hana-akamai self-assigned this Feb 14, 2024

bnussman-akamai reviewed Feb 14, 2024

View reviewed changes

packages/api-v4/src/regions/types.ts Show resolved Hide resolved

hana-akamai added 4 commits February 15, 2024 13:36

address errors

c885d0b

use region capability to filter unsupported entities

6ef201a

update regionsData instead of cached regions

5250de1

Merge branch 'develop' into M3-7702-gecko-mvp-region-select-edge-site

a783824

hana-akamai commented Feb 20, 2024

View reviewed changes

hana-akamai marked this pull request as ready for review February 20, 2024 19:06

hana-akamai requested a review from a team as a code owner February 20, 2024 19:06

hana-akamai requested review from mjac0bs and bnussman-akamai and removed request for a team February 20, 2024 19:06

hana-akamai added 3 commits February 20, 2024 14:06

hide edge regions from cloning

d5cae9b

Added changeset: Update Region Select for edge sites

9a24766

fix unit test

943b272

mjac0bs reviewed Feb 20, 2024

View reviewed changes

bnussman-akamai reviewed Feb 20, 2024

View reviewed changes

adddress feedback

f9c3bd8

jaalah-akamai self-requested a review February 21, 2024 20:05

mjac0bs approved these changes Feb 21, 2024

View reviewed changes

mjac0bs added the Add'tl Approval Needed Waiting on another approval! label Feb 21, 2024

update regionselect documentation

ef8ae7e

abailly-akamai reviewed Feb 22, 2024

View reviewed changes

hana-akamai added 3 commits February 22, 2024 15:30

improve accessibility, thanks @joe

87355ed

fix styling

8c85487

add isGeckoEnabled util

dba8250

hana-akamai requested review from bnussman-akamai and abailly-akamai February 23, 2024 16:28

bnussman-akamai reviewed Feb 26, 2024

View reviewed changes

abailly-akamai approved these changes Feb 26, 2024

View reviewed changes

hana-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Feb 26, 2024

hana-akamai merged commit 02bdf6d into linode:develop Feb 26, 2024
18 checks passed

This was referenced Mar 1, 2024

Release v1.114.0 - release → staging #10246

Merged

Release v1.114.0 - staging → master #10253

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

upcoming: [M3-7702] - Update Region Select for edge sites #10194

upcoming: [M3-7702] - Update Region Select for edge sites #10194

hana-akamai commented Feb 14, 2024 •

edited

Loading

hana-akamai Feb 20, 2024

mjac0bs left a comment •

edited

Loading

mjac0bs Feb 20, 2024

abailly-akamai Feb 22, 2024

hana-akamai Feb 23, 2024

bnussman-akamai Feb 20, 2024

hana-akamai Feb 21, 2024

hana-akamai commented Feb 21, 2024

mjac0bs left a comment •

edited

Loading

abailly-akamai Feb 22, 2024

abailly-akamai Feb 22, 2024

github-actions bot commented Feb 22, 2024 •

edited

Loading

bnussman-akamai Feb 26, 2024

abailly-akamai left a comment

abailly-akamai Feb 26, 2024

	text="This region is an Edge server."
	text="This region is an Edge site."

upcoming: [M3-7702] - Update Region Select for edge sites #10194

upcoming: [M3-7702] - Update Region Select for edge sites #10194

Conversation

hana-akamai commented Feb 14, 2024 • edited Loading

Description 📝

Changes 🔄

Preview 📷

How to test 🧪

Prerequisites

Verification steps

As an Author I have considered 🤔

Choose a reason for hiding this comment

mjac0bs left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hana-akamai commented Feb 21, 2024

mjac0bs left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Feb 22, 2024 • edited Loading

Choose a reason for hiding this comment

abailly-akamai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hana-akamai commented Feb 14, 2024 •

edited

Loading

mjac0bs left a comment •

edited

Loading

mjac0bs left a comment •

edited

Loading

github-actions bot commented Feb 22, 2024 •

edited

Loading