Merge pull request #2408 from RedisInsight/fe/bugfix/RI-4791

#RI-4791 - fix disabled state for clear all button

Author: rsergeenko

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

@@ -18,6 +18,7 @@ import styles from './styles.module.scss'
 export interface Props {
   items: CommandExecutionUI[]
   clearing: boolean
+  processing: boolean
   activeMode: RunQueryMode
   activeResultsMode?: ResultsMode
   scrollDivRef: React.Ref<HTMLDivElement>
@@ -31,6 +32,7 @@ const WBResults = (props: Props) => {
   const {
     items = [],
     clearing,
+    processing,
     activeMode,
     activeResultsMode,
     onQueryReRun,
@@ -81,6 +83,7 @@ const WBResults = (props: Props) => {
             iconSize="s"
             className={styles.clearAllBtn}
             onClick={() => onAllQueriesDelete?.()}
+            disabled={clearing || processing}
             data-testid="clear-history-btn"
           >
             Clear Results

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

@@ -8,6 +8,7 @@ import WBResults from './WBResults'
 export interface Props {
   items: CommandExecutionUI[]
   clearing: boolean
+  processing: boolean
   activeMode: RunQueryMode
   activeResultsMode: ResultsMode
   scrollDivRef: React.Ref<HTMLDivElement>

redisinsight/ui/src/pages/workbench/components/wb-view/WBView/WBView.tsx

@@ -35,6 +35,7 @@ export interface Props {
   script: string
   items: CommandExecutionUI[]
   clearing: boolean
+  processing: boolean
   setScript: (script: string) => void
   setScriptEl: Function
   scriptEl: Nullable<monacoEditor.editor.IStandaloneCodeEditor>
@@ -64,6 +65,7 @@ const WBView = (props: Props) => {
     script = '',
     items,
     clearing,
+    processing,
     setScript,
     setScriptEl,
     scriptEl,
@@ -233,6 +235,7 @@ const WBView = (props: Props) => {
                   <WBResultsWrapper
                     items={items}
                     clearing={clearing}
+                    processing={processing}
                     activeMode={activeMode}
                     activeResultsMode={resultsMode}
                     scrollDivRef={scrollDivRef}

redisinsight/ui/src/pages/workbench/components/wb-view/WBViewWrapper.spec.tsx

@@ -143,6 +143,18 @@ describe('WBViewWrapper', () => {
     expect(clearStoreActions(store.getActions().slice(-1))).toEqual(clearStoreActions([clearWbResults()]))
   })
 
+  it('should be disabled button when commands are processing', () => {
+    (workbenchResultsSelector as jest.Mock).mockImplementation(() => ({
+      items: [
+        { id: '1' },
+      ],
+      processing: true
+    }))
+    render(<WBViewWrapper />)
+
+    expect(screen.getByTestId('clear-history-btn')).toBeDisabled()
+  })
+
   it('should not display clear results when with empty history', () => {
     (workbenchResultsSelector as jest.Mock).mockImplementation(() => ({
       items: [],

redisinsight/ui/src/pages/workbench/components/wb-view/WBViewWrapper.tsx

@@ -73,7 +73,7 @@ let state: IState = {
 const WBViewWrapper = () => {
   const { instanceId } = useParams<{ instanceId: string }>()
 
-  const { loading, items, clearing } = useSelector(workbenchResultsSelector)
+  const { loading, items, clearing, processing } = useSelector(workbenchResultsSelector)
   const { unsupportedCommands, blockingCommands } = useSelector(cliSettingsSelector)
   const { batchSize = PIPELINE_COUNT_DEFAULT } = useSelector(userSettingsConfigSelector) ?? {}
   const { cleanup: cleanupWB } = useSelector(userSettingsWBSelector)
@@ -298,6 +298,7 @@ const WBViewWrapper = () => {
     <WBView
       items={items}
       clearing={clearing}
+      processing={processing}
       script={script}
       setScript={setScript}
       setScriptEl={setScriptEl}

redisinsight/ui/src/styles/components/_buttons.scss

@@ -136,21 +136,23 @@
   background-color: transparent;
   transition: color ease 0.3s, background-color ease 0.3s;
 
-  .euiButtonEmpty__text,
-  .euiText {
-    transition: color ease 0.3s;
-    color: var(--euiTextSubduedColor) !important;
-  }
-
-  &:hover,
-  &:focus {
-    text-decoration: none !important;
-    background-color: var(--hoverInListColorDarken);
-    color: var(--htmlColor);
-
+  &:not([class*="isDisabled"]) {
     .euiButtonEmpty__text,
     .euiText {
-      color: var(--htmlColor) !important;
+      transition: color ease 0.3s;
+      color: var(--euiTextSubduedColor) !important;
+    }
+
+    &:hover,
+    &:focus {
+      text-decoration: none !important;
+      background-color: var(--hoverInListColorDarken);
+      color: var(--htmlColor);
+
+      .euiButtonEmpty__text,
+      .euiText {
+        color: var(--htmlColor) !important;
+      }
     }
   }
 }