opensearch-project / dashboards-flow-framework

A UI designer for constructing AI applications with OpenSearch
Apache License 2.0
9 stars 8 forks source link

[FEATURE] Add Experimental badges and messaging #461

Closed kamingleung closed 2 hours ago

kamingleung commented 3 weeks ago

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. image

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) image

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

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

Display only the beaker icon in the navigation (no badge component) image When users hover over the OpenSearch Flow item, we should update the native browser label to OpenSearch Flow – Experimental feature image

ohltyler commented 1 week ago

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:

@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 commented 1 week ago

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

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: image

The new Visualize: image

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

kgcreative commented 3 days ago

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

ohltyler commented 23 hours ago

Latest update:

ohltyler commented 23 hours ago

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

kamingleung commented 18 hours ago

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.