Fixing word-wrap and adding more titles

elastic · Sep 9, 2020 · 3a29c0f · 3a29c0f
1 parent 81c4080
commit 3a29c0f
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 25 deletions.
diff --git a/packages/kbn-ui-framework/src/components/local_nav/_local_search.scss b/packages/kbn-ui-framework/src/components/local_nav/_local_search.scss
@@ -26,14 +26,6 @@
   border-radius: 0;
   border-left-width: 0;
 }
-
-.kuiLocalSearchAssistedInput {
-  overflow: visible !important; // Override EUI form control
-  display: flex;
-  flex: 1 1 100%;
-  position: relative;
-}
-
 /**
  * 1. em used for right padding so documentation link and query string
  *    won't overlap if the user increases their default browser font size

diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
@@ -8,6 +8,13 @@
   border-right: none !important;
 }
 
+.kbnQueryBar__textareaWrap {
+  overflow: visible !important; // Override EUI form control
+  display: flex;
+  flex: 1 1 100%;
+  position: relative;
+}
+
 .kbnQueryBar__textarea {
   z-index: $euiZContentMenu;
   resize: none !important; // When in the group, it will autosize
@@ -20,6 +27,9 @@
 
   &:not(:focus):not(:invalid) {
     @include euiYScrollWithShadows;
+  }
+
+  &:not(:focus) {
     white-space: nowrap;
     overflow-y: hidden;
     overflow-x: hidden;

diff --git a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
@@ -610,7 +610,7 @@ export class QueryStringInputUI extends Component<Props, State> {
           >
             <div
               role="search"
-              className="euiFormControlLayout__childrenWrapper kuiLocalSearchAssistedInput"
+              className="euiFormControlLayout__childrenWrapper kbnQueryBar__textareaWrap"
               ref={this.queryBarInputDivRefInstance}
             >
               <EuiTextArea

diff --git a/...k/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.scss b/...k/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.scss
@@ -1,9 +1,6 @@
-
 .lnsFiltersOperation__popoverButton {
+  @include euiTextBreakWord;
+  @include euiFontSizeS;
   min-height: $euiSizeXL;
   width: 100%;
-
-  .lnsFiltersOperation__popoverButtonContent {
-    justify-content: flex-start;
-  }
 }
diff --git a/...ck/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/...ck/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -18,7 +18,9 @@ import {
   euiDragDropReorder,
   EuiButtonIcon,
   EuiButtonEmpty,
+  EuiIcon,
   EuiFormRow,
+  EuiLink,
   htmlIdGenerator,
 } from '@elastic/eui';
 import { updateColumnParam } from '../../../state_helpers';
@@ -236,12 +238,15 @@ export const FilterList = ({
       updateFilters(items);
     }
   };
+
   return (
     <>
       <EuiDragDropContext onDragEnd={onDragEnd}>
         <EuiDroppable droppableId="FILTERS_DROPPABLE_AREA" spacing="s">
           {localFilters?.map((filter: FilterValue, idx: number) => {
             const { input, label, id } = filter;
+            const queryIsValid = isQueryValid(input, indexPattern);
+
             return (
               <EuiDraggable
                 spacing="m"
@@ -252,7 +257,24 @@ export const FilterList = ({
               >
                 {(provided) => (
                   <EuiPanel paddingSize="none">
-                    <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
+                    <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+                      <EuiFlexItem grow={false}>{/* Empty for spacing */}</EuiFlexItem>
+                      <EuiFlexItem grow={false}>
+                        <EuiIcon
+                          size="s"
+                          color={queryIsValid ? 'subdued' : 'danger'}
+                          type={queryIsValid ? 'grab' : 'alert'}
+                          title={
+                            queryIsValid
+                              ? i18n.translate('xpack.lens.indexPattern.filters.dragToReorder', {
+                                  defaultMessage: 'Drag to reorder',
+                                })
+                              : i18n.translate('xpack.lens.indexPattern.filters.isInvalid', {
+                                  defaultMessage: 'This query is invalid',
+                                })
+                          }
+                        />
+                      </EuiFlexItem>
                       <EuiFlexItem
                         grow={true}
                         data-test-subj="indexPattern-filters-existingFilterContainer"
@@ -263,19 +285,17 @@ export const FilterList = ({
                           indexPattern={indexPattern}
                           filter={filter}
                           Button={({ onClick }: { onClick: MouseEventHandler }) => (
-                            <EuiButtonEmpty
+                            <EuiLink
                               className="lnsFiltersOperation__popoverButton"
                               data-test-subj="indexPattern-filters-existingFilterTrigger"
-                              size="xs"
                               onClick={onClick}
-                              color={isQueryValid(input, indexPattern) ? 'text' : 'danger'}
-                              iconType={isQueryValid(input, indexPattern) ? 'grab' : 'alert'}
-                              contentProps={{
-                                className: 'lnsFiltersOperation__popoverButtonContent',
-                              }}
+                              color={queryIsValid ? 'text' : 'danger'}
+                              title={i18n.translate('xpack.lens.indexPattern.filters.clickToEdit', {
+                                defaultMessage: 'Click to edit',
+                              })}
                             >
                               {label || input.query || defaultLabel}
-                            </EuiButtonEmpty>
+                            </EuiLink>
                           )}
                           setFilter={(f: FilterValue) => {
                             onChangeValue(f.id, f.input, f.label);
@@ -292,11 +312,14 @@ export const FilterList = ({
                             onRemoveFilter(filter.id);
                           }}
                           aria-label={i18n.translate(
-                            'xpack.lens.indexPattern.filters.deleteSearchQuery',
+                            'xpack.lens.indexPattern.filters.removeSearchQuery',
                             {
-                              defaultMessage: 'Delete search query',
+                              defaultMessage: 'Remove search query',
                             }
                           )}
+                          title={i18n.translate('xpack.lens.indexPattern.filters.remove', {
+                            defaultMessage: 'Remove',
+                          })}
                         />
                       </EuiFlexItem>
                     </EuiFlexGroup>