[Lens] add optional labels to dimensions (#118580)

* [Lens] add optional labels to dimensions * CR feedback * fix failing test * Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
elastic · Nov 16, 2021 · e66072d · e66072d
1 parent 72d3728
commit e66072d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 3 deletions.
diff --git a/...k/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/...k/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
@@ -157,7 +157,7 @@ describe('LayerPanel', () => {
   });
 
   describe('single group', () => {
-    it('should render the non-editable state', async () => {
+    it('should render the non-editable state and optional label', async () => {
       mockVisualization.getConfiguration.mockReturnValue({
         groups: [
           {
@@ -172,8 +172,11 @@ describe('LayerPanel', () => {
       });
 
       const { instance } = await mountWithProvider(<LayerPanel {...getDefaultProps()} />);
+
       const group = instance.find('.lnsLayerPanel__dimensionContainer[data-test-subj="lnsGroup"]');
       expect(group).toHaveLength(1);
+      const optionalLabel = instance.find('[data-test-subj="lnsGroup_optional"]').first();
+      expect(optionalLabel.text()).toEqual('Optional');
     });
 
     it('should render the group with a way to add a new column', async () => {

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
@@ -14,6 +14,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
+  EuiText,
   EuiIconTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -385,7 +386,7 @@ export function LayerPanel(
 
           {groups.map((group, groupIndex) => {
             const isMissing = !isEmptyLayer && group.required && group.accessors.length === 0;
-
+            const isOptional = !group.required;
             return (
               <EuiFormRow
                 className="lnsLayerPanel__row"
@@ -410,6 +411,15 @@ export function LayerPanel(
                     )}
                   </>
                 }
+                labelAppend={
+                  isOptional ? (
+                    <EuiText color="subdued" size="xs" data-test-subj="lnsGroup_optional">
+                      {i18n.translate('xpack.lens.editorFrame.optionalDimensionLabel', {
+                        defaultMessage: 'Optional',
+                      })}
+                    </EuiText>
+                  ) : null
+                }
                 labelType="legend"
                 key={group.groupId}
                 isInvalid={isMissing}

diff --git a/...plugins/lens/public/indexpattern_datasource/dimension_panel/dimensions_editor_helpers.tsx b/...plugins/lens/public/indexpattern_datasource/dimension_panel/dimensions_editor_helpers.tsx
@@ -161,7 +161,12 @@ export const DimensionEditorTabs = ({ tabs }: { tabs: DimensionEditorTab[] }) =>
     >
       {tabs.map(({ id, enabled, state, onClick, label }) => {
         return enabled ? (
-          <EuiTab isSelected={state} data-test-subj={`lens-dimensionTabs-${id}`} onClick={onClick}>
+          <EuiTab
+            key={id}
+            isSelected={state}
+            data-test-subj={`lens-dimensionTabs-${id}`}
+            onClick={onClick}
+          >
             {label}
           </EuiTab>
         ) : null;

diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx
@@ -106,6 +106,7 @@ export const metricVisualization: Visualization<MetricState> = {
           accessors: props.state.accessor ? [{ columnId: props.state.accessor }] : [],
           supportsMoreColumns: !props.state.accessor,
           filterOperations: (op: OperationMetadata) => !op.isBucketed && op.dataType === 'number',
+          required: true,
         },
       ],
     };