From ae5eaba2c1b9433d61d85646662f90d138743a4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Thu, 20 Jul 2017 21:48:30 +0100 Subject: [PATCH] fix(cp-frontend): poll until dg is available when editing manifest --- packages/cp-frontend/package.json | 2 +- .../src/components/manifest/edit-or-create.js | 92 ++++++++++++------- .../src/containers/deployment-group/delete.js | 14 ++- .../containers/deployment-groups/create.js | 2 +- .../src/containers/deployment-groups/list.js | 6 +- .../src/containers/manifest/index.js | 26 ++++-- .../src/containers/services/menu.js | 1 - packages/cp-frontend/src/state/state.js | 2 +- yarn.lock | 10 +- 9 files changed, 96 insertions(+), 59 deletions(-) diff --git a/packages/cp-frontend/package.json b/packages/cp-frontend/package.json index 8103d2a8..852275d0 100644 --- a/packages/cp-frontend/package.json +++ b/packages/cp-frontend/package.json @@ -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", diff --git a/packages/cp-frontend/src/components/manifest/edit-or-create.js b/packages/cp-frontend/src/components/manifest/edit-or-create.js index 917a4c14..7ad363df 100644 --- a/packages/cp-frontend/src/components/manifest/edit-or-create.js +++ b/packages/cp-frontend/src/components/manifest/edit-or-create.js @@ -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 }) => - ; +class ManifestEditorBundle extends Component { + constructor() { + super(); -const EEditor = ManifestEditor => ({ input, defaultValue }) => - ; + this.state = {}; + + this.handleRender = this.handleRender.bind(this); + } + handleRender(ManifestEditor) { + if (ManifestEditor) { + setTimeout(() => { + this.setState({ ManifestEditor }); + }, 80); + } + + return ; + } + render() { + if (!this.state.ManifestEditor) { + return ( + import('joyent-manifest-editor')}> + {this.handleRender} + + ); + } + + const { ManifestEditor } = this.state; + const { children, ...rest } = this.props; + + return ( + + {children} + + ); + } +} + +const MEditor = ({ input, defaultValue }) => + ; + +const EEditor = ({ input, defaultValue }) => + ; export const Name = ({ handleSubmit, onCancel, dirty }) =>
@@ -103,16 +148,7 @@ export const Manifest = ({ loading }) => - import('joyent-manifest-editor')}> - {ManifestEditor => - ManifestEditor - ? - : } - + diff --git a/packages/cp-frontend/src/containers/deployment-group/delete.js b/packages/cp-frontend/src/containers/deployment-group/delete.js index 8cca8a1e..99ff70a9 100644 --- a/packages/cp-frontend/src/containers/deployment-group/delete.js +++ b/packages/cp-frontend/src/containers/deployment-group/delete.js @@ -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; diff --git a/packages/cp-frontend/src/containers/deployment-groups/create.js b/packages/cp-frontend/src/containers/deployment-groups/create.js index 85fedaf2..96bb15ee 100644 --- a/packages/cp-frontend/src/containers/deployment-groups/create.js +++ b/packages/cp-frontend/src/containers/deployment-groups/create.js @@ -22,9 +22,9 @@ export default ({ {error && {error.toString()}} ); diff --git a/packages/cp-frontend/src/containers/deployment-groups/list.js b/packages/cp-frontend/src/containers/deployment-groups/list.js index 08434e90..c2b53dc1 100644 --- a/packages/cp-frontend/src/containers/deployment-groups/list.js +++ b/packages/cp-frontend/src/containers/deployment-groups/list.js @@ -133,9 +133,9 @@ const DeploymentGroupList = ({ {name} - - - + + + ); diff --git a/packages/cp-frontend/src/containers/manifest/index.js b/packages/cp-frontend/src/containers/manifest/index.js index fdef5084..9724ecf4 100644 --- a/packages/cp-frontend/src/containers/manifest/index.js +++ b/packages/cp-frontend/src/containers/manifest/index.js @@ -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 : ; 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, - loading, - error - }) + 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); diff --git a/packages/cp-frontend/src/containers/services/menu.js b/packages/cp-frontend/src/containers/services/menu.js index c66990cd..013110ae 100644 --- a/packages/cp-frontend/src/containers/services/menu.js +++ b/packages/cp-frontend/src/containers/services/menu.js @@ -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 => { diff --git a/packages/cp-frontend/src/state/state.js b/packages/cp-frontend/src/state/state.js index bafa499b..3abf866d 100644 --- a/packages/cp-frontend/src/state/state.js +++ b/packages/cp-frontend/src/state/state.js @@ -11,7 +11,7 @@ const state = { name: 'Instances' }, { - pathname: 'manifest', + pathname: 'manifest/edit', name: 'Manifest' } ], diff --git a/yarn.lock b/yarn.lock index 26b6f7c3..609327d0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"