PMM-13508 Pass upgrade error messages to UI

ui/src/hooks/api/useUpdates.tsx

@@ -12,6 +12,7 @@ import {
   StartUpdateResponse,
 } from 'types/updates.types';
 import { AxiosError } from 'axios';
+import { ApiError } from 'types/api.types';
 
 export const useCheckUpdates = (
   options?: UseQueryOptions<GetUpdatesResponse>
@@ -36,7 +37,7 @@ export const useCheckUpdates = (
   });
 
 export const useStartUpdate = (
-  options?: UseMutationOptions<StartUpdateResponse, unknown, StartUpdateBody>
+  options?: UseMutationOptions<StartUpdateResponse, ApiError, StartUpdateBody>
 ) =>
   useMutation({
     mutationFn: (args) => startUpdate(args),

ui/src/pages/updates/update-card/UpdateCard.tsx

@@ -23,6 +23,7 @@ import { UpdateInfo } from '../update-info';
 import { UpdateInProgressCard } from '../update-in-progress-card';
 import { useUpdates } from 'contexts/updates';
 import { ChangeLog } from '../change-log';
+import { capitalize } from 'utils/textUtils';
 
 export const UpdateCard: FC = () => {
   const { inProgress, status, setStatus } = useUpdates();
@@ -41,9 +42,10 @@ export const UpdateCard: FC = () => {
             setAuthToken(response.authToken);
           }
         },
-        onError: () => {
+        onError: (e) => {
+          const message = e.isAxiosError ? e.response?.data.message : e.message;
           setStatus(UpdateStatus.Error);
-          enqueueSnackbar(Messages.error, {
+          enqueueSnackbar(message ? capitalize(message) : Messages.error, {
             variant: 'error',
           });
         },

ui/src/types/api.types.ts

@@ -1,5 +1,9 @@
+import { AxiosError } from 'axios';
+
 export interface ApiErrorResponse {
   error: string;
   code: number;
   message: string;
 }
+
+export interface ApiError extends AxiosError<ApiErrorResponse> {}

ui/src/utils/textUtils.ts

@@ -0,0 +1,2 @@
+export const capitalize = (text: string): string =>
+  text.length ? text[0].toUpperCase() + text.slice(1) : '';