fix(cp-frontend): poll until dg is available when editing manifest

This commit is contained in:
Sérgio Ramos 2017-07-20 21:48:30 +01:00 committed by Judit Greskovits
parent 5a8eb965ff
commit ae5eaba2c1
9 changed files with 96 additions and 59 deletions

View File

@ -36,7 +36,7 @@
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-apollo": "^1.4.2",
"react-bundle": "^1.0.3",
"react-bundle": "^1.0.4",
"react-codemirror": "^1.0.0",
"react-dom": "^15.6.1",
"react-redux": "^5.0.5",

View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { Component } from 'react';
import { Field } from 'redux-form';
import styled from 'styled-components';
import SimpleTable from 'react-simple-table';
@ -73,11 +73,56 @@ const FilenameRemove = Button.extend`
height: ${remcalc(48)};
`;
const MEditor = ManifestEditor => ({ input, defaultValue }) =>
<ManifestEditor mode="yaml" {...input} value={input.value || defaultValue} />;
class ManifestEditorBundle extends Component {
constructor() {
super();
const EEditor = ManifestEditor => ({ input, defaultValue }) =>
<ManifestEditor mode="ini" {...input} value={input.value || defaultValue} />;
this.state = {};
this.handleRender = this.handleRender.bind(this);
}
handleRender(ManifestEditor) {
if (ManifestEditor) {
setTimeout(() => {
this.setState({ ManifestEditor });
}, 80);
}
return <Dots2 />;
}
render() {
if (!this.state.ManifestEditor) {
return (
<Bundle load={() => import('joyent-manifest-editor')}>
{this.handleRender}
</Bundle>
);
}
const { ManifestEditor } = this.state;
const { children, ...rest } = this.props;
return (
<ManifestEditor {...rest}>
{children}
</ManifestEditor>
);
}
}
const MEditor = ({ input, defaultValue }) =>
<ManifestEditorBundle
mode="yaml"
{...input}
value={input.value || defaultValue}
/>;
const EEditor = ({ input, defaultValue }) =>
<ManifestEditorBundle
mode="ini"
{...input}
value={input.value || defaultValue}
/>;
export const Name = ({ handleSubmit, onCancel, dirty }) =>
<form onSubmit={handleSubmit}>
@ -103,16 +148,7 @@ export const Manifest = ({
loading
}) =>
<form onSubmit={handleSubmit}>
<Bundle load={() => import('joyent-manifest-editor')}>
{ManifestEditor =>
ManifestEditor
? <Field
name="manifest"
defaultValue={defaultValue}
component={MEditor(ManifestEditor)}
/>
: <Dots2 />}
</Bundle>
<Field name="manifest" defaultValue={defaultValue} component={MEditor} />
<ButtonsRow>
<Button onClick={onCancel} secondary>Cancel</Button>
<Button
@ -147,16 +183,11 @@ export const Files = ({ loading, files, onRemoveFile }) => {
<FormMeta left />
<Filename name={name} onRemoveFile={() => onRemoveFile(id)} />
</FormGroup>
<Bundle load={() => import('joyent-manifest-editor')}>
{ManifestEditor =>
ManifestEditor
? <Field
<Field
name={`file-value-${id}`}
defaultValue={value}
component={EEditor(ManifestEditor)}
component={EEditor}
/>
: <Dots2 />}
</Bundle>
</div>
);
@ -179,16 +210,7 @@ export const Environment = ({
loading
}) =>
<form onSubmit={handleSubmit}>
<Bundle load={() => import('joyent-manifest-editor')}>
{ManifestEditor =>
ManifestEditor
? <Field
name="environment"
defaultValue={defaultValue}
component={EEditor(ManifestEditor)}
/>
: <Dots2 />}
</Bundle>
<Field name="environment" defaultValue={defaultValue} component={EEditor} />
<Files files={files} onRemoveFile={onRemoveFile} loading={loading} />
<ButtonsRow>
<Button onClick={onCancel} secondary>Cancel</Button>

View File

@ -18,7 +18,12 @@ class DeploymentGroupDelete extends Component {
);
}
const { deploymentGroup, deleteDeploymentGroup, history, match } = this.props;
const {
deploymentGroup,
deleteDeploymentGroup,
history,
match
} = this.props;
const handleCloseClick = evt => {
const closeUrl = match.url.split('/').slice(0, -2).join('/');
@ -74,8 +79,9 @@ const DeploymentGroupGql = graphql(DeploymentGroupQuery, {
})
});
const DeploymentGroupDeleteWithData = compose(DeleteDeploymentGroupGql, DeploymentGroupGql)(
DeploymentGroupDelete
);
const DeploymentGroupDeleteWithData = compose(
DeleteDeploymentGroupGql,
DeploymentGroupGql
)(DeploymentGroupDelete);
export default DeploymentGroupDeleteWithData;

View File

@ -22,9 +22,9 @@ export default ({
{error && <span>{error.toString()}</span>}
<Progress stage={stage} create />
<ManifestEditOrCreate
create
manifest={manifest}
deploymentGroup={deploymentGroup}
create
/>
</LayoutContainer>
);

View File

@ -1,6 +1,7 @@
import React from 'react';
import { compose, graphql } from 'react-apollo';
import get from 'lodash.get';
import forceArray from 'force-array';
import ManifestQuery from '@graphql/Manifest.gql';
import DeploymentGroupBySlugQuery from '@graphql/DeploymentGroupBySlug.gql';
@ -26,10 +27,10 @@ const Manifest = ({
const _view = loading || !deploymentGroup
? null
: <ManifestEditOrCreate
edit
manifest={manifest}
environment={environment}
deploymentGroup={deploymentGroup}
edit
/>;
const _notice = !error &&
@ -59,6 +60,7 @@ const Manifest = ({
export default compose(
graphql(ManifestQuery, {
options: props => ({
fetchPolicy: 'network-only',
variables: {
deploymentGroupSlug: props.match.params.deploymentGroup
}
@ -76,12 +78,20 @@ export default compose(
slug: props.match.params.deploymentGroup
}
}),
props: ({ data: { deploymentGroups, loading, error } }) => ({
deploymentGroup: deploymentGroups && deploymentGroups.length
? deploymentGroups[0]
: null,
props: ({ data: { deploymentGroups, loading, error, startPolling, stopPolling } }) => {
const dgs = forceArray(deploymentGroups);
if (!dgs.length) {
startPolling(1000);
} else {
stopPolling();
}
return {
deploymentGroup: dgs[0],
loading,
error
})
};
}
})
)(Manifest);

View File

@ -39,7 +39,6 @@ const StyledFilter = styled(Input)`
const handleAddService = () => console.log('Adding a service...');
const ServicesMenu = ({ location, history: { push } }) => {
const toggleValue = location.pathname.split('-').pop();
const handleToggle = evt => {

View File

@ -11,7 +11,7 @@ const state = {
name: 'Instances'
},
{
pathname: 'manifest',
pathname: 'manifest/edit',
name: 'Manifest'
}
],

View File

@ -7300,9 +7300,9 @@ react-broadcast@^0.1.2:
dependencies:
invariant "^2.2.1"
react-bundle@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/react-bundle/-/react-bundle-1.0.3.tgz#12784de6a076070b150dcedfebfcdb80266b4deb"
react-bundle@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/react-bundle/-/react-bundle-1.0.4.tgz#ea03cae97be357ff8e290e785f4e30d0e065b920"
dependencies:
ispromise "^1.1.0"
prop-types "^15.5.10"
@ -9379,8 +9379,8 @@ unist-util-visit@^1.0.0, unist-util-visit@^1.1.0:
resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.1.3.tgz#ec268e731b9d277a79a5b5aa0643990e405d600b"
universalify@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.0.tgz#9eb1c4651debcc670cc94f1a75762332bb967778"
version "0.1.1"
resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
unpipe@1.0.0, unpipe@~1.0.0:
version "1.0.0"