feat: Introduce generic auth steps

packages/web/src/components/AddAppConnection/index.tsx

@@ -1,4 +1,4 @@
-import { useMutation  } from '@apollo/client';
+import { useApolloClient, useMutation  } from '@apollo/client';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
@@ -6,8 +6,9 @@ import Dialog from '@mui/material/Dialog';
 import Button from '@mui/material/Button';
 import { FieldValues, SubmitHandler } from 'react-hook-form';
 
+import computeAuthStepVariables from 'helpers/computeAuthStepVariables';
 import InputCreator from 'components/InputCreator';
-import { CREATE_CREDENTIALS } from 'graphql/mutations/create-credentials';
+import MUTATIONS from 'graphql/mutations';
 import type { App } from 'types/app';
 import { Form } from './style';
 
@@ -16,26 +17,33 @@ type AddAppConnectionProps = {
   application: App;
 };
 
+type Response = {
+  [key: string]: any;
+}
+
 export default function AddAppConnection(props: AddAppConnectionProps){
   const { application, onClose } = props;
-  const { name, fields } = application;
+  const { key, fields, authenticationSteps } = application;
 
-  const [createCredentials, { data: newCredentials }] = useMutation(CREATE_CREDENTIALS);
-  console.log('newCredentials', newCredentials)
+  const apollo = useApolloClient();
 
-  const submitHandler: SubmitHandler<FieldValues> = (data) => {
-    const variables = {
-      key: application.key,
-      displayName: data.displayName,
-      data: {
-        consumerKey: data.consumerKey,
-        consumerSecret: data.consumerSecret
-      }
+  const submitHandler: SubmitHandler<FieldValues> = async (data) => {
+    const response: Response = {
+      key,
+      fields: data,
     };
 
-    createCredentials({ variables });
+    for await (const authenticationStep of authenticationSteps) {
+      const mutation = MUTATIONS[authenticationStep.name as string];
+      const variables = computeAuthStepVariables(authenticationStep, response);
 
-    onClose?.();
+      const mutationResponse: any = await apollo.mutate({
+        mutation,
+        variables,
+      });
+
+      response[authenticationStep.name] = mutationResponse.data[authenticationStep.name];
+    }
   };
 
   return (