From 07999eadc6b13a20d8f1b34c19ee87cc9a480605 Mon Sep 17 00:00:00 2001
From: Krzysztof Wolski <krzysztof.k.wolski@gmail.com>
Date: Fri, 28 Jul 2023 11:57:51 +0200
Subject: [PATCH] Use select input for AWS region selection (#823)

* Use select input for AWS region selection

* Add changeset
---
 .changeset/eight-fans-repair.md               |  5 +++
 .../s3-configuration-form.tsx                 | 13 ++++----
 .../file-storage/s3/aws-region-list.ts        | 31 +++++++++++++++++++
 3 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/eight-fans-repair.md
 create mode 100644 apps/products-feed/src/modules/file-storage/s3/aws-region-list.ts

diff --git a/.changeset/eight-fans-repair.md b/.changeset/eight-fans-repair.md
new file mode 100644
index 0000000..3abaff9
--- /dev/null
+++ b/.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.
diff --git a/apps/products-feed/src/modules/app-configuration/s3-configuration-form.tsx b/apps/products-feed/src/modules/app-configuration/s3-configuration-form.tsx
index d1b2287..c6deefa 100644
--- a/apps/products-feed/src/modules/app-configuration/s3-configuration-form.tsx
+++ b/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
-        size={"small"}
-        name={"region"}
+      <Select
         control={control}
-        label="Bucket region"
-        helperText={"Use the region code, e.g. 'eu-west-1'"}
-        placeholder={"eu-west-1"}
+        label="Region"
+        name={"region"}
+        options={awsRegionList.map((region) => ({ label: region, value: region }))}
       />
 
       <Box display={"flex"} flexDirection={"row"} gap={4} justifyContent={"flex-end"}>
diff --git a/apps/products-feed/src/modules/file-storage/s3/aws-region-list.ts b/apps/products-feed/src/modules/file-storage/s3/aws-region-list.ts
new file mode 100644
index 0000000..a945b6c
--- /dev/null
+++ b/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;