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

[Bug fix] Add conditional rendering for data connection page's tabs #1667

Merged
merged 3 commits into from
Apr 29, 2024
Merged

[Bug fix] Add conditional rendering for data connection page's tabs #1667

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
751fa52
Add conditional rendering for data connection page for tabs
RyanL1997 Apr 2, 2024
6ef7372
Add tests for conditional rendering of data connection tabs
RyanL1997 Apr 2, 2024
99cf58d
Reverse the if check for datasource for s3glue
RyanL1997 Apr 29, 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
127 changes: 41 additions & 86 deletions ...c/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,8 +359,8 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
>
<button
aria-controls="random_html_id"
aria-selected="true"
class="euiTab euiTab-isSelected"
aria-selected="false"
class="euiTab"
id="associated_objects"
role="tab"
type="button"
Expand Down Expand Up @@ -401,8 +401,8 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
</button>
<button
aria-controls="random_html_id"
aria-selected="false"
class="euiTab"
aria-selected="true"
class="euiTab euiTab-isSelected"
id="access_control"
role="tab"
type="button"
Expand All @@ -415,7 +415,7 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
</button>
</div>
<div
aria-labelledby="associated_objects"
aria-labelledby="access_control"
id="random_html_id"
role="tabpanel"
>
Expand Down Expand Up @@ -446,9 +446,18 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
<span
class="euiCallOutHeader__title"
>
Accelerations recommended for tables. Setup acceleration or configure integrations
Configurations may be managed elsewhere.
</span>
</div>
<div
class="euiText euiText--small"
>
<div
class="euiTextColor euiTextColor--default"
>
Access to data may be managed in other systems outside of OpenSearch. Check with your administrator for additional configurations.
</div>
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
Expand All @@ -457,7 +466,7 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem"
Expand All @@ -468,78 +477,17 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
<h2
class="panel-title"
>
Associated objects
Access control
</h2>
Manage objects associated with this data sources.
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiText euiText--extraSmall"
>
<div
class="euiTextAlign euiTextAlign--right"
>
<div
class="euiTextColor euiTextColor--subdued"
>
Last updated at:
</div>
</div>
</div>
<div
class="euiText euiText--extraSmall"
>
<div
class="euiTextAlign euiTextAlign--right"
>
<div
class="euiTextColor euiTextColor--subdued"
>
1/1/2024, 12:00:00 AM
</div>
</div>
Control which OpenSearch users have access to this data source.
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButton euiButton--primary"
type="button"
>
<span
class="euiButtonContent euiButton__content"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.228 2.942a.5.5 0 1 1-.538.842A5 5 0 1 0 13 8a.5.5 0 1 1 1 0 6 6 0 1 1-2.772-5.058ZM14 1.5v3A1.5 1.5 0 0 1 12.5 6h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 1 1 1 0Z"
/>
</svg>
<span
class="euiButton__text"
>
Refresh
</span>
</span>
</button>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButton euiButton--primary euiButton--fill"
data-test-subj="createButton"
type="button"
>
<span
Expand All @@ -548,7 +496,7 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
<span
class="euiButton__text"
>
Create acceleration
Edit
</span>
</span>
</button>
Expand All @@ -558,31 +506,38 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
/>
<div
class="euiEmptyPrompt"
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<span
class="euiLoadingSpinner euiLoadingSpinner--xLarge"
/>
<div
class="euiSpacer euiSpacer--m"
/>
<span
class="euiTextColor euiTextColor--subdued"
class="euiFlexItem"
>
<div
class="euiText euiText--medium"
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
>
<p>
Loading
databases
</p>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiText euiText--medium overview-title"
>
Query access
</div>
<div
class="euiText euiText--small overview-content"
>
Admin only
</div>
</div>
</div>
</span>
</div>
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="euiSpacer euiSpacer--l"
/>
</div>
</div>
<div
Expand Down
42 changes: 41 additions & 1 deletion public/components/datasources/components/__tests__/data_connection.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* SPDX-License-Identifier: Apache-2.0
*/

import { act } from '@testing-library/react';
import { act, render, waitFor } from '@testing-library/react';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import React from 'react';
Expand Down Expand Up @@ -65,4 +65,44 @@ describe('Data Connection Page test', () => {
});
expect(container).toMatchSnapshot();
});

it('Does not render Associated Objects, Accelerations, and Installed Integrations tabs for Prometheus data source', async () => {
CatalogCacheManager.saveDataSourceCache(mockDataSourceCacheData);
CatalogCacheManager.saveAccelerationsCache(mockAccelerationCacheData);

(coreRefs.http!.get as jest.Mock).mockResolvedValue(describePrometheusDataConnection);

const { container, queryByText } = render(<DataConnection dataSource="PROMETHEUS" />);

await waitFor(() => {
expect(queryByText('Associated Objects')).not.toBeInTheDocument();
expect(queryByText('Accelerations')).not.toBeInTheDocument();
expect(queryByText('Installed Integrations')).not.toBeInTheDocument();

const accessControlTabs = Array.from(container.querySelectorAll('.euiTab__content')).filter(
(el) => el.textContent === 'Access control'
);
expect(accessControlTabs.length).toBeGreaterThan(0);
});
});

it('Renders all tabs for S3Glue data source', async () => {
CatalogCacheManager.saveDataSourceCache(mockDataSourceCacheData);
CatalogCacheManager.saveAccelerationsCache(mockAccelerationCacheData);

(coreRefs.http!.get as jest.Mock).mockResolvedValue(describeS3Dataconnection);

const { container, getByText } = render(<DataConnection dataSource="S3GLUE" />);

await waitFor(() => {
expect(getByText('Associated Objects')).toBeInTheDocument();
expect(getByText('Accelerations')).toBeInTheDocument();
expect(getByText('Installed Integrations')).toBeInTheDocument();

const accessControlTabs = Array.from(container.querySelectorAll('.euiTab__content')).filter(
(el) => el.textContent === 'Access control'
);
expect(accessControlTabs.length).toBeGreaterThan(0);
});
});
});
81 changes: 46 additions & 35 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 @@ -209,41 +209,7 @@ export const DataConnection = (props: { dataSource: string }) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [chrome, http]);

const tabs = [
{
id: 'associated_objects',
name: 'Associated Objects',
disabled: false,
content: (
<AssociatedObjectsTab
datasource={datasourceDetails}
cacheLoadingHooks={cacheLoadingHooks}
selectedDatabase={selectedDatabase}
setSelectedDatabase={setSelectedDatabase}
/>
),
},
{
id: 'acceleration_table',
name: 'Accelerations',
disabled: false,
content: (
<AccelerationTable dataSourceName={dataSource} cacheLoadingHooks={cacheLoadingHooks} />
),
},
{
id: 'installed_integrations',
name: 'Installed Integrations',
disabled: false,
content: (
<InstalledIntegrationsTable
integrations={dataSourceIntegrations}
datasourceType={datasourceDetails.connector}
datasourceName={datasourceDetails.name}
refreshInstances={refreshInstances}
/>
),
},
const genericTabs = [
{
id: 'access_control',
name: 'Access control',
Expand All @@ -260,6 +226,51 @@ export const DataConnection = (props: { dataSource: string }) => {
},
];

const conditionalTabs =
datasourceDetails.connector === 'S3GLUE'
? [
{
id: 'associated_objects',
name: 'Associated Objects',
disabled: false,
content: (
<AssociatedObjectsTab
datasource={datasourceDetails}
cacheLoadingHooks={cacheLoadingHooks}
selectedDatabase={selectedDatabase}
setSelectedDatabase={setSelectedDatabase}
/>
),
},
{
id: 'acceleration_table',
name: 'Accelerations',
disabled: false,
content: (
<AccelerationTable
dataSourceName={dataSource}
cacheLoadingHooks={cacheLoadingHooks}
/>
),
},
{
id: 'installed_integrations',
name: 'Installed Integrations',
disabled: false,
content: (
<InstalledIntegrationsTable
integrations={dataSourceIntegrations}
datasourceType={datasourceDetails.connector}
datasourceName={datasourceDetails.name}
refreshInstances={refreshInstances}
/>
),
},
]
: [];

const tabs = [...conditionalTabs, ...genericTabs];

const QueryOrAccelerateData = () => {
switch (datasourceDetails.connector) {
case 'S3GLUE':
Expand Down
Loading