Merge branch 'main' into e2e/feature/RI-3530-investigate-testcafe-preparing-time

Author: vlad-dargel

redisinsight/ui/src/components/virtual-table/styles.module.scss

@@ -152,7 +152,7 @@ $footerHeight: 38px;
 }
 
 :global(.key-list-table) {
-  height: calc(100% - 58px);
+  height: 100%;
 }
 
 :global(.key-details-table) {

redisinsight/ui/src/pages/browser/BrowserPage.tsx

@@ -256,7 +256,7 @@ const BrowserPage = () => {
                     }),
                   }}
                 >
-                  <>
+                  <div className={styles.leftPanelContent}>
                     <KeysHeader
                       keysState={keysState}
                       loading={loading}
@@ -285,7 +285,7 @@ const BrowserPage = () => {
                         loadMoreItems={loadMoreItems}
                       />
                     )}
-                  </>
+                  </div>
                 </EuiResizablePanel>
 
                 <EuiResizableButton

redisinsight/ui/src/pages/browser/components/key-list/styles.module.scss

@@ -14,11 +14,7 @@
 }
 
 .table {
-  height: calc(100% - 48px);
-
-  &__withoutFooter {
-    height: calc(100% - 50px) !important;
-  }
+  height: 100%;
 }
 
 :global(.show-cli) .table {

redisinsight/ui/src/pages/browser/components/key-tree/styles.module.scss

@@ -20,7 +20,7 @@
 
 .body {
   display: flex;
-  height: calc(100% - 20px);
+  height: 100%;
 
   :global(.ReactVirtualized__Table__headerRow) {
     border: none !important;
@@ -53,19 +53,21 @@
   position: relative;
   padding-top: 6px;
 
-  height: calc(100% - 90px);
+  height: 100%;
 
   flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .treeContent {
-  height: calc(100% - 25px);
+  height: 100%;
   position: relative;
   width: 100%;
 }
 
 .list {
-  height: calc(100% + 20px);
+  height: 100%;
   flex: 3;
   min-width: 400px;
 }

redisinsight/ui/src/pages/browser/styles.module.scss

@@ -96,3 +96,9 @@ $breakpoint-to-hide-resize-panel: 1124px;
     width: 100% !important;
   }
 }
+
+.leftPanelContent {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}

redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/styles.module.scss

@@ -82,10 +82,11 @@
   bottom: 10px;
   right: 28px;
   background-color: var(--euiColorSecondary) !important;
+  color: var(--euiColorPrimaryText) !important;
   width: 36px !important;
   height: 36px !important;
 
-  box-shadow: 0px 3px 6px #00000099 !important;
+  box-shadow: 0 3px 6px #00000099 !important;
   border-radius: 18px !important;
 
   svg {

tests/e2e/pageObjects/browser-page.ts

@@ -91,6 +91,7 @@ export class BrowserPage {
     editZsetButton = Selector('[data-testid^=zset-edit-button-]');
     editListButton = Selector('[data-testid^=edit-list-button-]');
     workbenchLinkButton = Selector('[data-test-subj=workbench-page-btn]');
+    cancelStreamGroupBtn = Selector('[data-testid=cancel-stream-groups-btn]');
     //CONTAINERS
     streamGroupsContainer = Selector('[data-testid=stream-groups-container]');
     streamConsumersContainer = Selector('[data-testid=stream-consumers-container]');

tests/e2e/tests/regression/browser/add-keys.e2e.ts

@@ -30,15 +30,15 @@ test('Verify that user can create different types(string, number, null, array, b
         await browserPage.addJsonKey(jsonKeys[i][0], jsonKeys[i][1]);
         await t.click(browserPage.toastCloseButton);
         await t.click(browserPage.refreshKeysButton);
-        await t.expect(await browserPage.isKeyIsDisplayedInTheList(jsonKeys[i][0])).ok('New keys is displayed');
+        await t.expect(await browserPage.isKeyIsDisplayedInTheList(jsonKeys[i][0])).ok('New keys are not displayed');
         // Add additional check for array elements
         if (jsonKeys[i][0].includes('array')) {
             for (const j of JSON.parse(jsonKeys[i][1])) {
-                await t.expect(browserPage.jsonScalarValue.withText(j.toString()).exists).ok('JSON value');
+                await t.expect(browserPage.jsonScalarValue.withText(j.toString()).exists).ok('JSON value not correct');
             }
         }
         else {
-            await t.expect(browserPage.jsonKeyValue.withText(jsonKeys[i][1]).exists).ok('JSON value');
+            await t.expect(browserPage.jsonKeyValue.withText(jsonKeys[i][1]).exists).ok('JSON value not correct');
         }
     }
 });

tests/e2e/tests/regression/browser/consumer-group.e2e.ts

@@ -1,4 +1,3 @@
-import { Chance } from 'chance';
 import { rte } from '../../../helpers/constants';
 import { acceptLicenseTermsAndAddDatabaseApi } from '../../../helpers/database';
 import { BrowserPage, CliPage } from '../../../pageObjects';
@@ -7,15 +6,16 @@ import {
     ossStandaloneConfig
 } from '../../../helpers/conf';
 import { deleteStandaloneDatabaseApi } from '../../../helpers/api/api-database';
+import { Common } from '../../../helpers/common';
 
 const browserPage = new BrowserPage();
 const cliPage = new CliPage();
-const chance = new Chance();
+const common = new Common();
 
-let keyName = chance.word({ length: 20 });
-let consumerGroupName = chance.word({ length: 20 });
-const keyField = chance.word({ length: 20 });
-const keyValue = chance.word({ length: 20 });
+let keyName = common.generateWord(20);
+let consumerGroupName = common.generateWord(20);
+const keyField = common.generateWord(20);
+const keyValue = common.generateWord(20);
 
 fixture `Consumer group`
     .meta({ type: 'regression', rte: rte.standalone })
@@ -24,83 +24,76 @@ fixture `Consumer group`
         await acceptLicenseTermsAndAddDatabaseApi(ossStandaloneConfig, ossStandaloneConfig.databaseName);
     })
     .afterEach(async t => {
-        //Clear and delete database
+        // Clear and delete database
         if (await browserPage.closeKeyButton.visible){
             await t.click(browserPage.closeKeyButton);
         }
         await browserPage.deleteKeyByName(keyName);
         await deleteStandaloneDatabaseApi(ossStandaloneConfig);
     });
 test('Verify that when user enter invalid Group Name the error message appears', async t => {
-    keyName = chance.word({ length: 20 });
-    consumerGroupName = chance.word({ length: 20 });
+    const message = 'Your Key has no Consumer Groups available.';
     const error = 'BUSYGROUP Consumer Group name already exists';
-    // Add New Stream Key
-    await browserPage.addStreamKey(keyName, keyField, keyValue);
-    // Open Stream consumer groups and add group
-    await t.click(browserPage.streamTabGroups);
-    await browserPage.createConsumerGroup(consumerGroupName);
-    // Verify the error message
-    await t.click(browserPage.streamTabGroups);
-    await browserPage.createConsumerGroup(consumerGroupName);
-    await t.expect(browserPage.errorMessage.textContent).contains(error, 'The error message that the Group name already exists');
-});
-test('Verify that when user enter invalid format ID the error message appears', async t => {
-    keyName = chance.word({ length: 20 });
-    consumerGroupName = chance.word({ length: 20 });
-    const error = 'ID format is not correct';
+    const errorFormat = 'ID format is not correct';
     const invalidEntryIds = [
         'qwerty12344545',
         '16545941463181654594146318'
     ];
+    keyName = common.generateWord(20);
+    consumerGroupName = common.generateWord(20);
+
     // Add New Stream Key
     await browserPage.addStreamKey(keyName, keyField, keyValue);
-    // Open Stream consumer groups and enter invalid EntryIds
+    // Open Stream consumer groups and check message
     await t.click(browserPage.streamTabGroups);
+    // Verify that user can see the message when there are no Consumer Groups
+    await t.expect(browserPage.streamGroupsContainer.textContent).contains(message, 'No Consumer Groups message not displayed');
+
+    // Open Stream consumer groups and enter invalid EntryIds
     await t.click(browserPage.addKeyValueItemsButton);
-    for(const entryId of invalidEntryIds){
+    // Verify that when user enter invalid format ID the error message appears
+    for (const entryId of invalidEntryIds) {
         await t.typeText(browserPage.consumerIdInput, entryId, { replace: true, paste: true });
         await t.click(browserPage.saveGroupsButton);
-        await t.expect(browserPage.entryIdError.textContent).eql(error, 'The invalid Id error message');
+        await t.expect(browserPage.entryIdError.textContent).eql(errorFormat, 'The invalid Id error message not displayed');
     }
-});
-test('Verify that user can see the message when there are no Consumer Groups', async t => {
-    keyName = chance.word({ length: 20 });
-    const message = 'Your Key has no Consumer Groups available.';
-    // Add New Stream Key
-    await browserPage.addStreamKey(keyName, keyField, keyValue);
-    // Open Stream consumer groups and check message
+
+    await t.click(browserPage.cancelStreamGroupBtn);
+    await browserPage.createConsumerGroup(consumerGroupName);
+    // Verify the error message
     await t.click(browserPage.streamTabGroups);
-    await t.expect(browserPage.streamGroupsContainer.textContent).contains(message, 'The Consumer Groups message');
+    await browserPage.createConsumerGroup(consumerGroupName);
+    await t.expect(browserPage.errorMessage.textContent).contains(error, 'The error message that the Group name already exists not displayed');
 });
 test('Verify that user can sort Consumer Group column: A>Z / Z>A(A>Z is default table sorting)', async t => {
-    keyName = chance.word({ length: 20 });
+    keyName = common.generateWord(20);
     const consumerGroupNames = [
         'agroup',
         'bgroup',
         'zgroup'
     ];
+
     // Add New Stream Key
     await browserPage.addStreamKey(keyName, keyField, keyValue);
     // Open Stream consumer groups and add few groups
     await t.click(browserPage.streamTabGroups);
     for(const group of consumerGroupNames){
         await browserPage.createConsumerGroup(group);
     }
-    //Verify default sorting
+    // Verify default sorting
     const groupsCount = await browserPage.streamGroupName.count;
     for(let i = 0; i < groupsCount; i++){
-        await t.expect(browserPage.streamGroupName.nth(i).textContent).contains(consumerGroupNames[i], 'The Consumer Groups default sorting');
+        await t.expect(browserPage.streamGroupName.nth(i).textContent).contains(consumerGroupNames[i], 'The Consumer Groups default sorting not working');
     }
-    //Verify the Z>A sorting
+    // Verify the Z>A sorting
     await t.click(browserPage.scoreButton.nth(0));
     for(let i = 0; i < groupsCount; i++){
-        await t.expect(browserPage.streamGroupName.nth(i).textContent).contains(consumerGroupNames[groupsCount - 1 - i], 'The Consumer Groups Z>A sorting');
+        await t.expect(browserPage.streamGroupName.nth(i).textContent).contains(consumerGroupNames[groupsCount - 1 - i], 'The Consumer Groups Z>A sorting not working');
     }
 });
 test('Verify that A>Z is default table sorting in Consumer column', async t => {
-    keyName = chance.word({ length: 20 });
-    consumerGroupName = chance.word({ length: 20 });
+    keyName = common.generateWord(20);
+    consumerGroupName = common.generateWord(20);
     const consumerNames = [
         'Alice',
         'Zalice'
@@ -112,23 +105,24 @@ test('Verify that A>Z is default table sorting in Consumer column', async t => {
         `XREADGROUP GROUP ${consumerGroupName} ${consumerNames[0]} COUNT 1 STREAMS ${keyName} >`,
         `XREADGROUP GROUP ${consumerGroupName} ${consumerNames[1]} COUNT 1 STREAMS ${keyName} >`
     ];
-    //Add New Stream Key with groups and consumers
+
+    // Add New Stream Key with groups and consumers
     for(const command of cliCommands){
         await cliPage.sendCommandInCli(command);
     }
-    //Open Stream consumer info view
+    // Open Stream consumer info view
     await browserPage.openKeyDetails(keyName);
     await t.click(browserPage.streamTabGroups);
     await t.click(browserPage.consumerGroup);
-    //Verify default sorting
+    // Verify default sorting
     const consumerCount = await browserPage.streamConsumerName.count;
     for(let i = 0; i < consumerCount; i++){
-        await t.expect(browserPage.streamConsumerName.nth(i).textContent).contains(consumerNames[i], 'The Consumers default sorting');
+        await t.expect(browserPage.streamConsumerName.nth(i).textContent).contains(consumerNames[i], 'The Consumers default sorting not working');
     }
 });
 test('Verify that user can see error message if enter invalid last delivered ID', async t => {
-    keyName = chance.word({ length: 20 });
-    let consumerGroupName = chance.word({ length: 20 });
+    keyName = common.generateWord(20);
+    const consumerGroupName = common.generateWord(20);
     const cliCommands = [
         `XGROUP CREATE ${keyName} ${consumerGroupName} $ MKSTREAM`,
         `XADD ${keyName} * message apple`,
@@ -139,6 +133,7 @@ test('Verify that user can see error message if enter invalid last delivered ID'
         '12345678901242532366121324'
     ];
     const errorMessage = 'ID format is not correct';
+
     // Add New Stream Key with groups and consumers
     for(const command of cliCommands){
         await cliPage.sendCommandInCli(command);
@@ -153,6 +148,6 @@ test('Verify that user can see error message if enter invalid last delivered ID'
         await t.typeText(browserPage.lastIdInput, id, { replace: true });
         await t.click(browserPage.saveButton);
         await t.expect(browserPage.streamGroupId.textContent).eql(idBefore, 'The last delivered ID is not modified');
-        await t.expect(browserPage.entryIdError.textContent).eql(errorMessage, 'The error message');
+        await t.expect(browserPage.entryIdError.textContent).eql(errorMessage, 'The error message not displayed');
     }
 });