Skip to content

Commit

Permalink
[Backport 2.x] Add integration installation to data sources flyout (o…
Browse files Browse the repository at this point in the history 
…pensearch-project#1568)

* Allow rendering install in flyout



* Activate moving between integration browser and install view



* Lock flyout install to S3



* Autofill and lock data source name in install flyout



* Update cypress card navigation test



---------


(cherry picked from commit 6f75c96)

Signed-off-by: Simeon Widdis <sawiddis@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
@opensearch-trigger-bot @github-actions
opensearch-trigger-bot[bot] and github-actions[bot] authored Mar 19, 2024
1 parent 668a968 commit e916ef2
Show file tree
Hide file tree
Showing 14 changed files with 1,006 additions and 847 deletions.
2 changes: 1 addition & 1 deletion .cypress/integration/integrations_test/integrations.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
/* eslint-disable jest/expect-expect */

/// <reference types="cypress" />

Expand Down Expand Up @@ -39,6 +38,7 @@ describe('Integrations plugin', () => {
moveToIntegrationsHome();
cy.get('[data-test-subj="integration_card_nginx"]').click();
cy.url().should('include', '/available/nginx');
cy.get('[data-test-subj="eventHomePageTitle"').should('contain', 'Nginx');
});

it('Navigates to nginx page and asserts the page to be as expected', () => {
Expand Down
49 changes: 24 additions & 25 deletions ...datasources/components/__tests__/__snapshots__/installed_integrations_table.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

exports[`Installed Integrations Table test Renders the empty installed integrations table 1`] = `
<InstalledIntegrationsTable
datasourceName="test"
datasourceType="S3GLUE"
integrations={Array []}
>
Expand Down Expand Up @@ -928,6 +929,7 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
}
}
closeFlyout={[Function]}
datasourceName="test"
datasourceType="S3GLUE"
setAvailableIntegrations={[Function]}
>
Expand Down Expand Up @@ -1147,14 +1149,13 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
<div
class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
>
<a
<button
class="euiLink euiLink--primary"
data-test-subj="sample2IntegrationLink"
href="/app/integrations#/available/sample2"
rel="noreferrer"
type="button"
>
sample2
</a>
</button>
</div>
</td>
<td
Expand Down Expand Up @@ -1636,14 +1637,13 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
<div
class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
>
<a
<button
class="euiLink euiLink--primary"
data-test-subj="sample2IntegrationLink"
href="/app/integrations#/available/sample2"
rel="noreferrer"
type="button"
>
sample2
</a>
</button>
</div>
</td>
<td
Expand Down Expand Up @@ -2057,14 +2057,13 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
<div
class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
>
<a
<button
class="euiLink euiLink--primary"
data-test-subj="sample2IntegrationLink"
href="/app/integrations#/available/sample2"
rel="noreferrer"
type="button"
>
sample2
</a>
</button>
</div>
</td>
<td
Expand Down Expand Up @@ -2478,14 +2477,13 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
<div
class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
>
<a
<button
class="euiLink euiLink--primary"
data-test-subj="sample2IntegrationLink"
href="/app/integrations#/available/sample2"
rel="noreferrer"
type="button"
>
sample2
</a>
</button>
</div>
</td>
<td
Expand Down Expand Up @@ -2887,14 +2885,13 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
<div
class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
>
<a
<button
class="euiLink euiLink--primary"
data-test-subj="sample2IntegrationLink"
href="/app/integrations#/available/sample2"
rel="noreferrer"
type="button"
>
sample2
</a>
</button>
</div>
</td>
<td
Expand Down Expand Up @@ -3229,6 +3226,7 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
}
isCardView={true}
loading={false}
setInstallingIntegration={[Function]}
>
<EuiPageContent
id="availableIntegrationsArea"
Expand Down Expand Up @@ -3817,17 +3815,18 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
<EuiLink
className=""
data-test-subj="sample2IntegrationLink"
href="/app/integrations#/available/sample2"
key=".0"
onClick={[Function]}
>
<a
<button
className="euiLink euiLink--primary"
data-test-subj="sample2IntegrationLink"
href="/app/integrations#/available/sample2"
rel="noreferrer"
disabled={false}
onClick={[Function]}
type="button"
>
sample2
</a>
</button>
</EuiLink>
</div>
</td>
Expand Down
5 changes: 4 additions & 1 deletion public/components/datasources/components/__tests__/installed_integrations_table.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ describe('Installed Integrations Table test', () => {
});

it('Renders the empty installed integrations table', async () => {
const wrapper = mount(<InstalledIntegrationsTable integrations={[]} datasourceType="S3GLUE" />);
const wrapper = mount(
<InstalledIntegrationsTable integrations={[]} datasourceType="S3GLUE" datasourceName="test" />
);

expect(wrapper).toMatchSnapshot();
});
Expand All @@ -42,6 +44,7 @@ describe('Installed Integrations Table test', () => {
setAvailableIntegrations={() => {}}
closeFlyout={() => {}}
datasourceType="S3GLUE"
datasourceName="test"
/>
);

Expand Down
1 change: 1 addition & 0 deletions public/components/datasources/components/manage/data_connection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,7 @@ export const DataConnection = (props: any) => {
<InstalledIntegrationsTable
integrations={dataSourceIntegrations}
datasourceType={datasourceDetails.connector}
datasourceName={datasourceDetails.name}
/>
),
},
Expand Down
31 changes: 30 additions & 1 deletion ...ic/components/datasources/components/manage/integrations/installed_integrations_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
} from '@elastic/eui';
import _ from 'lodash';
import { IntegrationHealthBadge } from '../../../../integrations/components/added_integration';
import { SetupIntegrationForm } from '../../../../integrations/components/setup_integration';
import { coreRefs } from '../../../../../framework/core_refs';
import { basePathLink } from '../../../../../../common/utils/shared';
import { AvailableIntegrationsTable } from '../../../../integrations/components/available_integration_table';
Expand Down Expand Up @@ -127,11 +128,13 @@ export const InstallIntegrationFlyout = ({
setAvailableIntegrations,
closeFlyout,
datasourceType,
datasourceName,
}: {
availableIntegrations: AvailableIntegrationsList;
setAvailableIntegrations: (value: AvailableIntegrationsList) => void;
closeFlyout: () => void;
datasourceType: DatasourceType;
datasourceName: string;
}) => {
useEffect(() => {
if (!coreRefs.http) {
Expand All @@ -148,19 +151,44 @@ export const InstallIntegrationFlyout = ({
),
};

const [installingIntegration, setInstallingIntegration] = useState<string | null>(null);

return (
<EuiFlyout onClose={closeFlyout}>
<AvailableIntegrationsTable loading={false} data={s3FilteredIntegrations} isCardView={true} />
{installingIntegration === null ? (
<AvailableIntegrationsTable
loading={false}
data={s3FilteredIntegrations}
isCardView={true}
setInstallingIntegration={setInstallingIntegration}
/>
) : (
<SetupIntegrationForm
integration={installingIntegration}
unsetIntegration={() => setInstallingIntegration(null)}
renderType="flyout"
forceConnection={
datasourceType === 'S3GLUE'
? {
name: datasourceName,
type: 's3',
}
: undefined
}
/>
)}
</EuiFlyout>
);
};

export const InstalledIntegrationsTable = ({
integrations,
datasourceType,
datasourceName,
}: {
integrations: IntegrationInstanceResult[];
datasourceType: DatasourceType;
datasourceName: string;
}) => {
const [query, setQuery] = useState('');
const filteredIntegrations = integrations
Expand Down Expand Up @@ -215,6 +243,7 @@ export const InstalledIntegrationsTable = ({
setAvailableIntegrations={setAvailableIntegrations}
closeFlyout={() => setShowAvailableFlyout(false)}
datasourceType={datasourceType}
datasourceName={datasourceName}
/>
) : null}
</>
Expand Down
4 changes: 2 additions & 2 deletions public/components/datasources/components/new/new_datasource_card_view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@ export function NewDatasourceCardView() {
return (
<>
<EuiFlexGroup gutterSize="l" style={{ flexWrap: 'wrap' }}>
{datasources.map((i, v) => {
{datasources.map((i) => {
return (
<EuiFlexItem key={v} style={{ minWidth: '14rem', maxWidth: '14rem' }}>
<EuiFlexItem key={i.name} style={{ minWidth: '14rem', maxWidth: '14rem' }}>
<EuiCard
icon={i.displayIcon}
title={i.displayName}
Expand Down
46 changes: 37 additions & 9 deletions ...grations/components/__tests__/__snapshots__/available_integration_card_view.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -504,22 +504,50 @@ exports[`Available Integration Card View Test Renders nginx integration card vie
data-test-subj="integration_card_nginx"
description="Nginx HTTP server collector"
footer={<EuiBadgeGroup />}
onClick={[Function]}
href="/app/integrations#/available/nginx"
icon={
<img
alt=""
className="synopsisIcon"
src="/api/integrations/repository/nginx/static/logo.svg"
style={
Object {
"height": 100,
"width": 100,
}
}
/>
}
title="NginX Dashboard"
titleElement="span"
>
<EuiPanel
className="euiCard euiCard--centerAligned euiCard--isClickable"
className="euiCard euiCard--centerAligned euiCard--isClickable euiCard--hasIcon"
data-test-subj="integration_card_nginx"
element="div"
hasShadow={true}
onClick={[Function]}
>
<div
className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--centerAligned euiCard--isClickable"
className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--centerAligned euiCard--isClickable euiCard--hasIcon"
data-test-subj="integration_card_nginx"
onClick={[Function]}
>
<div
className="euiCard__top"
>
<img
alt=""
className="synopsisIcon euiCard__icon"
src="/api/integrations/repository/nginx/static/logo.svg"
style={
Object {
"height": 100,
"width": 100,
}
}
/>
</div>
<div
className="euiCard__content"
>
Expand All @@ -532,14 +560,14 @@ exports[`Available Integration Card View Test Renders nginx integration card vie
className="euiTitle euiTitle--small euiCard__title"
id="random_html_idTitle"
>
<button
aria-describedby=" random_html_idDescription"
className="euiCard__titleButton"
disabled={false}
onClick={[Function]}
<a
aria-describedby="random_html_idDescription"
className="euiCard__titleAnchor"
href="/app/integrations#/available/nginx"
rel="noreferrer"
>
NginX Dashboard
</button>
</a>
</span>
</EuiTitle>
<EuiText
Expand Down
Loading

0 comments on commit e916ef2

Please sign in to comment.