feat(query): add makeApi API generator

package.json

@@ -170,7 +170,7 @@
           }
         },
         {
-          "files": "*.test.{js,jsx,ts,tsx}",
+          "files": "**/test/**/*",
           "rules": {
             "import/no-extraneous-dependencies": "off",
             "promise/param-names": "off",

packages/superset-ui-connection/src/SupersetClientClass.ts

@@ -1,3 +1,21 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
 import callApiAndParseWithTimeout from './callApi/callApiAndParseWithTimeout';
 import {
   ClientConfig,
@@ -13,7 +31,7 @@ import {
   RequestConfig,
   ParseMethod,
 } from './types';
-import { DEFAULT_FETCH_RETRY_OPTIONS } from './constants';
+import { DEFAULT_FETCH_RETRY_OPTIONS, DEFAULT_BASE_URL } from './constants';
 
 export default class SupersetClientClass {
   credentials: Credentials;
@@ -28,7 +46,7 @@ export default class SupersetClientClass {
   timeout: ClientTimeout;
 
   constructor({
-    baseUrl = 'http://localhost',
+    baseUrl = DEFAULT_BASE_URL,
     host,
     protocol,
     headers = {},
@@ -40,6 +58,9 @@ export default class SupersetClientClass {
   }: ClientConfig = {}) {
     const url = new URL(
       host || protocol ? `${protocol || 'https:'}//${host || 'localhost'}` : baseUrl,
+      // baseUrl for API could also be relative, so we provide current location.href
+      // as the base of baseUrl
+      window.location.href,
     );
     this.baseUrl = url.href.replace(/\/+$/, ''); // always strip trailing slash
     this.host = url.host;
@@ -89,37 +110,23 @@ export default class SupersetClientClass {
   }
 
   async request<T extends ParseMethod = 'json'>({
-    body,
     credentials,
+    mode,
     endpoint,
-    fetchRetryOptions,
-    headers,
     host,
-    method,
-    mode,
-    parseMethod,
-    postPayload,
-    jsonPayload,
-    signal,
-    stringify,
-    timeout,
     url,
+    headers,
+    timeout,
+    ...rest
   }: RequestConfig & { parseMethod?: T }) {
     await this.ensureAuth();
     return callApiAndParseWithTimeout({
-      body,
+      ...rest,
       credentials: credentials ?? this.credentials,
-      fetchRetryOptions,
-      headers: { ...this.headers, ...headers },
-      method,
       mode: mode ?? this.mode,
-      parseMethod,
-      postPayload,
-      jsonPayload,
-      signal,
-      stringify,
-      timeout: timeout ?? this.timeout,
       url: this.getUrl({ endpoint, host, url }),
+      headers: { ...this.headers, ...headers },
+      timeout: timeout ?? this.timeout,
     });
   }
 

packages/superset-ui-connection/src/callApi/callApi.ts

@@ -1,8 +1,30 @@
 import 'whatwg-fetch';
 import fetchRetry from 'fetch-retry';
-import { CallApi, JsonObject, JsonValue } from '../types';
+import { CallApi, Payload, JsonValue } from '../types';
 import { CACHE_AVAILABLE, CACHE_KEY, HTTP_STATUS_NOT_MODIFIED, HTTP_STATUS_OK } from '../constants';
 
+function tryParsePayload(payload: Payload) {
+  try {
+    return typeof payload === 'string' ? (JSON.parse(payload) as JsonValue) : payload;
+  } catch (error) {
+    throw new Error(`Invalid payload:\n\n${payload}`);
+  }
+}
+
+/**
+ * Try appending search params to an URL if needed.
+ */
+function getFullUrl(partialUrl: string, params: CallApi['searchParams']) {
+  if (params) {
+    const url = new URL(partialUrl, window.location.href);
+    const search = params instanceof URLSearchParams ? params : new URLSearchParams(params);
+    // will completely override any existing search params
+    url.search = search.toString();
+    return url.href;
+  }
+  return partialUrl;
+}
+
 /**
  * Fetch an API response and returns the corresponding json.
  *
@@ -23,9 +45,11 @@ export default async function callApi({
   redirect = 'follow',
   signal,
   stringify = true,
-  url,
+  url: url_,
+  searchParams,
 }: CallApi): Promise<Response> {
   const fetchWithRetry = fetchRetry(fetch, fetchRetryOptions);
+  const url = `${getFullUrl(url_, searchParams)}`;
 
   const request = {
     body,
@@ -53,7 +77,9 @@ export default async function callApi({
       const etag = cachedResponse.headers.get('Etag') as string;
       request.headers = { ...request.headers, 'If-None-Match': etag };
     }
+
     const response = await fetchWithRetry(url, request);
+
     if (response.status === HTTP_STATUS_NOT_MODIFIED) {
       const cachedFullResponse = await supersetCache.match(url);
       if (cachedFullResponse) {
@@ -65,33 +91,32 @@ export default async function callApi({
       supersetCache.delete(url);
       supersetCache.put(url, response.clone());
     }
+
     return response;
   }
 
   if (method === 'POST' || method === 'PATCH' || method === 'PUT') {
-    const tryParsePayload = (payloadString: string) => {
-      try {
-        return JSON.parse(payloadString) as JsonObject;
-      } catch (error) {
-        throw new Error(`Invalid payload:\n\n${payloadString}`);
+    if (postPayload && jsonPayload) {
+      throw new Error('Please provide only one of jsonPayload or postPayload');
+    }
+    if (postPayload instanceof FormData) {
+      request.body = postPayload;
+    } else if (postPayload) {
+      const payload = tryParsePayload(postPayload);
+      if (payload && typeof payload === 'object') {
+        // using FormData has the effect that Content-Type header is set to `multipart/form-data`,
+        // not e.g., 'application/x-www-form-urlencoded'
+        const formData: FormData = new FormData();
+        Object.keys(payload).forEach(key => {
+          const value = payload[key] as JsonValue;
+          if (typeof value !== 'undefined') {
+            formData.append(key, stringify ? JSON.stringify(value) : String(value));
+          }
+        });
+        request.body = formData;
       }
-    };
-    // override request body with post payload
-    const payload: JsonObject | undefined =
-      typeof postPayload === 'string' ? tryParsePayload(postPayload) : postPayload;
-
-    if (typeof payload === 'object') {
-      // using FormData has the effect that Content-Type header is set to `multipart/form-data`,
-      // not e.g., 'application/x-www-form-urlencoded'
-      const formData: FormData = new FormData();
-      Object.keys(payload).forEach(key => {
-        const value = payload[key] as JsonValue;
-        if (typeof value !== 'undefined') {
-          formData.append(key, stringify ? JSON.stringify(value) : String(value));
-        }
-      });
-      request.body = formData;
-    } else if (jsonPayload !== undefined) {
+    }
+    if (jsonPayload !== undefined) {
       request.body = JSON.stringify(jsonPayload);
       request.headers = { ...request.headers, 'Content-Type': 'application/json' };
     }

packages/superset-ui-connection/src/callApi/parseResponse.ts

@@ -14,10 +14,8 @@ export default async function parseResponse<T extends ParseMethod = 'json'>(
   const response = await apiPromise;
   // reject failed HTTP requests with the raw response
   if (!response.ok) {
-    // eslint-disable-next-line @typescript-eslint/no-throw-literal
-    throw response;
+    return Promise.reject(response);
   }
-
   if (parseMethod === null || parseMethod === 'raw') {
     return response as ReturnType;
   }
@@ -38,6 +36,5 @@ export default async function parseResponse<T extends ParseMethod = 'json'>(
     };
     return result as ReturnType;
   }
-
   throw new Error(`Expected parseResponse=json|text|raw|null, got '${parseMethod}'.`);
 }

packages/superset-ui-connection/src/constants.ts

@@ -1,5 +1,7 @@
 import { FetchRetryOptions } from './types';
 
+export const DEFAULT_BASE_URL = 'http://localhost';
+
 // HTTP status codes
 export const HTTP_STATUS_OK = 200;
 export const HTTP_STATUS_NOT_MODIFIED = 304;

packages/superset-ui-connection/src/types.ts

@@ -1,3 +1,21 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
 import SupersetClientClass from './SupersetClientClass';
 
 export type Body = RequestInit['body'];
@@ -36,9 +54,10 @@ export type JsonArray = JsonValue[];
 export type JsonObject = { [member: string]: any };
 
 /**
- * Post form or JSON payload, if string, will parse with JSON.parse
+ * Request payload, can be use in GET query string, Post form or POST JSON.
+ * If string, will parse with JSON.parse.
  */
-export type Payload = JsonObject | string;
+export type Payload = JsonObject | string | null;
 
 export type Method = RequestInit['method'];
 export type Mode = RequestInit['mode'];
@@ -57,8 +76,9 @@ export interface RequestBase {
   host?: Host;
   mode?: Mode;
   method?: Method;
-  postPayload?: Payload;
   jsonPayload?: Payload;
+  postPayload?: Payload | FormData;
+  searchParams?: Payload | URLSearchParams;
   signal?: Signal;
   stringify?: Stringify;
   timeout?: ClientTimeout;

packages/superset-ui-connection/test/SupersetClientClass.test.ts

@@ -27,14 +27,11 @@ describe('SupersetClientClass', () => {
 
   afterAll(fetchMock.restore);
 
-  it('new SupersetClientClass()', () => {
-    const client = new SupersetClientClass();
-    expect(client).toBeInstanceOf(SupersetClientClass);
-  });
-
-  it('fallback protocol to https when setting only host', () => {
-    const client = new SupersetClientClass({ host: 'TEST-HOST' });
-    expect(client.baseUrl).toEqual('https://test-host');
+  describe('new SupersetClientClass()', () => {
+    it('fallback protocol to https when setting only host', () => {
+      const client = new SupersetClientClass({ host: 'TEST-HOST' });
+      expect(client.baseUrl).toEqual('https://test-host');
+    });
   });
 
   describe('.getUrl()', () => {

packages/superset-ui-connection/test/callApi/callApi.test.ts

@@ -488,4 +488,79 @@ describe('callApi()', () => {
       expect(error.message).toEqual('Invalid payload:\n\nhaha');
     }
   });
+
+  it('should accept search params object', async () => {
+    expect.assertions(3);
+    window.location.href = 'http://localhost';
+    fetchMock.get(`glob:*/get-search*`, { yes: 'ok' });
+    const response = await callApi({
+      url: '/get-search',
+      searchParams: {
+        abc: 1,
+      },
+      method: 'GET',
+    });
+    const result = await response.json();
+    expect(response.status).toEqual(200);
+    expect(result).toEqual({ yes: 'ok' });
+    expect(fetchMock.lastUrl()).toEqual(`http://localhost/get-search?abc=1`);
+  });
+
+  it('should accept URLSearchParams', async () => {
+    expect.assertions(2);
+    window.location.href = 'http://localhost';
+    fetchMock.post(`glob:*/post-search*`, { yes: 'ok' });
+    await callApi({
+      url: '/post-search',
+      searchParams: new URLSearchParams({
+        abc: '1',
+      }),
+      method: 'POST',
+      jsonPayload: { request: 'ok' },
+    });
+    expect(fetchMock.lastUrl()).toEqual(`http://localhost/post-search?abc=1`);
+    expect(fetchMock.lastOptions()).toEqual(
+      expect.objectContaining({
+        body: JSON.stringify({ request: 'ok' }),
+      }),
+    );
+  });
+
+  it('should throw when both payloads provided', async () => {
+    expect.assertions(1);
+    fetchMock.post('/post-both-payload', {});
+    try {
+      await callApi({
+        url: '/post-both-payload',
+        method: 'POST',
+        postPayload: { a: 1 },
+        jsonPayload: '{}',
+      });
+    } catch (error) {
+      expect((error as Error).message).toContain('provide only one of jsonPayload or postPayload');
+    }
+  });
+
+  it('should accept FormData as postPayload', async () => {
+    expect.assertions(1);
+    fetchMock.post('/post-formdata', {});
+    const payload = new FormData();
+    await callApi({
+      url: '/post-formdata',
+      method: 'POST',
+      postPayload: payload,
+    });
+    expect(fetchMock.lastOptions().body).toBe(payload);
+  });
+
+  it('should ignore "null" postPayload string', async () => {
+    expect.assertions(1);
+    fetchMock.post('/post-null-postpayload', {});
+    await callApi({
+      url: '/post-formdata',
+      method: 'POST',
+      postPayload: 'null',
+    });
+    expect(fetchMock.lastOptions().body).toBeUndefined();
+  });
 });