feat: refactor Slack utility imports and add new Slack utility class

Common/Server/API/SlackAPI.ts

@@ -48,14 +48,23 @@ export default class SlackAPI {
     });
 
     router.post("/slack/interactive", SlackAuthorization.isAuthorizedSlackRequest,  (req: ExpressRequest, res: ExpressResponse) => {
+      return Response.sendJsonObjectResponse(req, res, {
+        "response_action": "clear"
+      });
     });
 
     // options load endpoint. 
 
     router.post("/slack/options-load", SlackAuthorization.isAuthorizedSlackRequest,  (req: ExpressRequest, res: ExpressResponse) => {
+      return Response.sendJsonObjectResponse(req, res, {
+        "response_action": "clear"
+      });
     });
 
     router.post("/slack/command", SlackAuthorization.isAuthorizedSlackRequest,  (req: ExpressRequest, res: ExpressResponse) => {
+      return Response.sendJsonObjectResponse(req, res, {
+        "response_action": "clear"
+      });
     });
 
 

Common/Server/Services/ProjectService.ts

@@ -67,7 +67,7 @@ import AlertSeverity from "../../Models/DatabaseModels/AlertSeverity";
 import AlertSeverityService from "./AlertSeverityService";
 import AlertState from "../../Models/DatabaseModels/AlertState";
 import AlertStateService from "./AlertStateService";
-import SlackUtil from "../Utils/Slack";
+import SlackUtil from "../Utils/Slack/Slack";
 import URL from "../../Types/API/URL";
 import Exception from "../../Types/Exception/Exception";
 

Common/Server/Services/UserService.ts

@@ -28,7 +28,7 @@ import Text from "../../Types/Text";
 import EmailVerificationToken from "Common/Models/DatabaseModels/EmailVerificationToken";
 import TeamMember from "Common/Models/DatabaseModels/TeamMember";
 import Model from "Common/Models/DatabaseModels/User";
-import SlackUtil from "../Utils/Slack";
+import SlackUtil from "../Utils/Slack/Slack";
 import UserTwoFactorAuth from "Common/Models/DatabaseModels/UserTwoFactorAuth";
 import UserTwoFactorAuthService from "./UserTwoFactorAuthService";
 import BadDataException from "../../Types/Exception/BadDataException";

Common/Server/Types/Workflow/Components/Slack/SendMessageToChannel.ts

@@ -8,7 +8,7 @@ import { JSONObject } from "Common/Types/JSON";
 import ComponentMetadata, { Port } from "Common/Types/Workflow/Component";
 import ComponentID from "Common/Types/Workflow/ComponentID";
 import SlackComponents from "Common/Types/Workflow/Components/Slack";
-import SlackUtil from "../../../../Utils/Slack";
+import SlackUtil from "../../../../Utils/Slack/Slack";
 
 export default class SendMessageToChannel extends ComponentCode {
   public constructor() {

Dashboard/src/Pages/UserSettings/SlackIntegration.tsx

@@ -4,6 +4,7 @@ import React, {
   Fragment,
   FunctionComponent,
   ReactElement,
+  useEffect,
 } from "react";
 import Card from "Common/UI/Components/Card/Card";
 import { ButtonStyleType } from "Common/UI/Components/Button/Button";
@@ -14,45 +15,114 @@ import { APP_API_URL, HOME_URL, SlackAppClientId } from "Common/UI/Config";
 import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
 import Link from "Common/UI/Components/Link/Link";
 import Route from "Common/Types/API/Route";
+import ObjectID from "Common/Types/ObjectID";
+import ProjectUtil from "Common/UI/Utils/Project";
+import UserUtil from "Common/UI/Utils/User";
+import { JSONObject } from "Common/Types/JSON";
+import API from "Common/Utils/API";
+import Exception from "Common/Types/Exception/Exception";
+import PageLoader from "Common/UI/Components/Loader/PageLoader";
 
 const Settings: FunctionComponent<PageComponentProps> = (): ReactElement => {
 
 
   const [error, setError] = React.useState<ReactElement | null>(null);
 
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
 
-  if(error){
-    return <ErrorMessage message={error} />
+  const [manifest, setManifest] = React.useState<JSONObject | null>(null);
+
+  const fetchAppManifest = async () => {
+    try {
+      setError(null);
+      setIsLoading(true);
+      const response = await API.get<JSONObject>(URL.fromString("/api/slack/app-manifest"));
+      setManifest(response.data);
+    } catch (error) {
+      setError(
+        <div>
+          {API.getFriendlyErrorMessage(error as Error)}
+        </div>
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchAppManifest().catch((error: Exception) => {
+      setError(
+        <div>
+          {API.getFriendlyErrorMessage(error)}
+        </div>
+      );
+    });
+  }, []);
+
+
+  if(isLoading){
+    return <PageLoader isVisible={true} />;
   }
 
+  if (error) {
+    return <ErrorMessage message={error} />
+  }
 
   return (
     <Fragment>
       <div>
-      <Card
-        title={`Connect with Slack`}
-        description={`Connect your account with Slack to receive notifications.`}
-        buttons={[
-          {
-            title: `Connect with Slack`,
-            buttonStyle: ButtonStyleType.PRIMARY,
-            onClick: () => {
-              if(SlackAppClientId){
-
-                const redirect_uri: string = `${APP_API_URL}/slack/auth`
-
-                Navigation.navigate(URL.fromString(`https://slack.com/oauth/v2/authorize?scope=incoming-webhook&client_id=${SlackAppClientId}&redirect_uri=${redirect_uri}`))
-              }else{
-                setError(
-                  <div>
-                    Looks like the Slack App Client ID is not set in the environment variables when you installed OneUptime. For more information, please check this guide to set up Slack App properly: <Link to={new Route("/docs/self-hosted/slack-integration")} openInNewTab={true}>Slack Integration</Link>
-                  </div>);
-              }
+        <Card
+          title={`Connect with Slack`}
+          description={`Connect your account with Slack to receive notifications.`}
+          buttons={[
+            {
+              title: `Connect with Slack`,
+              buttonStyle: ButtonStyleType.PRIMARY,
+              onClick: () => {
+                if (SlackAppClientId) {
+
+                  const projectId: ObjectID | null = ProjectUtil.getCurrentProjectId();
+                  const userId: ObjectID | null = UserUtil.getUserId();
+
+                  if (!projectId) {
+                    setError(
+                      <div>
+                        Looks like you have not selected any project. Please select a project to continue.
+                      </div>);
+                    return;
+                  }
+
+                  if (!userId) {
+                    setError(
+                      <div>
+                        Looks like you are not logged in. Please login to continue.
+                      </div>);
+                    return;
+                  }
+
+
+                  const scopes: Array<string> =[]; 
+
+                  if(manifest && manifest["oauth_config"] && ((manifest["oauth_config"] as JSONObject)["scopes"] as JSONObject) && ((manifest["oauth_config"] as JSONObject)["scopes"] as JSONObject)["user"] && (((manifest["oauth_config"] as JSONObject)["scopes"] as JSONObject)["user"] as Array<string>).length > 0){
+                    scopes.push(...(((manifest["oauth_config"] as JSONObject)["scopes"] as JSONObject)["user"] as Array<string>));
+                  }
+
+                  const redirect_uri: string = `${APP_API_URL}/slack/auth?projectId=${projectId.toString()}&userId=${userId.toString()}`;
+
+                  Navigation.navigate(URL.fromString(`https://slack.com/oauth/v2/authorize?scope=${
+                    scopes.join(",")
+                  }&client_id=${SlackAppClientId}&redirect_uri=${redirect_uri}`))
+                } else {
+                  setError(
+                    <div>
+                      Looks like the Slack App Client ID is not set in the environment variables when you installed OneUptime. For more information, please check this guide to set up Slack App properly: <Link to={new Route("/docs/self-hosted/slack-integration")} openInNewTab={true}>Slack Integration</Link>
+                    </div>);
+                }
+              },
+              icon: IconProp.Slack,
             },
-            icon: IconProp.Slack,
-          },
-        ]}
-      />
+          ]}
+        />
       </div>
     </Fragment>
   );