Merge pull request #1162 from RedisInsight/fe/feature/RI-3329_survey-link

AlenaSY · web-flow · commit 1e6a0b98bfb9 · 2022-09-27T12:19:59.000+03:00
#RI-3329 - add survey link
diff --git a/redisinsight/ui/src/assets/img/survey_icon.svg b/redisinsight/ui/src/assets/img/survey_icon.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
+  <g id="Group_8755" data-name="Group 8755" transform="translate(0 0.25)">
+    <circle id="Ellipse_433" data-name="Ellipse 433" cx="11" cy="11" r="11" transform="translate(0 -0.25)" fill="#00b96c"/>
+    <g id="helpCenter" transform="translate(2 1.75)">
+      <rect id="Rectangle_16996" data-name="Rectangle 16996" width="18" height="18" fill="#bdc3d7" opacity="0"/>
+      <path id="Path_10557" data-name="Path 10557" d="M15.915,9.972A.624.624,0,0,1,15.5,9.81a9.681,9.681,0,0,0,.067-.991.63.63,0,1,1,.351,1.153m-13.83,0a.631.631,0,1,1,.351-1.153A9.681,9.681,0,0,0,2.5,9.81a.625.625,0,0,1-.418.161M15.874,7.2a2.136,2.136,0,0,0-.509.064,6.57,6.57,0,0,0-5.191-4.862c-.113-.021-.215-.036-.33-.05A2.166,2.166,0,0,1,10.8.365L10.659,0S8.884.555,8.678,2.082c-.089-.416-.916-.936-1.326-1.034l-.2.33a1.436,1.436,0,0,1,.675,1.027A6.571,6.571,0,0,0,2.635,7.267,2.139,2.139,0,1,0,2.9,11.331a6.571,6.571,0,0,0,.691,1.292l1.765-1.2-.015-.02a4.386,4.386,0,0,1-.8-2.375,3.171,3.171,0,0,1,.8-2.512,2.356,2.356,0,0,1,3.537.453h.234a2.356,2.356,0,0,1,3.537-.453,3.174,3.174,0,0,1,.8,2.513,4.393,4.393,0,0,1-.8,2.375l-.015.019,1.765,1.2a6.58,6.58,0,0,0,.691-1.292A2.135,2.135,0,1,0,15.874,7.2" transform="translate(0 1.001)" fill="#fff" fill-rule="evenodd"/>
+    </g>
+  </g>
+</svg>
diff --git a/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx b/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx
@@ -3,6 +3,7 @@ import cx from 'classnames'
 import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
+import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
 
 import {
   clearSearchingCommand,
@@ -14,6 +15,7 @@ import {
 } from 'uiSrc/slices/cli/cli-settings'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { monitorSelector, toggleHideMonitor, toggleMonitor } from 'uiSrc/slices/cli/monitor'
+import SurveyIcon from 'uiSrc/assets/img/survey_icon.svg'
 
 import styles from '../../styles.module.scss'
 
@@ -67,6 +69,12 @@ const BottomGroupMinimized = () => {
     dispatch(toggleMonitor())
   }
 
+  const onClickSurvey = () => {
+    sendEventTelemetry({
+      event: TelemetryEvent.USER_SURVEY_LINK_CLICKED
+    })
+  }
+
   return (
     <div className={styles.containerMinimized}>
       <EuiFlexGroup
@@ -117,6 +125,19 @@ const BottomGroupMinimized = () => {
           </EuiBadge>
         </EuiFlexItem>
       </EuiFlexGroup>
+      <a
+        className={styles.surveyLink}
+        target="_blank"
+        rel="noreferrer"
+        href={EXTERNAL_LINKS.userSurvey}
+        onClick={onClickSurvey}
+        data-testid="user-survey-link"
+      >
+        <>
+          <EuiIcon type={SurveyIcon} className={styles.surveyIcon} />
+          <span>We need your opinion. Please take our survey.</span>
+        </>
+      </a>
     </div>
   )
 }
diff --git a/redisinsight/ui/src/components/bottom-group-components/styles.module.scss b/redisinsight/ui/src/components/bottom-group-components/styles.module.scss
@@ -11,9 +11,31 @@
 }
 
 .containerMinimized {
+  display: flex;
+  align-items: center;
   height: 26px;
   line-height: 26px;
   border: 1px solid var(--euiColorLightShade);
+
+  .surveyLink {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 12px;
+    color: var(--htmlColor) !important;
+    font: normal normal normal 12px/18px Graphik, sans-serif;
+
+    &:hover {
+      background-color: var(--euiColorSecondary);
+      color: var(--euiColorPrimaryText) !important;
+    }
+  }
+
+  .surveyIcon {
+    margin-right: 8px;
+    width: 18px;
+    height: 18px;
+  }
 }
 
 .componentBadgeItem {
diff --git a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/styles.module.scss b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/styles.module.scss
@@ -167,7 +167,7 @@
     display: block;
     margin-right: 30px;
     margin-bottom: 12px;
-    font: normal normal 500 18px/24px Graphik;
+    font: normal normal 500 18px/24px Graphik, sans-serif;
   }
 
   .notificationDate {
diff --git a/redisinsight/ui/src/constants/links.ts b/redisinsight/ui/src/constants/links.ts
@@ -2,4 +2,5 @@ export const EXTERNAL_LINKS = {
   githubRepo: 'https://github.com/RedisInsight/RedisInsight',
   githubIssues: 'https://github.com/RedisInsight/RedisInsight/issues',
   releaseNotes: 'https://github.com/RedisInsight/RedisInsight/releases',
+  userSurvey: 'https://www.surveymonkey.com/r/redisinsight',
 }
diff --git a/redisinsight/ui/src/pages/slowLog/components/Actions/styles.module.scss b/redisinsight/ui/src/pages/slowLog/components/Actions/styles.module.scss
@@ -39,7 +39,7 @@
   }
 
   .popoverTitle {
-    font: normal normal 500 13px/22px Graphik;
+    font: normal normal 500 13px/22px Graphik, sans-serif;
     color: var(--euiColorFullShade) !important;
   }
 
diff --git a/redisinsight/ui/src/pages/slowLog/components/styles.module.scss b/redisinsight/ui/src/pages/slowLog/components/styles.module.scss
@@ -49,7 +49,7 @@
   padding: 18px;
 
   .noFoundTitle {
-    font: normal normal 500 18px/24px Graphik;
+    font: normal normal 500 18px/24px Graphik, sans-serif;
     margin-bottom: 12px;
   }
 
diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/Group/styles.scss b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/Group/styles.scss
@@ -4,7 +4,7 @@
     border-bottom: 1px solid transparent;
     transition: border-color 0.2s ease-in-out;
     .group-header {
-      font: normal normal medium 11px/15px Graphik;
+      font: normal normal medium 11px/15px Graphik, sans-serif;
       letter-spacing: -0.12px;
       overflow: hidden;
       white-space: nowrap;
diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/InternalPage/styles/_typography.scss b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/InternalPage/styles/_typography.scss
@@ -3,7 +3,7 @@
 
 h1, h2, h3, h4, h5, h6 {
   color: var(--euiColorGhost);
-  font: normal normal 500 14px/24px Graphik;
+  font: normal normal 500 14px/24px Graphik, sans-serif;
   margin-bottom: ($margin-size-pace * 3 + px);
   margin-top: ($margin-size-pace * 3 + px);
   letter-spacing: 0;
diff --git a/redisinsight/ui/src/telemetry/events.ts b/redisinsight/ui/src/telemetry/events.ts
@@ -181,4 +181,6 @@ export enum TelemetryEvent {
   BULK_ACTIONS_OPENED = 'BULK_ACTIONS_OPENED',
   BULK_ACTIONS_WARNING = 'BULK_ACTIONS_WARNING',
   BULK_ACTIONS_CANCELLED = 'BULK_ACTIONS_CANCELLED',
+
+  USER_SURVEY_LINK_CLICKED = 'USER_SURVEY_LINK_CLICKED'
 }
diff --git a/tests/e2e/helpers/common.ts b/tests/e2e/helpers/common.ts
@@ -1,4 +1,4 @@
-import {RequestMock, t} from 'testcafe';
+import { ClientFunction, RequestMock, t } from 'testcafe';
 import { Chance } from 'chance';
 import {apiUrl, commonUrl} from './conf';
 
@@ -48,7 +48,7 @@ export class Common {
     * Create array of keys and values for using in OSS Cluster
     * @param length The amount of array elements
     */
-     async createArrayWithKeyValueForOSSCluster(length: number): Promise<string[]> {
+    async createArrayWithKeyValueForOSSCluster(length: number): Promise<string[]> {
         const arr: string[] = [];
         for(let i = 1; i <= length * 2; i++) {
             arr[i] = `{user1}:${chance.word({ length: 10 })}-key${i}`;
@@ -130,4 +130,13 @@ export class Common {
     async reloadPage(): Promise<void> {
         await t.eval(() => location.reload());
     }
+
+    /**
+     * Check opened URL
+     * @param expectedUrl Expected link that is compared with actual
+     */
+    async checkURL(expectedUrl: string): Promise<void> {
+        const getPageUrl = ClientFunction(() => window.location.href);
+        await t.expect(getPageUrl()).eql(expectedUrl, 'Opened URL is not correct');
+    }
 }
diff --git a/tests/e2e/pageObjects/browser-page.ts b/tests/e2e/pageObjects/browser-page.ts
@@ -100,6 +100,7 @@ export class BrowserPage {
     streamMessagesContainer = Selector('[data-testid=stream-messages-container]');
     //LINKS
     internalLinkToWorkbench = Selector('[data-testid=internal-workbench-link]');
+    userSurveyLink = Selector('[data-testid=user-survey-link]');
     //OPTION ELEMENTS
     stringOption = Selector('#string');
     jsonOption = Selector('#ReJSON-RL');
diff --git a/tests/e2e/tests/regression/browser/survey-link.e2e.ts b/tests/e2e/tests/regression/browser/survey-link.e2e.ts
@@ -0,0 +1,47 @@
+import { acceptLicenseTermsAndAddDatabaseApi } from '../../../helpers/database';
+import { env, rte } from '../../../helpers/constants';
+import { BrowserPage, SlowLogPage, MyRedisDatabasePage } from '../../../pageObjects';
+import { commonUrl, ossStandaloneConfig } from '../../../helpers/conf';
+import { Common } from '../../../helpers/common';
+import { deleteAllDatabasesApi } from '../../../helpers/api/api-database';
+
+const browserPage = new BrowserPage();
+const slowLogPage = new SlowLogPage();
+const myRedisDatabasePage = new MyRedisDatabasePage();
+const common = new Common();
+const externalPageLink = 'https://www.surveymonkey.com/r/redisinsight';
+
+fixture `User Survey`
+    .meta({
+        type: 'regression',
+        rte: rte.standalone,
+        env: env.web
+    })
+    .page(commonUrl)
+    .beforeEach(async() => {
+        await acceptLicenseTermsAndAddDatabaseApi(ossStandaloneConfig, ossStandaloneConfig.databaseName);
+    });
+test('Verify that user can use survey link', async t => {
+    // Verify that user can see survey link on any page inside of DB
+    // Browser page
+    await t.click(browserPage.userSurveyLink);
+    // Verify that when users click on RI survey, they are redirected to https://www.surveymonkey.com/r/redisinsight
+    await common.checkURL(externalPageLink);
+    await t.switchToParentWindow();
+    // Workbench page
+    await t.click(myRedisDatabasePage.workbenchButton);
+    await t.expect(browserPage.userSurveyLink.visible).ok('Survey Link is not displayed');
+    // Slow Log page
+    await t.click(slowLogPage.slowLogPageButton);
+    await t.expect(browserPage.userSurveyLink.visible).ok('Survey Link is not displayed');
+    // PubSub page
+    await t.click(myRedisDatabasePage.pubSubButton);
+    await t.expect(browserPage.userSurveyLink.visible).ok('Survey Link is not displayed');
+    // Verify that user cannot see survey link for list of databases page
+    await t.click(myRedisDatabasePage.myRedisDBButton);
+    await t.expect(browserPage.userSurveyLink.visible).notOk('Survey Link is visible');
+    // Verify that user cannot see survey link for welcome page
+    await deleteAllDatabasesApi();
+    await common.reloadPage();
+    await t.expect(browserPage.userSurveyLink.visible).notOk('Survey Link is visible');
+});
diff --git a/tests/e2e/tests/regression/cli/cli-command-helper.e2e.ts b/tests/e2e/tests/regression/cli/cli-command-helper.e2e.ts
@@ -1,4 +1,3 @@
-import { ClientFunction } from 'testcafe';
 import { acceptLicenseTermsAndAddDatabaseApi } from '../../../helpers/database';
 import { Common } from '../../../helpers/common';
 import { CliPage } from '../../../pageObjects';
@@ -22,8 +21,6 @@ let commandsArgumentsToCheck: string[] = [];
 let externalPageLink = '';
 let externalPageLinks: string[] = [];
 
-const getPageUrl = ClientFunction(() => window.location.href);
-
 fixture `CLI Command helper`
     .meta({ type: 'regression' })
     .page(commonUrl)
@@ -104,7 +101,7 @@ test
         //Click on Read More link for selected command
         await t.click(cliPage.readMoreButton);
         //Check new opened window page with the correct URL
-        await t.expect(getPageUrl()).eql(externalPageLink, 'The opened page');
+        await common.checkURL(externalPageLink);
         await t.switchToParentWindow();
     });
 test
@@ -123,7 +120,7 @@ test
         //Click on Read More link for selected command
         await t.click(cliPage.readMoreButton);
         //Check new opened window page with the correct URL
-        await t.expect(getPageUrl()).eql(externalPageLink, 'The opened page');
+        await common.checkURL(externalPageLink);
         await t.switchToParentWindow();
     });
 test
@@ -142,7 +139,8 @@ test
         //Click on Read More link for selected command
         await t.click(cliPage.readMoreButton);
         //Check new opened window page with the correct URL
-        await t.expect(getPageUrl()).eql(externalPageLink, 'The opened page');
+        await common.checkURL(externalPageLink);
+        // await t.expect(getPageUrl()).eql(externalPageLink, 'The opened page');
         await t.switchToParentWindow();
     });
 test
@@ -179,7 +177,7 @@ test
             //Click on Read More link for selected command
             await t.click(cliPage.readMoreButton);
             //Check new opened window page with the correct URL
-            await t.expect(getPageUrl()).eql(externalPageLinks[i], 'The opened page');
+            await common.checkURL(externalPageLinks[i]);
             //Close the window with external link to switch to the application window
             await t.closeWindow();
             i++;
@@ -202,7 +200,7 @@ test
         //Verify that user can use Read More link for Gears group in Command Helper (RedisGears module)
         await t.click(cliPage.readMoreButton);
         //Check new opened window page with the correct URL
-        await t.expect(getPageUrl()).eql(externalPageLink, 'The opened page');
+        await common.checkURL(externalPageLink);
         //Close the window with external link to switch to the application window
         await t.closeWindow();
     });
@@ -243,7 +241,7 @@ test
             //Verify that user can use Read More link for Bloom, Cuckoo, CMS, TDigest, TopK groups in Command Helper (RedisBloom module).
             await t.click(cliPage.readMoreButton);
             //Check new opened window page with the correct URL
-            await t.expect(getPageUrl()).eql(externalPageLinks[i], 'The opened page');
+            await common.checkURL(externalPageLinks[i]);
             //Close the window with external link to switch to the application window
             await t.closeWindow();
             i++;
diff --git a/tests/e2e/tests/regression/database/database-sorting.e2e.ts b/tests/e2e/tests/regression/database/database-sorting.e2e.ts
@@ -1,4 +1,3 @@
-import { t } from 'testcafe';
 import { acceptLicenseTerms } from '../../../helpers/database';
 import {
     discoverSentinelDatabaseApi,

Original file line number	Diff line number	Diff line change
`@@ -167,7 +167,7 @@`
`167`	`167`	`display: block;`
`168`	`168`	`margin-right: 30px;`
`169`	`169`	`margin-bottom: 12px;`
`170`		`- font: normal normal 500 18px/24px Graphik;`
	`170`	`+ font: normal normal 500 18px/24px Graphik, sans-serif;`
`171`	`171`	`}`
`172`	`172`
`173`	`173`	`.notificationDate {`
Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,5 @@ export const EXTERNAL_LINKS = {`
`2`	`2`	`githubRepo: 'https://github.com/RedisInsight/RedisInsight',`
`3`	`3`	`githubIssues: 'https://github.com/RedisInsight/RedisInsight/issues',`
`4`	`4`	`releaseNotes: 'https://github.com/RedisInsight/RedisInsight/releases',`
	`5`	`+ userSurvey: 'https://www.surveymonkey.com/r/redisinsight',`
`5`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`.popoverTitle {`
`42`		`- font: normal normal 500 13px/22px Graphik;`
	`42`	`+ font: normal normal 500 13px/22px Graphik, sans-serif;`
`43`	`43`	`color: var(--euiColorFullShade) !important;`
`44`	`44`	`}`
`45`	`45`
Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@`
`49`	`49`	`padding: 18px;`
`50`	`50`
`51`	`51`	`.noFoundTitle {`
`52`		`- font: normal normal 500 18px/24px Graphik;`
	`52`	`+ font: normal normal 500 18px/24px Graphik, sans-serif;`
`53`	`53`	`margin-bottom: 12px;`
`54`	`54`	`}`
`55`	`55`
Original file line number	Diff line number	Diff line change
`@@ -181,4 +181,6 @@ export enum TelemetryEvent {`
`181`	`181`	`BULK_ACTIONS_OPENED = 'BULK_ACTIONS_OPENED',`
`182`	`182`	`BULK_ACTIONS_WARNING = 'BULK_ACTIONS_WARNING',`
`183`	`183`	`BULK_ACTIONS_CANCELLED = 'BULK_ACTIONS_CANCELLED',`
	`184`	`+`
	`185`	`+ USER_SURVEY_LINK_CLICKED = 'USER_SURVEY_LINK_CLICKED'`
`184`	`186`	`}`