From 38bc4ed3abd70d5634ebaaad96cb579db8c2bf70 Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Wed, 28 Aug 2024 16:44:47 -0700 Subject: [PATCH] Page Header] New page header for integrations and UI updates (#2103) (#2107) * new headers and ui changes for integrations * update snapshots and test * update display name for integration breadcrumb for new nav rendering --------- (cherry picked from commit c655eb5f0e71cc1cb234ca12ddfc182c5b924176) Signed-off-by: Adam Tackett Signed-off-by: github-actions[bot] Co-authored-by: github-actions[bot] Co-authored-by: Adam Tackett --- .../__tests__/data_connection.test.tsx | 3 + .../added_integration.test.tsx.snap | 350 +++++++++--------- .../added_integration_table.test.tsx.snap | 62 ++-- .../integration_details.test.tsx.snap | 6 +- .../integration_fields.test.tsx.snap | 25 +- .../integration_header.test.tsx.snap | 217 ++++++----- .../setup_integration.test.tsx.snap | 34 +- .../setup_integration_inputs.test.tsx.snap | 104 ++++-- .../components/added_integration.tsx | 170 +++++---- .../components/added_integration_table.tsx | 6 +- .../integrations/components/integration.tsx | 12 +- .../components/integration_assets_panel.tsx | 4 +- .../components/integration_details_panel.tsx | 2 +- .../components/integration_fields_panel.tsx | 3 +- .../components/integration_header.tsx | 109 +++--- .../components/integration_overview_panel.tsx | 93 +++-- .../integration_screenshots_panel.tsx | 2 +- .../components/setup_integration_inputs.tsx | 20 +- public/plugin_headerControl.tsx | 8 +- 19 files changed, 675 insertions(+), 555 deletions(-) diff --git a/public/components/datasources/components/__tests__/data_connection.test.tsx b/public/components/datasources/components/__tests__/data_connection.test.tsx index 51bfe867c..ea53e119a 100644 --- a/public/components/datasources/components/__tests__/data_connection.test.tsx +++ b/public/components/datasources/components/__tests__/data_connection.test.tsx @@ -28,6 +28,9 @@ jest.mock('../../../../../public/framework/core_refs', () => ({ coreRefs: { chrome: { setBreadcrumbs: jest.fn(), + navGroup: { + getNavGroupEnabled: jest.fn().mockReturnValue(false), + }, }, http: { get: jest.fn(), diff --git a/public/components/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap b/public/components/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap index 6b74bdb82..db2286ad8 100644 --- a/public/components/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap +++ b/public/components/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap @@ -60,13 +60,6 @@ exports[`Added Integration View Test Renders added integration view using dummy
- -
- - -
-
- +
-
-
-

+ +
+

+

+

- -
- - -
- - + +
-
- +
-
- - - - - - - -
- - -
- Unknown + + + + + + +
+ + +
+ Unknown +
+
- +
- -
- - + + +
+
- +
- + @@ -292,84 +282,67 @@ exports[`Added Integration View Test Renders added integration view using dummy
- +
+ + + + +
+ +
+
+

+ Template +

+
+ + + - - + +
+ + +
+
- -
- -
-

- Template -

-
- - - - - -
- -
-

- Date Added -

-
- - -
- - -
- -
- +

+ Date Added +

- + + +
+
- - - - + +
+ +
@@ -436,8 +409,10 @@ exports[`Added Integration View Test Renders added integration view using dummy search={ Object { "box": Object { + "compressed": true, "incremental": true, }, + "compressed": true, "filters": Array [ Object { "field": "assetType", @@ -481,9 +456,11 @@ exports[`Added Integration View Test Renders added integration view using dummy
@@ -591,7 +569,7 @@ exports[`Added Integration View Test Renders added integration view using dummy className="euiFormControlLayoutIcons" >
- +
diff --git a/public/components/integrations/components/__tests__/__snapshots__/added_integration_table.test.tsx.snap b/public/components/integrations/components/__tests__/__snapshots__/added_integration_table.test.tsx.snap index e4286b273..6d9ea2848 100644 --- a/public/components/integrations/components/__tests__/__snapshots__/added_integration_table.test.tsx.snap +++ b/public/components/integrations/components/__tests__/__snapshots__/added_integration_table.test.tsx.snap @@ -170,10 +170,12 @@ exports[`Added Integration Table View Test Renders added integration table view search={ Object { "box": Object { + "compressed": true, "incremental": true, }, "filters": Array [ Object { + "compressed": true, "field": "templateName", "multiSelect": false, "name": "Type", @@ -195,12 +197,14 @@ exports[`Added Integration Table View Test Renders added integration table view
@@ -285,7 +290,7 @@ exports[`Added Integration Table View Test Renders added integration table view className="euiFormControlLayoutIcons" >
@@ -1791,7 +1805,7 @@ exports[`Added Integration Table View Test Renders added integration table view className="euiFormControlLayoutIcons" >
diff --git a/public/components/integrations/components/__tests__/__snapshots__/integration_fields.test.tsx.snap b/public/components/integrations/components/__tests__/__snapshots__/integration_fields.test.tsx.snap index 9617512f0..5c210c6a0 100644 --- a/public/components/integrations/components/__tests__/__snapshots__/integration_fields.test.tsx.snap +++ b/public/components/integrations/components/__tests__/__snapshots__/integration_fields.test.tsx.snap @@ -16,10 +16,10 @@ exports[`Available Integration Table View Test Renders nginx integration table v - -
-
-

+

Set Up Integration -

+
- +
- +
@@ -95,9 +99,11 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
- +
- +
@@ -239,9 +247,11 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
- +
-

+

Set Up Integration -

+ - - + +

Integration Details

- + - +

Integration Connection

- + - +

Query Fields @@ -135,7 +147,9 @@ exports[`Integration Setup Inputs Renders the S3 connector form as expected 1`]

- + - +

Integration Resources @@ -203,7 +219,9 @@ exports[`Integration Setup Inputs Renders the S3 connector form as expected 1`]

- + -

+

Set Up Integration -

+

- - + +

Integration Details

- + - +

Integration Connection

- + - +

Query Fields @@ -388,7 +418,9 @@ exports[`Integration Setup Inputs Renders the S3 connector form without workflow

- + - +

Integration Resources @@ -456,7 +490,9 @@ exports[`Integration Setup Inputs Renders the S3 connector form without workflow

- + -

+

Set Up Integration -

+

- - + +

Integration Details

- + - +

Integration Connection

- + { switch (status) { @@ -127,71 +131,108 @@ export function AddedIntegration(props: AddedIntegrationProps) { function AddedOverview(overviewProps: { data: { data?: IntegrationInstanceResult } }) { const { data } = overviewProps.data; - return ( - - {dataSourceEnabled && ( - - )} - - - - - - - -

{data?.name}

- - - - - - + const badgeContent = ; + const deleteButton = ( + { + activateDeleteModal(data?.name); + }} + data-test-subj="deleteInstanceButton" + /> + ); + + const headerContent = ( + + + + - { - activateDeleteModal(data?.name); - }} - data-test-subj="deleteInstanceButton" - /> + +

{data?.name}

+ + {badgeContent} - - - - - -

Template

- - - {data?.templateName} - - - -

Date Added

- - - {data?.creationDate?.split('T')[0]} - - - - + + {deleteButton} + + + ); + + const additionalInfo = ( + + + +

Template

+ + {data?.templateName} + + + +

Date Added

+ + {data?.creationDate?.split('T')[0]} + + + ); + + return newNavigation ? ( + <> + } + components={[ + ...(dataSourceEnabled + ? [ + , + ] + : []), + deleteButton, + ]} + /> + {additionalInfo} + + ) : ( + <> + + {dataSourceEnabled && ( + + )} + + {headerContent} + + + {additionalInfo} + ); } @@ -272,6 +313,7 @@ export function AddedIntegration(props: AddedIntegrationProps) { const search = { box: { incremental: true, + compressed: true, }, filters: [ { @@ -286,6 +328,7 @@ export function AddedIntegration(props: AddedIntegrationProps) { })), }, ], + compressed: true, }; const tableColumns = [ @@ -333,11 +376,10 @@ export function AddedIntegration(props: AddedIntegrationProps) { return ( - {AddedOverview({ data: stateData })} - + {AddedAssets({ data: stateData })} - + {isModalVisible && modalLayout} diff --git a/public/components/integrations/components/added_integration_table.tsx b/public/components/integrations/components/added_integration_table.tsx index ce23a9d6d..741c21ffa 100644 --- a/public/components/integrations/components/added_integration_table.tsx +++ b/public/components/integrations/components/added_integration_table.tsx @@ -149,6 +149,7 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) { const search = { box: { incremental: true, + compressed: true, }, filters: [ { @@ -177,7 +178,10 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) { }, ] : []), - ], + ].map((filter) => ({ + ...filter, + compressed: true, + })), }; const entries = props.data.hits.map((integration) => { diff --git a/public/components/integrations/components/integration.tsx b/public/components/integrations/components/integration.tsx index 9ae5f3fc5..f8a299880 100644 --- a/public/components/integrations/components/integration.tsx +++ b/public/components/integrations/components/integration.tsx @@ -63,12 +63,12 @@ export function Integration(props: AvailableIntegrationProps) { href: '#/', }, { - text: integrationTemplateId, + text: integration.displayName || integration.name || '...', href: `#/available/${integrationTemplateId}`, }, ]); handleDataRequest(); - }, [integrationTemplateId]); + }, [integrationTemplateId, integration.name]); async function handleDataRequest() { // TODO fill in ID request here @@ -227,7 +227,6 @@ export function Integration(props: AvailableIntegrationProps) { return ( - { @@ -251,11 +250,10 @@ export function Integration(props: AvailableIntegrationProps) { }} loading={loading} /> - {IntegrationDetails({ integration })} - + {IntegrationScreenshots({ integration, http })} - + {renderTabs()} @@ -263,7 +261,7 @@ export function Integration(props: AvailableIntegrationProps) { {selectedTabId === 'assets' ? IntegrationAssets({ integration, integrationAssets }) : IntegrationFields({ integration, integrationMapping })} - + {modal} diff --git a/public/components/integrations/components/integration_assets_panel.tsx b/public/components/integrations/components/integration_assets_panel.tsx index 89c5c86ac..e1baae54c 100644 --- a/public/components/integrations/components/integration_assets_panel.tsx +++ b/public/components/integrations/components/integration_assets_panel.tsx @@ -25,6 +25,7 @@ export function IntegrationAssets(props: { const search = { box: { incremental: true, + compressed: true, }, filters: [ { @@ -39,6 +40,7 @@ export function IntegrationAssets(props: { })), }, ], + compressed: true, }; const tableColumns = [ @@ -86,7 +88,7 @@ export function IntegrationAssets(props: {

Assets

 - +

Details

- + diff --git a/public/components/integrations/components/integration_fields_panel.tsx b/public/components/integrations/components/integration_fields_panel.tsx index 77b743e0b..1b342ea33 100644 --- a/public/components/integrations/components/integration_fields_panel.tsx +++ b/public/components/integrations/components/integration_fields_panel.tsx @@ -21,6 +21,7 @@ export function IntegrationFields(props: any) { const search = { box: { incremental: true, + compressed: true, }, }; @@ -96,7 +97,7 @@ export function IntegrationFields(props: any) {

Fields

 - + void }) => { - const [isPopoverOpen, setPopover] = useState(false); - - const closePopover = () => { - setPopover(false); - }; - - const onButtonClick = () => { - setPopover((isOpen) => !isOpen); - }; +const newNavigation = coreRefs.chrome?.navGroup.getNavGroupEnabled(); - const items = [ - { - closePopover(); // If the popover isn't closed, it overlays over the flyout - onShowUpload(); - }} - > - Upload Integrations - , - View Catalog, - ]; - const button = ( - - Catalog - - ); +export const IntegrationHeaderActions = ({ onShowUpload }: { onShowUpload: () => void }) => { return ( - - - + + + + View Catalog + + + + + Upload Integration + + + ); }; @@ -104,24 +84,39 @@ export const IntegrationHeader = () => { return (
- - - -

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 47698e7e7..29f7155b6 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 93866383f..b346df4ea 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 b78472bac..2fd240200 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 }, ]} />