[Canvas][Labs] Integrate Labs Service into Canvas

[clintandrewhall]

Summary

This PR builds on #95435 by:

• adding an Advanced Setting to show/hide the Canvas Labs button;
• adding a menu control to trigger the flyout;
• adding a check for the ability to set Advanced Settings, (and disabling the Kibana switch if the ability isn't available);
• fixing a few bugs around the React.lazy loader.

I fully expect @ryankeairns and @poffdeluxe to have some feedback/improvements around the menu item. I considered having a menu popover with some explanation text, a button to open labs, etc... perhaps even a small table of which projects have an override? Pulls accepted!

We'll also need to decide whether this change should be backported to 7.13 or planned for 7.14.

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[clintandrewhall]

@elasticmachine merge upstream

[ryankeairns]

@clintandrewhall just so that I'm clear, we're checking the interaction and UI, but the actual changing of the toolbar is not all hooked up, correct? (i.e. I don't see the toolbar change after refresh)

I'll keep poking at it, but I generally like the menu link approach you've taken here and the badge/count is nice.

[clintandrewhall]

@ryankeairns That's correct, there's no actual project at the moment, it's just there more as a placeholder. This PR is all about the UI and interaction... we'll create real projects shortly thereafter.

[ryankeairns]

@clintandrewhall here's a quick design PR with some minor adjustments that align closer to other parts of Kibana. I probably missed an i18n translation 😬

👉 clintandrewhall#21

Project list item (top) / aligns to Advanced settings design (bottom)

Close link added to footer

[clintandrewhall]

Thank you @ryankeairns !!

[clintandrewhall]

@elasticmachine merge upstream

[ryankeairns]

@clintandrewhall regarding the text to describe what Labs is - I would place that in the flyout header just below the Labs projects title. This seems like a natural fit/is a common pattern and means a single menu click still opens the flyout.

It would look something like this...

...and can be achieved doing this...

        <EuiFlyoutHeader hasBorder>
          <EuiTitle size="m">
            <h2>
              <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
                <EuiFlexItem grow={false}>
                  <EuiIcon type="beaker" size="l" />
                </EuiFlexItem>
                <EuiFlexItem>{strings.getTitleLabel()}</EuiFlexItem>
              </EuiFlexGroup>
            </h2>
          </EuiTitle>
          <EuiSpacer size="s" />
          <EuiText size="s" color="subdued">
            <p>Text description about the Labs feature and how it is used. Might link to the advanced setting for toggling this off/on.</p>
          </EuiText>
        </EuiFlyoutHeader>

[poffdeluxe]

I love it! I tested this out locally and couldn't find any issues

[clintandrewhall]

@elasticmachine merge upstream

[cqliu1]

LGTM 👍 I've just got a couple questions that don't block merging this PR.

Should we remove the unified toolbar setting for now and then reintroduce it when my Canvas toolbar stuff goes in?

Do we want to move this Labs button to the global nav along with the other WorkpadHeader buttons once I move that stuff to the global nav?

[afharo]

Telemetry changes LGTM!

[clintandrewhall]

@elasticmachine merge upstream

[clintandrewhall]

Should we remove the unified toolbar setting for now and then reintroduce it when my Canvas toolbar stuff goes in?

Yeah, I'll remove it. I left it there for testing purposes.

Do we want to move this Labs button to the global nav along with the other WorkpadHeader buttons once I move that stuff to the global nav?

Yes indeed!

[clintandrewhall]

@elasticmachine merge upstream

[clintandrewhall]

@ryankeairns 🚀 Opted to avoid the link, for now, since each solution will have a different advanced setting to show/hide Labs projects... we can do something more robust if it's adopted more broadly.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 4503c52
• Storybooks Preview

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
canvas	1086	1089	+3
presentationUtil	96	98	+2
total			+5

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
canvas	3	5	+2
presentationUtil	68	85	+17
total			+19

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
canvas	1.2MB	1.3MB	+1.8KB
presentationUtil	53.3KB	59.5KB	+6.1KB
total			+7.9KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
canvas	518.4KB	518.9KB	+520.0B
presentationUtil	37.7KB	40.3KB	+2.5KB
total			+3.1KB

Unknown metric groups

API count

id	before	after	diff
canvas	4	6	+2
presentationUtil	70	87	+17
total			+19

History

• 💔 Build #122543 failed f17fbcea27341254e8db8c3a2e102c2363b226ff
• 💔 Build #122529 failed 481a802
• 💔 Build #121124 failed 68e259e
• 💔 Build #120298 failed abc3f46
• 💚 Build #119491 succeeded 1fe7a63

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

[kibanamachine]

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.