Rewrite AddMetric component so that it works with react-intl and conforms to other similar components

This commit is contained in:
JUDIT GRESKOVITS 2017-01-11 10:14:56 +00:00
parent 999c3facf2
commit c82432dd9d
12 changed files with 305 additions and 114 deletions

View File

@ -0,0 +1,73 @@
const React = require('react');
const ReactRedux = require('react-redux');
const PropTypes = require('@root/prop-types');
const AddMetric = require('@ui/components/add-metric');
const ReactIntl = require('react-intl');
const {
connect
} = ReactRedux;
const {
FormattedMessage
} = ReactIntl;
const {
AddMetricButton,
AddMetricDescription,
AddMetricLink,
AddMetricTile,
AddMetricTitle
} = AddMetric;
// we need some props! But like what? We'll need :
// - metrics
// - what metrics we have
// - we need to filter these by...
// instance/service? Think service... no? Huh :|
// - and some other stuff
// - like access to the reducer for when we add a thing
// (by thing I mean metric)
const AddMetrics = ({
metricTypes
}) => {
const metricList = metricTypes.map((metric) => (
<AddMetricTile key={metric}>
<AddMetricTitle>
<FormattedMessage id={`metrics.${metric}.title`} />
</AddMetricTitle>
<AddMetricDescription>
<FormattedMessage id={`metrics.${metric}.description`} />
</AddMetricDescription>
<AddMetricLink href='http://somelink.com'>
<FormattedMessage id={'metrics.add.link'} />
</AddMetricLink>
<AddMetricButton>
<FormattedMessage id={'metrics.add.add-label'} />
</AddMetricButton>
</AddMetricTile>
));
return (
<div>
{metricList}
</div>
);
};
AddMetrics.propTypes = {
/* TODO - */
metricTypes: PropTypes.metricTypes
};
const mapStateToProps = (state, {
params = {}
}) => ({
/* TODO - tidy up */
metricTypes: state.metrics.ui.types
});
module.exports = connect(
mapStateToProps
)(AddMetrics);

View File

View File

@ -1,5 +1,11 @@
const React = require('react'); const React = require('react');
const AddMetrics = require('../metrics/add-metrics');
module.exports = () => ( module.exports = () => (
<div>
<p>metrics</p> <p>metrics</p>
<div>
<AddMetrics />
</div>
</div>
); );

View File

@ -35,10 +35,19 @@ const Instance = React.PropTypes.shape({
project: React.PropTypes.string project: React.PropTypes.string
}); });
const Metric = React.PropTypes.shape({
...BaseObject
});
const Sections = React.PropTypes.arrayOf( const Sections = React.PropTypes.arrayOf(
React.PropTypes.string React.PropTypes.string
); );
// consinder renaming this to 'Types' as it could be used for any
const MetricTypes = React.PropTypes.arrayOf(
React.PropTypes.string
);
module.exports = { module.exports = {
account: Account, account: Account,
link: Link, link: Link,
@ -46,5 +55,8 @@ module.exports = {
project: Project, project: Project,
sections: Sections, sections: Sections,
service: Service, service: Service,
instance: Instance instance: Instance,
metric: Metric,
// consinder renaming this to 'Types' as it could be used for any
metricTypes: MetricTypes
}; };

View File

@ -0,0 +1,51 @@
const React = require('react');
const Styled = require('styled-components');
const fns = require('../../shared/functions');
const Button = require('../button');
const {
default: styled
} = Styled;
const {
remcalc
} = fns;
const StyledButton = styled(Button)`
position: absolute;
left: ${remcalc(24)};
bottom: ${remcalc(24)};
`;
const AddMetricButton = ({
children,
disabled,
onClick
}) => {
return disabled ?
(
<StyledButton
disabled
name='add-metric-button'
onClick={onClick}
>
{children}
</StyledButton>
) : (
<StyledButton
name='add-metric-button'
onClick={onClick}
secondary
>
{children}
</StyledButton>
);
};
AddMetricButton.propTypes = {
children: React.PropTypes.node,
disabled: React.PropTypes.bool,
onClick: React.PropTypes.func,
};
module.exports = AddMetricButton;

View File

@ -0,0 +1,28 @@
const React = require('react');
const Styled = require('styled-components');
const constants = require('../../shared/constants');
const {
colors
} = constants;
const {
default: styled
} = Styled;
const StyledDescription = styled.p`
margin: 0;
color: ${colors.regular};
`;
const Description = (props) => (
<StyledDescription name='add-metric-description'>
{props.children}
</StyledDescription>
);
Description.propTypes = {
children: React.PropTypes.node
};
module.exports = Description;

View File

@ -1,86 +1,7 @@
const React = require('react'); module.exports = {
const Styled = require('styled-components'); AddMetricButton: require('./button'),
const constants = require('../../shared/constants'); AddMetricDescription: require('./description'),
const fns = require('../../shared/functions'); AddMetricLink: require('./link'),
const Button = require('../button'); AddMetricTile: require('./tile'),
AddMetricTitle: require('./title'),
const {
boxes,
colors
} = constants;
const {
remcalc
} = fns;
const {
default: styled
} = Styled;
const padding = remcalc(24);
const AddMetricContainer = styled.div`
position: relative;
width: ${300}px;
height: ${247}px;
padding: ${padding};
box-shadow: ${boxes.bottomShaddow};
border: 1px solid ${colors.borderSecondary};
background-color: ${colors.brandSecondary};
`;
// WHy is the font not sans?
const Title = styled.h4`
margin-bottom: 0;
color: ${colors.semibold};
`;
const Description = styled.p`
margin: 0;
color: ${colors.regular};
`;
// I don't want to have important rules all over the place...
const Link = styled.a`
text-decoration: underline !important;
`;
const ButtonContainer = styled(Button)`
position: absolute;
left: ${padding};
bottom: ${padding};
`;
const AddMetric = ({
title,
description,
link,
linkLabel,
added,
addLabel,
addedLabel,
onAddToggle
}) => {
return (
<AddMetricContainer>
<Title>{title}</Title>
<Description>{description}</Description>
<Link href={link}>{linkLabel}</Link>
{ added ?
<ButtonContainer disabled>{addedLabel}</ButtonContainer> :
<ButtonContainer secondary>{addLabel}</ButtonContainer> }
</AddMetricContainer>
);
}; };
AddMetric.propTypes = {
addLabel: React.PropTypes.string.isRequired,
added: React.PropTypes.bool.isRequired,
addedLabel: React.PropTypes.string.isRequired,
description: React.PropTypes.string.isRequired,
link: React.PropTypes.string.isRequired,
linkLabel: React.PropTypes.string.isRequired,
onAddToggle: React.PropTypes.func.isRequired,
title: React.PropTypes.string.isRequired,
};
module.exports = AddMetric;

View File

@ -0,0 +1,26 @@
const React = require('react');
const Styled = require('styled-components');
const {
default: styled
} = Styled;
const StyledLink = styled.a`
text-decoration: underline !important;
`;
const Link = ({
children,
href
}) => (
<StyledLink href={href} name='add-metric-link'>
{children}
</StyledLink>
);
Link.propTypes = {
children: React.PropTypes.node,
href: React.PropTypes.string.isRequired
};
module.exports = Link;

View File

@ -0,0 +1,47 @@
const React = require('react');
const Styled = require('styled-components');
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const {
boxes,
colors
} = constants;
const {
remcalc
} = fns;
const {
default: styled
} = Styled;
const spacing = remcalc(24);
const StyledTile = styled.div`
position: relative;
display: inline-block;
margin: 0 ${spacing} ${spacing} 0;
padding: ${spacing};
width: ${300}px;
height: ${247}px;
box-shadow: ${boxes.bottomShaddow};
border: 1px solid ${colors.borderSecondary};
background-color: ${colors.brandSecondary};
`;
const Tile = ({
children
}) => {
return (
<StyledTile name='add-metric-tile'>
{children}
</StyledTile>
);
};
Tile.propTypes = {
children: React.PropTypes.node
};
module.exports = Tile;

View File

@ -0,0 +1,30 @@
const React = require('react');
const Styled = require('styled-components');
const constants = require('../../shared/constants');
const {
colors
} = constants;
const {
default: styled
} = Styled;
const StyledTitle = styled.h4`
margin: 0;
color: ${colors.semibold};
`;
const Title = ({
children
}) => (
<StyledTitle name='add-metric-title'>
{children}
</StyledTitle>
);
Title.propTypes = {
children: React.PropTypes.node
};
module.exports = Title;

View File

@ -1,7 +1,7 @@
const React = require('react'); const React = require('react');
const { const {
storiesOf, storiesOf,
action, // action,
// linkTo // linkTo
} = require('@kadira/storybook'); } = require('@kadira/storybook');
@ -12,7 +12,13 @@ const {
Checkbox, Checkbox,
Row, Row,
Column, Column,
AddMetric, AddMetric: {
AddMetricButton,
AddMetricDescription,
AddMetricLink,
AddMetricTile,
AddMetricTitle
},
Avatar, Avatar,
Input, Input,
List: { List: {
@ -113,15 +119,14 @@ storiesOf('Add Metric', module)
<Base> <Base>
<Row> <Row>
<Column> <Column>
<AddMetric <AddMetricTile>
addLabel='Add' <AddMetricTitle>Aggregated CPU usage</AddMetricTitle>
addedLabel='Added' <AddMetricDescription>
description='CPU usages accross all of the CPU cores.' CPU usages accross all of the CPU cores.
link='http://somelink.com' </AddMetricDescription>
linkLabel='Learn more' <AddMetricLink href='http://somelink.com'>Learn more</AddMetricLink>
onAddToggle={action('toggle-added')} <AddMetricButton>Add</AddMetricButton>
title='Aggregated CPU usage' </AddMetricTile>
/>
</Column> </Column>
</Row> </Row>
</Base> </Base>
@ -130,16 +135,14 @@ storiesOf('Add Metric', module)
<Base> <Base>
<Row> <Row>
<Column> <Column>
<AddMetric <AddMetricTile>
addLabel='Add' <AddMetricTitle>Aggregated CPU usage</AddMetricTitle>
added <AddMetricDescription>
addedLabel='Added' CPU usages accross all of the CPU cores.
description='CPU usages accross all of the CPU cores.' </AddMetricDescription>
link='http://somelink.com' <AddMetricLink href='http://somelink.com'>Learn more</AddMetricLink>
linkLabel='Learn more' <AddMetricButton disabled>Added</AddMetricButton>
onAddToggle={action('toggle-added')} </AddMetricTile>
title='Aggregated CPU usage'
/>
</Column> </Column>
</Row> </Row>
</Base> </Base>

View File

@ -12,12 +12,6 @@ test('renders <Avatar> without exploding', (t) => {
t.deepEqual(wrapper.length, 1); t.deepEqual(wrapper.length, 1);
}); });
test('renders <AddMetric> without exploding', (t) => {
const AddMetric = require('../src/components/add-metric');
const wrapper = shallow(<AddMetric />);
t.deepEqual(wrapper.length, 1);
});
test('renders <Base> without exploding', (t) => { test('renders <Base> without exploding', (t) => {
const Base = require('../src/components/base'); const Base = require('../src/components/base');
const wrapper = shallow(<Base />); const wrapper = shallow(<Base />);