feat: support analytics from Q&A

closes #51

Author: drodil

plugins/qeta/src/components/AskForm/AskForm.tsx

@@ -1,4 +1,4 @@
-import { configApiRef, useApi } from '@backstage/core-plugin-api';
+import { configApiRef, useAnalytics, useApi } from '@backstage/core-plugin-api';
 import { Button, TextField } from '@material-ui/core';
 import { Alert, Autocomplete } from '@material-ui/lab';
 import React, { useEffect, useMemo } from 'react';
@@ -79,6 +79,7 @@ export const AskForm = (props: {
   const { id, entity, onPost } = props;
   const base_path = useBasePath();
   const navigate = useNavigate();
+  const analytics = useAnalytics();
   const [entityRef, setEntityRef] = React.useState(entity);
   const [values, setValues] = React.useState(getDefaultValues());
   const [error, setError] = React.useState(false);
@@ -122,6 +123,7 @@ export const AskForm = (props: {
             return;
           }
           reset();
+          analytics.captureEvent('edit', 'question');
           if (onPost) {
             onPost(q);
           } else {
@@ -138,6 +140,7 @@ export const AskForm = (props: {
           setError(true);
           return;
         }
+        analytics.captureEvent('post', 'question');
         reset();
         navigate(`${base_path}/qeta/questions/${q.id}`);
       })

plugins/qeta/src/components/CommentSection/CommentSection.tsx

@@ -3,7 +3,7 @@ import { Box, Button, Grid, TextField } from '@material-ui/core';
 import { Link } from '@backstage/core-components';
 import { AnswerResponse, qetaApiRef, QuestionResponse } from '../../api';
 import { Controller, useForm } from 'react-hook-form';
-import { useApi } from '@backstage/core-plugin-api';
+import { useAnalytics, useApi } from '@backstage/core-plugin-api';
 import { CommentList } from './CommentList';
 
 export const CommentSection = (props: {
@@ -16,6 +16,7 @@ export const CommentSection = (props: {
   answer?: AnswerResponse;
 }) => {
   const { answer, question, onCommentPost, onCommentDelete } = props;
+  const analytics = useAnalytics();
   const qetaApi = useApi(qetaApiRef);
   const [formVisible, setFormVisible] = useState(false);
   const {
@@ -29,6 +30,7 @@ export const CommentSection = (props: {
     if (answer) {
       qetaApi.commentAnswer(question.id, answer.id, data.content).then(a => {
         setFormVisible(false);
+        analytics.captureEvent('comment', 'answer');
         reset();
         onCommentPost(question, a);
       });
@@ -37,6 +39,7 @@ export const CommentSection = (props: {
 
     qetaApi.commentQuestion(question.id, data.content).then(q => {
       setFormVisible(false);
+      analytics.captureEvent('comment', 'question');
       reset();
       onCommentPost(q);
     });

plugins/qeta/src/components/QuestionPage/AnswerForm.tsx

@@ -1,7 +1,7 @@
 import { WarningPanel } from '@backstage/core-components';
-import { Typography, Button } from '@material-ui/core';
+import { Button, Typography } from '@material-ui/core';
 import React, { useEffect } from 'react';
-import { useApi } from '@backstage/core-plugin-api';
+import { useAnalytics, useApi } from '@backstage/core-plugin-api';
 import {
   AnswerRequest,
   AnswerResponse,
@@ -25,6 +25,7 @@ export const AnswerForm = (props: {
 }) => {
   const { question, onPost, id } = props;
   const [values, setValues] = React.useState(getDefaultValues(question.id));
+  const analytics = useAnalytics();
   const [error, setError] = React.useState(false);
   const qetaApi = useApi(qetaApiRef);
   const styles = useStyles();
@@ -48,6 +49,7 @@ export const AnswerForm = (props: {
             setError(true);
             return;
           }
+          analytics.captureEvent('edit', 'answer');
           reset();
           onPost(a);
         })
@@ -62,6 +64,7 @@ export const AnswerForm = (props: {
           setError(true);
           return;
         }
+        analytics.captureEvent('post', 'answer');
         reset();
         onPost(a);
       })

plugins/qeta/src/components/QuestionPage/VoteButtons.tsx

@@ -10,13 +10,14 @@ import ArrowDownward from '@material-ui/icons/ArrowDownward';
 import ArrowUpward from '@material-ui/icons/ArrowUpward';
 import Check from '@material-ui/icons/Check';
 import React from 'react';
-import { useApi } from '@backstage/core-plugin-api';
+import { useAnalytics, useApi } from '@backstage/core-plugin-api';
 
 export const VoteButtons = (props: {
   entity: QuestionResponse | AnswerResponse;
   question?: QuestionResponse;
 }) => {
   const [ownVote, setOwnVote] = React.useState(props.entity.ownVote ?? 0);
+  const analytics = useAnalytics();
   const isCorrectAnswer =
     'questionId' in props.entity ? props.entity.correct : false;
   const [correct, setCorrect] = React.useState(isCorrectAnswer);
@@ -32,11 +33,13 @@ export const VoteButtons = (props: {
     if (isQuestion) {
       qetaApi.voteQuestionUp(entity.id).then(response => {
         setOwnVote(1);
+        analytics.captureEvent('vote', 'question', { value: 1 });
         setEntity(response);
       });
     } else if ('questionId' in entity) {
       qetaApi.voteAnswerUp(entity.questionId, entity.id).then(response => {
         setOwnVote(1);
+        analytics.captureEvent('vote', 'answer', { value: 1 });
         setEntity(response);
       });
     }
@@ -46,11 +49,13 @@ export const VoteButtons = (props: {
     if (isQuestion) {
       qetaApi.voteQuestionDown(entity.id).then(response => {
         setOwnVote(-1);
+        analytics.captureEvent('vote', 'question', { value: -1 });
         setEntity(response);
       });
     } else if ('questionId' in entity) {
       qetaApi.voteAnswerDown(entity.questionId, entity.id).then(response => {
         setOwnVote(-1);
+        analytics.captureEvent('vote', 'answer', { value: -1 });
         setEntity(response);
       });
     }