Merge branch 'feature/RI-4943_rework-tutorials' into fe/feature/RI-4950_tutorials-home-page

# Conflicts:
#	tests/e2e/tests/web/regression/workbench/default-scripts-area.e2e.ts

Author: mariasergeenko

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/CodeButtonBlock/CodeButtonBlock.tsx

@@ -1,4 +1,4 @@
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiPopover, EuiSpacer, EuiTitle } from '@elastic/eui'
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiPopover, EuiSpacer, EuiTitle, EuiToolTip } from '@elastic/eui'
 import cx from 'classnames'
 import React, { useEffect, useState } from 'react'
 import { monaco } from 'react-monaco-editor'
@@ -30,7 +30,7 @@ export interface Props {
   params?: CodeButtonParams
 }
 
-const FINISHED_COMMAND_INDICATOR_TIME_MS = 3_000
+const FINISHED_COMMAND_INDICATOR_TIME_MS = 5_000
 
 const CodeButtonBlock = (props: Props) => {
   const {
@@ -148,20 +148,25 @@ const CodeButtonBlock = (props: Props) => {
               scrollLock: true
             }}
             button={(
-              <EuiButton
-                onClick={handleRunClicked}
-                iconType={isRunned ? 'check' : 'play'}
-                iconSide="right"
-                color="success"
-                size="s"
-                disabled={isLoading || isRunned}
-                isLoading={isLoading}
-                className={cx(styles.actionBtn, styles.runBtn)}
-                {...rest}
-                data-testid={`run-btn-${label}`}
+              <EuiToolTip
+                content={isPopoverOpen ? undefined : 'Open Workbench in the left menu to see the command results.'}
+                data-testid="run-btn-open-workbench-tooltip"
               >
-                Run
-              </EuiButton>
+                <EuiButton
+                  onClick={handleRunClicked}
+                  iconType={isRunned ? 'check' : 'play'}
+                  iconSide="right"
+                  color="success"
+                  size="s"
+                  disabled={isLoading || isRunned}
+                  isLoading={isLoading}
+                  className={cx(styles.actionBtn, styles.runBtn)}
+                  {...rest}
+                  data-testid={`run-btn-${label}`}
+                >
+                  Run
+                </EuiButton>
+              </EuiToolTip>
             )}
           >
             {getPopoverMessage()}

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx

@@ -205,7 +205,7 @@ const InternalPage = (props: Props) => {
       {!!pagination?.length && (
         <>
           <div className={styles.footer}>
-            <Pagination sourcePath={sourcePath} items={pagination} activePageKey={activeKey} />
+            <Pagination sourcePath={sourcePath} items={pagination} activePageKey={activeKey} compressed />
           </div>
         </>
       )}

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/Pagination/styles.module.scss

@@ -13,10 +13,15 @@
 }
 
 .paginationCompressed {
-  padding: 8px 6px;
+  padding: 8px 16px;
   & > div:first-of-type, & > div:last-of-type {
     min-width: 70px;
   }
+
+  :global(.euiButtonContent .euiIcon) {
+    width: 14px;
+    height: 14px;
+  }
 }
 
 .panel {

tests/e2e/pageObjects/components/explore-tab.ts

@@ -75,8 +75,8 @@ export class ExploreTab {
      * get run selector
      * @param block Name of the block
      */
-    async getRunSelector(block: string): Promise<Selector> {
-        return  Selector(this.runMask.replace(/\$name/g, block));
+    getRunSelector(block: string): Selector {
+        return Selector(this.runMask.replace(/\$name/g, block));
     }
 
     /**

tests/e2e/tests/web/regression/workbench/default-scripts-area.e2e.ts

@@ -1,13 +1,14 @@
 import { ExploreTabs, rte } from '../../../../helpers/constants';
 import { DatabaseHelper } from '../../../../helpers/database';
-import { MyRedisDatabasePage, WorkbenchPage } from '../../../../pageObjects';
+import { BrowserPage, MyRedisDatabasePage, WorkbenchPage } from '../../../../pageObjects';
 import { commonUrl, ossStandaloneConfig } from '../../../../helpers/conf';
 import { DatabaseAPIRequests } from '../../../../helpers/api/api-database';
 
 const myRedisDatabasePage = new MyRedisDatabasePage();
 const workbenchPage = new WorkbenchPage();
 const databaseHelper = new DatabaseHelper();
 const databaseAPIRequests = new DatabaseAPIRequests();
+const browserPage = new BrowserPage();
 
 fixture `Default scripts area at Workbench`
     .meta({ type: 'regression', rte: rte.standalone })
@@ -42,16 +43,30 @@ test('Verify that user can see the [Manual] option in the Enablement area', asyn
     }
 });
 test('Verify that user can see saved article in Enablement area when he leaves Workbench page and goes back again', async t => {
+    const tooltipText = 'Open Workbench in the left menu to see the command results.';
     await workbenchPage.InsightsPanel.togglePanel(true);
     const tutorials = await workbenchPage.InsightsPanel.setActiveTab(ExploreTabs.Explore);
     await t.click(tutorials.dataStructureAccordionTutorialButton);
     await t.expect(tutorials.internalLinkWorkingWithHashes.visible).ok('The working with hashes link is not visible', { timeout: 5000 });
     // Open Working with Hashes section
     await t.click(tutorials.internalLinkWorkingWithHashes);
+    let selector = tutorials.getRunSelector('Create');
+
+    // https://redislabs.atlassian.net/browse/RI-5340
+    // Verify that user can see “Open Workbench in the left menu to see the command results.” tooltip when hovering over Run button
+    await t.hover(selector);
+    await t.expect(browserPage.tooltip.textContent).eql(tooltipText, 'Tooltip is not displayed or text is invalid');
+
     // Check the button from Hash page is visible
     await tutorials.runBlockCode('Create a hash');
     let selector = await tutorials.getRunSelector('Create a hash');
     await t.expect(selector.visible).ok('The end of the page is not visible');
+
+    // Verify that user can see the “success” icon during 5 s after a command has been run and button can't be clicked at that time
+    await t.expect(selector.withAttribute('disabled').exists).ok('Run button is not disabled', { timeout: 5000 });
+    await t.wait(5000);
+    await t.expect(selector.withAttribute('disabled').exists).notOk('Run button is still disabled');
+
     // Go to Browser page
     await t.click(myRedisDatabasePage.NavigationPanel.browserButton);
     // Go back to Workbench page