[Lens] Handle missing fields gracefully

[flash1293]

Fixes #73843

This PR addresses the case of fields in an index pattern disappearing or changing their properties, rendering existing visualization invalid.

It's caught in two places:

• No datasource suggestions will get generated if there are broken references
• Broken operations are highlighted in the UI:

This gives the user to recover visualizations from this pretty common type of error instead of having to recreate the complete visualization from scratch.

Testing

• Create a mapping for an index

PUT myindex
{
  "mappings": {
    "properties": {
      "myfield": {
        "type": "keyword"
      },
      "myotherfield": {
        "type": "keyword"
      }
    }
  }
}

• Create an indexpattern for this index
• Create a Lens visualization based on myfield (even if there is no data)
• Change the mapping

DELETE myindex
PUT myindex
{
  "mappings": {
    "properties": {
      "myfield": {
        "type": "text"
      },
      "myotherfield": {
        "type": "keyword"
      }
    }
  } 
}

• Refresh the index pattern
• Access the visualization

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[cchaos]

This is a much more graceful way to handle this edge case, thank you. I have a couple suggestions for the UI implementation.

In the config panel, don't replace the name of the configuration, keep showing the original (especially if they've modified the default) and just add the alert icon with a tooltip.

In the dimension editor, don't change the text of the selected item. Use EuiFormRow's error text to explain the problem and add isInvalid to it and the input.

[mbondyra]

@elasticmachine merge upstream

[mbondyra]

Hi @flash1293, I found two additional things that should be fixed:

1. When you open new dimension editor (eg while having misconfigured field in x dimension and trying to add break down by), it doesn't display the dimension editor correctly, and throws an error in the console from BucketNestingEditor:
   
   That's because used displayName comes from field of IndexPattern that's not available anymore. We could fix it by passing currentIndexPattern as a prop and with adding a check in lines 42 and 50

      fieldName:
        hasField(c) && !fieldIsInvalid(c.sourceField, c.operationType, indexPattern)
          ? fieldMap[c.sourceField].displayName
          : c.sourceField,

const fieldName =
    hasField(column) && !fieldIsInvalid(column.sourceField, column.operationType, indexPattern)
      ? fieldMap[column.sourceField].displayName
      : column.sourceField;

[mbondyra]

2. To change the styles to hover the whole element, you could add a class anchorClassName="lnsLayerPanel__anchor" to tooltip. I also adjusted the code to Caroline's suggestions about anchor, so if you could replace this if with:

 if (currentFieldIsInvalid) {
    return (
      <EuiToolTip
        content={
          <p>
            {i18n.translate('xpack.lens.configure.invalidConfigTooltip', {
              defaultMessage: 'Invalid configuration.',
            })}
            <br />
            {i18n.translate('xpack.lens.configure.invalidConfigTooltipClick', {
              defaultMessage: 'Click for more details.',
            })}
          </p>
        }
        anchorClassName="lnsLayerPanel__anchor"
      >
        <EuiLink
          color="danger"
          id={columnId}
          className="lnsLayerPanel__triggerLink"
          onClick={props.onClick}
          data-test-subj="lns-dimensionTrigger"
          aria-label={i18n.translate('xpack.lens.configure.editConfig', {
            defaultMessage: 'Edit configuration',
          })}
          title={i18n.translate('xpack.lens.configure.editConfig', {
            defaultMessage: 'Edit configuration',
          })}
        >
          <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
            <EuiFlexItem grow={false}>
              <EuiIcon size="s" type="alert" />
            </EuiFlexItem>
            <EuiFlexItem grow={true}>{selectedColumn.sourceField}</EuiFlexItem>
          </EuiFlexGroup>
        </EuiLink>
      </EuiToolTip>
    );
  }

That replaces this:

with:

[flash1293]

Thanks @cchaos and @mbondyra , adjusted the PR. This is how it looks now:

[cchaos]

Screenshots look great to me 👍

[flash1293]

@elasticmachine merge upstream

[flash1293]

@elasticmachine merge upstream

[mbondyra]

Tested on Chrome/FF and reviewed. The design looks good but the BucketNestingEditor error is still here. Could you take a second look at my comment @flash1293 please?

[flash1293]

@mbondyra Misunderstood your comment the first time, sorry. It should be fixed now.

[mbondyra]

Re-tested on FF, all works as expected, thanks! :)

[mbondyra]

much better than what I suggested! 👏

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 44acc40

Metrics [docs]

async chunks size

id	before	after	diff
lens	995.6KB	999.9KB	+4.3KB

History

• 💚 Build #78650 succeeded 44acc40
• 💚 Build #78307 succeeded f6c54d7
• 💔 Build #78261 failed b6258c3
• 💚 Build #77347 succeeded e5db654
• 💚 Build #76489 succeeded 7d10c4f

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream