Refactor and regroup urlHelpers utils (#6462)

* fix: refactor urlHelpers

* fix: move to /plugins/slack/shared

* fix: remove .babelrc

* fix: remove Outline class

* fix: Slack -> SlackUtils

* fix: UrlHelper class

plugins/slack/client/Settings.tsx

@@ -17,6 +17,7 @@ import env from "~/env";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useQuery from "~/hooks/useQuery";
 import useStores from "~/hooks/useStores";
+import { SlackUtils } from "../shared/SlackUtils";
 import SlackIcon from "./Icon";
 import SlackButton from "./components/SlackButton";
 import SlackListItem from "./components/SlackListItem";
@@ -104,7 +105,7 @@ function Slack() {
                   // "users:read",
                   // "users:read.email",
                 ]}
-                redirectUri={`${env.URL}/auth/slack.commands`}
+                redirectUri={SlackUtils.commandsUrl()}
                 state={team.id}
                 icon={<SlackIcon />}
               />

plugins/slack/client/components/SlackButton.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { slackAuth } from "@shared/utils/urlHelpers";
 import Button from "~/components/Button";
-import env from "~/env";
+import { SlackUtils } from "../../shared/SlackUtils";
 
 type Props = {
   scopes?: string[];
@@ -16,16 +15,7 @@ function SlackButton({ state = "", scopes, redirectUri, label, icon }: Props) {
   const { t } = useTranslation();
 
   const handleClick = () => {
-    if (!env.SLACK_CLIENT_ID) {
-      return;
-    }
-
-    window.location.href = slackAuth(
-      state,
-      scopes,
-      env.SLACK_CLIENT_ID,
-      redirectUri
-    );
+    window.location.href = SlackUtils.authUrl(state, scopes, redirectUri);
   };
 
   return (

plugins/slack/server/auth/slack.ts

@@ -4,7 +4,6 @@ import Router from "koa-router";
 import { Profile } from "passport";
 import { Strategy as SlackStrategy } from "passport-slack-oauth2";
 import { IntegrationService, IntegrationType } from "@shared/types";
-import { integrationSettingsPath } from "@shared/utils/routeHelpers";
 import accountProvisioner from "@server/commands/accountProvisioner";
 import auth from "@server/middlewares/authentication";
 import passportMiddleware from "@server/middlewares/passport";
@@ -25,6 +24,7 @@ import {
 import env from "../env";
 import * as Slack from "../slack";
 import * as T from "./schema";
+import { SlackUtils } from "plugins/slack/shared/SlackUtils";
 
 type SlackProfile = Profile & {
   team: {
@@ -66,7 +66,7 @@ if (env.SLACK_CLIENT_ID && env.SLACK_CLIENT_SECRET) {
     {
       clientID: env.SLACK_CLIENT_ID,
       clientSecret: env.SLACK_CLIENT_SECRET,
-      callbackURL: `${env.URL}/auth/slack.callback`,
+      callbackURL: SlackUtils.callbackUrl(),
       passReqToCallback: true,
       // @ts-expect-error StateStore
       store: new StateStore(),
@@ -139,7 +139,7 @@ if (env.SLACK_CLIENT_ID && env.SLACK_CLIENT_SECRET) {
       const { user } = ctx.state.auth;
 
       if (error) {
-        ctx.redirect(integrationSettingsPath(`slack?error=${error}`));
+        ctx.redirect(SlackUtils.errorUrl(error));
         return;
       }
 
@@ -154,23 +154,21 @@ if (env.SLACK_CLIENT_ID && env.SLACK_CLIENT_SECRET) {
             });
             return redirectOnClient(
               ctx,
-              `${team.url}/auth/slack.commands?${ctx.request.querystring}`
+              SlackUtils.commandsUrl({
+                baseUrl: team.url,
+                params: ctx.request.querystring,
+              })
             );
           } catch (err) {
-            return ctx.redirect(
-              integrationSettingsPath(`slack?error=unauthenticated`)
-            );
+            return ctx.redirect(SlackUtils.errorUrl("unauthenticated"));
           }
         } else {
-          return ctx.redirect(
-            integrationSettingsPath(`slack?error=unauthenticated`)
-          );
+          return ctx.redirect(SlackUtils.errorUrl("unauthenticated"));
         }
       }
 
-      const endpoint = `${env.URL}/auth/slack.commands`;
       // validation middleware ensures that code is non-null at this point
-      const data = await Slack.oauthAccess(code!, endpoint);
+      const data = await Slack.oauthAccess(code!, SlackUtils.commandsUrl());
       const authentication = await IntegrationAuthentication.create({
         service: IntegrationService.Slack,
         userId: user.id,
@@ -188,7 +186,7 @@ if (env.SLACK_CLIENT_ID && env.SLACK_CLIENT_SECRET) {
           serviceTeamId: data.team_id,
         },
       });
-      ctx.redirect(integrationSettingsPath("slack"));
+      ctx.redirect(SlackUtils.url);
     }
   );
 
@@ -203,7 +201,7 @@ if (env.SLACK_CLIENT_ID && env.SLACK_CLIENT_SECRET) {
       const { user } = ctx.state.auth;
 
       if (error) {
-        ctx.redirect(integrationSettingsPath(`slack?error=${error}`));
+        ctx.redirect(SlackUtils.errorUrl(error));
         return;
       }
 
@@ -221,23 +219,21 @@ if (env.SLACK_CLIENT_ID && env.SLACK_CLIENT_SECRET) {
             });
             return redirectOnClient(
               ctx,
-              `${team.url}/auth/slack.post?${ctx.request.querystring}`
+              SlackUtils.postUrl({
+                baseUrl: team.url,
+                params: ctx.request.querystring,
+              })
             );
           } catch (err) {
-            return ctx.redirect(
-              integrationSettingsPath(`slack?error=unauthenticated`)
-            );
+            return ctx.redirect(SlackUtils.errorUrl("unauthenticated"));
           }
         } else {
-          return ctx.redirect(
-            integrationSettingsPath(`slack?error=unauthenticated`)
-          );
+          return ctx.redirect(SlackUtils.errorUrl("unauthenticated"));
         }
       }
 
-      const endpoint = `${env.URL}/auth/slack.post`;
       // validation middleware ensures that code is non-null at this point
-      const data = await Slack.oauthAccess(code!, endpoint);
+      const data = await Slack.oauthAccess(code!, SlackUtils.postUrl());
       const authentication = await IntegrationAuthentication.create({
         service: IntegrationService.Slack,
         userId: user.id,
@@ -260,7 +256,7 @@ if (env.SLACK_CLIENT_ID && env.SLACK_CLIENT_SECRET) {
           channelId: data.incoming_webhook.channel_id,
         },
       });
-      ctx.redirect(integrationSettingsPath("slack"));
+      ctx.redirect(SlackUtils.url);
     }
   );
 }

plugins/slack/server/slack.ts

@@ -1,6 +1,7 @@
 import querystring from "querystring";
 import { InvalidRequestError } from "@server/errors";
 import fetch from "@server/utils/fetch";
+import { SlackUtils } from "../shared/SlackUtils";
 import env from "./env";
 
 const SLACK_API_URL = "https://slack.com/api";
@@ -49,7 +50,7 @@ export async function request(endpoint: string, body: Record<string, any>) {
 
 export async function oauthAccess(
   code: string,
-  redirect_uri = `${env.URL}/auth/slack.callback`
+  redirect_uri = SlackUtils.callbackUrl()
 ) {
   return request("oauth.access", {
     client_id: env.SLACK_CLIENT_ID,

plugins/slack/shared/SlackUtils.ts

@@ -0,0 +1,70 @@
+import env from "@shared/env";
+import { integrationSettingsPath } from "@shared/utils/routeHelpers";
+
+export class SlackUtils {
+  private static authBaseUrl = "https://slack.com/oauth/authorize";
+
+  static commandsUrl(
+    { baseUrl, params }: { baseUrl: string; params?: string } = {
+      baseUrl: `${env.URL}`,
+      params: undefined,
+    }
+  ) {
+    return params
+      ? `${baseUrl}/auth/slack.commands?${params}`
+      : `${baseUrl}/auth/slack.commands`;
+  }
+
+  static callbackUrl(
+    { baseUrl, params }: { baseUrl: string; params?: string } = {
+      baseUrl: `${env.URL}`,
+      params: undefined,
+    }
+  ) {
+    return params
+      ? `${baseUrl}/auth/slack.callback?${params}`
+      : `${baseUrl}/auth/slack.callback`;
+  }
+
+  static postUrl(
+    { baseUrl, params }: { baseUrl: string; params?: string } = {
+      baseUrl: `${env.URL}`,
+      params: undefined,
+    }
+  ) {
+    return params
+      ? `${baseUrl}/auth/slack.post?${params}`
+      : `${baseUrl}/auth/slack.post`;
+  }
+
+  static errorUrl(err: string) {
+    return integrationSettingsPath(`slack?error=${err}`);
+  }
+
+  static get url() {
+    return integrationSettingsPath("slack");
+  }
+
+  static authUrl(
+    state: string,
+    scopes: string[] = [
+      "identity.email",
+      "identity.basic",
+      "identity.avatar",
+      "identity.team",
+    ],
+    redirectUri = SlackUtils.callbackUrl()
+  ): string {
+    const baseUrl = SlackUtils.authBaseUrl;
+    const params = {
+      client_id: env.SLACK_CLIENT_ID,
+      scope: scopes ? scopes.join(" ") : "",
+      redirect_uri: redirectUri,
+      state,
+    };
+    const urlParams = Object.keys(params)
+      .map((key) => `${key}=${encodeURIComponent(params[key])}`)
+      .join("&");
+    return `${baseUrl}?${urlParams}`;
+  }
+}