Update slack chat to redirect to a URL (#6909)

catalog-rest-service/src/main/resources/json/schema/configuration/slackChatConfiguration.json

@@ -6,23 +6,11 @@
   "type": "object",
   "javaType": "org.openmetadata.catalog.slackChat.SlackChatConfiguration",
   "properties": {
-    "apiToken": {
-      "description": "Api Token",
+    "slackUrl": {
+      "description": "The URL of the slack channel to redirect the users to on click of the chat icon",
       "type": "string"
-    },
-    "botName": {
-      "description": "Bot Name",
-      "type": "string"
-    },
-    "channels": {
-      "description": "Slack Chat Channels",
-      "type": "array",
-      "items": {
-        "type": "string"
-      },
-      "default": null
     }
   },
-  "required": ["apiToken", "botName", "channels"],
+  "required": ["slackUrl"],
   "additionalProperties": false
 }

catalog-rest-service/src/test/java/org/openmetadata/catalog/resources/config/ConfigResourceTest.java

@@ -92,8 +92,7 @@ class ConfigResourceTest extends CatalogApplicationTest {
     WebTarget target = getConfigResource("slackChat");
     SlackChatConfiguration slackChatConfiguration =
         TestUtils.get(target, SlackChatConfiguration.class, TEST_AUTH_HEADERS);
-    assertEquals(config.getSlackChatConfiguration().getApiToken(), slackChatConfiguration.getApiToken());
-    assertEquals(config.getSlackChatConfiguration().getBotName(), slackChatConfiguration.getBotName());
+    assertEquals(config.getSlackChatConfiguration().getSlackUrl(), slackChatConfiguration.getSlackUrl());
   }
 
   @Test

catalog-rest-service/src/test/resources/openmetadata-secure-test.yaml

@@ -171,6 +171,4 @@ airflowConfiguration:
   authProvider: "no-auth"
 
 slackChat:
-  apiToken: "token"
-  botName: "bot"
-  channels: ["support"]
+  slackUrl: "http://localhost:8080"

conf/openmetadata.yaml

@@ -248,6 +248,4 @@ health:
 
 sandboxModeEnabled: ${SANDBOX_MODE_ENABLED:-false}
 slackChat:
-  apiToken: ${SLACK_CHAT_API_TOKEN:-""}
-  botName: ${SLACK_CHAT_BOT_NAME:-""}
-  channels: ${SLACK_CHAT_CHANNELS:-[]}
+  slackUrl: ${SLACK_CHAT_SLACK_URL:-""}

openmetadata-ui/src/main/resources/ui/package.json

@@ -74,7 +74,6 @@
     "react-quill": "^1.3.5",
     "react-router-dom": "^5.2.0",
     "react-select": "^5.2.2",
-    "react-slack-chat": "https://github.com/vivekratnavel/react-slack-chat.git",
     "react-slick": "^0.28.1",
     "react-table": "^7.7.0",
     "react-tippy": "^1.4.0",

openmetadata-ui/src/main/resources/ui/src/components/SlackChat/SlackChat.css

@@ -1,3 +1,26 @@
 .slack-chat > div > div > div {
   z-index: 100;
 }
+
+.slack-chat .chatIcon {
+  color: white;
+  position: absolute;
+  text-align: center;
+  left: 50%;
+  top: 53%;
+  transform: translate(-50%, -50%);
+}
+
+.slack-chat .bubble {
+  z-index: 10;
+  background-color: #7147e8;
+  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
+  height: 60px;
+  position: fixed;
+  right: 40px;
+  bottom: 20px;
+  width: 60px;
+  border-radius: 50%;
+  display: inline-block;
+  cursor: pointer;
+}

openmetadata-ui/src/main/resources/ui/src/components/SlackChat/SlackChat.tsx

@@ -11,14 +11,10 @@
  *  limitations under the License.
  */
 
+import { faMessage } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { SlackChatConfig } from 'Models';
-import React, { FC, useMemo } from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-// @ts-ignore
-import { ReactSlackChat } from 'react-slack-chat/dist/react-slack-chat-with-default-hooks';
-import AppState from '../../AppState';
-import ChannelIcon from '../../assets/img/slackChat/icon-support.svg';
-import UserIcon from '../../assets/img/slackChat/icon-user.svg';
+import React, { FC } from 'react';
 import './SlackChat.css';
 
 type Props = {
@@ -26,44 +22,19 @@ type Props = {
 };
 
 const SlackChat: FC<Props> = ({ slackConfig }) => {
-  const currentUser = useMemo(
-    () => AppState.getCurrentUserDetails(),
-    [AppState.userDetails, AppState.nonSecureUserDetails]
-  );
-  const channels = slackConfig.channels.map((ch) => {
-    return { name: ch, icon: ChannelIcon };
-  });
-  const customHooks = [
-    {
-      id: 'getUrl',
-      action: () => Promise.resolve('URL: ' + window.location.href),
-    },
-    {
-      id: 'getUser',
-      action: () =>
-        Promise.resolve(
-          `User: ${currentUser?.name}, Email: ${currentUser?.email}, Name: ${currentUser?.displayName}, Admin: ${currentUser?.isAdmin}`
-        ),
-    },
-  ];
-  const botName = currentUser?.name || slackConfig.botName || 'support-bot';
+  const url = slackConfig.slackUrl;
 
-  return (
+  return url && url.length > 0 ? (
     <div className="slack-chat">
-      <ReactSlackChat
-        closeChatButton
-        apiToken={slackConfig.apiToken}
-        botName={botName}
-        channels={channels}
-        defaultMessage="Welcome! Someone will help shortly."
-        helpText="Need Help?"
-        hooks={customHooks}
-        singleUserMode={false}
-        themeColor="#7147E8"
-        userImage={UserIcon}
-      />
+      <a href={url} rel="noreferrer" target="_blank">
+        <div className="bubble">
+          <div className="chatIcon">
+            <FontAwesomeIcon icon={faMessage} size="2x" />
+          </div>
+        </div>
+      </a>
     </div>
-  );
+  ) : null;
 };
 
 export default SlackChat;

openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts

@@ -196,9 +196,7 @@ declare module 'Models' {
   };
 
   export type SlackChatConfig = {
-    apiToken: string;
-    botName: string;
-    channels: string[];
+    slackUrl: string;
   };
 
   export type FormattedTableData = {

openmetadata-ui/src/main/resources/ui/src/router/AppRouter.tsx

@@ -56,11 +56,9 @@ const AppRouter = () => {
     fetchSlackConfig()
       .then((res) => {
         if (res.data) {
-          const { apiToken, botName, channels } = res.data;
+          const { slackUrl } = res.data;
           const slackConfig = {
-            apiToken,
-            botName,
-            channels,
+            slackUrl,
           };
           setSlackConfig(slackConfig);
         } else {
@@ -79,7 +77,7 @@ const AppRouter = () => {
   }, []);
 
   const slackChat =
-    slackConfig && slackConfig.apiToken ? (
+    slackConfig && slackConfig.slackUrl ? (
       <SlackChat slackConfig={slackConfig} />
     ) : null;