gcp region stuff

dashboard/src/components/image-selector/ImageSelector.tsx

@@ -62,8 +62,7 @@ export default class ImageSelector extends Component<PropsType, StateType> {
               if (err) {
                 errors.push(1);
               } else {
-                console.log(res.data);
-                res.data.sort((a: any, b: any) => (a.created_at > b.created_at) ? 1 : -1);
+                res.data.sort((a: any, b: any) => (a.name > b.name) ? 1 : -1);
                 // Loop over found image repositories
                 let newImg = res.data.map((img: any) => {
                   if (this.props.selectedImageUrl === img.uri) {

dashboard/src/main/home/provisioner/GCPFormSection.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import close from '../../../assets/close.png';
 
+import SelectRow from '../../../components/values-form/SelectRow';
 import InputRow from '../../../components/values-form/InputRow';
 import Helper from '../../../components/values-form/Helper';
 import Heading from '../../../components/values-form/Heading';
@@ -25,6 +26,33 @@ const dummyOptions = [
   { value: 'gke', label: 'Googke Kubernetes Engine (GKE)' },
 ];
 
+const regionOptions = [
+  { value: 'asia-east1', label: 'asia-east1' },
+  { value: 'asia-east2', label: 'asia-east2' },
+  { value: 'asia-northeast1', label: 'asia-northeast1' },
+  { value: 'asia-northeast2', label: 'asia-northeast2' },
+  { value: 'asia-northeast3', label: 'asia-northeast3' },
+  { value: 'asia-south1', label: 'asia-south1' },
+  { value: 'asia-southeast1', label: 'asia-southeast1' },
+  { value: 'asia-southeast2', label: 'asia-southeast2' },
+  { value: 'australia-southeast1', label: 'australia-southeast1' },
+  { value: 'europe-north1', label: 'europe-north1' },
+  { value: 'europe-west1', label: 'europe-west1' },
+  { value: 'europe-west2', label: 'europe-west2' },
+  { value: 'europe-west3', label: 'europe-west3' },
+  { value: 'europe-west4', label: 'europe-west4' },
+  { value: 'europe-west6', label: 'europe-west6' },
+  { value: 'northamerica-northeast1', label: 'northamerica-northeast1' },
+  { value: 'southamerica-east1', label: 'southamerica-east1' },
+  { value: 'us-central1', label: 'us-central1' },
+  { value: 'us-east1', label: 'us-east1' },
+  { value: 'us-east4', label: 'us-east4' },
+  { value: 'us-west1', label: 'us-west1' },
+  { value: 'us-west2', label: 'us-west2' },
+  { value: 'us-west3', label: 'us-west3' },
+  { value: 'us-west4', label: 'us-west4' },
+]
+
 export default class GCPFormSection extends Component<PropsType, StateType> {
   state = {
     gcpRegion: '',
@@ -58,14 +86,13 @@ export default class GCPFormSection extends Component<PropsType, StateType> {
               Guide
             </GuideButton>
           </Heading>
-          <InputRow
-            type='text'
+          <SelectRow
+            options={regionOptions}
+            width='100%'
             value={gcpRegion}
-            setValue={(x: string) => this.setState({ gcpRegion: x })}
+            dropdownMaxHeight='240px'
+            setActiveValue={(x: string) => this.setState({ gcpRegion: x })}
             label='📍 GCP Region'
-            placeholder='ex: us-central1-a'
-            width='100%'
-            isRequired={true}
           />
           <InputRow
             type='text'