Merge pull request #2507 from RedisInsight/fe/bugfix/RI-4885_RI-4887

fix RI-4885, RI-4887

Author: vlad-dargel

redisinsight/ui/src/components/oauth/oauth-select-plan/OAuthSelectPlan.tsx

@@ -9,6 +9,7 @@ import {
   EuiText,
   EuiTextColor,
   EuiTitle,
+  EuiToolTip,
 } from '@elastic/eui'
 import { toNumber, filter, get, find, first } from 'lodash'
 import { useDispatch, useSelector } from 'react-redux'
@@ -101,11 +102,16 @@ const OAuthSelectPlan = () => {
         {`${countryName} (${cityName})`}
         <EuiTextColor className={styles.regionName}>{region}</EuiTextColor>
         { tfProviderRegions?.includes(region) && (
-          <EuiIcon
-            type={theme === Theme.Dark ? TriggeredFunctionsDarkSVG : TriggeredFunctionsLightSVG}
-            className={styles.tfOptionIcon}
-            data-testid={`tf-icon-${region}`}
-          />
+          <EuiToolTip
+            content="Triggers and functions are available in this region"
+            anchorClassName={styles.tfOptionIconTooltip}
+          >
+            <EuiIcon
+              type={theme === Theme.Dark ? TriggeredFunctionsDarkSVG : TriggeredFunctionsLightSVG}
+              className={styles.tfOptionIcon}
+              data-testid={`tf-icon-${region}`}
+            />
+          </EuiToolTip>
         )}
       </EuiText>
     )

redisinsight/ui/src/components/oauth/oauth-select-plan/styles.module.scss

@@ -135,8 +135,13 @@
   margin-left: 8px;
 }
 
+.tfOptionIconTooltip {
+  display: inline;
+}
+
 .tfOptionIcon {
   display: inline-block !important;
   width: 16px !important;
   margin-left: 11px;
+  margin-bottom: 0 !important;
 }

redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.tsx

@@ -81,7 +81,7 @@ const WBResults = (props: Props) => {
   }
 
   return (
-    <div className={cx(styles.container)}>
+    <div className={styles.wrapper}>
       {!!items.length && (
         <div className={styles.header}>
           <EuiButtonEmpty
@@ -97,56 +97,58 @@ const WBResults = (props: Props) => {
           </EuiButtonEmpty>
         </div>
       )}
-      <div ref={scrollDivRef} />
-      {items.map((
-        {
-          command = '',
-          isOpen = false,
-          result = undefined,
-          summary = undefined,
-          id = '',
-          loading,
-          createdAt,
-          mode,
-          resultsMode,
-          emptyCommand,
-          isNotStored,
-          executionTime,
-          db,
-        }
-      ) => (
-        <QueryCard
-          id={id}
-          key={id}
-          isOpen={isOpen}
-          result={result}
-          summary={summary}
-          clearing={clearing}
-          loading={loading}
-          command={command}
-          createdAt={createdAt}
-          activeMode={activeMode}
-          emptyCommand={emptyCommand}
-          isNotStored={isNotStored}
-          executionTime={executionTime}
-          mode={mode}
-          activeResultsMode={activeResultsMode}
-          resultsMode={resultsMode}
-          db={db}
-          onQueryOpen={() => onQueryOpen(id)}
-          onQueryProfile={(profileType) => handleQueryProfile(
-            profileType,
-            { command, mode, resultsMode },
-          )}
-          onQueryReRun={() => onQueryReRun(
-            command,
-            null,
-            { mode, results: resultsMode, clearEditor: false, },
-          )}
-          onQueryDelete={() => onQueryDelete(id)}
-        />
-      ))}
-      {!items.length && NoResults}
+      <div className={cx(styles.container)}>
+        <div ref={scrollDivRef} />
+        {items.map((
+          {
+            command = '',
+            isOpen = false,
+            result = undefined,
+            summary = undefined,
+            id = '',
+            loading,
+            createdAt,
+            mode,
+            resultsMode,
+            emptyCommand,
+            isNotStored,
+            executionTime,
+            db,
+          }
+        ) => (
+          <QueryCard
+            id={id}
+            key={id}
+            isOpen={isOpen}
+            result={result}
+            summary={summary}
+            clearing={clearing}
+            loading={loading}
+            command={command}
+            createdAt={createdAt}
+            activeMode={activeMode}
+            emptyCommand={emptyCommand}
+            isNotStored={isNotStored}
+            executionTime={executionTime}
+            mode={mode}
+            activeResultsMode={activeResultsMode}
+            resultsMode={resultsMode}
+            db={db}
+            onQueryOpen={() => onQueryOpen(id)}
+            onQueryProfile={(profileType) => handleQueryProfile(
+              profileType,
+              { command, mode, resultsMode },
+            )}
+            onQueryReRun={() => onQueryReRun(
+              command,
+              null,
+              { mode, results: resultsMode, clearEditor: false, },
+            )}
+            onQueryDelete={() => onQueryDelete(id)}
+          />
+        ))}
+        {!items.length && NoResults}
+      </div>
     </div>
   )
 }

redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/styles.module.scss

@@ -2,15 +2,23 @@
 @import '@elastic/eui/src/components/table/mixins';
 @import '@elastic/eui/src/global_styling/index';
 
-.container {
-  @include euiScrollBar;
-
+.wrapper {
   flex: 1;
   height: 100%;
   width: 100%;
   background-color: var(--euiColorEmptyShade);
-  color: var(--euiTextSubduedColor) !important;
   border: 1px solid var(--euiColorLightShade);
+
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  @include euiScrollBar;
+  color: var(--euiTextSubduedColor) !important;
+
+  flex: 1;
+  width: 100%;
   overflow: auto;
 }
 
@@ -20,6 +28,9 @@
   align-items: center;
   justify-content: flex-end;
   padding: 0 12px;
+
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--tableDarkestBorderColor);
 }
 
 .noResults {

tests/e2e/tests/regression/insights/feature-flag.e2e.ts

@@ -44,7 +44,7 @@ test('Verify that default config applied when remote config version is lower', a
 
     const featureVersion = await JSON.parse(await getColumnValueFromTableInDB(featuresConfigTable, 'data')).version;
 
-    await t.expect(featureVersion).eql(2, 'Config with lowest version applied');
+    await t.expect(featureVersion).eql(2.32, 'Config with lowest version applied');
     await t.expect(browserPage.InsightsPanel.insightsBtn.exists).notOk('Insights panel displayed when disabled in default config');
 });
 test('Verify that invaid remote config not applied even if its version is higher than in the default config', async t => {
@@ -54,7 +54,7 @@ test('Verify that invaid remote config not applied even if its version is higher
 
     const featureVersion = await JSON.parse(await getColumnValueFromTableInDB(featuresConfigTable, 'data')).version;
 
-    await t.expect(featureVersion).eql(2, 'Config highest version not applied');
+    await t.expect(featureVersion).eql(2.32, 'Config highest version not applied');
     await t.expect(browserPage.InsightsPanel.insightsBtn.exists).notOk('Insights panel displayed when disabled in default config');
 });
 test