From df4d9ab7f165521dcce1df2446cde618f881836f Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Wed, 12 Apr 2023 14:16:51 -0400
Subject: [PATCH 1/7] add france to eupore list

---
 .../variants/RegionSelect/RegionSelect.tsx    | 47 +++++--------------
 .../variants/RegionSelect/index.ts            |  2 +-
 .../SelectRegionPanel/SelectRegionPanel.tsx   |  2 +-
 .../DatabaseCreate/DatabaseCreate.tsx         |  2 +-
 .../src/features/Images/ImageUpload.tsx       |  2 +-
 .../CreateCluster/CreateCluster.tsx           |  2 +-
 .../BucketLanding/ClusterSelect.tsx           |  2 +-
 .../Volumes/VolumeCreate/CreateVolumeForm.tsx |  2 +-
 .../linodes/MigrateLinode/ConfigureForm.tsx   |  3 +-
 9 files changed, 20 insertions(+), 44 deletions(-)

diff --git a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx
index e6fbc89cb26..03f35e44ae0 100644
--- a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx
+++ b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx
@@ -9,8 +9,6 @@ import SG from 'flag-icons/flags/4x3/sg.svg';
 import US from 'flag-icons/flags/4x3/us.svg';
 import { groupBy } from 'ramda';
 import * as React from 'react';
-import { makeStyles } from '@mui/styles';
-import { Theme } from '@mui/material/styles';
 import SingleValue from 'src/components/EnhancedSelect/components/SingleValue';
 import Select, {
   BaseSelectProps,
@@ -32,16 +30,8 @@ interface Props extends Omit<BaseSelectProps, 'onChange'> {
 export const flags = {
   au: () => <AU width="32" height="24" viewBox="0 0 640 480" />,
   us: () => <US width="32" height="24" viewBox="0 0 640 480" />,
-  sg: () => <SG id="singapore" width="32" height="24" viewBox="0 0 640 480" />,
-  jp: () => (
-    <JP
-      id="japan"
-      width="32"
-      height="24"
-      viewBox="0 0 640 480"
-      style={{ backgroundColor: '#fff' }}
-    />
-  ),
+  sg: () => <SG width="32" height="24" viewBox="0 0 640 480" />,
+  jp: () => <JP width="32" height="24" viewBox="0 0 640 480" />,
   uk: () => <UK width="32" height="24" viewBox="0 0 640 480" />,
   eu: () => <UK width="32" height="24" viewBox="0 0 640 480" />,
   de: () => <DE width="32" height="24" viewBox="0 0 640 480" />,
@@ -52,33 +42,22 @@ export const flags = {
 export const selectStyles = {
   menuList: (base: any) => ({ ...base, maxHeight: `40vh !important` }),
 };
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    '& svg': {
-      '& g': {
-        // Super hacky fix for Firefox rendering of some flag icons that had a clip-path property.
-        clipPath: 'none !important' as 'none',
-      },
-    },
-    '& #singapore, #japan': {
-      border: `1px solid ${theme.color.border3}`,
-    },
-  },
-}));
 
 export const getRegionOptions = (regions: Region[]) => {
-  const groupedRegions = groupBy<Region>((thisRegion) => {
-    if (thisRegion.country.match(/(us|ca)/)) {
+  const groupedRegions = groupBy<Region>((region) => {
+    const country = region.country.toLowerCase();
+    if (['us', 'ca'].includes(country)) {
       return 'North America';
     }
-    if (thisRegion.country.match(/(de|uk|eu)/)) {
+    if (['de', 'uk', 'eu', 'fr'].includes(country)) {
       return 'Europe';
     }
-    if (thisRegion.country.match(/(jp|sg|in|au)/)) {
+    if (['jp', 'sg', 'in', 'au'].includes(country)) {
       return 'Asia Pacific';
     }
     return 'Other';
   }, regions);
+
   return ['North America', 'Europe', 'Asia Pacific', 'Other'].reduce(
     (accum, thisGroup) => {
       if (
@@ -137,7 +116,7 @@ const sortRegions = (region1: RegionItem, region2: RegionItem) => {
   return 0;
 };
 
-const SelectRegionPanel: React.FC<Props> = (props) => {
+export const RegionSelect = React.memo((props: Props) => {
   const {
     label,
     disabled,
@@ -168,12 +147,10 @@ const SelectRegionPanel: React.FC<Props> = (props) => {
     [handleSelection]
   );
 
-  const classes = useStyles();
-
   const options = React.useMemo(() => getRegionOptions(regions), [regions]);
 
   return (
-    <div className={classes.root} style={{ width }}>
+    <div style={{ width }}>
       <Select
         isClearable={Boolean(isClearable)} // Defaults to false if the prop isn't provided
         value={getSelectedRegionById(selectedID || '', options) ?? ''}
@@ -195,6 +172,4 @@ const SelectRegionPanel: React.FC<Props> = (props) => {
       />
     </div>
   );
-};
-
-export default React.memo(SelectRegionPanel);
+});
diff --git a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/index.ts b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/index.ts
index a680986229c..36d1f9c3dec 100644
--- a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/index.ts
+++ b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/index.ts
@@ -1 +1 @@
-export { flags, default } from './RegionSelect';
+export { flags, RegionSelect } from './RegionSelect';
diff --git a/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx b/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx
index 3c737618b0f..165aaadc0fd 100644
--- a/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx
+++ b/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx
@@ -7,7 +7,7 @@ import { compose } from 'recompose';
 import Box from 'src/components/core/Box';
 import Paper from 'src/components/core/Paper';
 import Typography from 'src/components/core/Typography';
-import RegionSelect from 'src/components/EnhancedSelect/variants/RegionSelect';
+import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelect';
 import Notice from 'src/components/Notice';
 import RenderGuard, { RenderGuardProps } from 'src/components/RenderGuard';
 import { CROSS_DATA_CENTER_CLONE_WARNING } from 'src/features/linodes/LinodesCreate/utilities';
diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
index edc12e35a25..3cef95fec3d 100644
--- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
+++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
@@ -28,7 +28,7 @@ import RadioGroup from 'src/components/core/RadioGroup';
 import Typography from 'src/components/core/Typography';
 import SingleValue from 'src/components/EnhancedSelect/components/SingleValue';
 import Select, { Item } from 'src/components/EnhancedSelect/Select';
-import RegionSelect from 'src/components/EnhancedSelect/variants/RegionSelect';
+import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelect';
 import RegionOption from 'src/components/EnhancedSelect/variants/RegionSelect/RegionOption';
 import ErrorState from 'src/components/ErrorState';
 import Grid from 'src/components/Grid';
diff --git a/packages/manager/src/features/Images/ImageUpload.tsx b/packages/manager/src/features/Images/ImageUpload.tsx
index c46dc6da0df..b11fa2da40a 100644
--- a/packages/manager/src/features/Images/ImageUpload.tsx
+++ b/packages/manager/src/features/Images/ImageUpload.tsx
@@ -10,7 +10,7 @@ import CheckBox from 'src/components/CheckBox';
 import ConfirmationDialog from 'src/components/ConfirmationDialog';
 import Paper from 'src/components/core/Paper';
 import Typography from 'src/components/core/Typography';
-import RegionSelect from 'src/components/EnhancedSelect/variants/RegionSelect';
+import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelect';
 import FileUploader from 'src/components/FileUploader/FileUploader';
 import Link from 'src/components/Link';
 import LinodeCLIModal from 'src/components/LinodeCLIModal';
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
index 7064a49fe23..663ae4ca0b3 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
@@ -13,7 +13,7 @@ import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import Select, { Item } from 'src/components/EnhancedSelect/Select';
-import RegionSelect from 'src/components/EnhancedSelect/variants/RegionSelect';
+import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelect';
 import ErrorState from 'src/components/ErrorState';
 import Notice from 'src/components/Notice';
 import { regionHelperText } from 'src/components/SelectRegionPanel/SelectRegionPanel';
diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/ClusterSelect.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/ClusterSelect.tsx
index 4d0d7861c02..f9af378b492 100644
--- a/packages/manager/src/features/ObjectStorage/BucketLanding/ClusterSelect.tsx
+++ b/packages/manager/src/features/ObjectStorage/BucketLanding/ClusterSelect.tsx
@@ -1,6 +1,6 @@
 import { Region } from '@linode/api-v4/lib/regions';
 import * as React from 'react';
-import RegionSelect from 'src/components/EnhancedSelect/variants/RegionSelect';
+import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelect';
 import { useObjectStorageClusters } from 'src/queries/objectStorage';
 import { useRegionsQuery } from 'src/queries/regions';
 
diff --git a/packages/manager/src/features/Volumes/VolumeCreate/CreateVolumeForm.tsx b/packages/manager/src/features/Volumes/VolumeCreate/CreateVolumeForm.tsx
index 1272150045c..3299ccc94fa 100644
--- a/packages/manager/src/features/Volumes/VolumeCreate/CreateVolumeForm.tsx
+++ b/packages/manager/src/features/Volumes/VolumeCreate/CreateVolumeForm.tsx
@@ -13,7 +13,7 @@ import Paper from 'src/components/core/Paper';
 import { makeStyles } from '@mui/styles';
 import { Theme, useTheme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
-import RegionSelect from 'src/components/EnhancedSelect/variants/RegionSelect';
+import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelect';
 import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon';
 import Notice from 'src/components/Notice';
 import { MAX_VOLUME_SIZE } from 'src/constants';
diff --git a/packages/manager/src/features/linodes/MigrateLinode/ConfigureForm.tsx b/packages/manager/src/features/linodes/MigrateLinode/ConfigureForm.tsx
index d3602747f7c..83d82c45266 100644
--- a/packages/manager/src/features/linodes/MigrateLinode/ConfigureForm.tsx
+++ b/packages/manager/src/features/linodes/MigrateLinode/ConfigureForm.tsx
@@ -3,7 +3,8 @@ import Paper from 'src/components/core/Paper';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
-import RegionSelect, {
+import {
+  RegionSelect,
   flags,
 } from 'src/components/EnhancedSelect/variants/RegionSelect';
 import { useRegionsQuery } from 'src/queries/regions';

From 8b9b7acb72a2cf709c7af759d2d976dcad2f045a Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Wed, 12 Apr 2023 15:24:49 -0400
Subject: [PATCH 2/7] dynamic flags

---
 .../EnhancedSelect/components/SingleValue.tsx |   2 +-
 .../variants/RegionSelect/RegionOption.tsx    |   6 +-
 .../variants/RegionSelect/RegionSelect.tsx    | 109 ++++++++----------
 .../variants/RegionSelect/index.ts            |   2 +-
 4 files changed, 52 insertions(+), 67 deletions(-)

diff --git a/packages/manager/src/components/EnhancedSelect/components/SingleValue.tsx b/packages/manager/src/components/EnhancedSelect/components/SingleValue.tsx
index 72fa59f89b4..678fec01633 100644
--- a/packages/manager/src/components/EnhancedSelect/components/SingleValue.tsx
+++ b/packages/manager/src/components/EnhancedSelect/components/SingleValue.tsx
@@ -39,7 +39,7 @@ const _SingleValue: React.FC<CombinedProps> = (props) => {
         {props.children}
       </components.SingleValue>
       <span className={`${props.data.className} ${classes.icon}`}>
-        {props.data.flag && props.data.flag()}
+        {props.data.flag}
       </span>
     </>
   );
diff --git a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionOption.tsx b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionOption.tsx
index fe437e8ca94..78ffa66c1f2 100644
--- a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionOption.tsx
+++ b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionOption.tsx
@@ -22,7 +22,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 }));
 
 export interface RegionItem extends Item<string> {
-  flag: () => JSX.Element | null;
+  flag: JSX.Element | null;
   country: string;
   disabledMessage?: string | JSX.Element;
 }
@@ -61,7 +61,7 @@ export const RegionOption: React.FC<CombinedProps> = (props) => {
             justifyContent="flex-start"
             spacing={2}
           >
-            <Grid className="py0">{data.flag && data.flag()}</Grid>
+            <Grid className="py0">{data.flag}</Grid>
             <Grid>{label} (Not available)</Grid>
           </Grid>
         </Tooltip>
@@ -73,7 +73,7 @@ export const RegionOption: React.FC<CombinedProps> = (props) => {
           justifyContent="flex-start"
           spacing={2}
         >
-          <Grid className="py0">{data.flag && data.flag()}</Grid>
+          <Grid className="py0">{data.flag}</Grid>
           <Grid>{label}</Grid>
         </Grid>
       )}
diff --git a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx
index 03f35e44ae0..ef217f9bcfc 100644
--- a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx
+++ b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx
@@ -1,20 +1,12 @@
-import { Region } from '@linode/api-v4/lib/regions';
-import AU from 'flag-icons/flags/4x3/au.svg';
-import CA from 'flag-icons/flags/4x3/ca.svg';
-import DE from 'flag-icons/flags/4x3/de.svg';
-import UK from 'flag-icons/flags/4x3/gb.svg';
-import IN from 'flag-icons/flags/4x3/in.svg';
-import JP from 'flag-icons/flags/4x3/jp.svg';
-import SG from 'flag-icons/flags/4x3/sg.svg';
-import US from 'flag-icons/flags/4x3/us.svg';
-import { groupBy } from 'ramda';
-import * as React from 'react';
-import SingleValue from 'src/components/EnhancedSelect/components/SingleValue';
 import Select, {
   BaseSelectProps,
   GroupType,
 } from 'src/components/EnhancedSelect/Select';
+import * as React from 'react';
+import SingleValue from 'src/components/EnhancedSelect/components/SingleValue';
+import { Region } from '@linode/api-v4/lib/regions';
 import RegionOption, { RegionItem } from './RegionOption';
+import 'flag-icons/css/flag-icons.min.css';
 
 interface Props extends Omit<BaseSelectProps, 'onChange'> {
   regions: Region[];
@@ -27,64 +19,57 @@ interface Props extends Omit<BaseSelectProps, 'onChange'> {
   width?: number;
 }
 
-export const flags = {
-  au: () => <AU width="32" height="24" viewBox="0 0 640 480" />,
-  us: () => <US width="32" height="24" viewBox="0 0 640 480" />,
-  sg: () => <SG width="32" height="24" viewBox="0 0 640 480" />,
-  jp: () => <JP width="32" height="24" viewBox="0 0 640 480" />,
-  uk: () => <UK width="32" height="24" viewBox="0 0 640 480" />,
-  eu: () => <UK width="32" height="24" viewBox="0 0 640 480" />,
-  de: () => <DE width="32" height="24" viewBox="0 0 640 480" />,
-  ca: () => <CA width="32" height="24" viewBox="0 0 640 480" />,
-  in: () => <IN width="32" height="24" viewBox="0 0 640 480" />,
-};
-
 export const selectStyles = {
   menuList: (base: any) => ({ ...base, maxHeight: `40vh !important` }),
 };
 
+type RegionGroups = 'North America' | 'Europe' | 'Asia Pacific' | 'Other';
+
 export const getRegionOptions = (regions: Region[]) => {
-  const groupedRegions = groupBy<Region>((region) => {
+  const groups: Record<RegionGroups, RegionItem[]> = {
+    'North America': [],
+    Europe: [],
+    'Asia Pacific': [],
+    Other: [],
+  };
+
+  const countryToGroupMap: Record<string, RegionGroups> = {
+    ca: 'North America',
+    us: 'North America',
+    de: 'Europe',
+    uk: 'Europe',
+    eu: 'Europe',
+    fr: 'Europe',
+    jp: 'Asia Pacific',
+    sg: 'Asia Pacific',
+    in: 'Asia Pacific',
+    au: 'Asia Pacific',
+  };
+
+  const countryFlagOverrides = {
+    uk: 'fake',
+  };
+
+  for (const region of regions) {
     const country = region.country.toLowerCase();
-    if (['us', 'ca'].includes(country)) {
-      return 'North America';
-    }
-    if (['de', 'uk', 'eu', 'fr'].includes(country)) {
-      return 'Europe';
-    }
-    if (['jp', 'sg', 'in', 'au'].includes(country)) {
-      return 'Asia Pacific';
-    }
-    return 'Other';
-  }, regions);
 
-  return ['North America', 'Europe', 'Asia Pacific', 'Other'].reduce(
-    (accum, thisGroup) => {
-      if (
-        !groupedRegions[thisGroup] ||
-        groupedRegions[thisGroup].length === 0
-      ) {
-        return accum;
-      }
-      return [
-        ...accum,
-        {
-          label: thisGroup,
-          options: groupedRegions[thisGroup]
-            .map((thisRegion) => ({
-              label: `${thisRegion.label} (${thisRegion.id})`,
-              value: thisRegion.id,
-              flag:
-                flags[thisRegion.country.toLocaleLowerCase()] ?? (() => null),
-              country: thisRegion.country,
-            }))
+    groups[countryToGroupMap[country]].push({
+      label: `${region.label} (${region.id})`,
+      value: region.id,
+      flag: (
+        <div
+          className={`fi fi-${countryFlagOverrides[country] ?? country} fi-xx`}
+          style={{ fontSize: '1.5rem', verticalAlign: 'top' }}
+        />
+      ),
+      country: region.country,
+    });
+  }
 
-            .sort(sortRegions),
-        },
-      ];
-    },
-    []
-  );
+  return Object.keys(groups).map((group: RegionGroups) => ({
+    label: group,
+    options: groups[group].sort(sortRegions),
+  }));
 };
 
 export const getSelectedRegionById = (
diff --git a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/index.ts b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/index.ts
index 36d1f9c3dec..287f25938c1 100644
--- a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/index.ts
+++ b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/index.ts
@@ -1 +1 @@
-export { flags, RegionSelect } from './RegionSelect';
+export { RegionSelect } from './RegionSelect';

From a749dc58a84b53d9b63cf0fcf15219e1b875096a Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Wed, 12 Apr 2023 15:57:34 -0400
Subject: [PATCH 3/7] abstract out flag component

---
 .../variants/RegionSelect/RegionSelect.tsx    | 13 ++----------
 packages/manager/src/components/Flag.tsx      | 20 +++++++++++++++++++
 .../linodes/MigrateLinode/ConfigureForm.tsx   | 13 ++++--------
 3 files changed, 26 insertions(+), 20 deletions(-)
 create mode 100644 packages/manager/src/components/Flag.tsx

diff --git a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx
index ef217f9bcfc..f736b5923e0 100644
--- a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx
+++ b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx
@@ -6,7 +6,7 @@ import * as React from 'react';
 import SingleValue from 'src/components/EnhancedSelect/components/SingleValue';
 import { Region } from '@linode/api-v4/lib/regions';
 import RegionOption, { RegionItem } from './RegionOption';
-import 'flag-icons/css/flag-icons.min.css';
+import { Flag } from 'src/components/Flag';
 
 interface Props extends Omit<BaseSelectProps, 'onChange'> {
   regions: Region[];
@@ -46,22 +46,13 @@ export const getRegionOptions = (regions: Region[]) => {
     au: 'Asia Pacific',
   };
 
-  const countryFlagOverrides = {
-    uk: 'fake',
-  };
-
   for (const region of regions) {
     const country = region.country.toLowerCase();
 
     groups[countryToGroupMap[country]].push({
       label: `${region.label} (${region.id})`,
       value: region.id,
-      flag: (
-        <div
-          className={`fi fi-${countryFlagOverrides[country] ?? country} fi-xx`}
-          style={{ fontSize: '1.5rem', verticalAlign: 'top' }}
-        />
-      ),
+      flag: <Flag country={country} />,
       country: region.country,
     });
   }
diff --git a/packages/manager/src/components/Flag.tsx b/packages/manager/src/components/Flag.tsx
new file mode 100644
index 00000000000..e8c9d2d0692
--- /dev/null
+++ b/packages/manager/src/components/Flag.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import 'flag-icons/css/flag-icons.min.css';
+
+const countryFlagOverrides = {
+  uk: 'gb',
+};
+
+interface Props {
+  /** expects a iso code of a country - `us`, `ca`, etc... */
+  country: string;
+}
+
+export const Flag = ({ country }: Props) => {
+  return (
+    <div
+      className={`fi fi-${countryFlagOverrides[country] ?? country} fi-xx`}
+      style={{ fontSize: '1.5rem', verticalAlign: 'top' }}
+    />
+  );
+};
diff --git a/packages/manager/src/features/linodes/MigrateLinode/ConfigureForm.tsx b/packages/manager/src/features/linodes/MigrateLinode/ConfigureForm.tsx
index 83d82c45266..77e0765e1f7 100644
--- a/packages/manager/src/features/linodes/MigrateLinode/ConfigureForm.tsx
+++ b/packages/manager/src/features/linodes/MigrateLinode/ConfigureForm.tsx
@@ -3,12 +3,10 @@ import Paper from 'src/components/core/Paper';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
-import {
-  RegionSelect,
-  flags,
-} from 'src/components/EnhancedSelect/variants/RegionSelect';
+import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelect';
 import { useRegionsQuery } from 'src/queries/regions';
 import { getHumanReadableCountry } from 'src/utilities/formatRegion';
+import { Flag } from 'src/components/Flag';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
@@ -23,13 +21,10 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   currentRegion: {
     display: 'flex',
+    gap: theme.spacing(),
     alignItems: 'center',
     flexDirection: 'row',
     marginBottom: theme.spacing(4),
-    '& svg': {
-      marginRight: theme.spacing(),
-      marginLeft: 14,
-    },
   },
 }));
 
@@ -58,7 +53,7 @@ const ConfigureForm = (props: Props) => {
       <Typography variant="h3">Configure Migration</Typography>
       <Typography>Current Region</Typography>
       <div className={classes.currentRegion}>
-        {flags[country]?.()}
+        <Flag country={country.toLowerCase()} />
         <Typography>{`${getHumanReadableCountry(props.currentRegion)}: ${
           currentActualRegion?.label ?? currentRegion
         }`}</Typography>

From 38eb1efd5a186e35d8209e41af58a5d72a3878bf Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Wed, 12 Apr 2023 17:20:13 -0400
Subject: [PATCH 4/7] make it truly dynamic

---
 .../variants/RegionSelect/RegionSelect.tsx    |  45 +--
 .../variants/RegionSelect/utils.ts            | 267 ++++++++++++++++++
 packages/manager/src/components/Flag.tsx      |   3 +-
 3 files changed, 294 insertions(+), 21 deletions(-)
 create mode 100644 packages/manager/src/components/EnhancedSelect/variants/RegionSelect/utils.ts

diff --git a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx
index f736b5923e0..3098c99c37b 100644
--- a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx
+++ b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx
@@ -7,6 +7,11 @@ import SingleValue from 'src/components/EnhancedSelect/components/SingleValue';
 import { Region } from '@linode/api-v4/lib/regions';
 import RegionOption, { RegionItem } from './RegionOption';
 import { Flag } from 'src/components/Flag';
+import {
+  CONTINENT_CODE_TO_CONTINENT,
+  COUNTRY_CODE_TO_CONTINENT_CODE,
+  ContinentNames,
+} from './utils';
 
 interface Props extends Omit<BaseSelectProps, 'onChange'> {
   regions: Region[];
@@ -23,41 +28,41 @@ export const selectStyles = {
   menuList: (base: any) => ({ ...base, maxHeight: `40vh !important` }),
 };
 
-type RegionGroups = 'North America' | 'Europe' | 'Asia Pacific' | 'Other';
+type RegionGroup = ContinentNames | 'Other';
 
 export const getRegionOptions = (regions: Region[]) => {
-  const groups: Record<RegionGroups, RegionItem[]> = {
+  const groups: Record<RegionGroup, RegionItem[]> = {
     'North America': [],
     Europe: [],
-    'Asia Pacific': [],
+    Asia: [],
+    'South America': [],
+    Oceania: [],
+    Africa: [],
+    Antartica: [],
     Other: [],
   };
 
-  const countryToGroupMap: Record<string, RegionGroups> = {
-    ca: 'North America',
-    us: 'North America',
-    de: 'Europe',
-    uk: 'Europe',
-    eu: 'Europe',
-    fr: 'Europe',
-    jp: 'Asia Pacific',
-    sg: 'Asia Pacific',
-    in: 'Asia Pacific',
-    au: 'Asia Pacific',
-  };
-
   for (const region of regions) {
-    const country = region.country.toLowerCase();
+    const country = region.country.toUpperCase();
+
+    const continentCode =
+      COUNTRY_CODE_TO_CONTINENT_CODE[
+        country as keyof typeof COUNTRY_CODE_TO_CONTINENT_CODE
+      ];
+
+    const group = continentCode
+      ? CONTINENT_CODE_TO_CONTINENT[continentCode] ?? 'Other'
+      : 'Other';
 
-    groups[countryToGroupMap[country]].push({
+    groups[group].push({
       label: `${region.label} (${region.id})`,
       value: region.id,
-      flag: <Flag country={country} />,
+      flag: <Flag country={region.country} />,
       country: region.country,
     });
   }
 
-  return Object.keys(groups).map((group: RegionGroups) => ({
+  return Object.keys(groups).map((group: RegionGroup) => ({
     label: group,
     options: groups[group].sort(sortRegions),
   }));
diff --git a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/utils.ts b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/utils.ts
new file mode 100644
index 00000000000..fbf836fa492
--- /dev/null
+++ b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/utils.ts
@@ -0,0 +1,267 @@
+// Thank you https://github.com/BRIXTOL/country-continent
+
+export const COUNTRY_CODE_TO_CONTINENT_CODE = Object.freeze({
+  AD: 'EU',
+  AE: 'AS',
+  AF: 'AS',
+  AG: 'NA',
+  AI: 'NA',
+  AL: 'EU',
+  AM: 'AS',
+  AO: 'AF',
+  AQ: 'AN',
+  AR: 'SA',
+  AS: 'OC',
+  AT: 'EU',
+  AU: 'OC',
+  AW: 'NA',
+  AX: 'EU',
+  AZ: 'AS',
+  BA: 'EU',
+  BB: 'NA',
+  BD: 'AS',
+  BE: 'EU',
+  BF: 'AF',
+  BG: 'EU',
+  BH: 'AS',
+  BI: 'AF',
+  BJ: 'AF',
+  BL: 'NA',
+  BM: 'NA',
+  BN: 'AS',
+  BO: 'SA',
+  BQ: 'NA',
+  BR: 'SA',
+  BS: 'NA',
+  BT: 'AS',
+  BV: 'AN',
+  BW: 'AF',
+  BY: 'EU',
+  BZ: 'NA',
+  CA: 'NA',
+  CC: 'AS',
+  CD: 'AF',
+  CF: 'AF',
+  CG: 'AF',
+  CH: 'EU',
+  CI: 'AF',
+  CK: 'OC',
+  CL: 'SA',
+  CM: 'AF',
+  CN: 'AS',
+  CO: 'SA',
+  CR: 'NA',
+  CU: 'NA',
+  CV: 'AF',
+  CW: 'NA',
+  CX: 'AS',
+  CY: 'EU',
+  CZ: 'EU',
+  DE: 'EU',
+  DJ: 'AF',
+  DK: 'EU',
+  DM: 'NA',
+  DO: 'NA',
+  DZ: 'AF',
+  EC: 'SA',
+  EE: 'EU',
+  EG: 'AF',
+  EH: 'AF',
+  ER: 'AF',
+  ES: 'EU',
+  ET: 'AF',
+  FI: 'EU',
+  FJ: 'OC',
+  FK: 'SA',
+  FM: 'OC',
+  FO: 'EU',
+  FR: 'EU',
+  GA: 'AF',
+  GB: 'EU',
+  UK: 'EU', // for compatability with the Linode API
+  GD: 'NA',
+  GE: 'AS',
+  GF: 'SA',
+  GG: 'EU',
+  GH: 'AF',
+  GI: 'EU',
+  GL: 'NA',
+  GM: 'AF',
+  GN: 'AF',
+  GP: 'NA',
+  GQ: 'AF',
+  GR: 'EU',
+  GS: 'AN',
+  GT: 'NA',
+  GU: 'OC',
+  GW: 'AF',
+  GY: 'SA',
+  HK: 'AS',
+  HM: 'AN',
+  HN: 'NA',
+  HR: 'EU',
+  HT: 'NA',
+  HU: 'EU',
+  ID: 'AS',
+  IE: 'EU',
+  IL: 'AS',
+  IM: 'EU',
+  IN: 'AS',
+  IO: 'AS',
+  IQ: 'AS',
+  IR: 'AS',
+  IS: 'EU',
+  IT: 'EU',
+  JE: 'EU',
+  JM: 'NA',
+  JO: 'AS',
+  JP: 'AS',
+  KE: 'AF',
+  KG: 'AS',
+  KH: 'AS',
+  KI: 'OC',
+  KM: 'AF',
+  KN: 'NA',
+  KP: 'AS',
+  KR: 'AS',
+  KW: 'AS',
+  KY: 'NA',
+  KZ: 'AS',
+  LA: 'AS',
+  LB: 'AS',
+  LC: 'NA',
+  LI: 'EU',
+  LK: 'AS',
+  LR: 'AF',
+  LS: 'AF',
+  LT: 'EU',
+  LU: 'EU',
+  LV: 'EU',
+  LY: 'AF',
+  MA: 'AF',
+  MC: 'EU',
+  MD: 'EU',
+  ME: 'EU',
+  MF: 'NA',
+  MG: 'AF',
+  MH: 'OC',
+  MK: 'EU',
+  ML: 'AF',
+  MM: 'AS',
+  MN: 'AS',
+  MO: 'AS',
+  MP: 'OC',
+  MQ: 'NA',
+  MR: 'AF',
+  MS: 'NA',
+  MT: 'EU',
+  MU: 'AF',
+  MV: 'AS',
+  MW: 'AF',
+  MX: 'NA',
+  MY: 'AS',
+  MZ: 'AF',
+  NA: 'AF',
+  NC: 'OC',
+  NE: 'AF',
+  NF: 'OC',
+  NG: 'AF',
+  NI: 'NA',
+  NL: 'EU',
+  NO: 'EU',
+  NP: 'AS',
+  NR: 'OC',
+  NU: 'OC',
+  NZ: 'OC',
+  OM: 'AS',
+  PA: 'NA',
+  PE: 'SA',
+  PF: 'OC',
+  PG: 'OC',
+  PH: 'AS',
+  PK: 'AS',
+  PL: 'EU',
+  PM: 'NA',
+  PN: 'OC',
+  PR: 'NA',
+  PS: 'AS',
+  PT: 'EU',
+  PW: 'OC',
+  PY: 'SA',
+  QA: 'AS',
+  RE: 'AF',
+  RO: 'EU',
+  RS: 'EU',
+  RU: 'EU',
+  RW: 'AF',
+  SA: 'AS',
+  SB: 'OC',
+  SC: 'AF',
+  SD: 'AF',
+  SE: 'EU',
+  SG: 'AS',
+  SH: 'AF',
+  SI: 'EU',
+  SJ: 'EU',
+  SK: 'EU',
+  SL: 'AF',
+  SM: 'EU',
+  SN: 'AF',
+  SO: 'AF',
+  SR: 'SA',
+  SS: 'AF',
+  ST: 'AF',
+  SV: 'NA',
+  SX: 'NA',
+  SY: 'AS',
+  SZ: 'AF',
+  TC: 'NA',
+  TD: 'AF',
+  TF: 'AN',
+  TG: 'AF',
+  TH: 'AS',
+  TJ: 'AS',
+  TK: 'OC',
+  TL: 'OC',
+  TM: 'AS',
+  TN: 'AF',
+  TO: 'OC',
+  TR: 'AS',
+  TT: 'NA',
+  TV: 'OC',
+  TW: 'AS',
+  TZ: 'AF',
+  UA: 'EU',
+  UG: 'AF',
+  UM: 'OC',
+  US: 'NA',
+  UY: 'SA',
+  UZ: 'AS',
+  VA: 'EU',
+  VC: 'NA',
+  VE: 'SA',
+  VG: 'NA',
+  VI: 'NA',
+  VN: 'AS',
+  VU: 'OC',
+  WF: 'OC',
+  WS: 'OC',
+  XK: 'EU',
+  YE: 'AS',
+  YT: 'AF',
+  ZA: 'AF',
+  ZM: 'AF',
+  ZW: 'AF',
+});
+
+export const CONTINENT_CODE_TO_CONTINENT = Object.freeze({
+  EU: 'Europe',
+  AS: 'Asia',
+  NA: 'North America',
+  SA: 'South America',
+  OC: 'Oceania',
+  AF: 'Africa',
+  AN: 'Antartica',
+});
+
+export type ContinentNames = typeof CONTINENT_CODE_TO_CONTINENT[keyof typeof CONTINENT_CODE_TO_CONTINENT];
diff --git a/packages/manager/src/components/Flag.tsx b/packages/manager/src/components/Flag.tsx
index e8c9d2d0692..bb836146138 100644
--- a/packages/manager/src/components/Flag.tsx
+++ b/packages/manager/src/components/Flag.tsx
@@ -10,7 +10,8 @@ interface Props {
   country: string;
 }
 
-export const Flag = ({ country }: Props) => {
+export const Flag = (props: Props) => {
+  const country = props.country.toLowerCase();
   return (
     <div
       className={`fi fi-${countryFlagOverrides[country] ?? country} fi-xx`}

From 6c9826a59213e28fbf020512f863a108cc6a4166 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Wed, 12 Apr 2023 17:23:29 -0400
Subject: [PATCH 5/7] remove extra lowercase transformation

---
 .../src/features/linodes/MigrateLinode/ConfigureForm.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/manager/src/features/linodes/MigrateLinode/ConfigureForm.tsx b/packages/manager/src/features/linodes/MigrateLinode/ConfigureForm.tsx
index 77e0765e1f7..79344a11511 100644
--- a/packages/manager/src/features/linodes/MigrateLinode/ConfigureForm.tsx
+++ b/packages/manager/src/features/linodes/MigrateLinode/ConfigureForm.tsx
@@ -53,7 +53,7 @@ const ConfigureForm = (props: Props) => {
       <Typography variant="h3">Configure Migration</Typography>
       <Typography>Current Region</Typography>
       <div className={classes.currentRegion}>
-        <Flag country={country.toLowerCase()} />
+        <Flag country={country} />
         <Typography>{`${getHumanReadableCountry(props.currentRegion)}: ${
           currentActualRegion?.label ?? currentRegion
         }`}</Typography>

From e47f5107b8860ae41f38653d7f0e42dbc2a2c0d8 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Wed, 12 Apr 2023 17:52:10 -0400
Subject: [PATCH 6/7] fix test

---
 .../RegionSelect/RegionSelect.test.tsx        | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.test.tsx b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.test.tsx
index 558c1d8cd7b..01411e30a4e 100644
--- a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.test.tsx
+++ b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.test.tsx
@@ -1,35 +1,35 @@
 import { regions } from 'src/__data__/regionsData';
 import { getRegionOptions, getSelectedRegionById } from './RegionSelect';
 
-const fakeRegion = { ...regions[0], country: 'NZ' };
+const fakeRegion = { ...regions[0], country: 'fake iso code' };
 
-describe('SelectRegionPanel', () => {
-  describe('helper functions', () => {
-    describe('getRegionOptions', () => {
-      it('should return a list of items grouped by country', () => {
-        const groupedRegions = getRegionOptions(regions);
-        const [r1, r2, r3] = groupedRegions;
-        expect(groupedRegions).toHaveLength(3);
-        expect(r1.options).toHaveLength(5);
-        expect(r2.options).toHaveLength(2);
-        expect(r3.options).toHaveLength(4);
-      });
+describe('Region Select helper functions', () => {
+  describe('getRegionOptions', () => {
+    it('should return a list of items grouped by continent', () => {
+      const groupedRegions = getRegionOptions(regions);
+      const [r1, r2, r3] = groupedRegions;
+      expect(groupedRegions).toHaveLength(8);
+      expect(r1.options).toHaveLength(5);
+      expect(r2.options).toHaveLength(2);
+      expect(r3.options).toHaveLength(3);
+    });
 
-      it('should group unrecognized regions as Other', () => {
-        const groupedRegions = getRegionOptions([fakeRegion]);
-        expect(groupedRegions).toHaveLength(1);
-        expect(groupedRegions[0]).toHaveProperty('label', 'Other');
-      });
+    it('should group unrecognized regions as Other', () => {
+      const groupedRegions = getRegionOptions([fakeRegion]);
+      expect(
+        groupedRegions.find((group) => group.label === 'Other')
+      ).toBeDefined();
     });
+  });
 
-    describe('getSelectedRegionById', () => {
-      it('should return the matching Item from a list of GroupedItems', () => {
-        const groupedRegions = getRegionOptions(regions);
-        const selectedID = regions[1].id;
-        expect(
-          getSelectedRegionById(selectedID, groupedRegions)
-        ).toHaveProperty('value', regions[1].id);
-      });
+  describe('getSelectedRegionById', () => {
+    it('should return the matching Item from a list of GroupedItems', () => {
+      const groupedRegions = getRegionOptions(regions);
+      const selectedID = regions[1].id;
+      expect(getSelectedRegionById(selectedID, groupedRegions)).toHaveProperty(
+        'value',
+        regions[1].id
+      );
     });
   });
 });

From c2ad501d24f18e2616f1519f09696e2c748339c6 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Thu, 13 Apr 2023 14:50:57 -0400
Subject: [PATCH 7/7] add changelog entry

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9eec32f3b44..34297c4304e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+
+### Changed:
+- `<RegionSelect />` can now dynamically get country flag and group all countrys #8996
+
 ## [2023-04-03] - v1.90.0
 
 ### Added: