API: expand getUIPath, simplify base classes (#4525)

* API: expand getUIPath, simplify base classes

* separate apiPath (which can have slashes) from the rest (which shouldnt, except EE names)

* getUsedDependencies - remove cancelToken, only practical for longer-running requests like upload

* mapParams - replace mapPageToOffset calls with mapParams to also include sort

* No-Issue

* mapParams - make mapPageToOffset a bool

* constructor cant read class variables

* used by depenendencies - use HubListToolbar

mostly because the onChange-based filter would really need a cancel token,
but we want unified filters everywhere too

(cherry picked from commit 71a1f11)

Author: himdel

src/api/active-user.ts

@@ -2,7 +2,7 @@ import { HubAPI } from './hub';
 import { UserType } from './response-types/user';
 
 class API extends HubAPI {
-  apiPath = this.getUIPath('me/');
+  apiPath = '_ui/v1/me/';
 
   getUser(): Promise<UserType> {
     return this.http.get(this.apiPath).then((result) => result.data);
@@ -28,13 +28,13 @@ class API extends HubAPI {
   // Note: This does not reset the app's authentication state. That has to be done
   // separately by setting the user state in the app's root component
   logout() {
-    return this.http.post(this.getUIPath('auth/logout/'), {});
+    return this.http.post('_ui/v1/auth/logout/', {});
   }
 
   // Note: This does not reset the app's authentication state. That has to be done
   // separately by setting the user state in the app's root component
   login(username, password) {
-    const loginURL = this.getUIPath('auth/login/');
+    const loginURL = '_ui/v1/auth/login/';
 
     // Make a get request to the login endpoint to set CSRF tokens before making
     // the authentication reqest

src/api/application-info.ts

@@ -1,8 +1,6 @@
 import { HubAPI } from './hub';
 
 class API extends HubAPI {
-  apiPath = '';
-
   get() {
     return super.get('');
   }

src/api/base.ts

@@ -7,11 +7,17 @@ export class BaseAPI {
   apiPath: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   http: any;
-  sortParam = 'sort'; // translate ?sort into sortParam in list()
-
+  sortParam: string; // translate ?sort into sortParam in list()
+  mapPageToOffset: boolean;
+
+  // a request URL is created from:
+  // * API_HOST - optional, for use with different hostname
+  // * apiBaseUrl - api/pulp prefix, ends in trailing slash
+  // * apiPath - set by leaf API classes
+  // any extra id or params added by custom methods
   constructor(apiBaseUrl) {
     this.http = axios.create({
-      baseURL: apiBaseUrl,
+      baseURL: API_HOST + apiBaseUrl,
       paramsSerializer: {
         serialize: (params) => ParamHelper.getQueryString(params),
       },
@@ -20,43 +26,39 @@ export class BaseAPI {
     this.http.interceptors.request.use((request) => this.authHandler(request));
   }
 
-  // The api uses offset/limit OR page/page_size for pagination
-  // the UI uses page/page size and maps to whatever the api expects
-  // (override mapPageToOffset for page)
-  public mapPageToOffset(p) {
-    // Need to copy the object to make sure we aren't accidentally
-    // setting page state
-    const params = { ...p };
+  public mapParams(params) {
+    const newParams = { ...params };
 
-    const pageSize =
-      parseInt(params['page_size']) || Constants.DEFAULT_PAGE_SIZE;
-    const page = parseInt(params['page']) || 1;
+    if (this.mapPageToOffset) {
+      // The api uses offset/limit OR page/page_size for pagination
+      // the UI uses page/page size and maps to whatever the api expects
 
-    delete params['page'];
-    delete params['page_size'];
+      const pageSize =
+        parseInt(newParams['page_size'], 10) || Constants.DEFAULT_PAGE_SIZE;
+      const page = parseInt(newParams['page'], 10) || 1;
 
-    params['offset'] = page * pageSize - pageSize;
-    params['limit'] = pageSize;
+      delete newParams['page'];
+      delete newParams['page_size'];
 
-    return params;
-  }
+      newParams['offset'] = page * pageSize - pageSize;
+      newParams['limit'] = pageSize;
+    }
+
+    if (this.sortParam && newParams['sort'] && this.sortParam !== 'sort') {
+      // The api uses sort/ordering/order_by for sort
+      // the UI uses sort and maps to whatever the api expects
 
-  // The api uses sort/ordering/order_by for sort
-  // the UI uses sort and maps to whatever the api expects
-  // (set sortParam)
-  public mapSort(params) {
-    const newParams = { ...params };
-    if (newParams['sort'] && this.sortParam !== 'sort') {
       newParams[this.sortParam] = newParams['sort'];
       delete newParams['sort'];
     }
-    return newParams;
+
+    return {
+      params: newParams,
+    };
   }
 
   list(params?: object, apiPath?: string) {
-    return this.http.get(this.getPath(apiPath), {
-      params: this.mapSort(this.mapPageToOffset(params)),
-    });
+    return this.http.get(this.getPath(apiPath), this.mapParams(params));
   }
 
   get(id: string, apiPath?: string) {
@@ -79,8 +81,8 @@ export class BaseAPI {
     return this.http.patch(this.getPath(apiPath) + id + '/', data);
   }
 
-  getPath(apiPath?: string) {
-    return apiPath || this.apiPath;
+  private getPath(apiPath?: string) {
+    return apiPath || this.apiPath || '';
   }
 
   private async authHandler(request) {

src/api/collection-version.ts

@@ -30,15 +30,10 @@ export class API extends HubAPI {
     return super.get(id, 'pulp/api/v3/content/ansible/collection_versions/');
   }
 
-  getUsedDependenciesByCollection(
-    namespace,
-    collection,
-    params = {},
-    cancelToken = undefined,
-  ) {
+  getUsedDependenciesByCollection(namespace, collection, params = {}) {
     return this.http.get(
-      `${this.apiPath}?dependency=${namespace}.${collection}`,
-      { params: this.mapPageToOffset(params), cancelToken: cancelToken?.token },
+      this.apiPath + `?dependency=${namespace}.${collection}`,
+      this.mapParams(params),
     );
   }
 

src/api/collection.ts

@@ -33,7 +33,7 @@ function filterListItem(item: CollectionListType) {
 }
 
 export class API extends HubAPI {
-  apiPath = this.getUIPath('repo/');
+  apiPath = '_ui/v1/repo/';
   cachedCollection: CollectionDetailType;
 
   list(params?, repo?: string) {
@@ -144,17 +144,10 @@ export class API extends HubAPI {
     );
   }
 
-  getUsedDependenciesByCollection(
-    namespace,
-    collection,
-    params = {},
-    cancelToken = undefined,
-  ) {
+  getUsedDependenciesByCollection(namespace, collection, params = {}) {
     return this.http.get(
-      this.getUIPath(
-        `collection-versions/?dependency=${namespace}.${collection}`,
-      ),
-      { params: this.mapPageToOffset(params), cancelToken: cancelToken?.token },
+      `_ui/v1/collection-versions/?dependency=${namespace}.${collection}`,
+      this.mapParams(params),
     );
   }
 

src/api/container-tag.ts

@@ -4,14 +4,14 @@ class API extends PulpAPI {
   apiPath = 'repositories/container/container-push/';
 
   tag(repositoryID: string, tag: string, digest: string) {
-    return this.http.post(`${this.apiPath}${repositoryID}/tag/`, {
+    return this.http.post(this.apiPath + `${repositoryID}/tag/`, {
       digest: digest,
       tag: tag,
     });
   }
 
   untag(repositoryID: string, tag: string) {
-    return this.http.post(`${this.apiPath}${repositoryID}/untag/`, {
+    return this.http.post(this.apiPath + `${repositoryID}/untag/`, {
       tag: tag,
     });
   }

src/api/controller.ts

@@ -1,7 +1,7 @@
 import { HubAPI } from './hub';
 
 export class API extends HubAPI {
-  apiPath = this.getUIPath('controllers/');
+  apiPath = '_ui/v1/controllers/';
 
   // list(params?)
 }

src/api/execution-environment-registry.ts

@@ -32,7 +32,7 @@ function smartUpdate(remote: RemoteType, unmodifiedRemote: RemoteType) {
 }
 
 class API extends HubAPI {
-  apiPath = this.getUIPath('execution-environments/registries/');
+  apiPath = '_ui/v1/execution-environments/registries/';
 
   // list(params?)
   // create(data)

src/api/execution-environment-remote.ts

@@ -1,7 +1,7 @@
 import { HubAPI } from './hub';
 
 class API extends HubAPI {
-  apiPath = this.getUIPath('execution-environments/remotes/');
+  apiPath = '_ui/v1/execution-environments/remotes/';
 
   // list(params?)
   // create(data)

src/api/execution-environment.ts

@@ -2,38 +2,41 @@ import { HubAPI } from './hub';
 
 class API extends HubAPI {
   apiPath = 'v3/plugin/execution-environments/repositories/';
+
   readme(name) {
-    return this.http.get(this.apiPath + name + '/_content/readme/');
+    return this.http.get(this.apiPath + `${name}/_content/readme/`);
   }
 
   saveReadme(name, readme) {
-    return this.http.put(this.apiPath + name + '/_content/readme/', readme);
+    return this.http.put(this.apiPath + `${name}/_content/readme/`, readme);
   }
 
   images(name, params) {
-    return this.http.get(this.apiPath + name + '/_content/images/', {
-      params: this.mapPageToOffset(params),
-    });
+    return this.http.get(
+      this.apiPath + `${name}/_content/images/`,
+      this.mapParams(params),
+    );
   }
 
   image(name, digest) {
-    return this.http.get(`${this.apiPath}${name}/_content/images/${digest}/`);
+    return this.http.get(this.apiPath + `${name}/_content/images/${digest}/`);
   }
 
   tags(name, params) {
-    return this.http.get(this.apiPath + name + '/_content/tags/', {
-      params: this.mapPageToOffset(params),
-    });
+    return this.http.get(
+      this.apiPath + `${name}/_content/tags/`,
+      this.mapParams(params),
+    );
   }
 
   deleteImage(name, manifest) {
     return this.http.delete(
-      `${this.apiPath}${name}/_content/images/${manifest}/`,
+      this.apiPath + `${name}/_content/images/${manifest}/`,
     );
   }
 
   deleteExecutionEnvironment(name) {
-    return this.http.delete(`${this.apiPath}${name}/`);
+    return this.http.delete(this.apiPath + `${name}/`);
   }
 }
 

src/api/feature-flags.ts

@@ -1,7 +1,7 @@
 import { HubAPI } from './hub';
 
 class API extends HubAPI {
-  apiPath = this.getUIPath('feature-flags/');
+  apiPath = '_ui/v1/feature-flags/';
 
   get() {
     return this.http.get(this.apiPath);

src/api/generic-pulp.ts

@@ -1,10 +1,9 @@
 import { PulpAPI } from './pulp';
 
 export class API extends PulpAPI {
-  apiPath = '';
-
-  get(id: string, apiPath?: string) {
-    return this.http.get(this.getPath(apiPath) + id);
+  // base get adds a trailing slash
+  get(url: string) {
+    return this.http.get(url);
   }
 }
 

src/api/group-role.ts

@@ -4,15 +4,15 @@ class API extends PulpAPI {
   apiPath = 'groups/';
 
   listRoles(groupId, params?) {
-    return super.list(params, `${this.apiPath}${groupId}/roles/`);
+    return super.list(params, this.apiPath + `${groupId}/roles/`);
   }
 
   removeRole(groupId, roleId) {
-    return this.http.delete(`${this.apiPath}${groupId}/roles/${roleId}/`);
+    return this.http.delete(this.apiPath + `${groupId}/roles/${roleId}/`);
   }
 
   addRoleToGroup(groupId, role) {
-    return this.http.post(`${this.apiPath}${groupId}/roles/`, {
+    return this.http.post(this.apiPath + `${groupId}/roles/`, {
       role: role.name,
       // required field, can be empty
       content_object: null,

src/api/group.ts

@@ -1,7 +1,7 @@
 import { HubAPI } from './hub';
 
 class API extends HubAPI {
-  apiPath = this.getUIPath('groups/');
+  apiPath = '_ui/v1/groups/';
 }
 
 export const GroupAPI = new API();

src/api/hub.ts

@@ -1,15 +1,10 @@
 import { BaseAPI } from './base';
 
 export class HubAPI extends BaseAPI {
-  UI_API_VERSION = 'v1';
+  mapPageToOffset = true; // offset & limit
+  sortParam = 'sort';
 
   constructor() {
-    super(API_HOST + API_BASE_PATH);
-  }
-
-  // Use this function to get paths in the _ui API. That will ensure the API version
-  // gets updated when it changes
-  getUIPath(url: string) {
-    return `_ui/${this.UI_API_VERSION}/${url}`;
+    super(API_BASE_PATH);
   }
 }

src/api/import.ts

@@ -1,7 +1,7 @@
 import { HubAPI } from './hub';
 
 export class API extends HubAPI {
-  apiPath = this.getUIPath('imports/collections/');
+  apiPath = '_ui/v1/imports/collections/';
 
   get(id, path?) {
     // call this to generate more task messages

src/api/legacy.ts

@@ -1,14 +1,10 @@
 import { BaseAPI } from './base';
 
 export class LegacyAPI extends BaseAPI {
+  mapPageToOffset = false; // page & page_size
   sortParam = 'order_by';
 
   constructor() {
-    super(API_HOST + API_BASE_PATH);
-  }
-
-  public mapPageToOffset(p) {
-    // override BaseAPI's function to persist page & page_size
-    return p;
+    super(API_BASE_PATH);
   }
 }

src/api/my-distribution.ts

@@ -1,7 +1,7 @@
 import { HubAPI } from './hub';
 
 class API extends HubAPI {
-  apiPath = this.getUIPath('my-distributions/');
+  apiPath = '_ui/v1/my-distributions/';
 }
 
 export const MyDistributionAPI = new API();

src/api/my-namespace.ts

@@ -1,7 +1,7 @@
 import { HubAPI } from './hub';
 
 class API extends HubAPI {
-  apiPath = this.getUIPath('my-namespaces/');
+  apiPath = '_ui/v1/my-namespaces/';
 
   get(id: string, params = {}) {
     return this.http.get(this.apiPath + id + '/', { params });