-
Notifications
You must be signed in to change notification settings - Fork 163
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[RHOAIENG-10312] Connection type table view
- Loading branch information
1 parent
e7239c5
commit 9e9c333
Showing
20 changed files
with
786 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import { KnownLabels } from '~/k8sTypes'; | ||
| import { genUID } from '~/__mocks__/mockUtils'; | ||
| import { ConnectionTypeConfigMap } from '~/concepts/connectionTypes/types'; | ||
|
|
||
| type MockResourceConfigType = { | ||
| name?: string; | ||
| displayName?: string; | ||
| description?: string; | ||
| enabled?: 'true' | 'false'; | ||
| username?: string; | ||
| creationTimestamp?: string; | ||
| data?: { | ||
| fields?: string; | ||
| }; | ||
| uid?: string; | ||
| }; | ||
|
|
||
| export const mockConnectionTypeResource = ({ | ||
| name = 'test-connection-type', | ||
| displayName = 'Test connection type', | ||
| description = 'Test connection description', | ||
| enabled = 'true', | ||
| username = 'testuser', | ||
| creationTimestamp = '2024-07-31T15:40:24.000Z', | ||
| uid = genUID('connection-type'), | ||
| data = {}, | ||
| }: MockResourceConfigType): ConnectionTypeConfigMap => ({ | ||
| kind: 'ConfigMap', | ||
| apiVersion: 'v1', | ||
| metadata: { | ||
| annotations: { | ||
| 'openshift.io/display-name': displayName, | ||
| 'openshift.io/description': description, | ||
| 'opendatahub.io/enabled': enabled, | ||
| 'opendatahub.io/username': username, | ||
| }, | ||
| name, | ||
| namespace: 'redhat-ods-applications', | ||
| creationTimestamp, | ||
| labels: { | ||
| [KnownLabels.DASHBOARD_RESOURCE]: 'true', | ||
| 'opendatahub.io/connection-type': 'true', | ||
| }, | ||
| uid, | ||
| }, | ||
| data, | ||
| }); |
114 changes: 114 additions & 0 deletions
114
frontend/src/__tests__/cypress/cypress/pages/connectionTypes.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import { appChrome } from '~/__tests__/cypress/cypress/pages/appChrome'; | ||
| import { TableRow } from './components/table'; | ||
| import { TableToolbar } from './components/TableToolbar'; | ||
|
|
||
| class ConnectionTypesTableToolbar extends TableToolbar {} | ||
| class ConnectionTypeRow extends TableRow { | ||
| findConnectionTypeName() { | ||
| return this.find().findByTestId('connection-type-name'); | ||
| } | ||
|
|
||
| shouldHaveName(name: string) { | ||
| return this.findConnectionTypeName().should('have.text', name); | ||
| } | ||
|
|
||
| findConnectionTypeDescription() { | ||
| return this.find().findByTestId('connection-type-description'); | ||
| } | ||
|
|
||
| findConnectionTypeCreator() { | ||
| return this.find().findByTestId('connection-type-creator'); | ||
| } | ||
|
|
||
| shouldHaveDescription(description: string) { | ||
| return this.findConnectionTypeDescription().should('have.text', description); | ||
| } | ||
|
|
||
| shouldHaveCreator(creator: string) { | ||
| return this.findConnectionTypeCreator().should('have.text', creator); | ||
| } | ||
|
|
||
| shouldShowPreInstalledLabel() { | ||
| return this.find().findByTestId('connection-type-user-label').should('exist'); | ||
| } | ||
|
|
||
| findEnabled() { | ||
| return this.find().pfSwitchValue('connection-type-enable-switch'); | ||
| } | ||
|
|
||
| findEnableSwitch() { | ||
| return this.find().pfSwitch('connection-type-enable-switch'); | ||
| } | ||
|
|
||
| shouldBeEnabled() { | ||
| this.findEnabled().should('be.checked'); | ||
| } | ||
|
|
||
| shouldBeDisabled() { | ||
| this.findEnabled().should('not.be.checked'); | ||
| } | ||
|
|
||
| findEnableStatus() { | ||
| return this.find().findByTestId('connection-type-enable-status'); | ||
| } | ||
| } | ||
|
|
||
| class ConnectionTypesPage { | ||
| visit() { | ||
| cy.visitWithLogin('/connectionTypes'); | ||
| this.wait(); | ||
| } | ||
|
|
||
| private wait() { | ||
| cy.findByTestId('app-page-title'); | ||
| cy.testA11y(); | ||
| } | ||
|
|
||
| findNavItem() { | ||
| return appChrome.findNavItem('Connection types'); | ||
| } | ||
|
|
||
| navigate() { | ||
| this.findNavItem().click(); | ||
| this.wait(); | ||
| } | ||
|
|
||
| shouldHaveConnectionTypes() { | ||
| this.findTable().should('exist'); | ||
| return this; | ||
| } | ||
|
|
||
| shouldReturnNotFound() { | ||
| cy.findByTestId('not-found-page').should('exist'); | ||
| return this; | ||
| } | ||
|
|
||
| shouldBeEmpty() { | ||
| cy.findByTestId('connection-types-empty-state').should('exist'); | ||
| return this; | ||
| } | ||
|
|
||
| findTable() { | ||
| return cy.findByTestId('connection-types-table'); | ||
| } | ||
|
|
||
| getConnectionTypeRow(name: string) { | ||
| return new ConnectionTypeRow(() => | ||
| this.findTable().findAllByTestId(`connection-type-name`).contains(name).parents('tr'), | ||
| ); | ||
| } | ||
|
|
||
| findEmptyFilterResults() { | ||
| return cy.findByTestId('no-result-found-title'); | ||
| } | ||
|
|
||
| findSortButton(name: string) { | ||
| return this.findTable().find('thead').findByRole('button', { name }); | ||
| } | ||
|
|
||
| getTableToolbar() { | ||
| return new ConnectionTypesTableToolbar(() => cy.findByTestId('connection-types-table-toolbar')); | ||
| } | ||
| } | ||
|
|
||
| export const connectionTypesPage = new ConnectionTypesPage(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
106 changes: 106 additions & 0 deletions
106
frontend/src/__tests__/cypress/cypress/tests/mocked/connectionTypes/connectionTypes.cy.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| import { pageNotfound } from '~/__tests__/cypress/cypress/pages/pageNotFound'; | ||
| import { | ||
| asProductAdminUser, | ||
| asProjectAdminUser, | ||
| } from '~/__tests__/cypress/cypress/utils/mockUsers'; | ||
| import { connectionTypesPage } from '~/__tests__/cypress/cypress/pages/connectionTypes'; | ||
| import { mockDashboardConfig } from '~/__mocks__'; | ||
| import { mockConnectionTypeResource } from '~/__mocks__/mockConnectionTypeResource'; | ||
|
|
||
| it('Connection types should not be available for non product admins', () => { | ||
| asProjectAdminUser(); | ||
| cy.visitWithLogin('/connectionTypes'); | ||
| pageNotfound.findPage().should('exist'); | ||
| connectionTypesPage.findNavItem().should('not.exist'); | ||
| }); | ||
|
|
||
| it('Connection types should be hidden by feature flag', () => { | ||
| asProductAdminUser(); | ||
|
|
||
| cy.visitWithLogin('/connectionTypes'); | ||
| connectionTypesPage.shouldReturnNotFound(); | ||
|
|
||
| cy.interceptOdh( | ||
| 'GET /api/config', | ||
| mockDashboardConfig({ | ||
| disableConnectionTypes: false, | ||
| }), | ||
| ); | ||
|
|
||
| connectionTypesPage.visit(); | ||
| }); | ||
|
|
||
| describe('Connection types', () => { | ||
| beforeEach(() => { | ||
| asProductAdminUser(); | ||
|
|
||
| cy.interceptOdh( | ||
| 'GET /api/config', | ||
| mockDashboardConfig({ | ||
| disableConnectionTypes: false, | ||
| }), | ||
| ); | ||
| cy.interceptOdh('GET /api/connection-types', [ | ||
| mockConnectionTypeResource({}), | ||
| mockConnectionTypeResource({ | ||
| name: 'no-display-name', | ||
| displayName: '', | ||
| description: 'description 2', | ||
| username: 'Pre-installed', | ||
| enabled: 'false', | ||
| }), | ||
| mockConnectionTypeResource({ | ||
| name: 'test-2', | ||
| displayName: 'Test display name', | ||
| description: 'Test description', | ||
| }), | ||
| ]); | ||
| }); | ||
|
|
||
| it('should show the connections type table', () => { | ||
| connectionTypesPage.visit(); | ||
| connectionTypesPage.shouldHaveConnectionTypes(); | ||
| }); | ||
|
|
||
| it('should show the empty state when there are no results', () => { | ||
| cy.interceptOdh('GET /api/connection-types', []); | ||
| connectionTypesPage.visit(); | ||
| connectionTypesPage.shouldBeEmpty(); | ||
| }); | ||
|
|
||
| it('should show the correct column values', () => { | ||
| connectionTypesPage.visit(); | ||
|
|
||
| const row = connectionTypesPage.getConnectionTypeRow('Test display name'); | ||
| row.shouldHaveDescription('Test description'); | ||
| row.shouldHaveCreator('testuser'); | ||
| row.shouldBeEnabled(); | ||
|
|
||
| const row2 = connectionTypesPage.getConnectionTypeRow('no-display-name'); | ||
| row2.shouldHaveDescription('description 2'); | ||
| row2.shouldShowPreInstalledLabel(); | ||
| row2.shouldBeDisabled(); | ||
| }); | ||
|
|
||
| it('should show status text when switching enabled state', () => { | ||
| connectionTypesPage.visit(); | ||
| cy.interceptOdh( | ||
| 'PATCH /api/connection-types/:name', | ||
| { path: { name: 'test-2' } }, | ||
| { success: true, error: '' }, | ||
| ); | ||
| cy.interceptOdh( | ||
| 'PATCH /api/connection-types/:name', | ||
| { path: { name: 'no-display-name' } }, | ||
| { success: true, error: '' }, | ||
| ); | ||
|
|
||
| const row = connectionTypesPage.getConnectionTypeRow('Test display name'); | ||
| row.findEnableSwitch().click(); | ||
| row.findEnableStatus().should('have.text', 'Disabling...'); | ||
|
|
||
| const row2 = connectionTypesPage.getConnectionTypeRow('no-display-name'); | ||
| row2.findEnableSwitch().click(); | ||
| row2.findEnableStatus().should('have.text', 'Enabling...'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
frontend/src/concepts/connectionTypes/useConnectionTypesEnabled.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas'; | ||
|
|
||
| const useConnectionTypesEnabled = (): boolean => | ||
| useIsAreaAvailable(SupportedArea.DATA_CONNECTIONS_TYPES).status; | ||
| useIsAreaAvailable(SupportedArea.CONNECTION_TYPES).status; | ||
|
|
||
| export default useConnectionTypesEnabled; |
Oops, something went wrong.