-
Notifications
You must be signed in to change notification settings - Fork 358
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Convert settings details tab to use carbon component
- Loading branch information
1 parent
0dc9ca7
commit f3af36c
Showing
8 changed files
with
197 additions
and
39 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,72 @@ | ||
| import React, { useState } from 'react'; | ||
| import MiqDataTable from '../miq-data-table'; | ||
| import RegionForm from '../region-form'; | ||
|
|
||
| const settingsDetailsTab = ({ | ||
| region, scanItemsCount, zonesCount, miqSchedulesCount, | ||
| }) => { | ||
| const [rows, setRows] = useState([ | ||
| { | ||
| id: '0', | ||
| region: { | ||
| text: `${region.description} [${region.region}]`, | ||
| icon: 'carbon--Db2Database', | ||
| }, | ||
| treeBox: 'settings_tree', | ||
| }, | ||
| { | ||
| id: '1', | ||
| region: { | ||
| text: `${__('Analysis Profiles')} (${scanItemsCount})`, | ||
| icon: 'carbon--Search', | ||
| }, | ||
| treeBox: 'settings_tree', | ||
| nodeKey: 'xx-sis', | ||
| }, | ||
| { | ||
| id: '2', | ||
| region: { | ||
| text: `${__('Zones')} (${zonesCount})`, | ||
| icon: 'carbon--ChartVennDiagram', | ||
| }, | ||
| treeBox: 'settings_tree', | ||
| nodeKey: 'xx-z', | ||
| }, | ||
| { | ||
| id: '3', | ||
| region: { | ||
| text: `${__('Schedules')} (${miqSchedulesCount})`, | ||
| icon: 'carbon--Time', | ||
| }, | ||
| treeBox: 'settings_tree', | ||
| nodeKey: 'xx-msc', | ||
| }, | ||
| ]); | ||
|
|
||
| const headers = [ | ||
| { | ||
| key: 'region', | ||
| header: '', | ||
| }, | ||
| ]; | ||
|
|
||
| const onSelect = (selectedRow) => { | ||
| const selected = rows.find((row) => row.id === selectedRow.id); | ||
| if (selected.nodeKey) { | ||
| miqTreeActivateNode(selected.treeBox, selected.nodeKey); | ||
| } else { | ||
| setRows((prevRows) => prevRows.filter((row) => row.id !== '0')); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| {rows.find((row) => row.id === '0') === undefined && ( | ||
| <RegionForm maxDescLen={255} id={region.id.toString()} /> | ||
| )} | ||
| <MiqDataTable rows={rows} headers={headers} onCellClick={(selectedRow) => onSelect(selectedRow)} /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default settingsDetailsTab; |
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
17 changes: 17 additions & 0 deletions
17
app/javascript/spec/settings-details-tab/__snapshots__/settings-details-tab.spec.js.snap
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,17 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`SettingsDetailsTab Component should render settings details tab 1`] = ` | ||
| <settingsDetailsTab | ||
| miqSchedulesCount={0} | ||
| region={ | ||
| Object { | ||
| "description": "Region 3", | ||
| "id": 1, | ||
| "maintenance_zone_id": 1, | ||
| "region": 0, | ||
| } | ||
| } | ||
| scanItemsCount={3} | ||
| zonesCount={1} | ||
| /> | ||
| `; |
40 changes: 40 additions & 0 deletions
40
app/javascript/spec/settings-details-tab/settings-details-tab.spec.js
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,40 @@ | ||
| import React from 'react'; | ||
| import fetchMock from 'fetch-mock'; | ||
| import { shallow } from 'enzyme'; | ||
| import toJson from 'enzyme-to-json'; | ||
| import settingsDetailsTab from '../../components/settings-details-tab'; | ||
|
|
||
| describe('SettingsDetailsTab Component', () => { | ||
| const region = { | ||
| id: 1, | ||
| region: 0, | ||
| description: 'Region 3', | ||
| maintenance_zone_id: 1, | ||
| }; | ||
|
|
||
| const scanItemsCount = 3; | ||
| const zonesCount = 1; | ||
| const miqSchedulesCount = 0; | ||
|
|
||
| afterEach(() => { | ||
| fetchMock.reset(); | ||
| fetchMock.restore(); | ||
| }); | ||
|
|
||
| it('should render settings details tab', async() => { | ||
| const wrapper = shallow(<settingsDetailsTab | ||
| region={region} | ||
| scanItemsCount={scanItemsCount} | ||
| zonesCount={zonesCount} | ||
| miqSchedulesCount={miqSchedulesCount} | ||
| />); | ||
|
|
||
| await new Promise((resolve) => { | ||
| setImmediate(() => { | ||
| wrapper.update(); | ||
| expect(toJson(wrapper)).toMatchSnapshot(); | ||
| resolve(); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
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 |
|---|---|---|
|
|
@@ -45,3 +45,7 @@ | |
| color: red; | ||
| } | ||
| } | ||
|
|
||
| .bx--front-line { | ||
| margin-left: 10px; | ||
| } | ||
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
42 changes: 42 additions & 0 deletions
42
cypress/e2e/ui/Settings/Application-Settings/settings_details_tab.cy.js
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,42 @@ | ||
| /* eslint-disable no-undef */ | ||
|
|
||
| describe('Settings > Application Settings > Details', () => { | ||
| beforeEach(() => { | ||
| cy.login(); | ||
| cy.intercept('POST', '/ops/accordion_select?id=rbac_accord').as('accordion'); | ||
| cy.menu('Settings', 'Application Settings'); | ||
| cy.get('[data-nodeid="0.0"].node-treeview-settings_tree').contains('ManageIQ Region').click(); | ||
| cy.get('#explorer_title_text'); | ||
| }); | ||
|
|
||
| describe('Settings Details Tab', () => { | ||
| it('Region row is replaced by region form when clicked', () => { | ||
| cy.get('.bx--front-line').contains('Region 0').click({force: true}); | ||
| cy.get('.bx--label').contains('Description').should('exist'); | ||
| }); | ||
| it('Clicks on analysis profiles row and reroutes', () => { | ||
| cy.get('.bx--front-line').contains('Analysis Profiles').click({force: true}); | ||
| cy.get('#explorer_title_text').contains('Settings Analysis Profiles').should('exist'); | ||
| }); | ||
| it('Clicks on zones row and reroutes', () => { | ||
| cy.get('.bx--front-line').contains('Zones').click({force: true}); | ||
| cy.get('#explorer_title_text').contains('Settings Zones').should('exist'); | ||
| }); | ||
| it('Clicks on schedules row and reroutes', () => { | ||
| cy.get('.bx--front-line').contains('Schedules').click({force: true}); | ||
| cy.get('#explorer_title_text').contains('Settings Schedules').should('exist'); | ||
| }); | ||
| it('Updates region name when changed', () => { | ||
| cy.get('.bx--front-line').contains('Region 0').click({force: true}); | ||
| cy.get('#description').clear().type('Region 1'); | ||
| cy.get('button.bx--btn.bx--btn--primary').contains('Save').should('not.be.disabled').click(); | ||
| cy.get('.bx--front-line').contains('Region 1').should('exist'); | ||
|
|
||
| // Clean up | ||
| cy.get('.bx--front-line').contains('Region 1').click({force: true}); | ||
| cy.get('#description').clear().type('Region 0'); | ||
| cy.get('button.bx--btn.bx--btn--primary').contains('Save').should('not.be.disabled').click(); | ||
| cy.get('.bx--front-line').contains('Region 0').should('exist'); | ||
| }); | ||
| }); | ||
| }); |