From 751fa52cf183a611710e6f8f3e8bf163434fd4e3 Mon Sep 17 00:00:00 2001 From: Ryan Liang Date: Mon, 1 Apr 2024 19:29:19 -0700 Subject: [PATCH 1/3] Add conditional rendering for data connection page for tabs Signed-off-by: Ryan Liang --- .../data_connection.test.tsx.snap | 127 ++++++------------ .../components/manage/data_connection.tsx | 81 ++++++----- 2 files changed, 87 insertions(+), 121 deletions(-) diff --git a/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap index a0cc385e53..6a56e9ac87 100644 --- a/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap +++ b/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap @@ -359,8 +359,8 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`] > - -
- @@ -558,31 +506,38 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`] class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge" />
-
-
-

- Loading - databases -

+
+
+ Query access +
+
+ Admin only +
+
- +
+
{ // eslint-disable-next-line react-hooks/exhaustive-deps }, [chrome, http]); - const tabs = [ - { - id: 'associated_objects', - name: 'Associated Objects', - disabled: false, - content: ( - - ), - }, - { - id: 'acceleration_table', - name: 'Accelerations', - disabled: false, - content: ( - - ), - }, - { - id: 'installed_integrations', - name: 'Installed Integrations', - disabled: false, - content: ( - - ), - }, + const genericTabs = [ { id: 'access_control', name: 'Access control', @@ -260,6 +226,51 @@ export const DataConnection = (props: { dataSource: string }) => { }, ]; + const conditionalTabs = + datasourceDetails.connector !== 'PROMETHEUS' + ? [ + { + id: 'associated_objects', + name: 'Associated Objects', + disabled: false, + content: ( + + ), + }, + { + id: 'acceleration_table', + name: 'Accelerations', + disabled: false, + content: ( + + ), + }, + { + id: 'installed_integrations', + name: 'Installed Integrations', + disabled: false, + content: ( + + ), + }, + ] + : []; + + const tabs = [...conditionalTabs, ...genericTabs]; + const QueryOrAccelerateData = () => { switch (datasourceDetails.connector) { case 'S3GLUE': From 6ef73722885478cbe86c2b36aa74184ff71b2781 Mon Sep 17 00:00:00 2001 From: Ryan Liang Date: Mon, 1 Apr 2024 22:50:38 -0700 Subject: [PATCH 2/3] Add tests for conditional rendering of data connection tabs Signed-off-by: Ryan Liang --- .../__tests__/data_connection.test.tsx | 42 ++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/public/components/datasources/components/__tests__/data_connection.test.tsx b/public/components/datasources/components/__tests__/data_connection.test.tsx index 32f30a6a83..51bfe867cb 100644 --- a/public/components/datasources/components/__tests__/data_connection.test.tsx +++ b/public/components/datasources/components/__tests__/data_connection.test.tsx @@ -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'; @@ -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(); + + 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(); + + 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); + }); + }); }); From 99cf58dd19df468bbb32352817e3c59dc4769b5f Mon Sep 17 00:00:00 2001 From: Ryan Liang Date: Mon, 29 Apr 2024 14:56:50 -0700 Subject: [PATCH 3/3] Reverse the if check for datasource for s3glue Signed-off-by: Ryan Liang --- .../datasources/components/manage/data_connection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/components/datasources/components/manage/data_connection.tsx b/public/components/datasources/components/manage/data_connection.tsx index 92f4ce35f1..1a67284127 100644 --- a/public/components/datasources/components/manage/data_connection.tsx +++ b/public/components/datasources/components/manage/data_connection.tsx @@ -227,7 +227,7 @@ export const DataConnection = (props: { dataSource: string }) => { ]; const conditionalTabs = - datasourceDetails.connector !== 'PROMETHEUS' + datasourceDetails.connector === 'S3GLUE' ? [ { id: 'associated_objects',