Client:Profile: fix authorized apps, add revoke

packages/client/public/locales/en/OAuth.json

@@ -30,6 +30,7 @@
   "RedirectsURLSHelpButton": "Redirect uris help button",
   "RegisterNewApp": "Register a new application",
   "Reset": "Reset",
+  "Revoke": "Revoke",
   "Secret": "Secret",
   "Scopes": "Scopes",
   "SignIn": "Sign in with DocSpace",

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/index.tsx

@@ -55,7 +55,7 @@ const TableView = ({
       if (element) {
         const { width } = element.getBoundingClientRect();
 
-        const columns = Math.floor(width / 100);
+        const columns = Math.floor(width / 120);
 
         if (columns != tagCount) setTagCount(columns);
       }

packages/client/src/store/OAuthStore.ts

@@ -11,6 +11,7 @@ import {
   getScope,
   getScopeList,
   getConsentList,
+  revokeUserClient,
 } from "@docspace/common/api/oauth";
 
 import {
@@ -28,6 +29,7 @@ import RemoveReactSvgUrl from "PUBLIC_DIR/images/remove.react.svg?url";
 import PencilReactSvgUrl from "PUBLIC_DIR/images/pencil.react.svg?url";
 import CodeReactSvgUrl from "PUBLIC_DIR/images/code.react.svg?url";
 import ExternalLinkReactSvgUrl from "PUBLIC_DIR/images/external.link.react.svg?url";
+import OauthRevokeSvgUrl from "PUBLIC_DIR/images/oauth.revoke.svg?url";
 
 const PAGE_LIMIT = 100;
 
@@ -71,6 +73,8 @@ export interface OAuthStoreProps {
 
   deleteClient: (clientId: string[]) => Promise<void>;
 
+  revokeClient: (clientId: string[]) => Promise<void>;
+
   authStore: any;
 
   currentPage: number;
@@ -384,6 +388,29 @@ class OAuthStore implements OAuthStoreProps {
     }
   };
 
+  revokeClient = async (clientsId: string[]) => {
+    try {
+      const requests: Promise<void>[] = [];
+
+      clientsId.forEach((id) => {
+        this.setActiveClient(id);
+        requests.push(revokeUserClient(id));
+      });
+
+      await Promise.all(requests);
+
+      runInAction(() => {
+        this.consents = this.consents.filter(
+          (c) => !clientsId.includes(c.clientId)
+        );
+      });
+
+      this.setActiveClient("");
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
   getContextMenuItems = (
     t: any,
     item: IClientProps,
@@ -400,6 +427,14 @@ class OAuthStore implements OAuthStoreProps {
       this.setInfoDialogVisible(true);
     };
 
+    const onRevoke = () => {
+      if (!isGroupContext) {
+        this.revokeClient([clientId]);
+      } else {
+        this.revokeClient(this.selection);
+      }
+    };
+
     const openOption = {
       key: "open",
       icon: ExternalLinkReactSvgUrl,
@@ -416,10 +451,31 @@ class OAuthStore implements OAuthStoreProps {
       isDisabled: isInfo,
     };
 
-    if (!isSettings) {
-      const items: any = [openOption];
+    const revokeOptions = [
+      {
+        key: "revoke",
+        icon: OauthRevokeSvgUrl,
+        label: t("Revoke"),
+        onClick: onRevoke,
+        isDisabled: false,
+      },
+    ];
 
-      if (!isInfo) items.push(infoOption);
+    if (!isSettings) {
+      const items: any = [];
+
+      if (!isGroupContext) {
+        items.push(openOption);
+
+        if (!isInfo) items.push(infoOption);
+
+        items.push({
+          key: "separator",
+          isSeparator: true,
+        });
+      }
+
+      items.push(...revokeOptions);
 
       return items;
     }

packages/common/api/oauth/index.ts

@@ -175,8 +175,16 @@ export const getConsentList = async (): Promise<IClientProps[]> => {
   clients.forEach((item: any) => {
     const client = transformToClientProps(item.client);
 
-    consents.push({ ...client, modifiedOn: item.modified_at });
+    if (!item.invalidated)
+      consents.push({ ...client, modifiedOn: item.modified_at });
   });
 
   return consents;
 };
+
+export const revokeUserClient = async (clientId: string): Promise<void> => {
+  await request({
+    method: "delete",
+    url: `/clients/${clientId}/revoke`,
+  });
+};

public/images/oauth.revoke.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.6 8.00029C1.6 4.46548 4.46508 1.6 7.99857 1.6C11.5348 1.6 14.4 4.46592 14.4 8.00029C14.4 11.5335 11.5348 14.4 7.99857 14.4C6.16874 14.4 4.52033 13.6337 3.35202 12.3999C2.26458 11.2515 1.6 9.70508 1.6 8.00029ZM7.99857 0C3.58105 0 0 3.58219 0 8.00029C0 10.1304 0.83265 12.0663 2.19023 13.5C3.64805 15.0395 5.71117 16 7.99857 16C12.4184 16 16 12.4172 16 8.00029C16 3.58219 12.4184 0 7.99857 0ZM9.88726 11L10.9985 9.88994L9.10981 8.00274L10.9985 6.11255L9.88726 5L7.99804 6.8877L6.11031 5L4.99854 6.11255L6.88676 8.00274L4.99854 9.88994L6.11031 11L7.99804 9.1133L9.88726 11Z" fill="#333333"/>
+</svg>