Region list select in Add Tier screen (#1657)

Region list select in Add Tier screen

portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx

@@ -45,6 +45,8 @@ import BackLink from "../../../../common/BackLink";
 import PageLayout from "../../Common/Layout/PageLayout";
 import { IAM_PAGES } from "../../../../common/SecureComponent/permissions";
 
+import RegionSelectWrapper from "./RegionSelectWrapper";
+
 const styles = (theme: Theme) =>
   createStyles({
     ...modalBasic,
@@ -483,16 +485,15 @@ const AddTierConfiguration = ({
                     }}
                     required
                   />
-                  <InputBoxWrapper
-                    id="region"
-                    name="region"
-                    label="Region"
-                    placeholder="Enter Region"
-                    value={region}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      setRegion(e.target.value);
+                  <RegionSelectWrapper
+                    onChange={(value) => {
+                      setRegion(value);
                     }}
                     required={type !== "minio"}
+                    label={"Region"}
+                    id="region"
+                    name="region"
+                    type={type}
                   />
                   {type === s3ServiceName ||
                     (type === minioServiceName && (

portal-ui/src/screens/Console/Configurations/TiersConfiguration/RegionSelect.tsx

@@ -0,0 +1,159 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+
+import { Autocomplete, Box, TextField } from "@mui/material";
+
+import s3Regions from "./s3-regions";
+import gcsRegions from "./gcs-regions";
+import azRegions from "./azure-regions";
+
+const getRegions = (type: string): any => {
+  if (type === "s3") {
+    return s3Regions;
+  }
+  if (type === "gcs") {
+    return gcsRegions;
+  }
+  if (type === "azure") {
+    return azRegions;
+  }
+
+  return [];
+};
+
+const RegionSelect = ({
+  type,
+  onChange,
+  inputProps,
+}: {
+  type: "minio" | "s3" | "gcs" | "azure" | "unsupported";
+  onChange: (obj: any) => void;
+  inputProps?: any;
+}) => {
+  const regionList = getRegions(type);
+  const [value, setValue] = React.useState("");
+
+  return (
+    <Autocomplete
+      sx={{
+        "& .MuiOutlinedInput-root": {
+          padding: 0,
+          paddingLeft: "10px",
+          fontSize: 13,
+          fontWeight: 600,
+        },
+        "& .MuiAutocomplete-inputRoot": {
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: "#e5e5e5",
+            borderWidth: 1,
+          },
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            borderColor: "#07193E",
+            borderWidth: 1,
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: "#07193E",
+            borderWidth: 1,
+          },
+        },
+      }}
+      freeSolo
+      selectOnFocus
+      handleHomeEndKeys
+      onChange={(event, newValue) => {
+        let newVal: any = newValue;
+
+        if (typeof newValue === "string") {
+          newVal = {
+            label: newValue,
+          };
+        } else if (newValue && newValue.inputValue) {
+          // Create a new value from the user input
+          newVal = {
+            label: newValue.inputValue,
+          };
+        } else {
+          newVal = newValue;
+        }
+        setValue(newVal);
+        onChange(newVal?.value);
+      }}
+      value={value}
+      onInputChange={(e: any) => {
+        const { target: { value = "" } = {} } = e || {};
+        onChange(value);
+      }}
+      getOptionLabel={(option) => {
+        // Value selected with enter, right from the input
+        if (typeof option === "string") {
+          return option;
+        }
+        // Add "xxx" option created dynamically
+        if (option.inputValue) {
+          return option.inputValue;
+        }
+        // Regular option
+        return option.value;
+      }}
+      options={regionList}
+      filterOptions={(opts: any[], state: any) => {
+        const filterText = state.inputValue.toLowerCase();
+
+        return opts.filter((opt) =>
+          `${opt.label.toLowerCase()}${opt.value.toLowerCase()}`.includes(
+            filterText
+          )
+        );
+      }}
+      renderOption={(props: any, opt: any) => {
+        return (
+          <li {...props}>
+            <Box
+              sx={{
+                display: "flex",
+                flexFlow: "column",
+                alignItems: "baseline",
+                padding: "4px",
+                borderBottom: "1px solid #eaeaea",
+                cursor: "pointer",
+                width: "100%",
+
+                "& .label": {
+                  fontSize: "13px",
+                  fontWeight: 500,
+                },
+                "& .value": {
+                  fontSize: "11px",
+                  fontWeight: 400,
+                },
+              }}
+            >
+              <span className="label">{opt.value}</span>
+              <span className="value">{opt.label}</span>
+            </Box>
+          </li>
+        );
+      }}
+      renderInput={(params) => (
+        <TextField {...params} {...inputProps} fullWidth />
+      )}
+    />
+  );
+};
+
+export default RegionSelect;

portal-ui/src/screens/Console/Configurations/TiersConfiguration/RegionSelectWrapper.tsx

@@ -0,0 +1,197 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+import React from "react";
+import { Grid, IconButton, InputLabel, Tooltip } from "@mui/material";
+import { InputProps as StandardInputProps } from "@mui/material/Input";
+import { Theme } from "@mui/material/styles";
+import createStyles from "@mui/styles/createStyles";
+import makeStyles from "@mui/styles/makeStyles";
+import withStyles from "@mui/styles/withStyles";
+import {
+  fieldBasic,
+  inputFieldStyles,
+  tooltipHelper,
+} from "../../Common/FormComponents/common/styleLibrary";
+import HelpIcon from "../../../../icons/HelpIcon";
+import clsx from "clsx";
+import RegionSelect from "./RegionSelect";
+
+interface RegionSelectBoxProps {
+  label: string;
+  classes?: any;
+  onChange: (value: string) => void;
+  onKeyPress?: (e: any) => void;
+  value?: string | boolean;
+  id: string;
+  name: string;
+  disabled?: boolean;
+  type: "minio" | "s3" | "gcs" | "azure";
+  tooltip?: string;
+  index?: number;
+  error?: string;
+  required?: boolean;
+  placeholder?: string;
+  overlayId?: string;
+  overlayIcon?: any;
+  overlayAction?: () => void;
+  overlayObject?: any;
+  extraInputProps?: StandardInputProps["inputProps"];
+  noLabelMinWidth?: boolean;
+  pattern?: string;
+  autoFocus?: boolean;
+  className?: string;
+}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    ...fieldBasic,
+    ...tooltipHelper,
+    textBoxContainer: {
+      flexGrow: 1,
+      position: "relative",
+      minWidth: 160,
+    },
+    overlayAction: {
+      position: "absolute",
+      right: 5,
+      top: 6,
+      "& svg": {
+        maxWidth: 15,
+        maxHeight: 15,
+      },
+      "&.withLabel": {
+        top: 5,
+      },
+    },
+    inputLabel: {
+      ...fieldBasic.inputLabel,
+      fontWeight: "normal",
+    },
+  });
+
+const inputStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    ...inputFieldStyles,
+  })
+);
+
+const RegionSelectWrapper = ({
+  label,
+  onChange,
+  id,
+  name,
+  type,
+  tooltip = "",
+  index = 0,
+  error = "",
+  required = false,
+  overlayId,
+  overlayIcon = null,
+  overlayObject = null,
+  extraInputProps = {},
+  overlayAction,
+  noLabelMinWidth = false,
+  classes,
+  className = "",
+}: RegionSelectBoxProps) => {
+  const inputClasses = inputStyles();
+
+  let inputProps: any = {
+    "data-index": index,
+    ...extraInputProps,
+    name: name,
+    id: id,
+    classes: inputClasses,
+  };
+
+  return (
+    <React.Fragment>
+      <Grid
+        container
+        className={clsx(
+          className !== "" ? className : "",
+          error !== "" ? classes.errorInField : classes.inputBoxContainer
+        )}
+      >
+        {label !== "" && (
+          <InputLabel
+            htmlFor={id}
+            className={
+              noLabelMinWidth ? classes.noMinWidthLabel : classes.inputLabel
+            }
+          >
+            <span>
+              {label}
+              {required ? "*" : ""}
+            </span>
+            {tooltip !== "" && (
+              <div className={classes.tooltipContainer}>
+                <Tooltip title={tooltip} placement="top-start">
+                  <div className={classes.tooltip}>
+                    <HelpIcon />
+                  </div>
+                </Tooltip>
+              </div>
+            )}
+          </InputLabel>
+        )}
+
+        <div className={classes.textBoxContainer}>
+          <RegionSelect
+            type={type}
+            inputProps={inputProps}
+            onChange={onChange}
+          />
+          {overlayIcon && (
+            <div
+              className={`${classes.overlayAction} ${
+                label !== "" ? "withLabel" : ""
+              }`}
+            >
+              <IconButton
+                onClick={
+                  overlayAction
+                    ? () => {
+                        overlayAction();
+                      }
+                    : () => null
+                }
+                id={overlayId}
+                size={"small"}
+                disableFocusRipple={false}
+                disableRipple={false}
+                disableTouchRipple={false}
+              >
+                {overlayIcon}
+              </IconButton>
+            </div>
+          )}
+          {overlayObject && (
+            <div
+              className={`${classes.overlayAction} ${
+                label !== "" ? "withLabel" : ""
+              }`}
+            >
+              {overlayObject}
+            </div>
+          )}
+        </div>
+      </Grid>
+    </React.Fragment>
+  );
+};
+
+export default withStyles(styles)(RegionSelectWrapper);

portal-ui/src/screens/Console/Configurations/TiersConfiguration/azure-regions.ts

@@ -0,0 +1,321 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import { RegionEntry } from "./types";
+
+const azureRegions: RegionEntry[] = [
+  {
+    label: "Asia",
+    value: "asia",
+  },
+  {
+    label: "Asia Pacific",
+    value: "asiapacific",
+  },
+  {
+    label: "Australia",
+    value: "australia",
+  },
+  {
+    label: "Australia Central",
+    value: "australiacentral",
+  },
+  {
+    label: "Australia Central 2",
+    value: "australiacentral2",
+  },
+  {
+    label: "Australia East",
+    value: "australiaeast",
+  },
+  {
+    label: "Australia Southeast",
+    value: "australiasoutheast",
+  },
+  {
+    label: "Brazil",
+    value: "brazil",
+  },
+  {
+    label: "Brazil South",
+    value: "brazilsouth",
+  },
+  {
+    label: "Brazil Southeast",
+    value: "brazilsoutheast",
+  },
+  {
+    label: "Canada",
+    value: "canada",
+  },
+  {
+    label: "Canada Central",
+    value: "canadacentral",
+  },
+  {
+    label: "Canada East",
+    value: "canadaeast",
+  },
+  {
+    label: "Central India",
+    value: "centralindia",
+  },
+  {
+    label: "Central US",
+    value: "centralus",
+  },
+  {
+    label: "Central US (Stage)",
+    value: "centralusstage",
+  },
+  {
+    label: "Central US EUAP",
+    value: "centraluseuap",
+  },
+  {
+    label: "East Asia",
+    value: "eastasia",
+  },
+  {
+    label: "East Asia (Stage)",
+    value: "eastasiastage",
+  },
+  {
+    label: "East US",
+    value: "eastus",
+  },
+  {
+    label: "East US (Stage)",
+    value: "eastusstage",
+  },
+  {
+    label: "East US 2",
+    value: "eastus2",
+  },
+  {
+    label: "East US 2 (Stage)",
+    value: "eastus2stage",
+  },
+  {
+    label: "East US 2 EUAP",
+    value: "eastus2euap",
+  },
+  {
+    label: "Europe",
+    value: "europe",
+  },
+  {
+    label: "France",
+    value: "france",
+  },
+  {
+    label: "France Central",
+    value: "francecentral",
+  },
+  {
+    label: "France South",
+    value: "francesouth",
+  },
+  {
+    label: "Germany",
+    value: "germany",
+  },
+  {
+    label: "Germany North",
+    value: "germanynorth",
+  },
+  {
+    label: "Germany West Central",
+    value: "germanywestcentral",
+  },
+  {
+    label: "Global",
+    value: "global",
+  },
+  {
+    label: "India",
+    value: "india",
+  },
+  {
+    label: "Japan",
+    value: "japan",
+  },
+  {
+    label: "Japan East",
+    value: "japaneast",
+  },
+  {
+    label: "Japan West",
+    value: "japanwest",
+  },
+  {
+    label: "Jio India Central",
+    value: "jioindiacentral",
+  },
+  {
+    label: "Jio India West",
+    value: "jioindiawest",
+  },
+  {
+    label: "Korea",
+    value: "korea",
+  },
+  {
+    label: "Korea Central",
+    value: "koreacentral",
+  },
+  {
+    label: "Korea South",
+    value: "koreasouth",
+  },
+  {
+    label: "North Central US",
+    value: "northcentralus",
+  },
+  {
+    label: "North Central US (Stage)",
+    value: "northcentralusstage",
+  },
+  {
+    label: "North Europe",
+    value: "northeurope",
+  },
+  {
+    label: "Norway",
+    value: "norway",
+  },
+  {
+    label: "Norway East",
+    value: "norwayeast",
+  },
+  {
+    label: "Norway West",
+    value: "norwaywest",
+  },
+  {
+    label: "South Africa",
+    value: "southafrica",
+  },
+  {
+    label: "South Africa North",
+    value: "southafricanorth",
+  },
+  {
+    label: "South Africa West",
+    value: "southafricawest",
+  },
+  {
+    label: "South Central US",
+    value: "southcentralus",
+  },
+  {
+    label: "South Central US (Stage)",
+    value: "southcentralusstage",
+  },
+  {
+    label: "South India",
+    value: "southindia",
+  },
+  {
+    label: "Southeast Asia",
+    value: "southeastasia",
+  },
+  {
+    label: "Southeast Asia (Stage)",
+    value: "southeastasiastage",
+  },
+  {
+    label: "Sweden Central",
+    value: "swedencentral",
+  },
+  {
+    label: "Switzerland",
+    value: "switzerland",
+  },
+  {
+    label: "Switzerland North",
+    value: "switzerlandnorth",
+  },
+  {
+    label: "Switzerland West",
+    value: "switzerlandwest",
+  },
+  {
+    label: "UAE Central",
+    value: "uaecentral",
+  },
+  {
+    label: "UAE North",
+    value: "uaenorth",
+  },
+  {
+    label: "UK South",
+    value: "uksouth",
+  },
+  {
+    label: "UK West",
+    value: "ukwest",
+  },
+  {
+    label: "United Arab Emirates",
+    value: "uae",
+  },
+  {
+    label: "United Kingdom",
+    value: "uk",
+  },
+  {
+    label: "United States",
+    value: "unitedstates",
+  },
+  {
+    label: "United States EUAP",
+    value: "unitedstateseuap",
+  },
+  {
+    label: "West Central US",
+    value: "westcentralus",
+  },
+  {
+    label: "West Europe",
+    value: "westeurope",
+  },
+  {
+    label: "West India",
+    value: "westindia",
+  },
+  {
+    label: "West US",
+    value: "westus",
+  },
+  {
+    label: "West US (Stage)",
+    value: "westusstage",
+  },
+  {
+    label: "West US 2",
+    value: "westus2",
+  },
+  {
+    label: "West US 2 (Stage)",
+    value: "westus2stage",
+  },
+  {
+    label: "West US 3",
+    value: "westus3",
+  },
+];
+export default azureRegions;

portal-ui/src/screens/Console/Configurations/TiersConfiguration/gcs-regions.ts

@@ -0,0 +1,35 @@
+import { RegionEntry } from "./types";
+
+const gcsRegions: RegionEntry[] = [
+  { label: "Montréal", value: "NORTHAMERICA-NORTHEAST1" },
+  { label: "Toronto", value: "NORTHAMERICA-NORTHEAST2" },
+  { label: "Iowa", value: "US-CENTRAL1" },
+  { label: "South Carolina", value: "US-EAST1" },
+  { label: "Northern Virginia", value: "US-EAST4" },
+  { label: "Oregon", value: "US-WEST1" },
+  { label: "Los Angeles", value: "US-WEST2" },
+  { label: "Salt Lake City", value: "US-WEST3" },
+  { label: "Las Vegas", value: "US-WEST4" },
+  { label: "São Paulo", value: "SOUTHAMERICA-EAST1" },
+  { label: "Santiago", value: "SOUTHAMERICA-WEST1" },
+  { label: "Warsaw", value: "EUROPE-CENTRAL2" },
+  { label: "Finland", value: "EUROPE-NORTH1" },
+  { label: "Belgium", value: "EUROPE-WEST1" },
+  { label: "London", value: "EUROPE-WEST2" },
+  { label: "Frankfurt", value: "EUROPE-WEST3" },
+  { label: "Netherlands", value: "EUROPE-WEST4" },
+  { label: "Zürich", value: "EUROPE-WEST6" },
+  { label: "Taiwan", value: "ASIA-EAST1" },
+  { label: "Hong Kong", value: "ASIA-EAST2" },
+  { label: "Tokyo", value: "ASIA-NORTHEAST1" },
+  { label: "Osaka", value: "ASIA-NORTHEAST2" },
+  { label: "Seoul", value: "ASIA-NORTHEAST3" },
+  { label: "Mumbai", value: "ASIA-SOUTH1" },
+  { label: "Delhi", value: "ASIA-SOUTH2" },
+  { label: "Singapore", value: "ASIA-SOUTHEAST1" },
+  { label: "Jakarta", value: "ASIA-SOUTHEAST2" },
+  { label: "Sydney", value: "AUSTRALIA-SOUTHEAST1" },
+  { label: "Melbourne", value: "AUSTRALIA-SOUTHEAST2" },
+];
+
+export default gcsRegions;

portal-ui/src/screens/Console/Configurations/TiersConfiguration/s3-regions.tsx

@@ -0,0 +1,48 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import { RegionEntry } from "./types";
+
+const s3Regions: RegionEntry[] = [
+  { label: "US East (Ohio)", value: "us-east-2" },
+  { label: "US East (N. Virginia)", value: "us-east-1" },
+  { label: "US West (N. California)", value: "us-west-1" },
+  { label: "US West (Oregon)", value: "us-west-2" },
+  { label: "Africa (Cape Town)", value: "af-south-1" },
+  { label: "Asia Pacific (Hong Kong)***", value: "ap-east-1" },
+  { label: "Asia Pacific (Jakarta)", value: "ap-southeast-3" },
+  { label: "Asia Pacific (Mumbai)", value: "ap-south-1" },
+  { label: "Asia Pacific (Osaka)", value: "ap-northeast-3" },
+  { label: "Asia Pacific (Seoul)", value: "ap-northeast-2" },
+  { label: "Asia Pacific (Singapore)", value: "ap-southeast-1" },
+  { label: "Asia Pacific (Sydney)", value: "ap-southeast-2" },
+  { label: "Asia Pacific (Tokyo)", value: "ap-northeast-1" },
+  { label: "Canada (Central)", value: "ca-central-1" },
+  { label: "China (Beijing)", value: "cn-north-1" },
+  { label: "China (Ningxia)", value: "cn-northwest-1" },
+  { label: "Europe (Frankfurt)", value: "eu-central-1" },
+  { label: "Europe (Ireland)", value: "eu-west-1" },
+  { label: "Europe (London)", value: "eu-west-2" },
+  { label: "Europe (Milan)", value: "eu-south-1" },
+  { label: "Europe (Paris)", value: "eu-west-3" },
+  { label: "Europe (Stockholm)", value: "eu-north-1" },
+  { label: "South America (São Paulo)", value: "sa-east-1" },
+  { label: "Middle East (Bahrain)", value: "me-south-1" },
+  { label: "AWS GovCloud (US-East)", value: "us-gov-east-1" },
+  { label: "AWS GovCloud (US-West)", value: "us-gov-west-1" },
+];
+
+export default s3Regions;

portal-ui/src/screens/Console/Configurations/TiersConfiguration/types.ts

@@ -62,3 +62,8 @@ export interface ITierUpdateCreds {
   secret_key: string;
   creds: string;
 }
+
+export interface RegionEntry {
+  label: string;
+  value: string;
+}