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

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",

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 {
-  <ManifestEditor mode="yaml" {...input} value={input.value || defaultValue} />;
+  constructor() {
+    super();
 
-const EEditor = ManifestEditor => ({ input, defaultValue }) =>
+    this.state = {};
-  <ManifestEditor mode="ini" {...input} value={input.value || defaultValue} />;
+
+    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')}>
+    <Field name="manifest" defaultValue={defaultValue} component={MEditor} />
-      {ManifestEditor =>
-        ManifestEditor
-          ? <Field
-              name="manifest"
-              defaultValue={defaultValue}
-              component={MEditor(ManifestEditor)}
-            />
-          : <Dots2 />}
-    </Bundle>
     <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')}>
+      <Field
-        {ManifestEditor =>
+        name={`file-value-${id}`}
-          ManifestEditor
+        defaultValue={value}
-            ? <Field
+        component={EEditor}
-                name={`file-value-${id}`}
+      />
-                defaultValue={value}
-                component={EEditor(ManifestEditor)}
-              />
-            : <Dots2 />}
-      </Bundle>
     </div>
   );
 
@@ -179,16 +210,7 @@ export const Environment = ({
   loading
 }) =>
   <form onSubmit={handleSubmit}>
-    <Bundle load={() => import('joyent-manifest-editor')}>
+    <Field name="environment" defaultValue={defaultValue} component={EEditor} />
-      {ManifestEditor =>
-        ManifestEditor
-          ? <Field
-              name="environment"
-              defaultValue={defaultValue}
-              component={EEditor(ManifestEditor)}
-            />
-          : <Dots2 />}
-    </Bundle>
     <Files files={files} onRemoveFile={onRemoveFile} loading={loading} />
     <ButtonsRow>
       <Button onClick={onCancel} secondary>Cancel</Button>

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)(
+const DeploymentGroupDeleteWithData = compose(
-  DeploymentGroupDelete
+  DeleteDeploymentGroupGql,
-);
+  DeploymentGroupGql
+)(DeploymentGroupDelete);
 
 export default DeploymentGroupDeleteWithData;

packages/cp-frontend/src/containers/deployment-groups/create.js

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

packages/cp-frontend/src/containers/deployment-groups/list.js

@@ -133,9 +133,9 @@ const DeploymentGroupList = ({
         <StyledLink to={`${match.path}/${slug}`}>
           <ServiceTitle>{name}</ServiceTitle>
         </StyledLink>
-          <StyledIconButton to={`${match.url}/${slug}/delete`}>
+        <StyledIconButton to={`${match.url}/${slug}/delete`}>
-            <BinIcon />
+          <BinIcon />
-          </StyledIconButton>
+        </StyledIconButton>
       </Box>
     </Col>
   );

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
     : <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 } }) => ({
+    props: ({ data: { deploymentGroups, loading, error, startPolling, stopPolling } }) => {
-      deploymentGroup: deploymentGroups && deploymentGroups.length
+      const dgs = forceArray(deploymentGroups);
-        ? deploymentGroups[0]
+
-        : null,
+      if (!dgs.length) {
-      loading,
+        startPolling(1000);
-      error
+      } else {
-    })
+        stopPolling();
+      }
+
+      return {
+        deploymentGroup: dgs[0],
+        loading,
+        error
+      };
+    }
   })
 )(Manifest);

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 => {

packages/cp-frontend/src/state/state.js

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

yarn.lock

@@ -7300,9 +7300,9 @@ react-broadcast@^0.1.2:
   dependencies:
     invariant "^2.2.1"
 
-react-bundle@^1.0.3:
+react-bundle@^1.0.4:
-  version "1.0.3"
+  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/react-bundle/-/react-bundle-1.0.3.tgz#12784de6a076070b150dcedfebfcdb80266b4deb"
+  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"
+  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.0.tgz#9eb1c4651debcc670cc94f1a75762332bb967778"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
 
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"