Skip to content

Commit

Permalink
[Bug fix] Add conditional rendering for data connection page's tabs (o…
Browse files Browse the repository at this point in the history 
…pensearch-project#1667)

* Add conditional rendering for data connection page for tabs

Signed-off-by: Ryan Liang <[email protected]>

* Add tests for conditional rendering of data connection tabs

Signed-off-by: Ryan Liang <[email protected]>

* Reverse the if check for datasource for s3glue

Signed-off-by: Ryan Liang <[email protected]>

---------

Signed-off-by: Ryan Liang <[email protected]>
  • Loading branch information
@RyanL1997 @amsiglan
RyanL1997 authored and amsiglan committed May 31, 2024
1 parent f6a1bb2 commit 1cc84b4
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 122 deletions.
127 changes: 41 additions & 86 deletions ...c/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap
View file
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
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
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

0 comments on commit 1cc84b4

Please sign in to comment.