Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-07 01:16:28 +02:00
Code Issues Projects Releases Wiki Activity

fix(feature): Create feature form inside a Card to align UI

Browse Source
This commit is contained in:
ivaosthu 2018-04-25 10:31:47 +02:00
parent a1092d9474
commit ca9ca32e4d
2 changed files with 693 additions and 453 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

266
frontend/src/component/feature/form/__tests__/__snapshots__/form-add-feature-component-test.jsx.snap
View File

@ -49,7 +49,21 @@ ShallowWrapper {
"key": undefined, "key": undefined,
"nodeType": "host", "nodeType": "host",
"props": Object { "props": Object {
"children": <section "children": Array [
<react-mdl-CardTitle
style={
Object {
"paddingTop": "24px",
"wordBreak": "break-all",
}
}
>
Create feature toggle
</react-mdl-CardTitle>,
<form
onSubmit={undefined}
>
<section
style={ style={
Object { Object {
"padding": "16px", "padding": "16px",
@ -97,15 +111,105 @@ ShallowWrapper {
updateStrategy={[MockFunction]} updateStrategy={[MockFunction]}
/> />
<br /> <br />
</section>
<react-mdl-CardActions>
<FormButtons <FormButtons
onCancel={[MockFunction]} onCancel={[MockFunction]}
submitText="Create" submitText="Create"
/> />
</react-mdl-CardActions>
</form>,
],
"className": "fullwidth",
"shadow": 0,
"style": Object {
"overflow": "visible",
},
},
"ref": null,
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "host",
"props": Object {
"children": "Create feature toggle",
"style": Object {
"paddingTop": "24px",
"wordBreak": "break-all",
},
},
"ref": null,
"rendered": "Create feature toggle",
"type": "react-mdl-CardTitle",
},
Object {
"instance": null,
"key": undefined,
"nodeType": "host",
"props": Object {
"children": Array [
<section
style={
Object {
"padding": "16px",
}
}
>
<react-mdl-Textfield
error={Object {}}
floatingLabel={true}
label="Name"
name="name"
onBlur={[Function]}
onChange={[Function]}
required={true}
value="feature"
/>
<react-mdl-Textfield
floatingLabel={true}
label="Description"
onChange={[Function]}
required={true}
rows={1}
style={
Object {
"width": "100%",
}
}
value="Description"
/>
<div>
<br />
<react-mdl-Switch
checked={false}
onChange={[Function]}
>
Enabled
</react-mdl-Switch>
<hr />
</div>
<StrategiesSection
addStrategy={[MockFunction]}
configuredStrategies={Array []}
moveStrategy={[MockFunction]}
removeStrategy={[MockFunction]}
updateStrategy={[MockFunction]}
/>
<br />
</section>, </section>,
<react-mdl-CardActions>
<FormButtons
onCancel={[MockFunction]}
submitText="Create"
/>
</react-mdl-CardActions>,
],
"onSubmit": undefined, "onSubmit": undefined,
}, },
"ref": null, "ref": null,
"rendered": Object { "rendered": Array [
Object {
"instance": null, "instance": null,
"key": undefined, "key": undefined,
"nodeType": "host", "nodeType": "host",
@ -152,10 +256,6 @@ ShallowWrapper {
updateStrategy={[MockFunction]} updateStrategy={[MockFunction]}
/>, />,
<br />, <br />,
<FormButtons
onCancel={[MockFunction]}
submitText="Create"
/>,
], ],
"style": Object { "style": Object {
"padding": "16px", "padding": "16px",
@ -276,7 +376,21 @@ ShallowWrapper {
"rendered": null, "rendered": null,
"type": "br", "type": "br",
}, },
],
"type": "section",
},
Object { Object {
"instance": null,
"key": undefined,
"nodeType": "host",
"props": Object {
"children": <FormButtons
onCancel={[MockFunction]}
submitText="Create"
/>,
},
"ref": null,
"rendered": Object {
"instance": null, "instance": null,
"key": undefined, "key": undefined,
"nodeType": "function", "nodeType": "function",
@ -288,18 +402,35 @@ ShallowWrapper {
"rendered": null, "rendered": null,
"type": [Function], "type": [Function],
}, },
], "type": "react-mdl-CardActions",
"type": "section",
}, },
],
"type": "form", "type": "form",
}, },
],
"type": "react-mdl-Card",
},
Symbol(enzyme.__nodes__): Array [ Symbol(enzyme.__nodes__): Array [
Object { Object {
"instance": null, "instance": null,
"key": undefined, "key": undefined,
"nodeType": "host", "nodeType": "host",
"props": Object { "props": Object {
"children": <section "children": Array [
<react-mdl-CardTitle
style={
Object {
"paddingTop": "24px",
"wordBreak": "break-all",
}
}
>
Create feature toggle
</react-mdl-CardTitle>,
<form
onSubmit={undefined}
>
<section
style={ style={
Object { Object {
"padding": "16px", "padding": "16px",
@ -347,15 +478,105 @@ ShallowWrapper {
updateStrategy={[MockFunction]} updateStrategy={[MockFunction]}
/> />
<br /> <br />
</section>
<react-mdl-CardActions>
<FormButtons <FormButtons
onCancel={[MockFunction]} onCancel={[MockFunction]}
submitText="Create" submitText="Create"
/> />
</react-mdl-CardActions>
</form>,
],
"className": "fullwidth",
"shadow": 0,
"style": Object {
"overflow": "visible",
},
},
"ref": null,
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "host",
"props": Object {
"children": "Create feature toggle",
"style": Object {
"paddingTop": "24px",
"wordBreak": "break-all",
},
},
"ref": null,
"rendered": "Create feature toggle",
"type": "react-mdl-CardTitle",
},
Object {
"instance": null,
"key": undefined,
"nodeType": "host",
"props": Object {
"children": Array [
<section
style={
Object {
"padding": "16px",
}
}
>
<react-mdl-Textfield
error={Object {}}
floatingLabel={true}
label="Name"
name="name"
onBlur={[Function]}
onChange={[Function]}
required={true}
value="feature"
/>
<react-mdl-Textfield
floatingLabel={true}
label="Description"
onChange={[Function]}
required={true}
rows={1}
style={
Object {
"width": "100%",
}
}
value="Description"
/>
<div>
<br />
<react-mdl-Switch
checked={false}
onChange={[Function]}
>
Enabled
</react-mdl-Switch>
<hr />
</div>
<StrategiesSection
addStrategy={[MockFunction]}
configuredStrategies={Array []}
moveStrategy={[MockFunction]}
removeStrategy={[MockFunction]}
updateStrategy={[MockFunction]}
/>
<br />
</section>, </section>,
<react-mdl-CardActions>
<FormButtons
onCancel={[MockFunction]}
submitText="Create"
/>
</react-mdl-CardActions>,
],
"onSubmit": undefined, "onSubmit": undefined,
}, },
"ref": null, "ref": null,
"rendered": Object { "rendered": Array [
Object {
"instance": null, "instance": null,
"key": undefined, "key": undefined,
"nodeType": "host", "nodeType": "host",
@ -402,10 +623,6 @@ ShallowWrapper {
updateStrategy={[MockFunction]} updateStrategy={[MockFunction]}
/>, />,
<br />, <br />,
<FormButtons
onCancel={[MockFunction]}
submitText="Create"
/>,
], ],
"style": Object { "style": Object {
"padding": "16px", "padding": "16px",
@ -526,7 +743,21 @@ ShallowWrapper {
"rendered": null, "rendered": null,
"type": "br", "type": "br",
}, },
],
"type": "section",
},
Object { Object {
"instance": null,
"key": undefined,
"nodeType": "host",
"props": Object {
"children": <FormButtons
onCancel={[MockFunction]}
submitText="Create"
/>,
},
"ref": null,
"rendered": Object {
"instance": null, "instance": null,
"key": undefined, "key": undefined,
"nodeType": "function", "nodeType": "function",
@ -538,12 +769,15 @@ ShallowWrapper {
"rendered": null, "rendered": null,
"type": [Function], "type": [Function],
}, },
], "type": "react-mdl-CardActions",
"type": "section",
}, },
],
"type": "form", "type": "form",
}, },
], ],
"type": "react-mdl-Card",
},
],
Symbol(enzyme.__options__): Object { Symbol(enzyme.__options__): Object {
"adapter": ReactSixteenAdapter { "adapter": ReactSixteenAdapter {
"options": Object { "options": Object {

10
frontend/src/component/feature/form/form-add-feature-component.jsx
View File

@ -1,9 +1,10 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Textfield, Switch } from 'react-mdl'; import { Textfield, Switch, Card, CardTitle, CardActions } from 'react-mdl';
import StrategiesSection from './strategies-section-container'; import StrategiesSection from './strategies-section-container';
import { FormButtons } from './../../common'; import { FormButtons } from './../../common';
import { styles as commonStyles } from '../../common';
const trim = value => { const trim = value => {
if (value && value.trim) { if (value && value.trim) {
@ -44,6 +45,8 @@ class AddFeatureComponent extends Component {
const configuredStrategies = input.strategies || []; const configuredStrategies = input.strategies || [];
return ( return (
<Card shadow={0} className={commonStyles.fullwidth} style={{ overflow: 'visible' }}>
<CardTitle style={{ paddingTop: '24px', wordBreak: 'break-all' }}>Create feature toggle</CardTitle>
<form onSubmit={onSubmit(input)}> <form onSubmit={onSubmit(input)}>
<section style={{ padding: '16px' }}> <section style={{ padding: '16px' }}>
<Textfield <Textfield
@ -87,9 +90,12 @@ class AddFeatureComponent extends Component {
/> />
<br /> <br />
<FormButtons submitText={'Create'} onCancel={onCancel} />
</section> </section>
<CardActions>
<FormButtons submitText={'Create'} onCancel={onCancel} />
</CardActions>
</form> </form>
</Card>
); );
} }
} }