Merge pull request #96 from RedisInsight/feature/RI-2101_Cover_additional_events

#RI-2101 [Telemetry] Cover additional events in Workbench

Author: egor-zalenski

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx

@@ -22,10 +22,10 @@ export interface Props {
   items: Record<string, IEnablementAreaItem>;
   loading: boolean;
   openScript: (script: string, path: string) => void;
-  openInternalPage: (page: IInternalPage) => void;
+  onOpenInternalPage: (page: IInternalPage) => void;
 }
 
-const EnablementArea = ({ items, openScript, loading }: Props) => {
+const EnablementArea = ({ items, openScript, loading, onOpenInternalPage }: Props) => {
   const { search } = useLocation()
   const history = useHistory()
   const dispatch = useDispatch()
@@ -51,6 +51,7 @@ const EnablementArea = ({ items, openScript, loading }: Props) => {
     history.push({
       search: `?guide=${page.path}`
     })
+    onOpenInternalPage(page)
   }
 
   const handleCloseInternalPage = () => {

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/InternalPage.tsx

@@ -9,6 +9,7 @@ import {
 import JsxParser from 'react-jsx-parser'
 import cx from 'classnames'
 import { debounce } from 'lodash'
+import { useParams } from 'react-router-dom'
 
 import {
   LazyCodeButton,
@@ -18,6 +19,7 @@ import {
   Pagination
 } from 'uiSrc/pages/workbench/components/enablament-area/EnablementArea/components'
 import { IEnablementAreaItem } from 'uiSrc/slices/interfaces'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import styles from './styles.module.scss'
 import './styles.scss'
@@ -32,18 +34,52 @@ export interface Props {
   scrollTop?: number;
   onScroll?: (top: number) => void;
   id: string;
+  path: string;
   pagination?: IEnablementAreaItem[]
 }
 const InternalPage = (props: Props) => {
-  const { onClose, title, backTitle, isLoading, error, content, onScroll, scrollTop, pagination, id } = props
+  const {
+    onClose,
+    title,
+    backTitle,
+    isLoading,
+    error,
+    content,
+    onScroll,
+    scrollTop,
+    pagination,
+    id,
+    path,
+  } = props
   const components: any = { LazyCodeButton, InternalLink, Image }
   const containerRef = useRef<HTMLDivElement>(null)
+  const { instanceId = '' } = useParams<{ instanceId: string }>()
   const handleScroll = debounce(() => {
     if (containerRef.current && onScroll) {
       onScroll(containerRef.current.scrollTop)
     }
   }, 500)
 
+  const sendEventClickExternalLinkTelemetry = (link: string = '') => {
+    sendEventTelemetry({
+      event: TelemetryEvent.WORKBENCH_ENABLEMENT_AREA_LINK_CLICKED,
+      eventData: {
+        path,
+        link,
+        databaseId: instanceId,
+      }
+    })
+  }
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    const target = event.target as HTMLElement
+
+    // send telemetry event after click on an external link
+    if (target?.getAttribute('href') && target?.getAttribute('target')) {
+      sendEventClickExternalLinkTelemetry(target?.innerText)
+    }
+  }
+
   useEffect(() => {
     if (!isLoading && !error && scrollTop && containerRef.current) {
       setTimeout(() => {
@@ -57,7 +93,7 @@ const InternalPage = (props: Props) => {
       components={components}
       autoCloseVoidElements
       jsx={content}
-      onError={(e) => console.log(e)}
+      onError={(e) => console.error(e)}
     />
   ), [content])
 
@@ -82,7 +118,13 @@ const InternalPage = (props: Props) => {
           <EuiText className={styles.pageTitle} color="default">{title?.toUpperCase()}</EuiText>
         </div>
       </EuiFlyoutHeader>
-      <div ref={containerRef} className={cx(styles.content, 'enablement-area__page')} onScroll={handleScroll}>
+      <div
+        ref={containerRef}
+        className={cx(styles.content, 'enablement-area__page')}
+        onScroll={handleScroll}
+        onClick={handleClick}
+        role="none"
+      >
         { isLoading && <EuiLoadingContent data-testid="enablement-area__page-loader" lines={3} /> }
         { !isLoading && error && <EmptyPrompt /> }
         { !isLoading && !error && contentComponent }

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/LazyInternalPage/LazyInternalPage.tsx

@@ -75,6 +75,7 @@ const LazyInternalPage = ({ onClose, title, path }: Props) => {
   return (
     <InternalPage
       id={pageData.name}
+      path={path}
       onClose={onClose}
       title={startCase(title || pageData.name)}
       backTitle={startCase(pageData?.parent)}

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.tsx

@@ -25,6 +25,7 @@ const EnablementAreaCollapse = ({ isMinimized, setIsMinimized }: Props) => (
           size="m"
           onClick={() => setIsMinimized(false)}
           data-testid="expand-enablement-area"
+          aria-label="expand-enablement-area"
         />
       </EuiToolTip>
     ) : (
@@ -41,6 +42,7 @@ const EnablementAreaCollapse = ({ isMinimized, setIsMinimized }: Props) => (
           size="m"
           onClick={() => setIsMinimized(true)}
           data-testid="collapse-enablement-area"
+          aria-label="collapse-enablement-area"
         />
       </EuiToolTip>
     )}

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaWrapper.tsx

@@ -52,7 +52,7 @@ const EnablementAreaWrapper = React.memo(({ isMinimized, setIsMinimized, scriptE
     }, 0)
   }
 
-  const openInternalPage = ({ path }: IInternalPage) => {
+  const onOpenInternalPage = ({ path }: IInternalPage) => {
     sendEventTelemetry({
       event: TelemetryEvent.WORKBENCH_ENABLEMENT_AREA_GUIDE_OPENED,
       eventData: {
@@ -83,7 +83,7 @@ const EnablementAreaWrapper = React.memo(({ isMinimized, setIsMinimized, scriptE
           items={items}
           loading={loading}
           openScript={openScript}
-          openInternalPage={openInternalPage}
+          onOpenInternalPage={onOpenInternalPage}
         />
       </EuiFlexItem>
     </EuiFlexGroup>