fix(striker-ui): revise axios instance to use default data transformers

striker-ui/components/Files/FileEditForm.tsx

@@ -1,3 +1,4 @@
+import { Box, Checkbox, checkboxClasses } from '@mui/material';
 import { AxiosResponse } from 'axios';
 import {
   FormEventHandler,
@@ -5,18 +6,17 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { Box, Checkbox, checkboxClasses } from '@mui/material';
 
 import API_BASE_URL from '../../lib/consts/API_BASE_URL';
 import { GREY, RED, TEXT } from '../../lib/consts/DEFAULT_THEME';
 
+import api from '../../lib/api';
 import ConfirmDialog from '../ConfirmDialog';
 import ContainedButton from '../ContainedButton';
 import FileInfo from './FileInfo';
 import Spinner from '../Spinner';
 
 import fetchJSON from '../../lib/fetchers/fetchJSON';
-import mainAxiosInstance from '../../lib/singletons/mainAxiosInstance';
 
 type ReducedFileLocation = Partial<
   Pick<FileLocation, 'fileLocationUUID' | 'isFileLocationActive'>
@@ -127,17 +127,9 @@ const FileEditForm = (
           editRequestContent.fileLocations = changedFileLocations;
         }
 
-        const stringEditFileRequestContent = JSON.stringify(editRequestContent);
+        if (Object.keys(editRequestContent).length > 0) {
-
-        if (stringEditFileRequestContent !== '{}') {
           reducedEditPromises.push(
-            mainAxiosInstance.put(
+            api.put(`/file/${fileUUID}`, editRequestContent),
-              `/file/${fileUUID}`,
-              stringEditFileRequestContent,
-              {
-                headers: { 'Content-Type': 'application/json' },
-              },
-            ),
           );
         }
 
@@ -159,7 +151,7 @@ const FileEditForm = (
 
     const purgePromises = filesToEdit
       .filter(({ isSelected }) => isSelected)
-      .map(({ fileUUID }) => mainAxiosInstance.delete(`/file/${fileUUID}`));
+      .map(({ fileUUID }) => api.delete(`/file/${fileUUID}`));
 
     Promise.all(purgePromises)
       .then(() => {

striker-ui/components/Files/FileUploadForm.tsx

@@ -1,3 +1,4 @@
+import { Box, Input, InputLabel } from '@mui/material';
 import EventEmitter from 'events';
 import {
   ChangeEventHandler,
@@ -6,18 +7,16 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Box, Input, InputLabel } from '@mui/material';
 
 import { UPLOAD_FILE_TYPES } from '../../lib/consts/UPLOAD_FILE_TYPES';
 
+import api from '../../lib/api';
 import { ProgressBar } from '../Bars';
 import ContainedButton from '../ContainedButton';
 import FileInfo from './FileInfo';
 import MessageBox from '../MessageBox';
 import { BodyText } from '../Text';
 
-import mainAxiosInstance from '../../lib/singletons/mainAxiosInstance';
-
 type FileUploadFormProps = {
   onFileUploadComplete?: () => void;
   eventEmitter?: EventEmitter;
@@ -117,7 +116,7 @@ const FileUploadForm = (
         const inUploadFile: InUploadFile = { fileName, progressValue: 0 };
         inUploadFiles.push(inUploadFile);
 
-        mainAxiosInstance
+        api
           .post('/file', fileFormData, {
             headers: {
               'Content-Type': 'multipart/form-data',

striker-ui/components/PrepareHostForm.tsx

@@ -8,8 +8,8 @@ import { FC, useCallback, useMemo, useRef, useState } from 'react';
 import { GREY } from '../lib/consts/DEFAULT_THEME';
 import INPUT_TYPES from '../lib/consts/INPUT_TYPES';
 
+import api from '../lib/api';
 import handleAPIError from '../lib/handleAPIError';
-import mainAxiosInstance from '../lib/singletons/mainAxiosInstance';
 import {
   buildDomainTestBatch,
   buildIPAddressTestBatch,
@@ -210,7 +210,7 @@ const PrepareHostForm: FC = () => {
           setMessage,
           setIsSubmitting,
         ) => {
-          mainAxiosInstance
+          api
             .put<{
               hostName: string;
               hostOS: string;
@@ -218,21 +218,10 @@ const PrepareHostForm: FC = () => {
               isConnected: boolean;
               isInetConnected: boolean;
               isOSRegistered: boolean;
-            }>(
+            }>('/command/inquire-host', {
-              '/command/inquire-host',
+              ipAddress: getIdentifier?.call(null),
-              {
+              password: getPassphrase?.call(null),
-                ipAddress: getIdentifier?.call(null),
+            })
-                password: getPassphrase?.call(null),
-              },
-              {
-                transformRequest: (data, headers = {}) => {
-                  headers['Content-Type'] = 'application/json';
-
-                  return JSON.stringify(data);
-                },
-                transformResponse: (data) => JSON.parse(data),
-              },
-            )
             .then(
               ({
                 data: {

striker-ui/components/ProvisionServerDialog.tsx

@@ -13,12 +13,12 @@ import { v4 as uuidv4 } from 'uuid';
 
 import { BLUE, RED, TEXT } from '../lib/consts/DEFAULT_THEME';
 
+import api from '../lib/api';
 import Autocomplete from './Autocomplete';
 import ConfirmDialog from './ConfirmDialog';
 import ContainedButton from './ContainedButton';
 import { dsize, dsizeToByte } from '../lib/format_data_size_wrappers';
 import IconButton, { IconButtonProps } from './IconButton';
-import mainAxiosInstance from '../lib/singletons/mainAxiosInstance';
 import MessageBox, { MessageBoxProps } from './MessageBox';
 import OutlinedInputWithLabel from './OutlinedInputWithLabel';
 import OutlinedLabeledInputWithSelect from './OutlinedLabeledInputWithSelect';
@@ -1462,16 +1462,14 @@ const ProvisionServerDialog = ({
   };
 
   useEffect(() => {
-    mainAxiosInstance
+    api
       .get('/anvil', {
         params: {
           anvilUUIDs: 'all',
           isForProvisionServer: true,
         },
       })
-      .then(({ data: stringData }) => {
+      .then(({ data }) => {
-        const data = JSON.parse(stringData);
-
         const {
           anvils: ueAllAnvils,
           anvilSelectItems: ueAnvilSelectItems,
@@ -1787,7 +1785,7 @@ const ProvisionServerDialog = ({
             setIsOpenProvisionConfirmDialog(false);
           }}
           onProceedAppend={() => {
-            const requestBody = JSON.stringify({
+            const requestBody = {
               serverName: inputServerNameValue,
               cpuCores: inputCPUCoresValue,
               memory: memory.toString(),
@@ -1799,18 +1797,14 @@ const ProvisionServerDialog = ({
               driverISOFileUUID: inputDriverISOFileUUID,
               anvilUUID: inputAnvilValue,
               optimizeForOS: inputOptimizeForOSValue?.key,
-            });
+            };
 
             setIsProvisionRequestInProgress(true);
 
-            mainAxiosInstance
+            api.post('/server', requestBody).then(() => {
-              .post('/server', requestBody, {
+              setIsProvisionRequestInProgress(false);
-                headers: { 'Content-Type': 'application/json' },
+              setSuccessfulProvisionCount(successfulProvisionCount + 1);
-              })
+            });
-              .then(() => {
-                setIsProvisionRequestInProgress(false);
-                setSuccessfulProvisionCount(successfulProvisionCount + 1);
-              });
 
             setIsOpenProvisionConfirmDialog(false);
           }}

striker-ui/components/StrikerInitForm.tsx

@@ -1,6 +1,7 @@
 import { Grid } from '@mui/material';
 import { FC, useCallback, useMemo, useRef, useState } from 'react';
 
+import api from '../lib/api';
 import ConfirmDialog from './ConfirmDialog';
 import ContainedButton from './ContainedButton';
 import FlexBox from './FlexBox';
@@ -8,7 +9,7 @@ import GeneralInitForm, {
   GeneralInitFormForwardedRefContent,
   GeneralInitFormValues,
 } from './GeneralInitForm';
-import mainAxiosInstance from '../lib/singletons/mainAxiosInstance';
+import handleAPIError from '../lib/handleAPIError';
 import MessageBox, { Message } from './MessageBox';
 import NetworkInitForm, {
   NetworkInitFormForwardedRefContent,
@@ -218,19 +219,15 @@ const StrikerInitForm: FC = () => {
           setIsSubmittingForm(true);
           setIsOpenConfirm(false);
 
-          mainAxiosInstance
+          api
-            .put('/command/initialize-striker', JSON.stringify(requestBody), {
+            .post('/host', requestBody)
-              headers: { 'Content-Type': 'application/json' },
-            })
             .then(() => {
               setIsSubmittingForm(false);
             })
-            .catch((reason) => {
+            .catch((error) => {
-              setSubmitMessage({
+              const errorMessage = handleAPIError(error);
-                children: `Failed to submit; ${reason}`,
-                type: 'error',
-              });
 
+              setSubmitMessage(errorMessage);
               setIsSubmittingForm(false);
             });
         }}

striker-ui/lib/api.ts

@@ -0,0 +1,12 @@
+import axios, { Axios } from 'axios';
+
+import API_BASE_URL from './consts/API_BASE_URL';
+
+const api = new Axios({
+  baseURL: API_BASE_URL,
+  transformRequest: axios.defaults.transformRequest,
+  transformResponse: axios.defaults.transformResponse,
+  validateStatus: (status) => status < 400,
+});
+
+export default api;

striker-ui/lib/singletons/mainAxiosInstance.ts

@@ -1,10 +0,0 @@
-import { Axios } from 'axios';
-
-import API_BASE_URL from '../consts/API_BASE_URL';
-
-const mainAxiosInstance = new Axios({
-  baseURL: API_BASE_URL,
-  validateStatus: (status) => status < 400,
-});
-
-export default mainAxiosInstance;