web/satellite: use delete API keys http endpoint

This change uses the new /delete-by-ids endpoint in place of the GraphQL query.

Issue:
#6140

Change-Id: Ia78016e68fca296367e650b7a919130e662ee8f6

web/satellite/src/api/accessGrants.ts

@@ -1,7 +1,6 @@
 // Copyright (C) 2020 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-import { BaseGql } from '@/api/baseGql';
 import {
     AccessGrant,
     AccessGrantCursor,
@@ -13,10 +12,10 @@ import { HttpClient } from '@/utils/httpClient';
 import { APIError } from '@/utils/error';
 
 /**
- * AccessGrantsApiGql is a graphql implementation of Access Grants API.
+ * AccessGrantsHttpApi is a http implementation of Access Grants API.
  * Exposes all access grants-related functionality
  */
-export class AccessGrantsApiGql extends BaseGql implements AccessGrantsApi {
+export class AccessGrantsHttpApi implements AccessGrantsApi {
     private readonly client: HttpClient = new HttpClient();
     private readonly ROOT_PATH: string = '/api/v0/api-keys';
 
@@ -78,20 +77,16 @@ export class AccessGrantsApiGql extends BaseGql implements AccessGrantsApi {
      * @throws Error
      */
     public async delete(ids: string[]): Promise<void> {
-        const query =
-            `mutation($id: [String!]!) {
-                deleteAPIKeys(id: $id) {
-                    id
-                }
-            }`;
-
-        const variables = {
-            id: ids,
-        };
-
-        const response = await this.mutate(query, variables);
+        const path = `${this.ROOT_PATH}/delete-by-ids`;
+        const response = await this.client.delete(path, JSON.stringify({ ids }));
 
-        return response.data.deleteAPIKeys;
+        if (!response.ok) {
+            throw new APIError({
+                status: response.status,
+                message: 'Can not delete access grants',
+                requestID: response.headers.get('x-request-id'),
+            });
+        }
     }
 
     /**
@@ -126,7 +121,7 @@ export class AccessGrantsApiGql extends BaseGql implements AccessGrantsApi {
      */
     public async deleteByNameAndProjectID(name: string, projectID: string): Promise<void> {
         const path = `${this.ROOT_PATH}/delete-by-name?name=${name}&publicID=${projectID}`;
-        const response = await this.client.delete(path);
+        const response = await this.client.delete(path, null);
 
         if (response.ok || response.status === 204) {
             return;

web/satellite/src/api/payments.ts

@@ -148,7 +148,7 @@ export class PaymentsHttpApi implements PaymentsApi {
      */
     public async removeCreditCard(cardId: string): Promise<void> {
         const path = `${this.ROOT_PATH}/cards/${cardId}`;
-        const response = await this.client.delete(path);
+        const response = await this.client.delete(path, null);
 
         if (response.ok) {
             return;

web/satellite/src/store/modules/accessGrantsStore.ts

@@ -13,7 +13,7 @@ import {
     EdgeCredentials,
 } from '@/types/accessGrants';
 import { SortDirection } from '@/types/common';
-import { AccessGrantsApiGql } from '@/api/accessGrants';
+import { AccessGrantsHttpApi } from '@/api/accessGrants';
 import { useConfigStore } from '@/store/modules/configStore';
 import { DEFAULT_PAGE_LIMIT } from '@/types/pagination';
 
@@ -36,7 +36,7 @@ class AccessGrantsState {
 }
 
 export const useAccessGrantsStore = defineStore('accessGrants', () => {
-    const api = new AccessGrantsApiGql();
+    const api = new AccessGrantsHttpApi();
 
     const state = reactive<AccessGrantsState>(new AccessGrantsState());
 

web/satellite/src/utils/httpClient.ts

@@ -71,9 +71,10 @@ export class HttpClient {
     /**
      * Performs DELETE http request.
      * @param path
+     * @param body serialized JSON
      */
-    public async delete(path: string): Promise<Response> {
-        return this.sendJSON('DELETE', path, null);
+    public async delete(path: string, body: string | null): Promise<Response> {
+        return this.sendJSON('DELETE', path, body);
     }
 
     /**