Use select input for AWS region selection (#823)

* Use select input for AWS region selection

* Add changeset

.changeset/eight-fans-repair.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-products-feed": patch
+---
+
+Changed input type for region in the AWS credentials section. Region can be now selected from the list, instead of text input.

apps/products-feed/src/modules/app-configuration/s3-configuration-form.tsx

@@ -4,10 +4,11 @@ import { useForm } from "react-hook-form";
 import { Box, Button, Text } from "@saleor/macaw-ui/next";
 
 import React, { useCallback, useMemo } from "react";
-import { Input } from "@saleor/react-hook-form-macaw";
+import { Input, Select } from "@saleor/react-hook-form-macaw";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { trpcClient } from "../trpc/trpc-client";
 import { useDashboardNotification } from "@saleor/apps-shared";
+import { awsRegionList } from "../file-storage/s3/aws-region-list";
 
 type S3BucketConfiguration = Exclude<RootConfig["s3"], null>;
 
@@ -45,13 +46,11 @@ export const S3ConfigurationForm = (props: Props) => {
 
       <Input size={"small"} name={"bucketName"} control={control} label="Bucket name" />
 
-      <Input
+      <Select
-        size={"small"}
-        name={"region"}
         control={control}
-        label="Bucket region"
+        label="Region"
-        helperText={"Use the region code, e.g. 'eu-west-1'"}
+        name={"region"}
-        placeholder={"eu-west-1"}
+        options={awsRegionList.map((region) => ({ label: region, value: region }))}
       />
 
       <Box display={"flex"} flexDirection={"row"} gap={4} justifyContent={"flex-end"}>

apps/products-feed/src/modules/file-storage/s3/aws-region-list.ts

@@ -0,0 +1,31 @@
+export const awsRegionList = [
+  "af-south-1",
+  "ap-east-1",
+  "ap-northeast-1",
+  "ap-northeast-2",
+  "ap-northeast-3",
+  "ap-south-1",
+  "ap-south-2",
+  "ap-southeast-1",
+  "ap-southeast-2",
+  "ap-southeast-3",
+  "ap-southeast-4",
+  "ca-central-1",
+  "eu-central-1",
+  "eu-central-2",
+  "eu-north-1",
+  "eu-south-1",
+  "eu-south-2",
+  "eu-west-1",
+  "eu-west-2",
+  "eu-west-3",
+  "me-central-1",
+  "me-south-1",
+  "sa-east-1",
+  "us-east-1",
+  "us-east-2",
+  "us-gov-east-1",
+  "us-gov-west-1",
+  "us-west-1",
+  "us-west-2",
+] as const;