ImagesTable/BlueprintsSideBar: Add Segment tracking (HMS-5989)

Needed so the Intercom team can decide whether or not to display an
onboarding video (first time user with no images or blueprints).

src/Components/Blueprints/BlueprintsSideBar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import {
   Bullseye,
@@ -18,6 +18,8 @@ import {
 } from '@patternfly/react-core';
 import { PlusCircleIcon, SearchIcon } from '@patternfly/react-icons';
 import { SVGIconProps } from '@patternfly/react-icons/dist/esm/createIcon';
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
+import { ChromeUser } from '@redhat-cloud-services/types';
 import debounce from 'lodash/debounce';
 import { Link } from 'react-router-dom';
 
@@ -46,6 +48,7 @@ import {
 } from '../../store/imageBuilderApi';
 import { imageBuilderApi } from '../../store/service/enhancedImageBuilderApi';
 import { resolveRelPath } from '../../Utilities/path';
+import { useGetEnvironment } from '../../Utilities/useGetEnvironment';
 
 type blueprintSearchProps = {
   blueprintsTotal: number;
@@ -60,6 +63,10 @@ type emptyBlueprintStateProps = {
 };
 
 const BlueprintsSidebar = () => {
+  const [userData, setUserData] = useState<ChromeUser | void>(undefined);
+  const { isFedoraEnv } = useGetEnvironment();
+  const { analytics, auth } = useChrome();
+
   const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
   const blueprintSearchInput = useAppSelector(selectBlueprintSearchInput);
   const blueprintsOffset = useAppSelector(selectOffset) || PAGINATION_OFFSET;
@@ -70,6 +77,13 @@ const BlueprintsSidebar = () => {
     offset: blueprintsOffset,
   };
 
+  useEffect(() => {
+    (async () => {
+      const data = await auth?.getUser();
+      setUserData(data);
+    })();
+  }, [auth]);
+
   if (blueprintSearchInput) {
     searchParams.search = blueprintSearchInput;
   }
@@ -119,6 +133,14 @@ const BlueprintsSidebar = () => {
     dispatch(setBlueprintId(undefined));
   };
 
+  if (!process.env.IS_ON_PREMISE && !isFedoraEnv) {
+    const orgId = userData?.identity?.internal?.org_id;
+
+    analytics.group(orgId, {
+      imagebuilder_blueprint_count: blueprintsData?.meta.count,
+    });
+  }
+
   return (
     <>
       <Stack hasGutter>

src/Components/ImagesTable/ImagesTable.tsx

@@ -86,10 +86,13 @@ import {
   timestampToDisplayString,
   timestampToDisplayStringDetailed,
 } from '../../Utilities/time';
+import { useGetEnvironment } from '../../Utilities/useGetEnvironment';
 
 const ImagesTable = () => {
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(10);
+  const [userData, setUserData] = useState<ChromeUser | void>(undefined);
+
   const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
   const blueprintSearchInput =
     useAppSelector(selectBlueprintSearchInput) || SEARCH_INPUT;
@@ -100,6 +103,15 @@ const ImagesTable = () => {
   const blueprintsOffset = useAppSelector(selectOffset) || PAGINATION_OFFSET;
   const blueprintsLimit = useAppSelector(selectLimit) || PAGINATION_LIMIT;
 
+  const { isFedoraEnv } = useGetEnvironment();
+  const { analytics, auth } = useChrome();
+  useEffect(() => {
+    (async () => {
+      const data = await auth?.getUser();
+      setUserData(data);
+    })();
+  }, [auth]);
+
   const searchParamsGetBlueprints: GetBlueprintsApiArg = {
     limit: blueprintsLimit,
     offset: blueprintsOffset,
@@ -212,6 +224,14 @@ const ImagesTable = () => {
   }
   const itemCount = data?.meta.count || 0;
 
+  if (!process.env.IS_ON_PREMISE && !isFedoraEnv) {
+    const orgId = userData?.identity.internal?.org_id;
+
+    analytics.group(orgId, {
+      imagebuilder_image_count: composesData?.meta.count,
+    });
+  }
+
   return (
     <>
       <ImagesTableToolbar

src/test/setup.ts

@@ -39,6 +39,7 @@ vi.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({
   default: () => ({
     analytics: {
       track: () => 'test',
+      group: () => 'test',
     },
     isBeta: () => true,
   }),