Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add integration installation to data sources flyout #1561

Merged
merged 8 commits into from
Mar 19, 2024
Merged

Add integration installation to data sources flyout #1561

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8d2e949
Allow rendering install in flyout
Swiddis Mar 18, 2024
aa676f2
Activate moving between integration browser and install view
Swiddis Mar 18, 2024
f7754f7
Lock flyout install to S3
Swiddis Mar 18, 2024
eb11efe
Merge branch 'main' into feature/ds-install-in-flyout
Swiddis Mar 18, 2024
ba34469
Autofill and lock data source name in install flyout
Swiddis Mar 19, 2024
e1849d2
Merge branch 'main' into feature/ds-install-in-flyout
Swiddis Mar 19, 2024
a242276
Update cypress card navigation test
Swiddis Mar 19, 2024
a9101bf
Merge branch 'feature/ds-install-in-flyout' of https://github.com/Swi…
Swiddis Mar 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .cypress/integration/integrations_test/integrations.spec.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@

const renderCreateAccelerationFlyout = getRenderCreateAccelerationFlyout();

export const DataConnection = (props: any) => {

Check warning on line 52 in public/components/datasources/components/manage/data_connection.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
const { dataSource } = props;
const [datasourceDetails, setDatasourceDetails] = useState<DatasourceDetails>({
allowedRoles: [],
Expand Down Expand Up @@ -200,7 +200,7 @@
},
]);
fetchSelectedDatasource();
}, [chrome, http]);

Check warning on line 203 in public/components/datasources/components/manage/data_connection.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has missing dependencies: 'dataSource' and 'fetchSelectedDatasource'. Either include them or remove the dependency array

const tabs = [
{
Expand Down Expand Up @@ -232,6 +232,7 @@
<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
Open in desktop
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);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To allow installing in a flyout: We add the optional parameter setInstallingIntegration that is used to conditionally override the href to the setup page with an onClick that sets installingIntegration to the selected integration. (See diff in available_integration_table.tsx.)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: if we switch to use navigateToApp(), do we still need this?

Reference:
Implementation of the EuiLink for datasource:

dashboards-observability/public/components/datasources/components/manage/accelerations/flyout_modules/acceleration_details_tab.tsx

Line 107 in 31d506a

coreRefs?.application!.navigateToApp(observabilityDataConnectionsID, {


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
Open in desktop
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
Open in desktop
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
Loading