From f23357ba68bb65e5f0ad160ebfeee9aa8d73b119 Mon Sep 17 00:00:00 2001 From: Vivek Ratnavel Subramanian Date: Thu, 25 Aug 2022 02:55:11 -0700 Subject: [PATCH] Update slack chat to redirect to a URL (#6909) --- .../configuration/slackChatConfiguration.json | 18 +----- .../resources/config/ConfigResourceTest.java | 3 +- .../resources/openmetadata-secure-test.yaml | 4 +- conf/openmetadata.yaml | 4 +- .../src/main/resources/ui/package.json | 1 - .../ui/src/components/SlackChat/SlackChat.css | 23 ++++++++ .../ui/src/components/SlackChat/SlackChat.tsx | 55 +++++-------------- .../resources/ui/src/interface/types.d.ts | 4 +- .../resources/ui/src/router/AppRouter.tsx | 8 +-- 9 files changed, 46 insertions(+), 74 deletions(-) diff --git a/catalog-rest-service/src/main/resources/json/schema/configuration/slackChatConfiguration.json b/catalog-rest-service/src/main/resources/json/schema/configuration/slackChatConfiguration.json index afb2aabae14..493a0f75a3b 100644 --- a/catalog-rest-service/src/main/resources/json/schema/configuration/slackChatConfiguration.json +++ b/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 } \ No newline at end of file diff --git a/catalog-rest-service/src/test/java/org/openmetadata/catalog/resources/config/ConfigResourceTest.java b/catalog-rest-service/src/test/java/org/openmetadata/catalog/resources/config/ConfigResourceTest.java index e9934f3b6a8..992b0790394 100644 --- a/catalog-rest-service/src/test/java/org/openmetadata/catalog/resources/config/ConfigResourceTest.java +++ b/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 diff --git a/catalog-rest-service/src/test/resources/openmetadata-secure-test.yaml b/catalog-rest-service/src/test/resources/openmetadata-secure-test.yaml index c6982eb81fc..b698272be8a 100644 --- a/catalog-rest-service/src/test/resources/openmetadata-secure-test.yaml +++ b/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" diff --git a/conf/openmetadata.yaml b/conf/openmetadata.yaml index f82bc1a424c..e7fc264375f 100644 --- a/conf/openmetadata.yaml +++ b/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:-""} diff --git a/openmetadata-ui/src/main/resources/ui/package.json b/openmetadata-ui/src/main/resources/ui/package.json index a2be0c8cf6c..4722a02bea6 100644 --- a/openmetadata-ui/src/main/resources/ui/package.json +++ b/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", diff --git a/openmetadata-ui/src/main/resources/ui/src/components/SlackChat/SlackChat.css b/openmetadata-ui/src/main/resources/ui/src/components/SlackChat/SlackChat.css index 6439b786987..852ff388614 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/SlackChat/SlackChat.css +++ b/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; +} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/SlackChat/SlackChat.tsx b/openmetadata-ui/src/main/resources/ui/src/components/SlackChat/SlackChat.tsx index c5d175c2b66..fd5dfff68fd 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/SlackChat/SlackChat.tsx +++ b/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 = ({ 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 ? (
- + +
+
+ +
+
+
- ); + ) : null; }; export default SlackChat; diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts b/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts index 929b372af57..da2b568897b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts +++ b/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 = { diff --git a/openmetadata-ui/src/main/resources/ui/src/router/AppRouter.tsx b/openmetadata-ui/src/main/resources/ui/src/router/AppRouter.tsx index 9888007d91e..a3422f5d7f8 100644 --- a/openmetadata-ui/src/main/resources/ui/src/router/AppRouter.tsx +++ b/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 ? ( ) : null;