-
Notifications
You must be signed in to change notification settings - Fork 178
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
457d01d
commit 58cbe32
Showing
19 changed files
with
737 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
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 { mockConnectionTypeConfigMap } from '~/__mocks__/mockConnectionType'; | ||
|
|
||
| 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', [ | ||
| mockConnectionTypeConfigMap({}), | ||
| mockConnectionTypeConfigMap({ | ||
| name: 'no-display-name', | ||
| displayName: '', | ||
| description: 'description 2', | ||
| username: 'Pre-installed', | ||
| enabled: false, | ||
| }), | ||
| mockConnectionTypeConfigMap({ | ||
| 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('dashboard-admin'); | ||
| 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; |
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,31 @@ | ||
| import React from 'react'; | ||
| import { PageSection } from '@patternfly/react-core'; | ||
| import { | ||
| connectionTypesPageDescription, | ||
| connectionTypesPageTitle, | ||
| } from '~/pages/connectionTypes/const'; | ||
| import ConnectionTypesTable from '~/pages/connectionTypes/ConnectionTypesTable'; | ||
| import ApplicationsPage from '~/pages/ApplicationsPage'; | ||
| import { useWatchConnectionTypes } from '~/utilities/useWatchConnectionTypes'; | ||
| import EmptyConnectionTypes from '~/pages/connectionTypes/EmptyConnectionTypes'; | ||
|
|
||
| const ConnectionTypes: React.FC = () => { | ||
| const { connectionTypes, loaded, loadError, forceRefresh } = useWatchConnectionTypes(); | ||
|
|
||
| return ( | ||
| <ApplicationsPage | ||
| loaded={loaded} | ||
| loadError={loadError} | ||
| empty={loaded && !connectionTypes.length} | ||
| emptyStatePage={<EmptyConnectionTypes />} | ||
| title={connectionTypesPageTitle} | ||
| description={connectionTypesPageDescription} | ||
| > | ||
| <PageSection isFilled variant="light"> | ||
| <ConnectionTypesTable connectionTypes={connectionTypes} onUpdate={forceRefresh} /> | ||
| </PageSection> | ||
| </ApplicationsPage> | ||
| ); | ||
| }; | ||
|
|
||
| export default ConnectionTypes; |
Oops, something went wrong.