From ecbdf7f6bd84319b7f46505afd9d3a844b206008 Mon Sep 17 00:00:00 2001 From: Ryan Liang Date: Thu, 7 Mar 2024 11:08:44 -0800 Subject: [PATCH] Add assc obj table details flyout skeleton 2 Signed-off-by: Ryan Liang --- common/types/data_connections.ts | 1 + .../associated_objects_tab.test.tsx.snap | 62 +++++++++++++++---- .../data_connection.test.tsx.snap | 4 +- .../associated_objects_details_flyout.tsx | 52 ++++++++-------- .../utils/associated_objects_tab_utils.tsx | 11 +++- 5 files changed, 90 insertions(+), 40 deletions(-) diff --git a/common/types/data_connections.ts b/common/types/data_connections.ts index 8be3a7a6ce..333b539f5f 100644 --- a/common/types/data_connections.ts +++ b/common/types/data_connections.ts @@ -14,6 +14,7 @@ export interface PermissionsConfigurationProps { } export interface AssociatedObject { + datasource: string; id: string; name: string; database: string; diff --git a/public/components/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap index 96fade835f..a79db3fa0e 100644 --- a/public/components/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap +++ b/public/components/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap @@ -21,6 +21,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db1", + "datasource": "flint_s3", "id": "1", "name": "Table_name_1", "type": "Table", @@ -42,6 +43,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db1", + "datasource": "flint_s3", "id": "2", "name": "Table_name_2", "type": "Table", @@ -63,6 +65,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db1", + "datasource": "flint_s3", "id": "3", "name": "Table_name_3", "type": "Table", @@ -84,6 +87,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db2", + "datasource": "flint_s3", "id": "4", "name": "Table_name_4", "type": "Table", @@ -105,6 +109,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db3", + "datasource": "flint_s3", "id": "5", "name": "Table_name_5", "type": "Table", @@ -113,6 +118,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object "accelerations": Array [], "createdByIntegration": "", "database": "db3", + "datasource": "flint_s3", "id": "6", "name": "Table_name_5", "type": "CI", @@ -146,8 +152,9 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "", "database": "db3", - "id": "6", - "name": "Table_name_5", + "datasource": "flint_s3", + "id": "7", + "name": "Table_name_6", "type": "CI", }, ] @@ -495,6 +502,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db1", + "datasource": "flint_s3", "id": "1", "name": "Table_name_1", "type": "Table", @@ -516,6 +524,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db1", + "datasource": "flint_s3", "id": "2", "name": "Table_name_2", "type": "Table", @@ -537,6 +546,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db1", + "datasource": "flint_s3", "id": "3", "name": "Table_name_3", "type": "Table", @@ -558,6 +568,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db2", + "datasource": "flint_s3", "id": "4", "name": "Table_name_4", "type": "Table", @@ -579,6 +590,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db3", + "datasource": "flint_s3", "id": "5", "name": "Table_name_5", "type": "Table", @@ -587,6 +599,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object "accelerations": Array [], "createdByIntegration": "", "database": "db3", + "datasource": "flint_s3", "id": "6", "name": "Table_name_5", "type": "CI", @@ -620,8 +633,9 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "", "database": "db3", - "id": "6", - "name": "Table_name_5", + "datasource": "flint_s3", + "id": "7", + "name": "Table_name_6", "type": "CI", }, ] @@ -1421,6 +1435,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db1", + "datasource": "flint_s3", "id": "1", "name": "Table_name_1", "type": "Table", @@ -1442,6 +1457,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db1", + "datasource": "flint_s3", "id": "2", "name": "Table_name_2", "type": "Table", @@ -1463,6 +1479,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db1", + "datasource": "flint_s3", "id": "3", "name": "Table_name_3", "type": "Table", @@ -1484,6 +1501,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db2", + "datasource": "flint_s3", "id": "4", "name": "Table_name_4", "type": "Table", @@ -1505,6 +1523,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db3", + "datasource": "flint_s3", "id": "5", "name": "Table_name_5", "type": "Table", @@ -1513,6 +1532,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object "accelerations": Array [], "createdByIntegration": "", "database": "db3", + "datasource": "flint_s3", "id": "6", "name": "Table_name_5", "type": "CI", @@ -1546,8 +1566,9 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "", "database": "db3", - "id": "6", - "name": "Table_name_5", + "datasource": "flint_s3", + "id": "7", + "name": "Table_name_6", "type": "CI", }, ] @@ -2430,6 +2451,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db1", + "datasource": "flint_s3", "id": "1", "name": "Table_name_1", "type": "Table", @@ -2468,6 +2490,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db1", + "datasource": "flint_s3", "id": "1", "name": "Table_name_1", "type": "Table", @@ -2576,6 +2599,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db1", + "datasource": "flint_s3", "id": "1", "name": "Table_name_1", "type": "Table", @@ -2931,6 +2955,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db1", + "datasource": "flint_s3", "id": "2", "name": "Table_name_2", "type": "Table", @@ -2969,6 +2994,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db1", + "datasource": "flint_s3", "id": "2", "name": "Table_name_2", "type": "Table", @@ -3077,6 +3103,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db1", + "datasource": "flint_s3", "id": "2", "name": "Table_name_2", "type": "Table", @@ -3432,6 +3459,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db1", + "datasource": "flint_s3", "id": "3", "name": "Table_name_3", "type": "Table", @@ -3470,6 +3498,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db1", + "datasource": "flint_s3", "id": "3", "name": "Table_name_3", "type": "Table", @@ -3578,6 +3607,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db1", + "datasource": "flint_s3", "id": "3", "name": "Table_name_3", "type": "Table", @@ -3933,6 +3963,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db2", + "datasource": "flint_s3", "id": "4", "name": "Table_name_4", "type": "Table", @@ -3971,6 +4002,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db2", + "datasource": "flint_s3", "id": "4", "name": "Table_name_4", "type": "Table", @@ -4079,6 +4111,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db2", + "datasource": "flint_s3", "id": "4", "name": "Table_name_4", "type": "Table", @@ -4434,6 +4467,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db3", + "datasource": "flint_s3", "id": "5", "name": "Table_name_5", "type": "Table", @@ -4472,6 +4506,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db3", + "datasource": "flint_s3", "id": "5", "name": "Table_name_5", "type": "Table", @@ -4580,6 +4615,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "integration_1", "database": "db3", + "datasource": "flint_s3", "id": "5", "name": "Table_name_5", "type": "Table", @@ -4890,6 +4926,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object "accelerations": Array [], "createdByIntegration": "", "database": "db3", + "datasource": "flint_s3", "id": "6", "name": "Table_name_5", "type": "CI", @@ -4915,6 +4952,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object "accelerations": Array [], "createdByIntegration": "", "database": "db3", + "datasource": "flint_s3", "id": "6", "name": "Table_name_5", "type": "CI", @@ -5046,7 +5084,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object onClick={[Function]} type="button" > - Table_name_5 + Table_name_6 @@ -5274,8 +5312,9 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "", "database": "db3", - "id": "6", - "name": "Table_name_5", + "datasource": "flint_s3", + "id": "7", + "name": "Table_name_6", "type": "CI", } } @@ -5324,8 +5363,9 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ], "createdByIntegration": "", "database": "db3", - "id": "6", - "name": "Table_name_5", + "datasource": "flint_s3", + "id": "7", + "name": "Table_name_6", "type": "CI", } } 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 3cbdaf3713..96acc592e1 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 @@ -1754,7 +1754,7 @@ exports[`Data Connection Page test Renders Prometheus data connection page with class="euiLink euiLink--primary" type="button" > - Table_name_5 + Table_name_6 @@ -3946,7 +3946,7 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`] class="euiLink euiLink--primary" type="button" > - Table_name_5 + Table_name_6 diff --git a/public/components/datasources/components/manage/associated_objects/associated_objects_details_flyout.tsx b/public/components/datasources/components/manage/associated_objects/associated_objects_details_flyout.tsx index b4b9137d9c..2a093901be 100644 --- a/public/components/datasources/components/manage/associated_objects/associated_objects_details_flyout.tsx +++ b/public/components/datasources/components/manage/associated_objects/associated_objects_details_flyout.tsx @@ -13,6 +13,9 @@ import { EuiButtonEmpty, EuiFlexItem, EuiFlexGroup, + EuiDescriptionList, + EuiDescriptionListTitle, + EuiDescriptionListDescription, } from '@elastic/eui'; import { AssociatedObject } from 'common/types/data_connections'; import { @@ -51,6 +54,28 @@ export const AssociatedObjectsDetailsFlyout = ({ tableDetail }: AssociatedObject ); }; + const DetailComponent = (detailProps: { title: string; description: any }) => { + const { title, description } = detailProps; + return ( + + + {title} + {description} + + + ); + }; + + const ConnectionComponent = () => { + return ( + + + + + + ); + }; + return ( <> @@ -72,31 +97,8 @@ export const AssociatedObjectsDetailsFlyout = ({ tableDetail }: AssociatedObject - -

- Database: {tableDetail.database} -

-

- Type: {tableDetail.type} -

-

- ID: {tableDetail.id} -

-

- Created By Integration: {tableDetail.createdByIntegration || 'N/A'} -

- {tableDetail.accelerations && tableDetail.accelerations.length > 0 && ( - <> - -

- Accelerations: -

- {tableDetail.accelerations.map((acceleration, index) => ( -

{acceleration.name}

- ))} - - )} - + + ); diff --git a/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_utils.tsx b/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_utils.tsx index 7e0d053277..a7eddd5a45 100644 --- a/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_utils.tsx +++ b/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_utils.tsx @@ -6,6 +6,7 @@ export const mockAssociatedObjects = [ { id: '1', + datasource: 'flint_s3', name: 'Table_name_1', database: 'db1', type: 'Table', @@ -27,6 +28,7 @@ export const mockAssociatedObjects = [ }, { id: '2', + datasource: 'flint_s3', name: 'Table_name_2', database: 'db1', type: 'Table', @@ -48,6 +50,7 @@ export const mockAssociatedObjects = [ }, { id: '3', + datasource: 'flint_s3', name: 'Table_name_3', database: 'db1', type: 'Table', @@ -69,6 +72,7 @@ export const mockAssociatedObjects = [ }, { id: '4', + datasource: 'flint_s3', name: 'Table_name_4', database: 'db2', type: 'Table', @@ -90,6 +94,7 @@ export const mockAssociatedObjects = [ }, { id: '5', + datasource: 'flint_s3', name: 'Table_name_5', database: 'db3', type: 'Table', @@ -111,6 +116,7 @@ export const mockAssociatedObjects = [ }, { id: '6', + datasource: 'flint_s3', name: 'Table_name_5', database: 'db3', type: 'CI', @@ -118,8 +124,9 @@ export const mockAssociatedObjects = [ accelerations: [], }, { - id: '6', - name: 'Table_name_5', + id: '7', + datasource: 'flint_s3', + name: 'Table_name_6', database: 'db3', type: 'CI', createdByIntegration: '',