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 }) => { ); }; + +export const Progress = ({ stage, create, edit }) => { + const _nameCompleted = stage !== 'name'; + const _nameActive = stage === 'name'; + + const _name = !create + ? null + : + + Name the group + + ; + + const _manifestCompleted = stage === 'review'; + const _manifestActive = create ? stage === 'manifest' : stage === 'edit'; + + const _manifest = ( + + + Define services + + + ); + + const _reviewActive = stage === 'review'; + + const _review = ( + + + Review and deploy + + + ); + + return ( + + {_name} + {_manifest} + {_review} + + ); +}; 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 }) => - -

Creating deployment group

- {loading && } - {error && {error.toString()}} - -
; +export default ({ + loading, + error, + manifest = '', + deploymentGroup = null, + match +}) => { + const stage = match.params.stage; + + return ( + +

Creating deployment group

+ {loading && } + {error && {error.toString()}} + + +
+ ); +}; 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 : ; const _error = !error ? null : {error.toString()}; @@ -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 (

Edit Manifest

+ {_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 ( - + );