feat(feedback): add capture events in feedback plugin (#1472)

* feat(feedback): add capture events in feedback plugin Signed-off-by: Yash Oswal <[email protected]> * fix(feedback): fix yarn tsc issues Signed-off-by: Yash Oswal <[email protected]> --------- Signed-off-by: Yash Oswal <[email protected]>
janus-idp · Apr 9, 2024 · 36a12e3 · 36a12e3
1 parent edd019e
commit 36a12e3
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/plugins/feedback/src/components/CreateFeedbackModal/CreateFeedbackModal.tsx b/plugins/feedback/src/components/CreateFeedbackModal/CreateFeedbackModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { configApiRef, useApi } from '@backstage/core-plugin-api';
+import { configApiRef, useAnalytics, useApi } from '@backstage/core-plugin-api';
 
 import {
   Button,
@@ -82,6 +82,7 @@ export const CreateFeedbackModal = React.forwardRef(
   ) => {
     const classes = useStyles();
     const api = useApi(feedbackApiRef);
+    const analytics = useAnalytics();
     const [feedbackType, setFeedbackType] = useState('BUG');
     const [selectedTag, setSelectedTag] = useState(issueTags[0]);
     const app = useApi(configApiRef);
@@ -130,6 +131,7 @@ export const CreateFeedbackModal = React.forwardRef(
         tag: selectedTag,
       });
       props.handleModalCloseFn(resp);
+      analytics.captureEvent('click', `submit - ${summary.value}`);
     }
 
     function handleInputChange(

diff --git a/plugins/feedback/src/components/EntityFeedbackPage/EntityFeedbackPage.tsx b/plugins/feedback/src/components/EntityFeedbackPage/EntityFeedbackPage.tsx
@@ -4,6 +4,7 @@ import { Progress } from '@backstage/core-components';
 import {
   configApiRef,
   identityApiRef,
+  useAnalytics,
   useApi,
 } from '@backstage/core-plugin-api';
 import { useEntity } from '@backstage/plugin-catalog-react';
@@ -46,6 +47,7 @@ export const EntityFeedbackPage = () => {
   const classes = useStyles();
   const { entity } = useEntity();
   const user = useApi(identityApiRef);
+  const analytics = useAnalytics();
 
   const [modalProps, setModalProps] = useState<{
     projectEntity: string;
@@ -84,6 +86,7 @@ export const EntityFeedbackPage = () => {
 
   async function handleModalOpen() {
     const userEntity = (await user.getBackstageIdentity()).userEntityRef;
+    analytics.captureEvent('click', 'open - create feedback modal');
     setModalProps({
       projectEntity: projectEntity,
       userEntity: userEntity,
@@ -95,6 +98,7 @@ export const EntityFeedbackPage = () => {
 
   const handleModalClose = (respObj: { [key: string]: string } | false) => {
     setModalOpen(false);
+    analytics.captureEvent('click', 'close - feedback modal');
     if (respObj) {
       setReload(true);
       if (respObj.error) {
@@ -125,6 +129,7 @@ export const EntityFeedbackPage = () => {
   };
 
   const handleResyncClick = () => {
+    analytics.captureEvent('click', 'refresh');
     setReload(true);
   };
 

diff --git a/plugins/feedback/src/components/FeedbackTable/FeedbackTable.tsx b/plugins/feedback/src/components/FeedbackTable/FeedbackTable.tsx
@@ -8,7 +8,7 @@ import {
   TableColumn,
   useQueryParamState,
 } from '@backstage/core-components';
-import { useApi } from '@backstage/core-plugin-api';
+import { useAnalytics, useApi } from '@backstage/core-plugin-api';
 import {
   EntityPeekAheadPopover,
   EntityRefLink,
@@ -51,6 +51,7 @@ export const FeedbackTable: React.FC<{ projectId?: string }> = (props: {
 }) => {
   const projectId = props.projectId ? props.projectId : 'all';
   const api = useApi(feedbackApiRef);
+  const analytics = useAnalytics();
   const [feedbackData, setFeedbackData] = useState<FeedbackType[]>([]);
   const [tableConfig, setTableConfig] = useState({
     totalFeedbacks: 100,
@@ -169,6 +170,7 @@ export const FeedbackTable: React.FC<{ projectId?: string }> = (props: {
 
   useDebounce(
     () => {
+      if (searchText.length > 0) analytics.captureEvent('search', searchText);
       api
         .getAllFeedbacks(1, tableConfig.pageSize, projectId, searchText)
         .then(data => {
@@ -189,6 +191,10 @@ export const FeedbackTable: React.FC<{ projectId?: string }> = (props: {
   );
 
   async function handlePageChange(newPage: number, pageSize: number) {
+    analytics.captureEvent(
+      'paginate',
+      `page: ${newPage + 1}, size: ${pageSize}`,
+    );
     if (newPage > tableConfig.page) {
       setTableConfig({
         totalFeedbacks: tableConfig.totalFeedbacks,
@@ -210,7 +216,7 @@ export const FeedbackTable: React.FC<{ projectId?: string }> = (props: {
     return setFeedbackData(newData.data);
   }
 
-  async function handleChangeRowsPerPage(pageSize: number) {
+  async function handleRowsPerPageChange(pageSize: number) {
     setTableConfig({
       ...tableConfig,
       pageSize: pageSize,
@@ -280,7 +286,7 @@ export const FeedbackTable: React.FC<{ projectId?: string }> = (props: {
           isLoading={loading}
           onRowClick={handleRowClick}
           onPageChange={handlePageChange}
-          onRowsPerPageChange={handleChangeRowsPerPage}
+          onRowsPerPageChange={handleRowsPerPageChange}
           data={feedbackData}
           columns={columns}
           totalCount={tableConfig.totalFeedbacks}

diff --git a/plugins/feedback/src/components/OpcFeedbackComponent/OpcFeedbackComponent.tsx b/plugins/feedback/src/components/OpcFeedbackComponent/OpcFeedbackComponent.tsx
@@ -5,6 +5,7 @@ import '@one-platform/opc-feedback';
 import {
   configApiRef,
   identityApiRef,
+  useAnalytics,
   useApi,
   useRouteRef,
 } from '@backstage/core-plugin-api';
@@ -20,6 +21,7 @@ export const OpcFeedbackComponent = () => {
   const appConfig = useApi(configApiRef);
   const feedbackApi = useApi(feedbackApiRef);
   const identityApi = useApi(identityApiRef);
+  const analytics = useAnalytics();
 
   const footer = JSON.stringify({
     name: appConfig.getString('app.title'),
@@ -62,6 +64,7 @@ export const OpcFeedbackComponent = () => {
         });
         throw Error('Summary cannot be empty');
       }
+      analytics.captureEvent('click', `submit - ${event.detail.data.summary}`);
       const userEntity = (await identityApi.getBackstageIdentity())
         .userEntityRef;
       const resp = await feedbackApi.createFeedback({
@@ -97,7 +100,7 @@ export const OpcFeedbackComponent = () => {
     };
     const elem: any = document.querySelector('opc-feedback');
     elem.onSubmit = onSubmit;
-  }, [feedbackApi, projectId, identityApi]);
+  }, [feedbackApi, projectId, identityApi, analytics]);
 
   return (
     <>