Peel axios instantiation out into it's own file so that it can be used in the RelatedAPI model

awx/ui_next/src/api/AxiosHTTP.js

@@ -0,0 +1,13 @@
+import axios from 'axios';
+
+import { encodeQueryString } from '../util/qs';
+
+const AxiosHTTP = axios.create({
+  xsrfCookieName: 'csrftoken',
+  xsrfHeaderName: 'X-CSRFToken',
+  paramsSerializer(params) {
+    return encodeQueryString(params);
+  },
+});
+
+export default AxiosHTTP;

awx/ui_next/src/api/Base.js

@@ -1,17 +1,7 @@
-import axios from 'axios';
-
-import { encodeQueryString } from '../util/qs';
-
-const defaultHttp = axios.create({
-  xsrfCookieName: 'csrftoken',
-  xsrfHeaderName: 'X-CSRFToken',
-  paramsSerializer(params) {
-    return encodeQueryString(params);
-  },
-});
+import AxiosHTTP from './AxiosHTTP';
 
 class Base {
-  constructor(http = defaultHttp, baseURL) {
+  constructor(http = AxiosHTTP, baseURL) {
     this.http = http;
     this.baseUrl = baseURL;
   }

awx/ui_next/src/api/models/Related.js

@@ -0,0 +1,31 @@
+import AxiosHTTP from '../AxiosHTTP';
+
+class Related {
+  constructor(http = AxiosHTTP) {
+    this.http = http;
+  }
+
+  delete(relatedEndpoint) {
+    return this.http.delete(relatedEndpoint);
+  }
+
+  get(relatedEndpoint, params) {
+    return this.http.get(relatedEndpoint, {
+      params,
+    });
+  }
+
+  patch(relatedEndpoint, data) {
+    return this.http.patch(relatedEndpoint, data);
+  }
+
+  post(relatedEndpoint, data) {
+    return this.http.post(relatedEndpoint, data);
+  }
+
+  put(relatedEndpoint, data) {
+    return this.http.put(relatedEndpoint, data);
+  }
+}
+
+export default Related;