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

fix: clean up variants view

Browse Source
This commit is contained in:
Ivar Conradi Østhus 2020-01-08 08:22:17 +01:00
parent 6171423300
commit fcf9e699dc
5 changed files with 74 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/CHANGELOG.md
View File

@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
The latest version of this document is always available in The latest version of this document is always available in
[releases][releases-url]. [releases][releases-url].
## [3.2.11]
- fix: clean up variants view
- fix: Cannot remove all variants in Admin UI
- fix: update fetch-mock to version 8.0.0 (#199)
- fix: update mini-css-extract-plugin to version 0.9.0
## [3.2.10] ## [3.2.10]
- fix: missing strategy makes the toggle-configure crash - fix: missing strategy makes the toggle-configure crash

110
frontend/src/component/feature/variant/__tests__/__snapshots__/update-variant-component-test.jsx.snap
View File

@ -9,23 +9,23 @@ exports[`renders correctly with with variants 1`] = `
} }
> >
<p> <p>
Variants is a new Variants allows you to return a variant object if the feature toggle is considered enabled for the current request. When using variants you should use the
<i>
beta feature <code
</i> style={
and the implementation is subject to change at any time until it is made in to a permanent feature. In order to use variants you will have use a Client SDK which supports variants. You should read more about variants in the  Object {
<a "color": "navy",
href="https://unleash.github.io/docs/beta_features" }
target="_blank" }
> >
user documentation getVariant()
</a> </code>
. method in the client SDK.
</p> </p>
<p <p
style={ style={
Object { Object {
"backgroundColor": "rgba(255, 229, 100, 0.3)", "backgroundColor": "rgba(255, 229, 255, 0.4)",
"padding": "5px", "padding": "5px",
} }
} }
@ -173,23 +173,23 @@ exports[`renders correctly with without variants 1`] = `
} }
> >
<p> <p>
Variants is a new Variants allows you to return a variant object if the feature toggle is considered enabled for the current request. When using variants you should use the
<i>
beta feature <code
</i> style={
and the implementation is subject to change at any time until it is made in to a permanent feature. In order to use variants you will have use a Client SDK which supports variants. You should read more about variants in the  Object {
<a "color": "navy",
href="https://unleash.github.io/docs/beta_features" }
target="_blank" }
> >
user documentation getVariant()
</a> </code>
. method in the client SDK.
</p> </p>
<p <p
style={ style={
Object { Object {
"backgroundColor": "rgba(255, 229, 100, 0.3)", "backgroundColor": "rgba(255, 229, 255, 0.4)",
"padding": "5px", "padding": "5px",
} }
} }
@ -206,24 +206,7 @@ exports[`renders correctly with without variants 1`] = `
</a> </a>
</p> </p>
<form> <form>
<table <p />
className="mdl-data-table mdl-shadow--2dp variantTable"
>
<thead>
<tr>
<th>
Name
</th>
<th>
Weight
</th>
<th
className="actions"
/>
</tr>
</thead>
<tbody />
</table>
<br /> <br />
<div> <div>
<react-mdl-Button <react-mdl-Button
@ -270,23 +253,23 @@ exports[`renders correctly with without variants and no permissions 1`] = `
} }
> >
<p> <p>
Variants is a new Variants allows you to return a variant object if the feature toggle is considered enabled for the current request. When using variants you should use the
<i>
beta feature <code
</i> style={
and the implementation is subject to change at any time until it is made in to a permanent feature. In order to use variants you will have use a Client SDK which supports variants. You should read more about variants in the  Object {
<a "color": "navy",
href="https://unleash.github.io/docs/beta_features" }
target="_blank" }
> >
user documentation getVariant()
</a> </code>
. method in the client SDK.
</p> </p>
<p <p
style={ style={
Object { Object {
"backgroundColor": "rgba(255, 229, 100, 0.3)", "backgroundColor": "rgba(255, 229, 255, 0.4)",
"padding": "5px", "padding": "5px",
} }
} }
@ -294,24 +277,7 @@ exports[`renders correctly with without variants and no permissions 1`] = `
The sum of variants weights needs to be a constant number to guarantee consistent hashing in the client implementations, this is why we will sometime allocate a few more percentages to the first variant if the sum is not exactly 100. In a final version of this feature it should be possible to the user to manually set the percentages for each variant. The sum of variants weights needs to be a constant number to guarantee consistent hashing in the client implementations, this is why we will sometime allocate a few more percentages to the first variant if the sum is not exactly 100. In a final version of this feature it should be possible to the user to manually set the percentages for each variant.
</p> </p>
<form> <form>
<table <p />
className="mdl-data-table mdl-shadow--2dp variantTable"
>
<thead>
<tr>
<th>
Name
</th>
<th>
Weight
</th>
<th
className="actions"
/>
</tr>
</thead>
<tbody />
</table>
<br /> <br />
</form> </form>
</section> </section>

43
frontend/src/component/feature/variant/update-variant-component.jsx
View File

@ -95,21 +95,37 @@ class UpdateVariantComponent extends Component {
/> />
); );
renderVariants = variants => {
if (variants.length > 0) {
return (
<table className={['mdl-data-table mdl-shadow--2dp', styles.variantTable].join(' ')}>
<thead>
<tr>
<th>Name</th>
<th>Weight</th>
<th className={styles.actions} />
</tr>
</thead>
<tbody>{variants.map(this.renderVariant)}</tbody>
</table>
);
} else {
return <p />;
}
};
render() { render() {
const { onSubmit, onCancel, input, features } = this.props; const { onSubmit, onCancel, input, features } = this.props;
const variants = input.variants || []; const variants = input.variants || [];
return ( return (
<section style={{ padding: '16px' }}> <section style={{ padding: '16px' }}>
<p> <p>
Variants is a new <i>beta feature</i> and the implementation is subject to change at any time until Variants allows you to return a variant object if the feature toggle is considered enabled for the
it is made in to a permanent feature. In order to use variants you will have use a Client SDK which current request. When using variants you should use the{' '}
supports variants. You should read more about variants in the&nbsp; <code style={{ color: 'navy' }}>getVariant()</code> method in the client SDK.
<a target="_blank" href="https://unleash.github.io/docs/beta_features">
user documentation
</a>
.
</p> </p>
<p style={{ backgroundColor: 'rgba(255, 229, 100, 0.3)', padding: '5px' }}> <p style={{ backgroundColor: 'rgba(255, 229, 255, 0.4)', padding: '5px' }}>
The sum of variants weights needs to be a constant number to guarantee consistent hashing in the The sum of variants weights needs to be a constant number to guarantee consistent hashing in the
client implementations, this is why we will sometime allocate a few more percentages to the first client implementations, this is why we will sometime allocate a few more percentages to the first
variant if the sum is not exactly 100. In a final version of this feature it should be possible to variant if the sum is not exactly 100. In a final version of this feature it should be possible to
@ -125,16 +141,7 @@ class UpdateVariantComponent extends Component {
) : null} ) : null}
<form onSubmit={onSubmit(input, features)}> <form onSubmit={onSubmit(input, features)}>
<table className={['mdl-data-table mdl-shadow--2dp', styles.variantTable].join(' ')}> {this.renderVariants(variants)}
<thead>
<tr>
<th>Name</th>
<th>Weight</th>
<th className={styles.actions} />
</tr>
</thead>
<tbody>{variants.map(this.renderVariant)}</tbody>
</table>
<br /> <br />
{this.props.hasPermission(UPDATE_FEATURE) ? ( {this.props.hasPermission(UPDATE_FEATURE) ? (
<FormButtons submitText={'Save'} onCancel={onCancel} /> <FormButtons submitText={'Save'} onCancel={onCancel} />

2
frontend/src/component/feature/variant/variant-edit-component.jsx
View File

@ -63,7 +63,7 @@ class VariantEditComponent extends Component {
const userIdOverrides = this.getUserIdOverrides(variant); const userIdOverrides = this.getUserIdOverrides(variant);
return ( return (
<tr style={{ backgroundColor: '#EFEFEF' }}> <tr>
<td> <td>
<Grid noSpacing> <Grid noSpacing>
<Cell col={6}> <Cell col={6}>

4
frontend/src/component/feature/variant/variant.scss
View File

@ -9,6 +9,9 @@
text-align: left; text-align: left;
width: 100%; width: 100%;
} }
tbody tr:hover {
background-color: rgba(173, 216, 230, 0.2);
}
} }
th.actions { th.actions {
@ -19,4 +22,3 @@ td.actions {
text-align: right; text-align: right;
vertical-align: top; vertical-align: top;
} }