diff options
Diffstat (limited to 'ui-react/src/components/dialogs')
3 files changed, 73 insertions, 39 deletions
diff --git a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js index 34304d611..9c9a16feb 100644 --- a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js +++ b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js @@ -26,6 +26,8 @@ import LoopService from '../../../api/LoopService'; import Button from 'react-bootstrap/Button'; import Modal from 'react-bootstrap/Modal'; import Form from 'react-bootstrap/Form'; +import Tabs from 'react-bootstrap/Tabs'; +import Tab from 'react-bootstrap/Tab'; import styled from 'styled-components'; const ModalStyled = styled(Modal)` @@ -55,6 +57,14 @@ export default class DeployLoopModal extends React.Component { show: true }); } + componentDidMount() { + const deployJsonList = this.state.temporaryPropertiesJson["dcaeDeployParameters"]; + Object.keys(deployJsonList) + .filter((obj) => Object.keys(deployJsonList).indexOf(obj) === 0) + .map(obj => + this.setState({key: obj}) + ); + } handleClose(){ this.props.history.push('/'); } @@ -89,34 +99,43 @@ export default class DeployLoopModal extends React.Component { } handleChange(event) { let deploymentParam = this.state.temporaryPropertiesJson["dcaeDeployParameters"]; - deploymentParam[event.target.name] = event.target.value; + deploymentParam[this.state.key][event.target.name] = event.target.value; this.setState({temporaryPropertiesJson:{dcaeDeployParameters: deploymentParam}}); } - renderDeployParam() { + renderDeployParamTabs() { if (typeof (this.state.temporaryPropertiesJson) === "undefined") { return ""; } - const deployJson = this.state.temporaryPropertiesJson["dcaeDeployParameters"]; + const deployJsonList = this.state.temporaryPropertiesJson["dcaeDeployParameters"]; + var indents = []; + Object.keys(deployJsonList).map((item,key) => + indents.push(<Tab eventKey={item} title={item}> + {this.renderDeployParam(deployJsonList[item])} + </Tab>) + ); + return indents; + } + + renderDeployParam(deployJson) { var indents = []; Object.keys(deployJson).map((item,key) => indents.push(<FormStyled> <Form.Label>{item}</Form.Label> <Form.Control type="text" name={item} onChange={this.handleChange} defaultValue={deployJson[item]}></Form.Control> </FormStyled>)); - - return indents; + return indents; } - - render() { return ( <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} > <Modal.Header closeButton> <Modal.Title>Deployment parameters</Modal.Title> </Modal.Header> - {this.renderDeployParam()} + <Tabs id="controlled-tab-example" activeKey={this.state.key} onSelect={key => this.setState({ key })}> + {this.renderDeployParamTabs()} + </Tabs> <Modal.Footer> <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button> <Button variant="primary" type="submit" onClick={this.handleSave}>Deploy</Button> diff --git a/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js b/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js index 2ebb8c067..5f1dcd5fc 100644 --- a/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js +++ b/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js @@ -32,8 +32,10 @@ describe('Verify DeployLoopModal', () => { "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", "globalPropertiesJson": { "dcaeDeployParameters": { - "location_id": "", - "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" + "testMs": { + "location_id": "", + "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" + } } } }); @@ -101,10 +103,9 @@ describe('Verify DeployLoopModal', () => { it('Onchange event', () => { const event = { target: { name: "location_id", value: "testLocation"} }; const component = shallow(<DeployLoopModal loopCache={loopCache}/>); - const forms = component.find('StateManager'); component.find('[name="location_id"]').simulate('change', event); component.update(); - expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.location_id).toEqual("testLocation"); + expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.testMs.location_id).toEqual("testLocation"); }); });
\ No newline at end of file diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap index bf06965be..0f86aa340 100644 --- a/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap +++ b/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap @@ -14,34 +14,48 @@ exports[`Verify DeployLoopModal Test the render method 1`] = ` Deployment parameters </ModalTitle> </ModalHeader> - <Styled(FormGroup)> - <FormLabel - column={false} - srOnly={false} - > - location_id - </FormLabel> - <FormControl - defaultValue="" - name="location_id" - onChange={[Function]} - type="text" - /> - </Styled(FormGroup)> - <Styled(FormGroup)> - <FormLabel - column={false} - srOnly={false} + <Tabs + activeKey="testMs" + id="controlled-tab-example" + mountOnEnter={false} + onSelect={[Function]} + unmountOnExit={false} + variant="tabs" + > + <Tab + eventKey="testMs" + title="testMs" > - policy_id - </FormLabel> - <FormControl - defaultValue="TCA_h2NMX_v1_0_ResourceInstanceName1_tca" - name="policy_id" - onChange={[Function]} - type="text" - /> - </Styled(FormGroup)> + <Styled(FormGroup)> + <FormLabel + column={false} + srOnly={false} + > + location_id + </FormLabel> + <FormControl + defaultValue="" + name="location_id" + onChange={[Function]} + type="text" + /> + </Styled(FormGroup)> + <Styled(FormGroup)> + <FormLabel + column={false} + srOnly={false} + > + policy_id + </FormLabel> + <FormControl + defaultValue="TCA_h2NMX_v1_0_ResourceInstanceName1_tca" + name="policy_id" + onChange={[Function]} + type="text" + /> + </Styled(FormGroup)> + </Tab> + </Tabs> <ModalFooter> <Button active={false} |