From 4b7027295f7e107ad91e1ad0f677090f17291bae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Tue, 27 Jun 2017 23:48:36 +0100
Subject: [PATCH] feat(cp-frontend): integrate Progressbar into create/edit DG
 flow

---
 .../components/deployment-groups/create.js    | 55 +++++++++++++++++++
 .../containers/deployment-groups/create.js    | 35 ++++++++----
 .../containers/deployment-groups/manifest.js  |  8 ++-
 packages/ui-toolkit/src/index.js              |  2 +-
 .../ui-toolkit/src/progress-bar/indicator.js  |  2 +-
 5 files changed, 87 insertions(+), 15 deletions(-)

diff --git a/packages/cp-frontend/src/components/deployment-groups/create.js b/packages/cp-frontend/src/components/deployment-groups/create.js
index 2683a900..e45292f4 100644
--- a/packages/cp-frontend/src/components/deployment-groups/create.js
+++ b/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>
+  );
+};
diff --git a/packages/cp-frontend/src/containers/deployment-groups/create.js b/packages/cp-frontend/src/containers/deployment-groups/create.js
index ae618139..e24b7107 100644
--- a/packages/cp-frontend/src/containers/deployment-groups/create.js
+++ b/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>
+  );
+};
diff --git a/packages/cp-frontend/src/containers/deployment-groups/manifest.js b/packages/cp-frontend/src/containers/deployment-groups/manifest.js
index 33a148ba..046ba082 100644
--- a/packages/cp-frontend/src/containers/deployment-groups/manifest.js
+++ b/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}
diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js
index 7fae9e64..375a2ab3 100644
--- a/packages/ui-toolkit/src/index.js
+++ b/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
diff --git a/packages/ui-toolkit/src/progress-bar/indicator.js b/packages/ui-toolkit/src/progress-bar/indicator.js
index 8f581496..44df7e1b 100644
--- a/packages/ui-toolkit/src/progress-bar/indicator.js
+++ b/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>
   );