[Lens] Text updates (#48964) (#49354)

* [Lens] Text updates

* Update per comments

* Update text for datapanel

* Fix tests

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/chart_switch.tsx

@@ -52,8 +52,8 @@ function VisualizationSummary(props: Props) {
   if (!visualization) {
     return (
       <>
-        {i18n.translate('xpack.lens.configPanel.chooseVisualization', {
-          defaultMessage: 'Choose a visualization',
+        {i18n.translate('xpack.lens.configPanel.selectVisualization', {
+          defaultMessage: 'Select a visualization',
         })}
       </>
     );
@@ -201,8 +201,8 @@ export function ChartSwitch(props: Props) {
       anchorPosition="downLeft"
     >
       <EuiPopoverTitle>
-        {i18n.translate('xpack.lens.configPanel.chooseVisualization', {
-          defaultMessage: 'Choose a visualization',
+        {i18n.translate('xpack.lens.configPanel.selectVisualization', {
+          defaultMessage: 'Select a visualization',
         })}
       </EuiPopoverTitle>
       <EuiKeyPadMenu>

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.tsx

@@ -259,20 +259,27 @@ export function SuggestionPanel({
         </EuiFlexItem>
         {stagedPreview && (
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              data-test-subj="lensSubmitSuggestion"
-              size="xs"
-              onClick={() => {
-                trackUiEvent('suggestion_confirmed');
-                dispatch({
-                  type: 'SUBMIT_SUGGESTION',
-                });
-              }}
-            >
-              {i18n.translate('xpack.lens.sugegstion.confirmSuggestionLabel', {
-                defaultMessage: 'Reload suggestions',
+            <EuiToolTip
+              content={i18n.translate('xpack.lens.suggestion.refreshSuggestionTooltip', {
+                defaultMessage: 'Refresh the suggestions based on the selected visualization.',
               })}
-            </EuiButtonEmpty>
+            >
+              <EuiButtonEmpty
+                data-test-subj="lensSubmitSuggestion"
+                size="xs"
+                iconType="refresh"
+                onClick={() => {
+                  trackUiEvent('suggestion_confirmed');
+                  dispatch({
+                    type: 'SUBMIT_SUGGESTION',
+                  });
+                }}
+              >
+                {i18n.translate('xpack.lens.sugegstion.refreshSuggestionLabel', {
+                  defaultMessage: 'Refresh',
+                })}
+              </EuiButtonEmpty>
+            </EuiToolTip>
           </EuiFlexItem>
         )}
       </EuiFlexGroup>

x-pack/legacy/plugins/lens/public/indexpattern_plugin/change_indexpattern.tsx

@@ -5,8 +5,15 @@
  */
 
 import _ from 'lodash';
+import { i18n } from '@kbn/i18n';
 import React, { useState } from 'react';
-import { EuiButtonEmpty, EuiPopover, EuiSelectable, EuiButtonEmptyProps } from '@elastic/eui';
+import {
+  EuiButtonEmpty,
+  EuiPopover,
+  EuiPopoverTitle,
+  EuiSelectable,
+  EuiButtonEmptyProps,
+} from '@elastic/eui';
 import { EuiSelectableProps } from '@elastic/eui/src/components/selectable/selectable';
 import { IndexPatternRef } from './types';
 import { trackUiEvent } from '../lens_ui_telemetry';
@@ -62,6 +69,11 @@ export function ChangeIndexPattern({
         ownFocus
       >
         <div style={{ width: 320 }}>
+          <EuiPopoverTitle>
+            {i18n.translate('xpack.lens.indexPattern.changeIndexPatternTitle', {
+              defaultMessage: 'Change index pattern',
+            })}
+          </EuiPopoverTitle>
           <EuiSelectable
             {...selectableProps}
             searchable

x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx

@@ -359,7 +359,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
                 >
                   <FormattedMessage
                     id="xpack.lens.indexPatterns.toggleFiltersPopover"
-                    defaultMessage="Fields filtered"
+                    defaultMessage="Filter by type"
                   />
                 </EuiFacetButton>
               }
@@ -441,31 +441,35 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
               {paginatedFields.length === 0 && (
                 <EuiText size="s" color="subdued">
                   <p>
-                    <strong>
-                      {showEmptyFields
-                        ? i18n.translate('xpack.lens.indexPatterns.hiddenFieldsLabel', {
+                    {showEmptyFields
+                      ? localState.typeFilter.length || localState.nameFilter.length
+                        ? i18n.translate('xpack.lens.indexPatterns.noFilteredFieldsLabel', {
                             defaultMessage:
-                              'No fields have data with the current filters. You can show fields without data using the filters above.',
+                              'No fields match the current filters. Try changing your filters or time range.',
                           })
                         : i18n.translate('xpack.lens.indexPatterns.noFieldsLabel', {
-                            defaultMessage: 'No fields in {title} can be visualized.',
-                            values: { title: currentIndexPattern.title },
-                          })}
-                    </strong>
+                            defaultMessage: 'No fields exist in this index pattern.',
+                          })
+                      : i18n.translate('xpack.lens.indexPatterns.emptyFieldsWithDataLabel', {
+                          defaultMessage:
+                            'No fields have data with the current filters and time range. Try changing your filters or time range.',
+                        })}
                   </p>
+
                   {(!showEmptyFields ||
                     localState.typeFilter.length ||
                     localState.nameFilter.length) && (
                     <EuiButton
                       data-test-subj="lnsDataPanelShowAllFields"
+                      size="s"
                       onClick={() => {
-                        trackUiEvent('show_empty_fields_clicked');
+                        trackUiEvent('indexpattern_show_all_fields_clicked');
                         clearLocalState();
                         onToggleEmptyFields(true);
                       }}
                     >
                       {i18n.translate('xpack.lens.indexPatterns.showAllFields.buttonText', {
-                        defaultMessage: 'Show All Fields',
+                        defaultMessage: 'Show all fields',
                       })}
                     </EuiButton>
                   )}

x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx

@@ -174,10 +174,8 @@ export function FieldItem(props: FieldItemProps) {
                   togglePopover();
                 }
               }}
-              aria-label={i18n.translate('xpack.lens.indexPattern.fieldStatsButtonAriaLabel', {
-                defaultMessage:
-                  'Click or press Enter for information about {fieldName}. Or, drag field into visualization.',
-                values: { fieldName: field.name },
+              aria-label={i18n.translate('xpack.lens.indexPattern.fieldStatsButtonLabel', {
+                defaultMessage: 'Click for a field preview. Or, drag and drop to visualize.',
               })}
             >
               <LensFieldIcon type={field.type as DataType} />
@@ -188,10 +186,8 @@ export function FieldItem(props: FieldItemProps) {
 
               <EuiIconTip
                 anchorClassName="lnsFieldItem__infoIcon"
-                content={i18n.translate('xpack.lens.indexPattern.fieldStatsButton', {
-                  defaultMessage:
-                    'Click for information about {fieldName}. Or, drag field into visualization.',
-                  values: { fieldName: field.name },
+                content={i18n.translate('xpack.lens.indexPattern.fieldStatsButtonLabel', {
+                  defaultMessage: 'Click for a field preview. Or, drag and drop to visualize.',
                 })}
                 type="iInCircle"
                 color="subdued"
@@ -226,7 +222,7 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
     return (
       <EuiText size="s">
         {i18n.translate('xpack.lens.indexPattern.fieldStatsNoData', {
-          defaultMessage: 'No data to display',
+          defaultMessage: 'No data to display.',
         })}
       </EuiText>
     );

x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.test.ts

@@ -240,7 +240,7 @@ describe('IndexPattern Data Source', () => {
             columnOrder: ['col1', 'col2'],
             columns: {
               col1: {
-                label: 'Count of Documents',
+                label: 'Count of records',
                 dataType: 'number',
                 isBucketed: false,
 
@@ -272,7 +272,7 @@ describe('IndexPattern Data Source', () => {
               metricsAtAllLevels=false
               partialRows=false
               includeFormatHints=true
-              aggConfigs={lens_auto_date aggConfigs='[{\\"id\\":\\"col1\\",\\"enabled\\":true,\\"type\\":\\"count\\",\\"schema\\":\\"metric\\",\\"params\\":{}},{\\"id\\":\\"col2\\",\\"enabled\\":true,\\"type\\":\\"date_histogram\\",\\"schema\\":\\"segment\\",\\"params\\":{\\"field\\":\\"timestamp\\",\\"useNormalizedEsInterval\\":true,\\"interval\\":\\"1d\\",\\"drop_partials\\":false,\\"min_doc_count\\":0,\\"extended_bounds\\":{}}}]'} | lens_rename_columns idMap='{\\"col-0-col1\\":{\\"label\\":\\"Count of Documents\\",\\"dataType\\":\\"number\\",\\"isBucketed\\":false,\\"operationType\\":\\"count\\",\\"id\\":\\"col1\\"},\\"col-1-col2\\":{\\"label\\":\\"Date\\",\\"dataType\\":\\"date\\",\\"isBucketed\\":true,\\"operationType\\":\\"date_histogram\\",\\"sourceField\\":\\"timestamp\\",\\"params\\":{\\"interval\\":\\"1d\\"},\\"id\\":\\"col2\\"}}'"
+              aggConfigs={lens_auto_date aggConfigs='[{\\"id\\":\\"col1\\",\\"enabled\\":true,\\"type\\":\\"count\\",\\"schema\\":\\"metric\\",\\"params\\":{}},{\\"id\\":\\"col2\\",\\"enabled\\":true,\\"type\\":\\"date_histogram\\",\\"schema\\":\\"segment\\",\\"params\\":{\\"field\\":\\"timestamp\\",\\"useNormalizedEsInterval\\":true,\\"interval\\":\\"1d\\",\\"drop_partials\\":false,\\"min_doc_count\\":0,\\"extended_bounds\\":{}}}]'} | lens_rename_columns idMap='{\\"col-0-col1\\":{\\"label\\":\\"Count of records\\",\\"dataType\\":\\"number\\",\\"isBucketed\\":false,\\"operationType\\":\\"count\\",\\"id\\":\\"col1\\"},\\"col-1-col2\\":{\\"label\\":\\"Date\\",\\"dataType\\":\\"date\\",\\"isBucketed\\":true,\\"operationType\\":\\"date_histogram\\",\\"sourceField\\":\\"timestamp\\",\\"params\\":{\\"interval\\":\\"1d\\"},\\"id\\":\\"col2\\"}}'"
       `);
     });
   });

x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/count.tsx

@@ -9,7 +9,7 @@ import { OperationDefinition } from '.';
 import { ParameterlessIndexPatternColumn, BaseIndexPatternColumn } from './column_types';
 
 const countLabel = i18n.translate('xpack.lens.indexPattern.countOf', {
-  defaultMessage: 'Count of documents',
+  defaultMessage: 'Count of records',
 });
 
 export type CountIndexPatternColumn = ParameterlessIndexPatternColumn<

x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/date_histogram.tsx

@@ -16,7 +16,7 @@ import { IndexPattern } from '../../types';
 type PropType<C> = C extends React.ComponentType<infer P> ? P : unknown;
 
 const autoInterval = 'auto';
-const supportedIntervals = ['M', 'w', 'd', 'h'];
+const supportedIntervals = ['M', 'w', 'd', 'h', 'm'];
 const defaultCustomInterval = supportedIntervals[2];
 
 // Add ticks to EuiRange component props

x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_expression.tsx

@@ -76,8 +76,8 @@ export const getMetricChartRenderer = (
   formatFactory: FormatFactory
 ): IInterpreterRenderFunction<MetricChartProps> => ({
   name: 'lens_metric_chart_renderer',
-  displayName: 'Metric Chart',
-  help: 'Metric Chart Renderer',
+  displayName: 'Metric chart',
+  help: 'Metric chart renderer',
   validate: () => {},
   reuseDomNode: true,
   render: async (domNode: Element, config: MetricChartProps, _handlers: unknown) => {

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/types.ts

@@ -241,7 +241,7 @@ export const visualizationTypes: VisualizationType[] = [
     icon: 'visBarHorizontal',
     largeIcon: chartBarHorizontalSVG,
     label: i18n.translate('xpack.lens.xyVisualization.barHorizontalLabel', {
-      defaultMessage: 'Horizontal Bar',
+      defaultMessage: 'Horizontal bar',
     }),
   },
   {
@@ -249,7 +249,7 @@ export const visualizationTypes: VisualizationType[] = [
     icon: 'visBarVerticalStacked',
     largeIcon: chartBarStackedSVG,
     label: i18n.translate('xpack.lens.xyVisualization.stackedBarLabel', {
-      defaultMessage: 'Stacked Bar',
+      defaultMessage: 'Stacked bar',
     }),
   },
   {
@@ -257,7 +257,7 @@ export const visualizationTypes: VisualizationType[] = [
     icon: 'visBarHorizontalStacked',
     largeIcon: chartBarHorizontalStackedSVG,
     label: i18n.translate('xpack.lens.xyVisualization.stackedBarHorizontalLabel', {
-      defaultMessage: 'Stacked Horizontal Bar',
+      defaultMessage: 'Stacked horizontal bar',
     }),
   },
   {
@@ -281,7 +281,7 @@ export const visualizationTypes: VisualizationType[] = [
     icon: 'visAreaStacked',
     largeIcon: chartAreaStackedSVG,
     label: i18n.translate('xpack.lens.xyVisualization.stackedAreaLabel', {
-      defaultMessage: 'Stacked Area',
+      defaultMessage: 'Stacked area',
     }),
   },
 ];

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.tsx

@@ -20,6 +20,7 @@ import {
   EuiSpacer,
   EuiButtonEmpty,
   EuiPopoverFooter,
+  EuiToolTip,
 } from '@elastic/eui';
 import { State, SeriesType, LayerConfig, visualizationTypes } from './types';
 import { VisualizationProps, OperationMetadata } from '../types';
@@ -235,7 +236,7 @@ export function XYConfigPanel(props: VisualizationProps<State>) {
           <EuiFormRow
             className="lnsConfigPanel__axis"
             label={i18n.translate('xpack.lens.xyChart.splitSeries', {
-              defaultMessage: 'Split series',
+              defaultMessage: 'Break down by',
             })}
           >
             <NativeRenderer
@@ -253,33 +254,44 @@ export function XYConfigPanel(props: VisualizationProps<State>) {
         </EuiPanel>
       ))}
 
-      <EuiButton
-        className="lnsConfigPanel__addLayerBtn"
-        fullWidth
-        size="s"
-        data-test-subj={`lnsXY_layer_add`}
-        aria-label={i18n.translate('xpack.lens.xyChart.addLayerButton', {
-          defaultMessage: 'Add layer',
-        })}
-        title={i18n.translate('xpack.lens.xyChart.addLayerButton', {
-          defaultMessage: 'Add layer',
-        })}
-        onClick={() => {
-          trackUiEvent('xy_layer_added');
-          const usedSeriesTypes = _.uniq(state.layers.map(layer => layer.seriesType));
-          setState({
-            ...state,
-            layers: [
-              ...state.layers,
-              newLayerState(
-                usedSeriesTypes.length === 1 ? usedSeriesTypes[0] : state.preferredSeriesType,
-                frame.addNewLayer()
-              ),
-            ],
-          });
-        }}
-        iconType="plusInCircleFilled"
-      />
+      <EuiFlexItem grow={true}>
+        <EuiToolTip
+          className="eui-fullWidth"
+          content={i18n.translate('xpack.lens.xyChart.addLayerTooltip', {
+            defaultMessage:
+              'Use multiple layers to combine chart types or visualize different index patterns.',
+          })}
+          position="bottom"
+        >
+          <EuiButton
+            className="lnsConfigPanel__addLayerBtn"
+            fullWidth
+            size="s"
+            data-test-subj={`lnsXY_layer_add`}
+            aria-label={i18n.translate('xpack.lens.xyChart.addLayerButton', {
+              defaultMessage: 'Add layer',
+            })}
+            title={i18n.translate('xpack.lens.xyChart.addLayerButton', {
+              defaultMessage: 'Add layer',
+            })}
+            onClick={() => {
+              trackUiEvent('xy_layer_added');
+              const usedSeriesTypes = _.uniq(state.layers.map(layer => layer.seriesType));
+              setState({
+                ...state,
+                layers: [
+                  ...state.layers,
+                  newLayerState(
+                    usedSeriesTypes.length === 1 ? usedSeriesTypes[0] : state.preferredSeriesType,
+                    frame.addNewLayer()
+                  ),
+                ],
+              });
+            }}
+            iconType="plusInCircleFilled"
+          />
+        </EuiToolTip>
+      </EuiFlexItem>
     </EuiForm>
   );
 }

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.tsx

@@ -98,9 +98,9 @@ export const getXyChartRenderer = (dependencies: {
   timeZone: string;
 }): IInterpreterRenderFunction<XYChartProps> => ({
   name: 'lens_xy_chart_renderer',
-  displayName: 'XY Chart',
+  displayName: 'XY chart',
   help: i18n.translate('xpack.lens.xyChart.renderer.help', {
-    defaultMessage: 'X/Y Chart Renderer',
+    defaultMessage: 'X/Y chart renderer',
   }),
   validate: () => {},
   reuseDomNode: true,
@@ -238,7 +238,7 @@ export function XYChart({ data, args, formatFactory, timeZone }: XYChartRenderPr
           const rows = data.tables[layerId].rows.map(row => {
             const newRow: typeof row = {};
 
-            // Remap data to { 'Count of documents': 5 }
+            // Remap data to { 'Count of records': 5 }
             Object.keys(row).forEach(key => {
               if (columnToLabelMap[key]) {
                 newRow[columnToLabelMap[key]] = row[key];

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.test.ts

@@ -47,7 +47,7 @@ describe('xy_visualization', () => {
     it('should show mixed xy chart when multilple series types', () => {
       const desc = xyVisualization.getDescription(mixedState('bar', 'line'));
 
-      expect(desc.label).toEqual('Mixed XY Chart');
+      expect(desc.label).toEqual('Mixed XY chart');
     });
 
     it('should show the preferredSeriesType if there are no layers', () => {
@@ -56,7 +56,7 @@ describe('xy_visualization', () => {
       // 'test-file-stub' is a hack, but it at least means we aren't using
       // a standard icon here.
       expect(desc.icon).toEqual('test-file-stub');
-      expect(desc.label).toEqual('Bar Chart');
+      expect(desc.label).toEqual('Bar chart');
     });
 
     it('should show mixed horizontal bar chart when multiple horizontal bar types', () => {
@@ -64,23 +64,23 @@ describe('xy_visualization', () => {
         mixedState('bar_horizontal', 'bar_horizontal_stacked')
       );
 
-      expect(desc.label).toEqual('Mixed Horizontal Bar Chart');
+      expect(desc.label).toEqual('Mixed horizontal bar chart');
     });
 
     it('should show bar chart when bar only', () => {
       const desc = xyVisualization.getDescription(mixedState('bar_horizontal', 'bar_horizontal'));
 
-      expect(desc.label).toEqual('Horizontal Bar Chart');
+      expect(desc.label).toEqual('Horizontal bar chart');
     });
 
     it('should show the chart description if not mixed', () => {
-      expect(xyVisualization.getDescription(mixedState('area')).label).toEqual('Area Chart');
-      expect(xyVisualization.getDescription(mixedState('line')).label).toEqual('Line Chart');
+      expect(xyVisualization.getDescription(mixedState('area')).label).toEqual('Area chart');
+      expect(xyVisualization.getDescription(mixedState('line')).label).toEqual('Line chart');
       expect(xyVisualization.getDescription(mixedState('area_stacked')).label).toEqual(
-        'Stacked Area Chart'
+        'Stacked area chart'
       );
       expect(xyVisualization.getDescription(mixedState('bar_horizontal_stacked')).label).toEqual(
-        'Stacked Horizontal Bar Chart'
+        'Stacked horizontal bar chart'
       );
     });
   });
@@ -119,7 +119,7 @@ describe('xy_visualization', () => {
             "position": "right",
           },
           "preferredSeriesType": "bar_stacked",
-          "title": "Empty XY Chart",
+          "title": "Empty XY chart",
         }
       `);
     });

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.tsx

@@ -54,7 +54,7 @@ function getDescription(state?: State) {
         ? visualizationType.label
         : isHorizontalChart(state.layers)
         ? i18n.translate('xpack.lens.xyVisualization.mixedBarHorizontalLabel', {
-            defaultMessage: 'Mixed Horizontal Bar',
+            defaultMessage: 'Mixed horizontal bar',
           })
         : i18n.translate('xpack.lens.xyVisualization.mixedLabel', {
             defaultMessage: 'Mixed XY',
@@ -70,7 +70,7 @@ export const xyVisualization: Visualization<State, PersistableState> = {
   getDescription(state) {
     const { icon, label } = getDescription(state);
     const chartLabel = i18n.translate('xpack.lens.xyVisualization.chartLabel', {
-      defaultMessage: '{label} Chart',
+      defaultMessage: '{label} chart',
       values: { label },
     });
 
@@ -93,7 +93,7 @@ export const xyVisualization: Visualization<State, PersistableState> = {
   initialize(frame, state) {
     return (
       state || {
-        title: 'Empty XY Chart',
+        title: 'Empty XY chart',
         legend: { isVisible: true, position: Position.Right },
         preferredSeriesType: defaultSeriesType,
         layers: [