Merge pull request elastic#15 from andreadelrio/controlsValidation

[Controls] Design for options list validation
andreadelrio · Feb 9, 2022 · 868c857 · 868c857
2 parents 16b2812 + 64497d9
commit 868c857
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 27 deletions.
diff --git a/src/plugins/controls/public/control_types/options_list/options_list.scss b/src/plugins/controls/public/control_types/options_list/options_list.scss
@@ -35,6 +35,10 @@
   font-weight: 300;
 }
 
+.optionsList__ignoredBadge {
+  margin-left: $euiSizeS;
+}
+
 .optionsList__selectionInvalid {
   text-decoration: line-through;
   color: $euiTextSubduedColor;

diff --git a/src/plugins/controls/public/control_types/options_list/options_list_popover_component.tsx b/src/plugins/controls/public/control_types/options_list/options_list_popover_component.tsx
@@ -49,7 +49,7 @@ export const OptionsListPopover = ({
   const {
     useEmbeddableSelector,
     useEmbeddableDispatch,
-    actions: { selectOption, deselectOption, deselectOptions, clearSelections, replaceSelection },
+    actions: { selectOption, deselectOption, clearSelections, replaceSelection },
   } = useReduxEmbeddableContext<OptionsListEmbeddableInput, typeof optionsListReducers>();
 
   const dispatch = useEmbeddableDispatch();
@@ -68,19 +68,6 @@ export const OptionsListPopover = ({
     <>
       <EuiPopoverTitle className="optionsList__popoverTitle" paddingSize="s">
         {title}
-        {invalidSelections && invalidSelections.length > 0 && (
-          <EuiToolTip content={OptionsListStrings.popover.getInvalidSelectionsTooltip()}>
-            <EuiBadge
-              color="warning"
-              iconType="cross"
-              iconSide="right"
-              iconOnClick={() => dispatch(deselectOptions(invalidSelections))}
-              iconOnClickAriaLabel={OptionsListStrings.popover.getInvalidSelectionsAriaLabel()}
-            >
-              {OptionsListStrings.popover.getInvalidSelectionsTitle(invalidSelections.length)}
-            </EuiBadge>
-          </EuiToolTip>
-        )}
       </EuiPopoverTitle>
       {field?.type !== 'boolean' && (
         <div className="optionsList__actions">
@@ -91,26 +78,38 @@ export const OptionsListPopover = ({
               alignItems="center"
               justifyContent="spaceBetween"
             >
-              {totalCardinality && (
-                <EuiFlexItem grow={false}>
-                  <EuiToolTip
-                    content={OptionsListStrings.popover.getTotalCardinalityTooltip(
-                      totalCardinality
-                    )}
-                  >
-                    <EuiBadge color="primary">{totalCardinality}</EuiBadge>
-                  </EuiToolTip>
-                </EuiFlexItem>
-              )}
               <EuiFlexItem>
                 <EuiFieldSearch
                   compressed
                   disabled={showOnlySelected}
                   onChange={(event) => updateSearchString(event.target.value)}
                   value={searchString}
                   data-test-subj="optionsList-control-search-input"
+                  placeholder={
+                    totalCardinality
+                      ? OptionsListStrings.popover.getTotalCardinalityPlaceholder(totalCardinality)
+                      : undefined
+                  }
                 />
               </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                {invalidSelections && invalidSelections.length > 0 && (
+                  <EuiToolTip
+                    content={OptionsListStrings.popover.getInvalidSelectionsTooltip(
+                      invalidSelections.length
+                    )}
+                  >
+                    <EuiBadge
+                      className="optionsList__ignoredBadge"
+                      color="warning"
+                      iconType="alert"
+                      iconSide="right"
+                    >
+                      {invalidSelections.length}
+                    </EuiBadge>
+                  </EuiToolTip>
+                )}
+              </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiToolTip
                   position="top"

diff --git a/src/plugins/controls/public/control_types/options_list/options_list_strings.ts b/src/plugins/controls/public/control_types/options_list/options_list_strings.ts
@@ -71,6 +71,12 @@ export const OptionsListStrings = {
         defaultMessage: '{totalOptions} available options.',
         values: { totalOptions },
       }),
+    getTotalCardinalityPlaceholder: (totalOptions: number) =>
+      i18n.translate('controls.optionsList.popover.cardinalityPlaceholder', {
+        defaultMessage:
+          'Search {totalOptions} available {totalOptions, plural, one {option} other {options}}',
+        values: { totalOptions },
+      }),
     getInvalidSelectionsTitle: (invalidSelectionCount: number) =>
       i18n.translate('controls.optionsList.popover.invalidSelectionsTitle', {
         defaultMessage: '{invalidSelectionCount} selected options ignored',
@@ -80,10 +86,11 @@ export const OptionsListStrings = {
       i18n.translate('controls.optionsList.popover.invalidSelectionsAriaLabel', {
         defaultMessage: 'Deselect all ignored selections',
       }),
-    getInvalidSelectionsTooltip: () =>
+    getInvalidSelectionsTooltip: (selectedOptions: number) =>
       i18n.translate('controls.optionsList.popover.invalidSelectionsTooltip', {
         defaultMessage:
-          'One or more selected options are ignored because they are no longer in the data.',
+          '{selectedOptions} selected {selectedOptions, plural, one {option} other {options}} {selectedOptions, plural, one {is} other {are}} ignored because {selectedOptions, plural, one {it is} other {they are}} no longer in the data.',
+        values: { selectedOptions },
       }),
   },
   errors: {