RI-7527 update visuals of Workbench result action buttons (#5015)

- added popover tooltips for all action buttons
- sync the colors of the icons
- fix the alignment of all action buttons

Author: valkirilov

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

@@ -109,6 +109,14 @@ const ProfileSelect = styled(RiSelect)`
   width: 46px;
   padding: inherit !important;
 
+  &.profiler {
+    width: 50px;
+  }
+
+  &.toggle-view {
+    width: 40px;
+  }
+
   & ~ div {
     right: 0;
 
@@ -385,7 +393,7 @@ const QueryCardHeader = (props: Props) => {
           </div>
         </FlexItem>
         <FlexItem className={styles.controls}>
-          <Row align="center" justify="end" gap="l">
+          <Row align="center" justify="end" gap="s">
             <FlexItem
               className={styles.time}
               data-testid="command-execution-date-time"
@@ -440,24 +448,21 @@ const QueryCardHeader = (props: Props) => {
                 onClick={onDropDownViewClick}
               >
                 {isOpen && canCommandProfile && !summaryText && (
-                  <div className={styles.dropdownWrapper}>
-                    <div className={styles.dropdown}>
-                      <ProfileSelect
-                        placeholder={profileOptions[0].inputDisplay}
-                        onChange={(value: ProfileQueryType | string) =>
-                          onQueryProfile(value as ProfileQueryType)
-                        }
-                        options={profileOptions}
-                        data-testid="run-profile-type"
-                        valueRender={({ option, isOptionValue }) => {
-                          if (isOptionValue) {
-                            return option.dropdownDisplay as JSX.Element
-                          }
-                          return option.inputDisplay as JSX.Element
-                        }}
-                      />
-                    </div>
-                  </div>
+                  <ProfileSelect
+                    placeholder={profileOptions[0].inputDisplay}
+                    onChange={(value: ProfileQueryType | string) =>
+                      onQueryProfile(value as ProfileQueryType)
+                    }
+                    className="profiler"
+                    options={profileOptions}
+                    data-testid="run-profile-type"
+                    valueRender={({ option, isOptionValue }) => {
+                      if (isOptionValue) {
+                        return option.dropdownDisplay as JSX.Element
+                      }
+                      return option.inputDisplay as JSX.Element
+                    }}
+                  />
                 )}
               </FlexItem>
             )}
@@ -467,22 +472,19 @@ const QueryCardHeader = (props: Props) => {
                 onClick={onDropDownViewClick}
               >
                 {isOpen && options.length > 1 && !summaryText && (
-                  <div className={styles.dropdownWrapper}>
-                    <div className={styles.dropdown}>
-                      <ProfileSelect
-                        options={modifiedOptions}
-                        valueRender={({ option, isOptionValue }) => {
-                          if (isOptionValue) {
-                            return option.dropdownDisplay as JSX.Element
-                          }
-                          return option.inputDisplay as JSX.Element
-                        }}
-                        value={selectedValue}
-                        onChange={(value: string) => onChangeView(value)}
-                        data-testid="select-view-type"
-                      />
-                    </div>
-                  </div>
+                  <ProfileSelect
+                    options={modifiedOptions}
+                    valueRender={({ option, isOptionValue }) => {
+                      if (isOptionValue) {
+                        return option.dropdownDisplay as JSX.Element
+                      }
+                      return option.inputDisplay as JSX.Element
+                    }}
+                    value={selectedValue}
+                    onChange={(value: string) => onChangeView(value)}
+                    className="toggle-view"
+                    data-testid="select-view-type"
+                  />
                 )}
               </FlexItem>
             )}
@@ -498,13 +500,15 @@ const QueryCardHeader = (props: Props) => {
               )}
             </FlexItem>
             <FlexItem className={styles.buttonIcon}>
-              <IconButton
-                disabled={loading || clearing}
-                icon={DeleteIcon}
-                aria-label="Delete command"
-                data-testid="delete-command"
-                onClick={handleQueryDelete}
-              />
+              <RiTooltip content="Clear result" position="left">
+                <IconButton
+                  disabled={loading || clearing}
+                  icon={DeleteIcon}
+                  aria-label="Delete command"
+                  data-testid="delete-command"
+                  onClick={handleQueryDelete}
+                />
+              </RiTooltip>
             </FlexItem>
             {!isFullScreen && (
               <FlexItem className={cx(styles.buttonIcon, styles.playIcon)}>

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

@@ -94,11 +94,6 @@ $marginIcon: 12px;
   flex: 1;
 }
 
-.dropdownWrapper {
-  position: relative;
-  height: 40px;
-}
-
 .dropdownProfileIcon {
   padding: inherit !important;
   :global {
@@ -120,24 +115,6 @@ $marginIcon: 12px;
   }
 }
 
-.dropdown {
-  width: 168px;
-  position: absolute;
-  z-index: 1;
-
-  // move a little bit left to align with dropdown options icons
-  left: -21px;
-
-  :global {
-    .euiFormControlLayout__childrenWrapper {
-      width: 46px;
-      position: relative;
-      // move right to align self
-      left: 21px;
-    }
-  }
-}
-
 .executionTime {
   min-width: 13px;
   width: 13px;
@@ -197,8 +174,8 @@ $marginIcon: 12px;
 }
 
 .iconDropdownOption {
-  width: 20px !important;
-  height: 20px !important;
+  width: auto;
+  height: 16px;
 }
 
 .iconExecutingTime {
@@ -272,7 +249,6 @@ $marginIcon: 12px;
 
 .buttonIcon {
   padding: 0 4px;
-  width: 32px;
   min-width: 32px;
   position: relative;
   z-index: 2;