Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking β€œSign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Made <RegionSelect /> more dynamic #8996

Merged
merged 10 commits into from
Apr 14, 2023
Next Next commit
add france to eupore list
  • Loading branch information
bnussman committed Apr 12, 2023
commit df4d9ab7f165521dcce1df2446cde618f881836f
Original file line number Diff line number Diff line change
@@ -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);
});
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { flags, default } from './RegionSelect';
export { flags, RegionSelect } from './RegionSelect';
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -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';
2 changes: 1 addition & 1 deletion packages/manager/src/features/Images/ImageUpload.tsx
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -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';

Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -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';