#RI-3742-update styles and error handling in worbench

Author: AmirAllayarovSofteq

redisinsight/ui/src/components/query-card/QueryCardHeader/styles.module.scss

@@ -41,13 +41,16 @@ $marginIcon: 12px;
 
 .titleWrapper {
   width: calc(100% - 490px);
+  min-width: calc(100% - 490px);
 
-  @media (min-width: $breakpoint-s) {
-    width: calc(100% - 529px);
+  @media (min-width: $breakpoint-m) {
+    width: calc(100% - 582px);
+    min-width: calc(100% - 582px);
   }
 
-  @media (min-width: $breakpoint-m) {
-    width: calc(100% - 651px);
+  @media (min-width: $breakpoint-l) {
+    width: calc(100% - 633px);
+    min-width: calc(100% - 633px);
   }
 }
 
@@ -146,21 +149,16 @@ $marginIcon: 12px;
   min-width: 13px;
   width: 13px;
 
-  @media (min-width: $breakpoint-s) {
+  @media (min-width: $breakpoint-l) {
     min-width: 58px;
     width: 58px;
   }
-
-  @media (min-width: $breakpoint-m) {
-    min-width: 70px;
-    width: 70px;
-  }
 }
 
 .executionTimeValue {
   display: none;
 
-  @media (min-width: $breakpoint-s) {
+  @media (min-width: $breakpoint-l) {
     display: initial;
     overflow: hidden;
     text-overflow: ellipsis;

redisinsight/ui/src/components/query-card/styles.module.scss

@@ -2,8 +2,17 @@
 @import "@elastic/eui/src/components/table/mixins";
 @import "@elastic/eui/src/global_styling/index";
 
+$breakpoint-l: 1300px;
+$breakpoint-m: 1050px;
+
 .containerWrapper {
-  min-width: 590px;
+  min-width: 560px;
+  @media (min-width: $breakpoint-m) {
+    min-width: 650px;
+  }
+  @media (min-width: $breakpoint-l) {
+    min-width: 720px;
+  }
   &:nth-of-type(even) {
     background-color: var(--euiColorEmptyShade) !important;
   }

redisinsight/ui/src/slices/workbench/wb-results.ts

@@ -13,6 +13,7 @@ import {
   isStatusSuccessful,
 } from 'uiSrc/utils'
 import { WORKBENCH_HISTORY_MAX_LENGTH } from 'uiSrc/pages/workbench/constants'
+import { CommandExecutionStatus } from 'uiSrc/slices/interfaces/cli'
 import { CreateCommandExecutionsDto } from 'apiSrc/modules/workbench/dto/create-command-executions.dto'
 
 import { AppDispatch, RootState } from '../store'
@@ -63,9 +64,25 @@ const workbenchResultsSlice = createSlice({
       })
     },
 
-    // temporary solution, need improve on BE how we handle errors
     processWBCommandsFailure: (state, { payload }: { payload: { commandsId: string[], error: string } }) => {
-      state.items = [...state.items].filter((item) => payload.commandsId.indexOf(item?.id as string) === -1)
+      state.items = [...state.items].map((item) => {
+        let newItem = item
+        payload.commandsId.forEach(() => {
+          if (payload.commandsId.indexOf(item?.id as string) !== -1) {
+            newItem = {
+              ...item,
+              result: [{
+                response: payload.error,
+                status: CommandExecutionStatus.Fail,
+              }],
+              loading: false,
+              isOpen: true,
+              error: '',
+            }
+          }
+        })
+        return newItem
+      })
       state.loading = false
       state.processing = false
     },