Merge pull request #1799 from RedisInsight/fe/bugfix/RI-4244_workbench_query_card

#RI-4244 - update query card styles

Author: vlad-dargel

redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx

@@ -346,12 +346,12 @@ const QueryCardHeader = (props: Props) => {
             </EuiToolTip>
           )}
         </EuiFlexItem>
-        {isOpen && canCommandProfile && !summaryText && (
-          <EuiFlexItem
-            grow={false}
-            className={cx(styles.buttonIcon, styles.viewTypeIcon)}
-            onClick={onDropDownViewClick}
-          >
+        <EuiFlexItem
+          grow={false}
+          className={cx(styles.buttonIcon, styles.viewTypeIcon)}
+          onClick={onDropDownViewClick}
+        >
+          {isOpen && canCommandProfile && !summaryText && (
             <div className={styles.dropdownWrapper}>
               <div className={styles.dropdown}>
                 <EuiSuperSelect
@@ -364,8 +364,8 @@ const QueryCardHeader = (props: Props) => {
                 />
               </div>
             </div>
-          </EuiFlexItem>
-        )}
+          )}
+        </EuiFlexItem>
         <EuiFlexItem
           grow={false}
           className={cx(styles.buttonIcon, styles.viewTypeIcon)}

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

@@ -44,12 +44,12 @@ $marginIcon: 12px;
 }
 
 .titleWrapper {
-  width: calc(100% - 490px);
-  min-width: calc(100% - 490px);
+  width: calc(100% - 552px);
+  min-width: calc(100% - 552px);
 
   @media (min-width: $breakpoint-m) {
-    width: calc(100% - 627px);
-    min-width: calc(100% - 627px);
+    width: calc(100% - 689px);
+    min-width: calc(100% - 689px);
   }
 }
 

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

@@ -6,9 +6,9 @@ $breakpoint-l: 1300px;
 $breakpoint-m: 1050px;
 
 .containerWrapper {
-  min-width: 560px;
+  min-width: 662px;
   @media (min-width: $breakpoint-m) {
-    min-width: 700px;
+    min-width: 762px;
   }
   &:nth-of-type(even) {
     background-color: var(--euiColorEmptyShade) !important;

redisinsight/ui/src/pages/workbench/constants.ts

@@ -27,15 +27,12 @@ export const VIEW_TYPE_OPTIONS = [
 export const getViewTypeOptions = () =>
   [...VIEW_TYPE_OPTIONS]
 
-
 export const SEARCH_COMMANDS = ['ft.search', 'ft.aggregate']
 export const GRAPH_COMMANDS = ['graph.query']
 
 const ALLOWED_PROFILE_COMMANDS = [...SEARCH_COMMANDS, ...GRAPH_COMMANDS]
 
-export const isCommandAllowedForProfile = (query: string) => {
-  return ALLOWED_PROFILE_COMMANDS.includes(query?.split(' ')?.[0]?.toLowerCase())
-}
+export const isCommandAllowedForProfile = (query: string) => ALLOWED_PROFILE_COMMANDS.includes(query?.split(' ')?.[0]?.toLowerCase())
 
 export enum ProfileQueryType {
   Profile = 'Profile',