Applications form: Fix contributors field handling (and other stuff)

The `contributors` field on the `Application` payload needs to be
a pure `Ref` object or it will be rejected by the REST API call.
Adopt the same set of data transforms used in the archetype-form to
handle getting the correct set of data.

Related changes:
  - REST `createApplication()` function updated to have the proper
    return type (response data is not unwrapped)

  - Query `useCreateApplicationMutation()` updated to properly pass the
    newly created `Application` to the `onSuccess()` handler

  - `onCreateApplicationSuccess()` in the application form updated to
    use the correct onSuccess() response data

Signed-off-by: Scott J Dickerson <sdickers@redhat.com>

client/src/app/api/rest.ts

@@ -271,8 +271,8 @@ export const deleteIdentity = (identity: Identity): AxiosPromise => {
 
 // Axios direct
 
-export const createApplication = (obj: Application): Promise<Application> =>
-  axios.post(`${APPLICATIONS}`, obj);
+export const createApplication = (data: Application) =>
+  axios.post<Application>(`${APPLICATIONS}`, data);
 
 export const deleteApplication = (id: number): Promise<Application> =>
   axios.delete(`${APPLICATIONS}/${id}`);

client/src/app/pages/applications/components/application-form/application-form.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { AxiosError, AxiosResponse } from "axios";
+import { AxiosError } from "axios";
 import { object, string } from "yup";
 import {
   ActionGroup,
@@ -16,7 +16,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 
 import { SimpleSelect, OptionWithValue } from "@app/components/SimpleSelect";
 import { DEFAULT_SELECT_MAX_HEIGHT } from "@app/Constants";
-import { Application, TagRef } from "@app/api/models";
+import { Application, Ref, TagRef } from "@app/api/models";
 import {
   customURLValidation,
   duplicateNameCheck,
@@ -104,7 +104,7 @@ export const ApplicationForm: React.FC<ApplicationFormProps> = ({
     if (tagCategories) {
       setTags(tagCategories.flatMap((f) => f.tags || []));
     }
-  }, []);
+  }, [tagCategories]);
 
   const tagOptions =
     tags?.map((tag) => {
@@ -272,11 +272,11 @@ export const ApplicationForm: React.FC<ApplicationFormProps> = ({
     }
   };
 
-  const onCreateApplicationSuccess = (response: AxiosResponse<Application>) => {
+  const onCreateApplicationSuccess = (data: Application) => {
     pushNotification({
       title: t("toastr.success.createWhat", {
         type: t("terms.application"),
-        what: response.data.name,
+        what: data.name,
       }),
       variant: "success",
     });
@@ -320,9 +320,15 @@ export const ApplicationForm: React.FC<ApplicationFormProps> = ({
       (stakeholder) => formValues?.owner === stakeholder.name
     );
 
-    const matchingContributors = stakeholders?.filter((stakeholder) =>
-      formValues.contributors.includes(stakeholder.name)
-    );
+    const contributors =
+      formValues.contributors === undefined
+        ? undefined
+        : (formValues.contributors
+            .map((name) => stakeholders.find((s) => s.name === name))
+            .map<Ref | undefined>((sh) =>
+              !sh ? undefined : { id: sh.id, name: sh.name }
+            )
+            .filter(Boolean) as Ref[]);
 
     const payload: Application = {
       name: formValues.name.trim(),
@@ -338,7 +344,7 @@ export const ApplicationForm: React.FC<ApplicationFormProps> = ({
       owner: matchingOwner
         ? { id: matchingOwner.id, name: matchingOwner.name }
         : undefined,
-      contributors: matchingContributors,
+      contributors,
       ...(formValues.sourceRepository
         ? {
             repository: {
@@ -445,7 +451,7 @@ export const ApplicationForm: React.FC<ApplicationFormProps> = ({
             name="tags"
             label={t("terms.tags")}
             fieldId="tags"
-            renderInput={({ field: { value, name, onChange } }) => (
+            renderInput={({ field: { value, onChange } }) => (
               <Autocomplete
                 noResultsMessage={t("message.noResultsFoundTitle")}
                 onChange={(selections) => {

client/src/app/queries/applications.ts

@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 
-import { MimeType } from "@app/api/models";
+import { Application, MimeType } from "@app/api/models";
 import {
   createApplication,
   deleteApplication,
@@ -89,14 +89,14 @@ export const useUpdateAllApplicationsMutation = (
 };
 
 export const useCreateApplicationMutation = (
-  onSuccess: (res: any) => void,
+  onSuccess: (data: Application) => void,
   onError: (err: AxiosError) => void
 ) => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: createApplication,
-    onSuccess: (res) => {
-      onSuccess(res);
+    onSuccess: ({ data }) => {
+      onSuccess(data);
       queryClient.invalidateQueries([ApplicationsQueryKey]);
     },
     onError: onError,