feat: added field for aws account number in central instance creation modal

Author: sachaudh

src/components/SelectSingle.js

@@ -13,6 +13,7 @@ function SelectSingle({
   isCreatable = false,
   variant = null,
   placeholderText = '',
+  menuAppendTo = '',
 }) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -39,6 +40,7 @@ function SelectSingle({
       isCreatable={isCreatable}
       placeholderText={placeholderText}
       toggleId={id}
+      menuAppendTo={menuAppendTo}
     >
       {children}
     </Select>

src/hooks/apis/useCloudAccounts.js

@@ -0,0 +1,14 @@
+import { useQuery } from 'react-query';
+
+import apiRequest from '../../services/apiRequest';
+
+export const queryKey = 'cloud_accounts';
+
+const getCloudAccounts = async () => {
+  const { data } = await apiRequest.get(`/api/rhacs/v1/cloud_accounts`);
+  return data;
+};
+
+export default function useCloudAccounts() {
+  return useQuery([queryKey], () => getCloudAccounts());
+}

src/routes/InstancesPage/CreateInstanceModal.js

@@ -1,4 +1,5 @@
 /* eslint-disable react/prop-types */
+import React, { useState } from 'react';
 import {
   Alert,
   Button,
@@ -12,7 +13,6 @@ import {
   ToggleGroup,
   ToggleGroupItem,
 } from '@patternfly/react-core';
-import React, { useState } from 'react';
 
 import { regionOptions } from '../../utils/region';
 import SelectSingle from '../../components/SelectSingle';
@@ -22,9 +22,15 @@ const defaultFormValues = {
   cloud_provider: 'aws',
   region: 'us-east-1',
   availabilityZones: 'multi',
+  aws_account_number: '',
 };
 
-function CreateInstanceModal({ isOpen, onClose, onRequestCreate }) {
+function CreateInstanceModal({
+  isOpen,
+  onClose,
+  onRequestCreate,
+  cloudAccountIds,
+}) {
   const [errorMessage, setErrorMessage] = useState(null);
   const [formValues, setFormValues] = useState(defaultFormValues);
   const [isRequestingCreate, setIsRequestingCreate] = useState(false);
@@ -37,6 +43,19 @@ function CreateInstanceModal({ isOpen, onClose, onRequestCreate }) {
     onClose();
   }
 
+  async function onRequestCreateHandler() {
+    setIsRequestingCreate(true);
+    const result = await onRequestCreate(formValues);
+    setIsRequestingCreate(false);
+    if (result instanceof Error) {
+      const errorMessage = result.response.data.reason;
+      setErrorMessage(errorMessage);
+    } else {
+      setFormValues(defaultFormValues);
+      onClose();
+    }
+  }
+
   function onChangeAvailabilityZones(isSelected, event) {
     const { id } = event.currentTarget;
     setFormValues((prevFormValues) => ({
@@ -52,26 +71,24 @@ function CreateInstanceModal({ isOpen, onClose, onRequestCreate }) {
     }));
   }
 
-  function onInputChange(value) {
+  function onChangeAWSAccountNumber(id, selection) {
     setFormValues((prevFormValues) => ({
       ...prevFormValues,
-      name: value,
+      aws_account_number: selection,
     }));
   }
 
-  async function onRequestCreateHandler() {
-    setIsRequestingCreate(true);
-    const result = await onRequestCreate(formValues);
-    setIsRequestingCreate(false);
-    if (result instanceof Error) {
-      const errorMessage = result.response.data.reason;
-      setErrorMessage(errorMessage);
-    } else {
-      setFormValues(defaultFormValues);
-      onClose();
-    }
+  function onInputChangeHandler(fieldName) {
+    return function onInputChange(value) {
+      setFormValues((prevFormValues) => ({
+        ...prevFormValues,
+        [fieldName]: value,
+      }));
+    };
   }
 
+  const onNameChange = onInputChangeHandler('name');
+
   return (
     <Modal
       variant={ModalVariant.small}
@@ -116,7 +133,7 @@ function CreateInstanceModal({ isOpen, onClose, onRequestCreate }) {
             id="name"
             name="name"
             value={formValues.name}
-            onChange={onInputChange}
+            onChange={onNameChange}
           />
         </FormGroup>
         <FormGroup label="Cloud provider" isRequired fieldId="cloud_provider">
@@ -161,6 +178,23 @@ function CreateInstanceModal({ isOpen, onClose, onRequestCreate }) {
             />
           </ToggleGroup>
         </FormGroup>
+        <FormGroup label="AWS account number" fieldId="aws_account_number">
+          <SelectSingle
+            id="aws_account_number"
+            value={formValues.aws_account_number}
+            handleSelect={onChangeAWSAccountNumber}
+            placeholderText="Select an AWS Account"
+            menuAppendTo="parent"
+          >
+            {cloudAccountIds.map((cloudAccountId) => {
+              return (
+                <SelectOption key={cloudAccountId} value={cloudAccountId}>
+                  {cloudAccountId}
+                </SelectOption>
+              );
+            })}
+          </SelectSingle>
+        </FormGroup>
       </Form>
     </Modal>
   );

src/routes/InstancesPage/InstancesPage.js

@@ -36,6 +36,7 @@ import usePagination from '../../hooks/usePagination';
 import useInstances from '../../hooks/apis/useInstances';
 import useCreateInstance from '../../hooks/apis/useCreateInstance';
 import useDeleteInstance from '../../hooks/apis/useDeleteInstance';
+import useCloudAccounts from '../../hooks/apis/useCloudAccounts';
 
 import CreateInstanceModal from './CreateInstanceModal';
 import DeleteInstanceModal from './DeleteInstanceModal';
@@ -78,6 +79,13 @@ function InstancesPage() {
   });
   const [filters, setFilters] = useState({});
 
+  const { data: cloudAccountsData } = useCloudAccounts();
+  const cloudAccountIds =
+    cloudAccountsData?.cloudAccounts?.map(
+      (cloudAccount) => cloudAccount.cloudAccountId
+    ) || [];
+  console.log(cloudAccountIds);
+
   const { data, isFetching } = useInstances({
     query: {
       page,
@@ -109,6 +117,7 @@ function InstancesPage() {
       cloud_provider: values.cloud_provider,
       name: values.name,
       multi_az: values.availabilityZones === 'multi',
+      aws_account_number: values.aws_account_number,
     });
     return response.catch((error) => {
       return error;
@@ -332,6 +341,7 @@ function InstancesPage() {
           isOpen={!!creatingInstance}
           onClose={closeCreateInstanceModal}
           onRequestCreate={onRequestCreate}
+          cloudAccountIds={cloudAccountIds}
         />
         <DeleteInstanceModal
           instance={deletingInstance}