Add workspaceId to intercom custom attributes

airbyte-webapp/src/packages/cloud/services/thirdParty/intercom/index.tsx

@@ -0,0 +1 @@
+export * from "./useIntercom";

airbyte-webapp/src/packages/cloud/services/thirdParty/intercom/useIntercom.ts

@@ -1,20 +1,40 @@
 import { useEffect } from "react";
-import { useIntercom as useIntercomProvider } from "react-use-intercom";
+import {
+  useIntercom as useIntercomProvider,
+  IntercomContextValues,
+} from "react-use-intercom";
 
 import { useCurrentUser } from "packages/cloud/services/auth/AuthService";
+import { useAnalytics } from "hooks/services/Analytics";
+
+export const useIntercom = (): IntercomContextValues => {
+  const intercomContextValues = useIntercomProvider();
 
-export const useIntercom = (): void => {
   const user = useCurrentUser();
-  const { boot, shutdown } = useIntercomProvider();
+  const { analyticsContext } = useAnalytics();
 
   useEffect(() => {
-    boot({
+    intercomContextValues.boot({
       email: user.email,
       name: user.name,
       userId: user.userId,
       userHash: user.intercomHash,
+
+      customAttributes: {
+        workspace_id: analyticsContext.workspaceId,
+      },
     });
 
-    return () => shutdown();
+    return () => intercomContextValues.shutdown();
   }, [user]);
+
+  useEffect(() => {
+    intercomContextValues.update({
+      customAttributes: {
+        workspace_id: analyticsContext.workspace_id,
+      },
+    });
+  }, [analyticsContext.workspace_id]);
+
+  return intercomContextValues;
 };

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsTitle.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
-import { useIntercom } from "react-use-intercom";
+
+import { useIntercom } from "packages/cloud/services/thirdParty/intercom";
 
 import PageTitle from "components/PageTitle";
 import { Button } from "components/base";

airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx

@@ -4,7 +4,8 @@ import { FormattedMessage, FormattedNumber } from "react-intl";
 import { NavLink } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faStar } from "@fortawesome/free-solid-svg-icons";
-import { useIntercom } from "react-use-intercom";
+
+import { useIntercom } from "packages/cloud/services/thirdParty/intercom";
 
 import { CloudRoutes } from "packages/cloud/cloudRoutes";
 
@@ -26,10 +27,7 @@ import ResourcesPopup, {
   Item,
 } from "views/layout/SideBar/components/ResourcesPopup";
 import { RoutePaths } from "pages/routes";
-import {
-  FeatureItem,
-  WithFeature,
-} from "../../../../../hooks/services/Feature";
+import { FeatureItem, WithFeature } from "hooks/services/Feature";
 
 const CreditsIcon = styled(FontAwesomeIcon)`
   font-size: 21px;

airbyte-webapp/src/services/workspaces/WorkspacesService.tsx

@@ -66,12 +66,17 @@ export const useWorkspaceService = (): Context => {
   return workspaceService;
 };
 
-export const useCurrentWorkspace = (): Workspace => {
+export const useCurrentWorkspaceId = (): string => {
   const { params } = useRouter<unknown, { workspaceId: string }>();
-  const { workspaceId } = params;
+
+  return params.workspaceId;
+};
+
+export const useCurrentWorkspace = (): Workspace => {
+  const workspaceId = useCurrentWorkspaceId();
 
   return useResource(WorkspaceResource.detailShape(), {
-    workspaceId: workspaceId,
+    workspaceId,
   });
 };