Expose experimental badge on Workflow Details page (new and old) (#485)

Signed-off-by: Tyler Ohlsen <[email protected]>
opensearch-project · Nov 19, 2024 · 6d78369 · 6d78369
1 parent ebc01eb
commit 6d78369
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/public/pages/workflow_detail/components/header.tsx b/public/pages/workflow_detail/components/header.tsx
@@ -47,13 +47,14 @@ import {
 import { DataSourceViewConfig } from '../../../../../../src/plugins/data_source_management/public';
 import { HeaderVariant } from '../../../../../../src/core/public';
 import {
-  TopNavControlTextData,
+  TopNavControlData,
   TopNavMenuIconData,
 } from '../../../../../../src/plugins/navigation/public';
 import { MountPoint } from '../../../../../../src/core/public';
 import { getWorkflow, updateWorkflow, useAppDispatch } from '../../../store';
 import { useFormikContext } from 'formik';
 import { isEmpty, isEqual } from 'lodash';
+import { ExperimentalBadge } from '../../../general_components';
 
 interface WorkflowDetailHeaderProps {
   workflow?: Workflow;
@@ -341,11 +342,19 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
           <HeaderControl
             setMountPoint={setAppRightControls}
             controls={[
+              {
+                renderComponent: (
+                  <ExperimentalBadge
+                    popoverEnabled={true}
+                    popoverAnchorPosition="downLeft"
+                  />
+                ),
+              },
               {
                 text: `Last updated: ${workflowLastUpdated}`,
                 color: 'subdued',
                 className: 'workflow-detail-last-updated',
-              } as TopNavControlTextData,
+              } as TopNavControlData,
             ]}
           />
         </>
@@ -402,6 +411,10 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
               <EuiText color="subdued" size="s">
                 {`Last updated: ${workflowLastUpdated}`}
               </EuiText>,
+              <ExperimentalBadge
+                popoverEnabled={true}
+                popoverAnchorPosition="downLeft"
+              />,
             ]}
             bottomBorder={false}
             rightSideGroupProps={{