feat(cp-frontend): integrate Progressbar into create/edit DG flow

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

@@ -13,6 +13,9 @@ import {
   Input,
   Button,
   Card,
+  Progressbar,
+  ProgressbarItem,
+  ProgressbarButton,
   H3,
   typography
 } from 'joyent-ui-toolkit';
@@ -115,3 +118,55 @@ export const Review = ({ handleSubmit, onCancel, dirty, ...state }) => {
     </form>
   );
 };
+
+export const Progress = ({ stage, create, edit }) => {
+  const _nameCompleted = stage !== 'name';
+  const _nameActive = stage === 'name';
+
+  const _name = !create
+    ? null
+    : <ProgressbarItem>
+        <ProgressbarButton
+          zIndex="10"
+          completed={_nameCompleted}
+          active={_nameActive}
+          first
+        >
+          Name the group
+        </ProgressbarButton>
+      </ProgressbarItem>;
+
+  const _manifestCompleted = stage === 'review';
+  const _manifestActive = create ? stage === 'manifest' : stage === 'edit';
+
+  const _manifest = (
+    <ProgressbarItem>
+      <ProgressbarButton
+        zIndex="9"
+        completed={_manifestCompleted}
+        active={_manifestActive}
+        first={edit}
+      >
+        Define services
+      </ProgressbarButton>
+    </ProgressbarItem>
+  );
+
+  const _reviewActive = stage === 'review';
+
+  const _review = (
+    <ProgressbarItem>
+      <ProgressbarButton zIndex="8" active={stage === 'review'} last>
+        Review and deploy
+      </ProgressbarButton>
+    </ProgressbarItem>
+  );
+
+  return (
+    <Progressbar>
+      {_name}
+      {_manifest}
+      {_review}
+    </Progressbar>
+  );
+};

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

@@ -1,18 +1,31 @@
 import React from 'react';
 
 import DeploymentGroupEditOrCreate from './edit-or-create';
+import { Progress } from '@components/deployment-groups/create';
 import { LayoutContainer } from '@components/layout';
 import { DeploymentGroupsLoading } from '@components/deployment-groups';
 import { H2 } from 'joyent-ui-toolkit';
 
-export default ({ loading, error, manifest = '', deploymentGroup = null }) =>
-  <LayoutContainer>
-    <H2>Creating deployment group</H2>
-    {loading && <DeploymentGroupsLoading />}
-    {error && <span>{error.toString()}</span>}
-    <DeploymentGroupEditOrCreate
-      create
-      manifest={manifest}
-      deploymentGroup={deploymentGroup}
-    />
-  </LayoutContainer>;
+export default ({
+  loading,
+  error,
+  manifest = '',
+  deploymentGroup = null,
+  match
+}) => {
+  const stage = match.params.stage;
+
+  return (
+    <LayoutContainer>
+      <H2>Creating deployment group</H2>
+      {loading && <DeploymentGroupsLoading />}
+      {error && <span>{error.toString()}</span>}
+      <Progress stage={stage} create />
+      <DeploymentGroupEditOrCreate
+        create
+        manifest={manifest}
+        deploymentGroup={deploymentGroup}
+      />
+    </LayoutContainer>
+  );
+};

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

@@ -6,6 +6,7 @@ import ManifestQuery from '@graphql/Manifest.gql';
 import DeploymentGroupBySlugQuery from '@graphql/DeploymentGroupBySlug.gql';
 
 import DeploymentGroupEditOrCreate from './edit-or-create';
+import { Progress } from '@components/deployment-groups/create';
 import { LayoutContainer } from '@components/layout';
 import { DeploymentGroupsLoading } from '@components/deployment-groups';
 import { H2 } from 'joyent-ui-toolkit';
@@ -14,8 +15,10 @@ const Manifest = ({
   loading,
   error,
   manifest = '',
-  deploymentGroup = null
+  deploymentGroup = null,
+  match
 }) => {
+  const stage = match.params.stage;
   const _loading = !loading ? null : <DeploymentGroupsLoading />;
   const _error = !error ? null : <span>{error.toString()}</span>;
 
@@ -27,7 +30,7 @@ const Manifest = ({
         deploymentGroup={deploymentGroup}
       />;
 
-  const _notice = !err &&
+  const _notice = !error &&
     !loading &&
     deploymentGroup &&
     deploymentGroup.imported &&
@@ -41,6 +44,7 @@ const Manifest = ({
   return (
     <LayoutContainer>
       <H2>Edit Manifest</H2>
+      <Progress stage={stage} edit />
       {_error}
       {_loading}
       {_notice}

packages/ui-toolkit/src/index.js

@@ -19,7 +19,7 @@ export { Tooltip, TooltipButton, TooltipDivider } from './tooltip';
 export { Dropdown } from './dropdown';
 
 export {
-  Progressbar,
+  default as Progressbar,
   ProgressbarButton,
   ProgressbarItem,
   Indicator

packages/ui-toolkit/src/progress-bar/indicator.js

@@ -46,7 +46,7 @@ const Indicator = ({ first, completed, active, last, ...rest }) => {
   };
 
   return (
-    <StyledIndicator {...state} {...props}>
+    <StyledIndicator {...state} {...rest}>
       <Tick {...state} />
     </StyledIndicator>
   );