-
-
-
- Integrations
+ {newNavigation ? (
+
+ View integrations with preconfigured assets immediately within your OpenSearch setup.{' '}
+
+ Learn more
+
+
+ }
+ components={[ setShowUploadFlyout(true)} />]}
+ />
+ ) : (
+ <>
+
+
+
+ Integrations
+
+
+
+ setShowUploadFlyout(true)} />
+
+
+
+ View integrations with preconfigured assets immediately within your OpenSearch setup.{' '}
+
+ Learn more
+
-
-
- setShowUploadFlyout(true)} />
-
-
-
-
- View integrations with preconfigured assets immediately within your OpenSearch setup.{' '}
-
- Learn more
-
-
-
+
+ )}
+ {!newNavigation &&
}
{renderTabs()}
diff --git a/public/components/integrations/components/integration_overview_panel.tsx b/public/components/integrations/components/integration_overview_panel.tsx
index 47698e7e74..29f7155b6a 100644
--- a/public/components/integrations/components/integration_overview_panel.tsx
+++ b/public/components/integrations/components/integration_overview_panel.tsx
@@ -4,65 +4,76 @@
*/
import {
- EuiButton,
EuiFlexGroup,
EuiFlexItem,
EuiPageContentHeaderSection,
EuiPageHeader,
EuiPageHeaderSection,
- EuiSpacer,
- EuiText,
+ EuiTitle,
+ EuiSmallButton,
} from '@elastic/eui';
import React from 'react';
+import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_headerControl';
+import { coreRefs } from '../../../framework/core_refs';
-const pageStyles: CSS.Properties = {
+const newNavigation = coreRefs.chrome?.navGroup.getNavGroupEnabled();
+
+const pageStyles = {
width: '100%',
- justifyContent: 'spaceBetween',
};
export function IntegrationOverview(props: any) {
const config = props.integration;
- return (
-
-
+
+ const buttons = (
+ <>
+
+ {
+ props.setUpSample();
+ }}
+ disabled={props.loading}
+ data-test-subj="try-it-button"
+ data-click-metric-element="integrations.create_from_try_it"
+ >
+ Try It
+
+
+
+ {
+ props.showFlyout(config.name);
+ }}
+ fill
+ disabled={props.loading}
+ data-test-subj="add-integration-button"
+ data-click-metric-element="integrations.set_up"
+ >
+ Set up integration
+
+
+
+ );
+
+ return newNavigation ? (
+
+ {buttons}
+ ,
+ ]}
+ />
+ ) : (
+
-
- {config.displayName || config.name}
-
-
-
- {
- props.setUpSample();
- }}
- disabled={props.loading}
- data-test-subj="try-it-button"
- data-click-metric-element="integrations.create_from_try_it"
- >
- Try It
-
-
-
- {
- props.showFlyout(config.name);
- }}
- fill
- disabled={props.loading}
- data-test-subj="add-integration-button"
- data-click-metric-element="integrations.set_up"
- >
- Set Up
-
+
+ {config.displayName || config.name}
+
+ {buttons}
diff --git a/public/components/integrations/components/integration_screenshots_panel.tsx b/public/components/integrations/components/integration_screenshots_panel.tsx
index 93866383f3..b346df4ea9 100644
--- a/public/components/integrations/components/integration_screenshots_panel.tsx
+++ b/public/components/integrations/components/integration_screenshots_panel.tsx
@@ -20,7 +20,7 @@ export function IntegrationScreenshots(props: any) {
Screenshots
-
+
{screenshots?.map((screenshot: { path: string; annotation?: string }) => {
return (
diff --git a/public/components/integrations/components/setup_integration_inputs.tsx b/public/components/integrations/components/setup_integration_inputs.tsx
index b78472bacd..2fd2402002 100644
--- a/public/components/integrations/components/setup_integration_inputs.tsx
+++ b/public/components/integrations/components/setup_integration_inputs.tsx
@@ -423,29 +423,29 @@ export function SetupIntegrationFormInputs(props: IntegrationConfigProps) {
return (
- Set Up Integration
+ Set Up Integration
-
+
{setupCallout.show ? (
{setupCallout.text}
) : null}
-
+
Integration Details
-
+
-
+
Integration Connection
-
+
{config.connectionType === 's3' ? (
<>
-
+
Query Fields
@@ -471,7 +471,7 @@ export function SetupIntegrationFormInputs(props: IntegrationConfigProps) {
-
+
{integration.workflows ? (
<>
-
+
Integration Resources
@@ -492,7 +492,7 @@ export function SetupIntegrationFormInputs(props: IntegrationConfigProps) {
-
+
{formattedBadgeContent},
+ renderComponent: isBadgeReactElement ? (
+ {badgeContent}
+ ) : (
+ {`(${badgeContent})`}
+ ), // Render based on type
},
]}
/>