[Look&Feel] Apply missing guidance for visBuilder

changelogs/fragments/7341.yml

@@ -0,0 +1,2 @@
+refactor:
+- [Look&Feel] Apply guidance for visBuilder ([#7341](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7341))

src/plugins/data/public/ui/apply_filters/apply_filter_popover_content.tsx

@@ -38,6 +38,7 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiCompressedSwitch,
+  EuiText,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import React, { Component } from 'react';
@@ -100,10 +101,14 @@ export default class ApplyFiltersPopoverContent extends Component<Props, State>
       <React.Fragment>
         <EuiModalHeader>
           <EuiModalHeaderTitle>
-            <FormattedMessage
-              id="data.filter.applyFilters.popupHeader"
-              defaultMessage="Select filters to apply"
-            />
+            <EuiText size="s">
+              <h2>
+                <FormattedMessage
+                  id="data.filter.applyFilters.popupHeader"
+                  defaultMessage="Select filters to apply"
+                />
+              </h2>
+            </EuiText>
           </EuiModalHeaderTitle>
         </EuiModalHeader>
 

src/plugins/vis_builder/public/application/components/data_tab/field_bucket.test.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+// @ts-ignore
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { IndexPatternField } from '../../../../../data/common';
+// @ts-ignore
+import { findTestSubject } from '@elastic/eui/lib/test';
+import { FieldBucket } from './field_bucket';
+import { Bucket } from './types';
+
+const mockUseIndexPatterns = jest.fn(() => ({ selected: 'mockIndexPattern' }));
+const mockUseOnAddFilter = jest.fn();
+jest.mock('../../utils/use', () => ({
+  useIndexPatterns: jest.fn(() => mockUseIndexPatterns),
+  useOnAddFilter: jest.fn(() => mockUseOnAddFilter),
+}));
+
+describe('visBuilder field bucket', function () {
+  function mountComponent(field: IndexPatternField, bucket: Bucket) {
+    const compProps = { field, bucket };
+    return mountWithIntl(<FieldBucket {...compProps} />);
+  }
+
+  it('should render with buttons if field is filterable', async () => {
+    const field = new IndexPatternField(
+      {
+        name: 'bytes',
+        type: 'number',
+        esTypes: ['long'],
+        count: 10,
+        scripted: false,
+        searchable: true,
+        aggregatable: true,
+        readFromDocValues: true,
+      },
+      'bytes'
+    );
+    const bucket = {
+      display: `display`,
+      value: `value`,
+      percent: 25,
+      count: 100,
+    };
+    const comp = mountComponent(field, bucket);
+    const addButton = findTestSubject(comp, 'plus-bytes-value');
+    const minusButton = findTestSubject(comp, 'minus-bytes-value');
+    expect(addButton.length).toBe(1);
+    expect(minusButton.length).toBe(1);
+
+    addButton.simulate('click');
+    minusButton.simulate('click');
+    expect(mockUseOnAddFilter).toHaveBeenCalledTimes(2);
+  });
+});

src/plugins/vis_builder/public/application/components/data_tab/field_bucket.tsx

@@ -11,6 +11,7 @@ import {
   EuiFlexItem,
   EuiSpacer,
   EuiProgress,
+  EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 
@@ -35,13 +36,22 @@ export function FieldBucket({ bucket, field }: FieldBucketProps) {
     // We need this to communicate to users when a top value is actually an empty string
     defaultMessage: 'Empty string',
   });
+  const addText = i18n.translate('visBuilder.fieldSelector.detailsView.filterValueButtonToolTip', {
+    defaultMessage: 'Filter for value',
+  });
   const addLabel = i18n.translate(
     'visBuilder.fieldSelector.detailsView.filterValueButtonAriaLabel',
     {
       defaultMessage: 'Filter for {fieldName}: "{value}"',
       values: { fieldName, value },
     }
   );
+  const removeText = i18n.translate(
+    'visBuilder.fieldSelector.detailsView.filterOutValueButtonToolTip',
+    {
+      defaultMessage: 'Filter out value',
+    }
+  );
   const removeLabel = i18n.translate(
     'visBuilder.fieldSelector.detailsView.filterOutValueButtonAriaLabel',
     {
@@ -84,22 +94,26 @@ export function FieldBucket({ bucket, field }: FieldBucketProps) {
         {isFilterableField && (
           <EuiFlexItem grow={false}>
             <div>
-              <EuiSmallButtonIcon
-                className="vbFieldDetails__filterButton"
-                iconSize="s"
-                iconType="plusInCircle"
-                onClick={() => onAddFilter(field, value, '+')}
-                aria-label={addLabel}
-                data-test-subj={`plus-${fieldName}-${value}`}
-              />
-              <EuiSmallButtonIcon
-                className="vbFieldDetails__filterButton"
-                iconSize="s"
-                iconType="minusInCircle"
-                onClick={() => onAddFilter(field, value, '-')}
-                aria-label={removeLabel}
-                data-test-subj={`minus-${fieldName}-${value}`}
-              />
+              <EuiToolTip content={addText} delay="long" position="bottom">
+                <EuiSmallButtonIcon
+                  className="vbFieldDetails__filterButton"
+                  iconSize="s"
+                  iconType="plusInCircle"
+                  onClick={() => onAddFilter(field, value, '+')}
+                  aria-label={addLabel}
+                  data-test-subj={`plus-${fieldName}-${value}`}
+                />
+              </EuiToolTip>
+              <EuiToolTip content={removeText} delay="long" position="bottom">
+                <EuiSmallButtonIcon
+                  className="vbFieldDetails__filterButton"
+                  iconSize="s"
+                  iconType="minusInCircle"
+                  onClick={() => onAddFilter(field, value, '-')}
+                  aria-label={removeLabel}
+                  data-test-subj={`minus-${fieldName}-${value}`}
+                />
+              </EuiToolTip>
             </div>
           </EuiFlexItem>
         )}

src/plugins/vis_builder/public/application/components/data_tab/field_details.tsx

@@ -53,7 +53,7 @@ export function FieldDetailsView({ field, details }: FieldDetailsProps) {
 
   return (
     <>
-      <EuiPopoverTitle>{title}</EuiPopoverTitle>
+      <EuiPopoverTitle tabIndex={0}>{title}</EuiPopoverTitle>
       <div className="vbFieldDetails" data-test-subj="fieldDetailsContainer">
         {error ? (
           <EuiText size="xs" data-test-subj="fieldDetailsError">

src/plugins/vis_default_editor/public/components/sidebar/controls.tsx

@@ -109,7 +109,7 @@ function DefaultEditorControls({
                 data-test-subj="visualizeEditorRenderButton"
                 disabled={!isDirty}
                 fill
-                iconType="play"
+                iconType="refresh"
                 onClick={applyChanges}
                 size="s"
               >