Fe/feature/ri 7431 keys header columns popover

redisinsight/ui/src/components/base/forms/buttons/ToggleButton.tsx

@@ -0,0 +1 @@
+export { ToggleButton } from '@redis-ui/components'

redisinsight/ui/src/components/base/forms/buttons/index.ts

@@ -5,5 +5,6 @@ export { EmptyButton } from 'uiSrc/components/base/forms/buttons/EmptyButton'
 export { IconButton } from 'uiSrc/components/base/forms/buttons/IconButton'
 export { PrimaryButton } from 'uiSrc/components/base/forms/buttons/PrimaryButton'
 export { SecondaryButton } from 'uiSrc/components/base/forms/buttons/SecondaryButton'
+export { ToggleButton } from 'uiSrc/components/base/forms/buttons/ToggleButton'
 
 export type { IconType } from 'uiSrc/components/base/forms/buttons/IconButton'

redisinsight/ui/src/components/base/forms/combo-box/AutoTag.tsx

@@ -3,7 +3,7 @@ import { Chip, FormField, Input } from '@redis-ui/components'
 import cn from 'classnames'
 import styled from 'styled-components'
 import { CancelSlimIcon } from 'uiSrc/components/base/icons'
-import { CommonProps } from 'uiSrc/components/base/theme/types'
+import { CommonProps, Theme } from 'uiSrc/components/base/theme/types'
 import { Row } from 'uiSrc/components/base/layout/flex'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
 
@@ -128,6 +128,13 @@ export const AutoTag = ({
     }
   }
 
+  const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    const tag = (e.target as HTMLInputElement).value.trim()
+    if (tag !== null && tag.length > 0) {
+      createOption(tag)
+    }
+  }
+
   function getPlaceholder() {
     return selectedOptions?.length && selectedOptions.length > 0
       ? undefined
@@ -186,6 +193,7 @@ export const AutoTag = ({
             placeholder={getPlaceholder()}
             onChange={handleInputChange}
             onKeyDown={handleEnter}
+            onBlur={handleBlur}
             value={tag}
             data-test-subj="autoTagInput"
           />
@@ -210,7 +218,8 @@ const StyledWrapper = styled(Row)`
   position: relative;
   border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral600};
   border-radius: 0.4rem;
-  padding: 0.15rem 0.5rem;
+  padding: ${({ theme }: { theme: Theme }) =>
+    `${theme.core.space.space000} ${theme.core.space.space050}`};
   background-color: ${({ theme }) =>
     theme.semantic.color.background.neutral100};
 `

redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useState } from 'react'
-import cx from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import { isEqual } from 'lodash'
@@ -19,7 +18,7 @@
 } from 'uiSrc/slices/app/context'
 import { comboBoxToArray } from 'uiSrc/utils'
 
-import { Col, FlexItem } from 'uiSrc/components/base/layout/flex'
+import {Col, FlexItem, Row} from 'uiSrc/components/base/layout/flex'
 import {
   IconButton,
   PrimaryButton,
@@ -30,22 +29,18 @@
   AutoTag,
   AutoTagOption,
 } from 'uiSrc/components/base/forms/combo-box/AutoTag'
-import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
 import { RiPopover } from 'uiSrc/components/base'
 import { Theme } from 'uiSrc/components/base/theme/types'
-import styles from './styles.module.scss'
+import { FormField } from 'uiSrc/components/base/forms/FormField'
 
 export interface Props {
   loading: boolean
 }
 const sortOptions = [SortOrder.ASC, SortOrder.DESC].map((value) => ({
   value,
   inputDisplay: (
-    <span
-      data-testid={`tree-view-sorting-item-${value}`}
-      className={styles.selectItem}
-    >
+    <span data-testid={`tree-view-sorting-item-${value}`}>
       Key name {value}
     </span>
   ),
@@ -142,69 +137,64 @@
     setSorting(value)
   }
 
+  const StyledCol = styled(Col)`
+    width: 300px;
+  `
+
   return (
-    <div className={styles.container}>
-      <RiPopover
-        ownFocus={false}
-        anchorPosition="downLeft"
-        isOpen={isPopoverOpen}
-        anchorClassName={styles.anchorWrapper}
-        panelClassName={cx('popover-without-top-tail', styles.popoverWrapper)}
-        closePopover={closePopover}
-        button={button}
-      >
-        <Col gap="s">
-          <FlexItem grow className={styles.row} />
-          <FlexItem grow className={styles.row}>
-            <AutoTag
-              layout="horizontal"
-              label="Delimiter"
-              placeholder=":"
-              delimiter=" "
-              selectedOptions={delimiters}
-              onCreateOption={(del) =>
-                setDelimiters([...delimiters, { label: del }])
-              }
-              onChange={(selectedOptions) => setDelimiters(selectedOptions)}
-              className={styles.combobox}
-              data-testid="delimiter-combobox"
-            />
-          </FlexItem>
-          <FlexItem className={styles.row}>
-            <div className={styles.label}>
-              <RiIcon type="DescendingIcon" className={styles.sortIcon} />
-              Sort by
-            </div>
+    <RiPopover
+      ownFocus={false}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      button={button}
+    >
+      <StyledCol gap="l">
+        <FlexItem>
+          <AutoTag
+            layout="horizontal"
+            label="Delimiter"
+            placeholder=":"
+            delimiter=" "
+            selectedOptions={delimiters}
+            onCreateOption={(del) =>
+              setDelimiters([...delimiters, { label: del }])
+            }
+            onChange={(selectedOptions) => setDelimiters(selectedOptions)}
+            data-testid="delimiter-combobox"
+          />
+        </FlexItem>
+        <FlexItem>
+          <FormField layout="horizontal" label="Sort by">
             <RiSelect
               options={sortOptions}
-              valueRender={({ option }) => option.inputDisplay ?? option.value}
+              valueRender={({ option }) =>
+                option.inputDisplay ?? option.value
+              }
               value={sorting}
-              className={styles.select}
               onChange={(value: SortOrder) => onChangeSort(value)}
               data-testid="tree-view-sorting-select"
             />
-          </FlexItem>
-          <FlexItem className={styles.row}>
-            <div className={styles.footer}>
-              <SecondaryButton
-                size="s"
-                data-testid="tree-view-cancel-btn"
-                onClick={closePopover}
-              >
-                Cancel
-              </SecondaryButton>
-              <PrimaryButton
-                size="s"
-                data-testid="tree-view-apply-btn"
-                onClick={handleApply}
-              >
-                Apply
-              </PrimaryButton>
-            </div>
-          </FlexItem>
-        </Col>
-      </RiPopover>
-    </div>
+          </FormField>
+        </FlexItem>
+        <FlexItem />
+        <FlexItem>
+          <Row gap="m" justify="end">
+            <SecondaryButton
+              data-testid="tree-view-cancel-btn"
+              onClick={closePopover}
+            >
+              Cancel
+            </SecondaryButton>
+            <PrimaryButton
+              data-testid="tree-view-apply-btn"
+              onClick={handleApply}
+            >
+              Apply
+            </PrimaryButton>
+          </Row>
+        </FlexItem>
+      </StyledCol>
+    </RiPopover>
   )
 }