Skip to content

Commit 914d6f2

Browse files
RyanL1997RyanL1997
authored
[Bug fix] Add conditional rendering for data connection page's tabs (#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]>
1 parent afc8f4a commit 914d6f2

File tree

3 files changed

+128
-122
lines changed

3 files changed

+128
-122
lines changed

‎public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap

+41-86
Original file line numberDiff line numberDiff line change
@@ -359,8 +359,8 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
359359
>
360360
<button
361361
aria-controls="random_html_id"
362-
aria-selected="true"
363-
class="euiTab euiTab-isSelected"
362+
aria-selected="false"
363+
class="euiTab"
364364
id="associated_objects"
365365
role="tab"
366366
type="button"
@@ -401,8 +401,8 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
401401
</button>
402402
<button
403403
aria-controls="random_html_id"
404-
aria-selected="false"
405-
class="euiTab"
404+
aria-selected="true"
405+
class="euiTab euiTab-isSelected"
406406
id="access_control"
407407
role="tab"
408408
type="button"
@@ -415,7 +415,7 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
415415
</button>
416416
</div>
417417
<div
418-
aria-labelledby="associated_objects"
418+
aria-labelledby="access_control"
419419
id="random_html_id"
420420
role="tabpanel"
421421
>
@@ -446,9 +446,18 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
446446
<span
447447
class="euiCallOutHeader__title"
448448
>
449-
Accelerations recommended for tables. Setup acceleration or configure integrations
449+
Configurations may be managed elsewhere.
450450
</span>
451451
</div>
452+
<div
453+
class="euiText euiText--small"
454+
>
455+
<div
456+
class="euiTextColor euiTextColor--default"
457+
>
458+
Access to data may be managed in other systems outside of OpenSearch. Check with your administrator for additional configurations.
459+
</div>
460+
</div>
452461
</div>
453462
<div
454463
class="euiSpacer euiSpacer--l"
@@ -457,7 +466,7 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
457466
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
458467
>
459468
<div
460-
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
469+
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
461470
>
462471
<div
463472
class="euiFlexItem"
@@ -468,78 +477,17 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
468477
<h2
469478
class="panel-title"
470479
>
471-
Associated objects
480+
Access control
472481
</h2>
473-
Manage objects associated with this data sources.
474-
</div>
475-
</div>
476-
<div
477-
class="euiFlexItem euiFlexItem--flexGrowZero"
478-
>
479-
<div
480-
class="euiText euiText--extraSmall"
481-
>
482-
<div
483-
class="euiTextAlign euiTextAlign--right"
484-
>
485-
<div
486-
class="euiTextColor euiTextColor--subdued"
487-
>
488-
Last updated at:
489-
</div>
490-
</div>
491-
</div>
492-
<div
493-
class="euiText euiText--extraSmall"
494-
>
495-
<div
496-
class="euiTextAlign euiTextAlign--right"
497-
>
498-
<div
499-
class="euiTextColor euiTextColor--subdued"
500-
>
501-
1/1/2024, 12:00:00 AM
502-
</div>
503-
</div>
482+
Control which OpenSearch users have access to this data source.
504483
</div>
505484
</div>
506485
<div
507486
class="euiFlexItem euiFlexItem--flexGrowZero"
508487
>
509488
<button
510489
class="euiButton euiButton--primary"
511-
type="button"
512-
>
513-
<span
514-
class="euiButtonContent euiButton__content"
515-
>
516-
<svg
517-
aria-hidden="true"
518-
class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
519-
focusable="false"
520-
height="16"
521-
role="img"
522-
viewBox="0 0 16 16"
523-
width="16"
524-
xmlns="http://www.w3.org/2000/svg"
525-
>
526-
<path
527-
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"
528-
/>
529-
</svg>
530-
<span
531-
class="euiButton__text"
532-
>
533-
Refresh
534-
</span>
535-
</span>
536-
</button>
537-
</div>
538-
<div
539-
class="euiFlexItem euiFlexItem--flexGrowZero"
540-
>
541-
<button
542-
class="euiButton euiButton--primary euiButton--fill"
490+
data-test-subj="createButton"
543491
type="button"
544492
>
545493
<span
@@ -548,7 +496,7 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
548496
<span
549497
class="euiButton__text"
550498
>
551-
Create acceleration
499+
Edit
552500
</span>
553501
</span>
554502
</button>
@@ -558,31 +506,38 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
558506
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
559507
/>
560508
<div
561-
class="euiEmptyPrompt"
509+
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
562510
>
563-
<span
564-
class="euiLoadingSpinner euiLoadingSpinner--xLarge"
565-
/>
566511
<div
567-
class="euiSpacer euiSpacer--m"
568-
/>
569-
<span
570-
class="euiTextColor euiTextColor--subdued"
512+
class="euiFlexItem"
571513
>
572514
<div
573-
class="euiText euiText--medium"
515+
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
574516
>
575-
<p>
576-
Loading
577-
databases
578-
</p>
517+
<div
518+
class="euiFlexItem euiFlexItem--flexGrowZero"
519+
>
520+
<div
521+
class="euiText euiText--medium overview-title"
522+
>
523+
Query access
524+
</div>
525+
<div
526+
class="euiText euiText--small overview-content"
527+
>
528+
Admin only
529+
</div>
530+
</div>
579531
</div>
580-
</span>
532+
</div>
581533
</div>
582534
</div>
583535
<div
584536
class="euiSpacer euiSpacer--l"
585537
/>
538+
<div
539+
class="euiSpacer euiSpacer--l"
540+
/>
586541
</div>
587542
</div>
588543
<div

‎public/components/datasources/components/__tests__/data_connection.test.tsx

+41-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* SPDX-License-Identifier: Apache-2.0
44
*/
55

6-
import { act } from '@testing-library/react';
6+
import { act, render, waitFor } from '@testing-library/react';
77
import { configure } from 'enzyme';
88
import Adapter from 'enzyme-adapter-react-16';
99
import React from 'react';
@@ -65,4 +65,44 @@ describe('Data Connection Page test', () => {
6565
});
6666
expect(container).toMatchSnapshot();
6767
});
68+
69+
it('Does not render Associated Objects, Accelerations, and Installed Integrations tabs for Prometheus data source', async () => {
70+
CatalogCacheManager.saveDataSourceCache(mockDataSourceCacheData);
71+
CatalogCacheManager.saveAccelerationsCache(mockAccelerationCacheData);
72+
73+
(coreRefs.http!.get as jest.Mock).mockResolvedValue(describePrometheusDataConnection);
74+
75+
const { container, queryByText } = render(<DataConnection dataSource="PROMETHEUS" />);
76+
77+
await waitFor(() => {
78+
expect(queryByText('Associated Objects')).not.toBeInTheDocument();
79+
expect(queryByText('Accelerations')).not.toBeInTheDocument();
80+
expect(queryByText('Installed Integrations')).not.toBeInTheDocument();
81+
82+
const accessControlTabs = Array.from(container.querySelectorAll('.euiTab__content')).filter(
83+
(el) => el.textContent === 'Access control'
84+
);
85+
expect(accessControlTabs.length).toBeGreaterThan(0);
86+
});
87+
});
88+
89+
it('Renders all tabs for S3Glue data source', async () => {
90+
CatalogCacheManager.saveDataSourceCache(mockDataSourceCacheData);
91+
CatalogCacheManager.saveAccelerationsCache(mockAccelerationCacheData);
92+
93+
(coreRefs.http!.get as jest.Mock).mockResolvedValue(describeS3Dataconnection);
94+
95+
const { container, getByText } = render(<DataConnection dataSource="S3GLUE" />);
96+
97+
await waitFor(() => {
98+
expect(getByText('Associated Objects')).toBeInTheDocument();
99+
expect(getByText('Accelerations')).toBeInTheDocument();
100+
expect(getByText('Installed Integrations')).toBeInTheDocument();
101+
102+
const accessControlTabs = Array.from(container.querySelectorAll('.euiTab__content')).filter(
103+
(el) => el.textContent === 'Access control'
104+
);
105+
expect(accessControlTabs.length).toBeGreaterThan(0);
106+
});
107+
});
68108
});

‎public/components/datasources/components/manage/data_connection.tsx

+46-35
Original file line numberDiff line numberDiff line change
@@ -209,41 +209,7 @@ export const DataConnection = (props: { dataSource: string }) => {
209209
// eslint-disable-next-line react-hooks/exhaustive-deps
210210
}, [chrome, http]);
211211

212-
const tabs = [
213-
{
214-
id: 'associated_objects',
215-
name: 'Associated Objects',
216-
disabled: false,
217-
content: (
218-
<AssociatedObjectsTab
219-
datasource={datasourceDetails}
220-
cacheLoadingHooks={cacheLoadingHooks}
221-
selectedDatabase={selectedDatabase}
222-
setSelectedDatabase={setSelectedDatabase}
223-
/>
224-
),
225-
},
226-
{
227-
id: 'acceleration_table',
228-
name: 'Accelerations',
229-
disabled: false,
230-
content: (
231-
<AccelerationTable dataSourceName={dataSource} cacheLoadingHooks={cacheLoadingHooks} />
232-
),
233-
},
234-
{
235-
id: 'installed_integrations',
236-
name: 'Installed Integrations',
237-
disabled: false,
238-
content: (
239-
<InstalledIntegrationsTable
240-
integrations={dataSourceIntegrations}
241-
datasourceType={datasourceDetails.connector}
242-
datasourceName={datasourceDetails.name}
243-
refreshInstances={refreshInstances}
244-
/>
245-
),
246-
},
212+
const genericTabs = [
247213
{
248214
id: 'access_control',
249215
name: 'Access control',
@@ -260,6 +226,51 @@ export const DataConnection = (props: { dataSource: string }) => {
260226
},
261227
];
262228

229+
const conditionalTabs =
230+
datasourceDetails.connector === 'S3GLUE'
231+
? [
232+
{
233+
id: 'associated_objects',
234+
name: 'Associated Objects',
235+
disabled: false,
236+
content: (
237+
<AssociatedObjectsTab
238+
datasource={datasourceDetails}
239+
cacheLoadingHooks={cacheLoadingHooks}
240+
selectedDatabase={selectedDatabase}
241+
setSelectedDatabase={setSelectedDatabase}
242+
/>
243+
),
244+
},
245+
{
246+
id: 'acceleration_table',
247+
name: 'Accelerations',
248+
disabled: false,
249+
content: (
250+
<AccelerationTable
251+
dataSourceName={dataSource}
252+
cacheLoadingHooks={cacheLoadingHooks}
253+
/>
254+
),
255+
},
256+
{
257+
id: 'installed_integrations',
258+
name: 'Installed Integrations',
259+
disabled: false,
260+
content: (
261+
<InstalledIntegrationsTable
262+
integrations={dataSourceIntegrations}
263+
datasourceType={datasourceDetails.connector}
264+
datasourceName={datasourceDetails.name}
265+
refreshInstances={refreshInstances}
266+
/>
267+
),
268+
},
269+
]
270+
: [];
271+
272+
const tabs = [...conditionalTabs, ...genericTabs];
273+
263274
const QueryOrAccelerateData = () => {
264275
switch (datasourceDetails.connector) {
265276
case 'S3GLUE':

0 commit comments

Comments
 (0)