[FEATURE] Add Experimental badges and messaging

[kamingleung]

Is your feature request related to a problem?
We will first offer this feature as an Experimental Feature to gather users feedback and improvements. We will need to visually inform users this is Experimental and not ready for production use. We should offer a way for users to leave feedback as they try out the feature.

What solution would you like?
We will display an Experimental badge in selected areas, when users click on the badge, a popover will show a message:
OpenSearch Flow is experimental and should not be used in a production environment.. Clicking on the button Provide feedback on Github will open a new tab to this page, so users can provide feedback by creating an issue.

Display the badge AND popover in the following 3 areas:
For the badge, use OuiBetaBadge with the beaker icon

1. Search overview page (place badge on the OpenSearch Flow tile)
   

2. Project list/create page (place badge next to the header)
   

3. Inside a workflow (place badge next to the action buttons)
   

Display only the beaker icon in the navigation (no badge component)

When users hover over the OpenSearch Flow item, we should update the native browser label to
OpenSearch Flow – Experimental feature

[ohltyler]

I've encountered several issues with core OSD flexibility to enable these flags in many different places:

1. List/header page (useNewHomePage: true ONLY). The new UI header framework does not allow for an extra icon or React components to the right of the plugin name.
2. Inside a workflow page (useNewHomePage: true ONLY). The new UI header framework does not allow for an extra icon or React components to the right of the actions list.
3. In the navigation bar (both new AND old home page layouts). The navigation framework does not allow for icons to be visible. Tooltips do not work properly in old UI, and are not visible at all in new UI.

It looks like all of these will require some sort of framework enhancements in core OSD & the owners of the new header layouts to expose this sort of functionality.

To recap:

• overview page complete Add experimental badging I; update plugin name #472
• workflows page (old UI) complete Add experimental badging I; update plugin name #472
• workflows page (new UI) not possible
• workflow details page (old UI) not complete - we can add this next to the workflow title if we want?
• workflow details page (new UI) not possible
• navigation (old UI) icon + tooltips not possible
• navigation (new UI) icon + tooltips not possible

@kamingleung In the meantime I will open a PR with the changes possible to make today. Lmk your thoughts/priority on the other changes. Perhaps we can find a middleground and expose some labels somewhere else on the new UI, and I can open tracking issues in core OSD to address the gaps mentioned.

[kamingleung]

@AMoo-Miki
Do we supporting adding badging to the new page header, like this?

Are we able to add badging to the new Application Header? Perhaps we can add sections similar to Visualize?
Proposed Fractal Application Header with Experimental Badge:

The new Visualize:

cc. @lauralexis @virajsanghvi – We may want to consider supporting similar patterns within our OUI components in the future.

[kgcreative]

I think we need to add a prop to page header for isExperimental=true which allows you to pass the right values.

[ohltyler]

Latest update:

• overview page complete Add experimental badging I; update plugin name #472
• workflows page (old UI) complete Add experimental badging I; update plugin name #472
• workflows page (new UI) complete Adding experimental badge in header in Workflows list page #496
• workflow details page (old UI) complete Show experimental badge on Workflow Details page (new and old) #485
• workflow details page (new UI) complete Show experimental badge on Workflow Details page (new and old) #485
• navigation (old UI) icon + tooltips not possible
• navigation (new UI) icon + tooltips not possible

[ohltyler]

As discussed, navigation is not possible with the current framework. Please reopen or add a standalone issue to close on this particular part.

[kamingleung]

As discussed, navigation is not possible with the current framework. Please reopen or add a standalone issue to close on this particular part.

Got it. LGTM on the latest updates. This is a temporary solution. We will open a new issue once we have the components with props to support experimental badges.