#RI-3977 - add recommendation voting

Author: AmirAllayarovSofteq

redisinsight/ui/src/assets/img/icons/dislike.svg

@@ -593,7 +593,7 @@
       {
         "id": "2",
         "type": "span",
-        "value": "was designed to help address your query needs and support a better development experience when dealing with complex data scenarios. Take a look at the "
+        "value": " was designed to help address your query needs and support a better development experience when dealing with complex data scenarios. Take a look at the "
       },
       {
         "id": "3",

redisinsight/ui/src/assets/img/icons/double_like.svg

@@ -3,4 +3,5 @@ export const EXTERNAL_LINKS = {
   githubIssues: 'https://github.com/RedisInsight/RedisInsight/issues',
   releaseNotes: 'https://github.com/RedisInsight/RedisInsight/releases',
   userSurvey: 'https://www.surveymonkey.com/r/redisinsight',
+  recommendationFeedback: 'https://github.com/RedisInsight/RedisInsight/issues/new/choose',
 }

redisinsight/ui/src/assets/img/icons/like.svg

@@ -0,0 +1,5 @@
+export enum Vote {
+  DoubleLike = 'amazing',
+  Like = 'useful',
+  Dislike = 'not useful'
+}

redisinsight/ui/src/constants/dbAnalysisRecommendations.json

@@ -2,6 +2,7 @@ import AnalysisDataView from './analysis-data-view'
 import ExpirationGroupsView from './analysis-ttl-view'
 import EmptyAnalysisMessage from './empty-analysis-message'
 import Header from './header'
+import RecommendationVoting from './recommendation-voting'
 import SummaryPerData from './summary-per-data'
 import TableLoader from './table-loader'
 import TopKeys from './top-keys'
@@ -12,6 +13,7 @@ export {
   ExpirationGroupsView,
   EmptyAnalysisMessage,
   Header,
+  RecommendationVoting,
   SummaryPerData,
   TableLoader,
   TopKeys,

redisinsight/ui/src/constants/links.ts

@@ -0,0 +1,84 @@
+import React from 'react'
+import { cloneDeep } from 'lodash'
+import { instance, mock } from 'ts-mockito'
+import { setRecommendationVote } from 'uiSrc/slices/analytics/dbAnalysis'
+
+import {
+  cleanup,
+  mockedStore,
+  fireEvent,
+  render,
+  screen,
+  waitForEuiPopoverVisible,
+} from 'uiSrc/utils/test-utils'
+
+import RecommendationVoting, { Props } from './RecommendationVoting'
+
+const mockedProps = mock<Props>()
+
+let store: typeof mockedStore
+
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}))
+
+describe('RecommendationVoting', () => {
+  it('should render', () => {
+    expect(render(<RecommendationVoting {...instance(mockedProps)} />)).toBeTruthy()
+  })
+
+  it('should call "setRecommendationVote" action be called after click "amazing-vote-btn"', () => {
+    render(<RecommendationVoting {...instance(mockedProps)} />)
+    fireEvent.click(screen.getByTestId('amazing-vote-btn'))
+
+    const expectedActions = [setRecommendationVote()]
+    expect(store.getActions()).toEqual(expectedActions)
+  })
+
+  it('should call "setRecommendationVote" action be called after click "useful-vote-btn"', () => {
+    render(<RecommendationVoting {...instance(mockedProps)} />)
+    fireEvent.click(screen.getByTestId('useful-vote-btn'))
+
+    const expectedActions = [setRecommendationVote()]
+    expect(store.getActions()).toEqual(expectedActions)
+  })
+
+  it('should call "setRecommendationVote" action be called after click "not-useful-vote-btn"', () => {
+    render(<RecommendationVoting {...instance(mockedProps)} />)
+    fireEvent.click(screen.getByTestId('not-useful-vote-btn'))
+
+    const expectedActions = [setRecommendationVote()]
+    expect(store.getActions()).toEqual(expectedActions)
+  })
+
+  it('should render popover after click "not-useful-vote-btn"', async () => {
+    render(<RecommendationVoting {...instance(mockedProps)} />)
+
+    expect(document.querySelector('[data-test-subj="github-repo-link"]')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByTestId('not-useful-vote-btn'))
+    await waitForEuiPopoverVisible()
+
+    expect(document.querySelector('[data-test-subj="github-repo-link"]')).toHaveAttribute('href', 'https://github.com/RedisInsight/RedisInsight/issues/new/choose')
+  })
+
+  it('should render component where all buttons are disabled"', async () => {
+    render(<RecommendationVoting {...instance(mockedProps)} vote="amazing" />)
+
+    expect(screen.getByTestId('amazing-vote-btn')).toBeDisabled()
+    expect(screen.getByTestId('useful-vote-btn')).toBeDisabled()
+    expect(screen.getByTestId('not-useful-vote-btn')).toBeDisabled()
+  })
+})

redisinsight/ui/src/constants/recommendations.ts

@@ -0,0 +1,144 @@
+import React, { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import cx from 'classnames'
+import {
+  EuiButton,
+  EuiButtonIcon,
+  EuiPopover,
+  EuiText,
+  EuiToolTip,
+  EuiFlexGroup,
+  EuiIcon,
+  EuiLink,
+} from '@elastic/eui'
+import { putRecommendationVote } from 'uiSrc/slices/analytics/dbAnalysis'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
+import { Vote } from 'uiSrc/constants/recommendations'
+
+import { ReactComponent as LikeIcon } from 'uiSrc/assets/img/icons/like.svg'
+import { ReactComponent as DoubleLikeIcon } from 'uiSrc/assets/img/icons/double_like.svg'
+import { ReactComponent as DislikeIcon } from 'uiSrc/assets/img/icons/dislike.svg'
+import GithubSVG from 'uiSrc/assets/img/sidebar/github.svg'
+import styles from './styles.module.scss'
+
+export interface Props { vote?: Vote, name: string }
+
+const RecommendationVoting = ({ vote, name }: Props) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+  const dispatch = useDispatch()
+
+  const onSuccessVoted = (instanceId: string, name: string, vote: Vote) => {
+    sendEventTelemetry({
+      event: TelemetryEvent.DATABASE_ANALYSIS_RECOMMENDATIONS_VOTED,
+      eventData: {
+        databaseId: instanceId,
+        name,
+        vote,
+      }
+    })
+  }
+
+  const handleClick = (name: string, vote: Vote) => {
+    if (vote === Vote.Dislike) {
+      setIsPopoverOpen(true)
+    }
+    dispatch(putRecommendationVote(name, vote, onSuccessVoted))
+  }
+
+  return (
+    <EuiFlexGroup alignItems="center" className={styles.votingContainer}>
+      <EuiText size="m">Rate Recommendation</EuiText>
+      <div className={styles.vote}>
+        <EuiToolTip
+          content="Amazing"
+          position="bottom"
+        >
+          <EuiButtonIcon
+            disabled={!!vote}
+            iconType={DoubleLikeIcon}
+            className={cx(styles.voteBtn, { [styles.selected]: vote === Vote.DoubleLike })}
+            aria-label="vote amazing"
+            data-testid="amazing-vote-btn"
+            onClick={() => handleClick(name, Vote.DoubleLike)}
+          />
+        </EuiToolTip>
+        <EuiToolTip
+          content="Useful"
+          position="bottom"
+        >
+          <EuiButtonIcon
+            disabled={!!vote}
+            iconType={LikeIcon}
+            className={cx(styles.voteBtn, { [styles.selected]: vote === Vote.Like })}
+            aria-label="vote useful"
+            data-testid="useful-vote-btn"
+            onClick={() => handleClick(name, Vote.Like)}
+          />
+        </EuiToolTip>
+        <EuiToolTip
+          content="Not Useful"
+          position="bottom"
+        >
+          <EuiPopover
+            initialFocus={false}
+            anchorPosition="rightCenter"
+            isOpen={isPopoverOpen}
+            closePopover={() => setIsPopoverOpen(false)}
+            anchorClassName={styles.popoverAnchor}
+            panelClassName={cx('euiToolTip', 'popoverLikeTooltip', styles.popover)}
+            button={(
+              <EuiButtonIcon
+                disabled={!!vote}
+                iconType={DislikeIcon}
+                className={cx(styles.voteBtn, { [styles.selected]: vote === Vote.Dislike })}
+                aria-label="vote not useful"
+                data-testid="not-useful-vote-btn"
+                onClick={() => handleClick(name, Vote.Dislike)}
+              />
+            )}
+          >
+            <div>
+              Thank you for your feedback, Tell us how we can improve
+              <EuiButton
+                aria-label="recommendation feedback"
+                fill
+                data-testid="recommendation-feedback-btn"
+                className={styles.feedbackBtn}
+                color="secondary"
+                size="s"
+              >
+                <EuiLink
+                  external={false}
+                  className={styles.link}
+                  href={EXTERNAL_LINKS.recommendationFeedback}
+                  target="_blank"
+                  data-test-subj="github-repo-link"
+                >
+                  <EuiIcon
+                    className={styles.githubIcon}
+                    aria-label="redis insight github issues"
+                    type={GithubSVG}
+                    data-testid="github-repo-icon"
+                  />
+                  To Github
+                </EuiLink>
+              </EuiButton>
+              <EuiButtonIcon
+                iconType="cross"
+                color="primary"
+                id="close-monitor"
+                aria-label="close popover"
+                data-testid="close-popover"
+                className={styles.icon}
+                onClick={() => setIsPopoverOpen(false)}
+              />
+            </div>
+          </EuiPopover>
+        </EuiToolTip>
+      </div>
+    </EuiFlexGroup>
+  )
+}
+
+export default RecommendationVoting

redisinsight/ui/src/pages/databaseAnalysis/components/index.ts

@@ -0,0 +1,3 @@
+import RecommendationVoting from './RecommendationVoting'
+
+export default RecommendationVoting