Azure · isaac-dasan · Oct 9, 2018 · Oct 9, 2018 · Oct 9, 2018 · Oct 9, 2018
diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
@@ -579,8 +579,8 @@
         "priorityPlaceHolder": "Enter priority",
         "namePlaceHolder": "Enter name",
         "targetText": "targeted devices",
-        "infoText": "* This deployment runs continuously. Every edge device (and any you add in the future) in the selected device group will receive this package.",
-        "successText": "View your deployment status detail for {{deploymentName}}",
+        "infoText": "This deployment runs continuously. Every edge device (and any you add in the future) in the selected device group will receive this package.",
+        "successText": "View your deployment status detail for <1><0>{{deploymentName}}</0></1>.",
         "creating": "Creating deployment",
         "validation": {
           "required": "Is required",
@@ -657,7 +657,9 @@
         "browseText": "for a package file",
         "placeHolder": "Select package type",
         "package": "Package",
-        "deploymentText": "To deploy packages, go to the 'Deployments' page and click '+ New Deployment' button.",
+        "deploymentsPage": "Deployments page",
+        "newDeployment": "+ New Deployment",
+        "deploymentText": "To deploy packages, go to the <1>Deployments page</1>, and then click <3>+ New Deployment</3> button.",
         "validation": {
           "required": "Is required"
         }

diff --git a/src/components/pages/deployments/deploymentDetails/deploymentDetails.js b/src/components/pages/deployments/deploymentDetails/deploymentDetails.js
@@ -15,7 +15,8 @@ import {
   RefreshBar,
   StatSection,
   StatGroup,
-  StatProperty
+  StatProperty,
+  StatPropertyPair
 } from 'components/shared';
 import { TimeRenderer } from 'components/shared/cellRenderers';
 import { getPackageTypeTranslation, svgs } from 'utilities';
@@ -135,20 +136,12 @@ export class DeploymentDetails extends Component {
               <div className="deployment-name">
                 {name}
               </div>
-              <StatSection className="summary-container">
+              <StatSection className="summary-container-row1">
                 <StatGroup className="summary-container-columns">
                   <StatProperty
                     value={appliedCount}
                     label={t('deployments.details.devices')}
                     size="large" />
-                  <StatGroup className="summary-container-second-row">
-                    <div className="deployment-details-summary-labels">
-                      {t('deployments.details.priority')}
-                    </div>
-                    <div className="deployment-details-summary-values">
-                      {priority}
-                    </div>
-                  </StatGroup>
                 </StatGroup>
                 <StatGroup className="summary-container-columns">
                   <StatProperty
@@ -157,52 +150,39 @@ export class DeploymentDetails extends Component {
                     svg={svgs.failed}
                     svgClassName="stat-failed"
                     size="large" />
-                  <StatGroup className="summary-container-second-row">
-                    <StatProperty
-                      value={succeededCount}
-                      label={t('deployments.details.succeeded')}
-                      size="small" />
-                    <StatProperty
-                      value={pendingCount}
-                      label={t('deployments.details.pending')}
-                      size="small" />
-                  </StatGroup>
                 </StatGroup>
                 <StatGroup className="summary-container-columns">
-                  <StatGroup>
-                    <div className="deployment-details-summary-labels">
-                      {t('deployments.details.deviceGroup')}
-                    </div>
-                    <div className="deployment-details-summary-values">
-                      {deviceGroupName}
-                    </div>
-                  </StatGroup>
-                  <StatGroup className="summary-container-second-row">
-                    <div className="deployment-details-summary-labels">
-                      {t('deployments.details.start')}
-                    </div>
-                    <div className="deployment-details-summary-values">
-                      {TimeRenderer({ value: createdDateTimeUtc })}
-                    </div>
-                  </StatGroup>
+                  <StatPropertyPair label={t('deployments.details.deviceGroup')} value={deviceGroupName} />
                 </StatGroup>
                 <StatGroup className="summary-container-columns">
-                  <StatGroup>
-                    <div className="deployment-details-summary-labels">
-                      {t('deployments.details.packageType')}
-                    </div>
-                    <div className="deployment-details-summary-values">
-                      {type ? getPackageTypeTranslation(type, t) : undefined}
-                    </div>
-                  </StatGroup>
-                  <StatGroup className="summary-container-second-row">
-                    <div className="deployment-details-summary-labels">
-                      {t('deployments.details.package')}
-                    </div>
-                    <div className="deployment-details-summary-values">
-                      {packageName}
-                    </div>
-                  </StatGroup>
+                  <StatPropertyPair
+                    label={t('deployments.details.packageType')}
+                    value={type ? getPackageTypeTranslation(type, t) : undefined} />
+                </StatGroup>
+              </StatSection>
+              <StatSection className="summary-container-row2">
+                <StatGroup className="summary-container-columns">
+                  <StatPropertyPair label={t('deployments.details.priority')} value={priority} />
+                </StatGroup>
+                <StatGroup className="summary-container-columns">
+                  <StatProperty
+                    className="summary-container-succeeded"
+                    value={succeededCount}
+                    label={t('deployments.details.succeeded')}
+                    size="small" />
+                  <StatProperty
+                    className="summary-container-pending"
+                    value={pendingCount}
+                    label={t('deployments.details.pending')}
+                    size="small" />
+                </StatGroup>
+                <StatGroup className="summary-container-columns">
+                  <StatPropertyPair
+                    label={t('deployments.details.start')}
+                    value={TimeRenderer({ value: createdDateTimeUtc })} />
+                </StatGroup>
+                <StatGroup className="summary-container-columns">
+                  <StatPropertyPair label={t('deployments.details.package')} value={packageName} />
                 </StatGroup>
               </StatSection>
             </div>

diff --git a/src/components/pages/deployments/deploymentDetails/deploymentDetails.scss b/src/components/pages/deployments/deploymentDetails/deploymentDetails.scss
@@ -10,6 +10,8 @@
   flex-grow: 1;
 
   .deployment-details-summary-container {
+    @include rem-fallback(padding-right, 40px);
+
     .deployment-name{
       font-weight: 700;
       @include rem-font-size(34px);
@@ -19,28 +21,47 @@
     .deployment-details-summary-labels {
       text-transform: uppercase;
       @include rem-font-size(12px);
-      @include rem-fallback(padding-bottom, 10px);
     }
 
     .stat-failed { @include rem-font-size(16px); }
 
     .summary-container { @include rem-fallback(padding-top, 30px); }
 
-    .summary-container-columns { @include rem-fallback(min-width, 200px); }
+    .summary-container-columns {
+      justify-content: space-around;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      @include rem-fallback(height, 50px);
+      @include rem-fallback(width, 200px);
+     }
+
+    .summary-container-row1 { @include rem-fallback(padding-top, 30px); }
 
-    .summary-container-second-row { @include rem-fallback(padding-top, 20px); }
+    .summary-container-row2 { @include rem-fallback(padding-top, 20px); }
+
+    .summary-container-succeeded {
+      line-height: unset;
+      @include rem-fallback(padding-top, 1px);
+      @include rem-fallback(padding-bottom, 6px);
+    }
+
+    .summary-container-pending {
+      padding-top: 0px;
+      line-height: unset;
+      @include rem-fallback(padding-bottom, 3px);
+    }
   }
 
   .deployment-details-devices-affected {
     @include rem-fallback(border-top, 1px, solid);
     @include rem-fallback(padding, 35px, 0px, 0px, 0px);
-    @include rem-fallback(margin-top, 50px);
+    @include rem-fallback(margin-top, 30px);
   }
 
   @include themify($themes) {
-    .deployment-details-summary-values { color: themed('colorContentText'); }
-
-    .deployment-details-summary-labels, .deployment-name { color: themed('colorHeaderText'); }
+    .deployment-name,
+    .deployment-details-summary-labels { color: themed('colorHeaderText'); }
 
     .stat-failed { fill: themed('colorFailed'); }
 

diff --git a/...onents/pages/deployments/deploymentsHome/flyouts/deploymentNew/deploymentNew.container.js b/...onents/pages/deployments/deploymentsHome/flyouts/deploymentNew/deploymentNew.container.js
@@ -6,6 +6,7 @@ import { DeploymentNew } from './deploymentNew';
 import {
   getCreateDeploymentError,
   getCreateDeploymentPendingStatus,
+  getLastItemId,
   epics as deploymentsEpics,
   redux as deploymentsRedux
 } from 'store/reducers/deploymentsReducer';
@@ -38,7 +39,8 @@ const mapStateToProps = state => ({
   devicesPending: getDevicesByConditionPendingStatus(state),
   devicesError: getDevicesByConditionError(state),
   createIsPending: getCreateDeploymentPendingStatus(state),
-  createError: getCreateDeploymentError(state)
+  createError: getCreateDeploymentError(state),
+  createdDeploymentId: getLastItemId(state)
 });
 
 // Wrap the dispatch methods

diff --git a/src/components/pages/deployments/deploymentsHome/flyouts/deploymentNew/deploymentNew.js b/src/components/pages/deployments/deploymentsHome/flyouts/deploymentNew/deploymentNew.js
@@ -1,6 +1,8 @@
 // Copyright (c) Microsoft. All rights reserved.
 
 import React from 'react';
+import { Trans } from 'react-i18next';
+import { Link } from "react-router-dom";
 
 import { packageTypeOptions, toDiagnosticsModel, toSinglePropertyDiagnosticsModel } from 'services/models';
 import { svgs, LinkedComponent, Validator } from 'utilities';
@@ -184,7 +186,8 @@ export class DeploymentNew extends LinkedComponent {
       packages,
       deviceGroups,
       devicesPending,
-      devicesError
+      devicesError,
+      createdDeploymentId
     } = this.props;
     const {
       name,
@@ -237,7 +240,7 @@ export class DeploymentNew extends LinkedComponent {
                   type="text"
                   className="long"
                   link={this.nameLink}
-                  onChange={(target) => this.genericOnChange('NewDeployment_NameText', 'Name', target.value)}
+                  onBlur={(event) => this.genericOnChange('NewDeployment_NameText', 'Name', event.target.value)}
                   placeholder={t('deployments.flyouts.new.namePlaceHolder')} />
               }
               {
@@ -271,7 +274,7 @@ export class DeploymentNew extends LinkedComponent {
                   disabled={!isPackageTypeSelected}
                   link={this.packageIdLink}
                   options={packageOptions}
-                  onChange={(target) => this.genericOnChange('NewDeployment_PackageSelect', 'Package', target.value.value)}
+                  onChange={(event) => this.genericOnChange('NewDeployment_PackageSelect', 'Package', event.target.value.value)}
                   placeholder={isPackageTypeSelected ? t('deployments.flyouts.new.packagePlaceHolder') : ""}
                   clearable={false}
                   searchable={false} />
@@ -313,7 +316,7 @@ export class DeploymentNew extends LinkedComponent {
                   type="text"
                   className="long"
                   link={this.priorityLink}
-                  onChange={(target) => this.genericOnChange('NewDeployment_PriorityNumber', 'Priority', target.value)}
+                  onBlur={(event) => this.genericOnChange('NewDeployment_PriorityNumber', 'Priority', event.target.value)}
                   placeholder={t('deployments.flyouts.new.priorityPlaceHolder')} />
               }
               {
@@ -342,13 +345,22 @@ export class DeploymentNew extends LinkedComponent {
               {/** Displays a info message if package type selected is edge Manifest */
                 !changesApplied && edgePackageSelected &&
                 <div className="new-deployment-info-text">
+                  <strong className="new-deployment-info-star">* </strong>
                   {t('deployments.flyouts.new.infoText')}
                 </div>
               }
               {/** Displays a success message if deployment is created successfully */
                 completedSuccessfully &&
                 <div className="new-deployment-info-text">
-                  {t('deployments.flyouts.new.successText', { deploymentName: name })}
+                  <Trans i18nKey={"deployments.flyouts.new.successText"}>
+                    View your deployment status detail for
+                    <Link
+                      className="new-deployment-detail-page-link"
+                      to={`/deployments/${createdDeploymentId}`}>
+                      {{ deploymentName: name }}
+                    </Link>
+                    .
+                  </Trans>
                 </div>
               }
               {/** Displays an error message if one occurs while creating deployment. */

diff --git a/src/components/pages/deployments/deploymentsHome/flyouts/deploymentNew/deploymentNew.scss b/src/components/pages/deployments/deploymentsHome/flyouts/deploymentNew/deploymentNew.scss
@@ -7,7 +7,12 @@
 .new-deployment-content {
   @include rem-fallback(padding-top, 24px);
 
-  .new-deployment-info-text,
+  .new-deployment-info-text {
+    line-height: 1.7;
+    @include rem-fallback(padding-top, 24px);
+    @include rem-font-size(14px);
+   }
+
   .new-deployment-flyout-error { @include rem-fallback(padding-top, 24px); }
 
   .new-deployment-formGroup,
@@ -21,11 +26,18 @@
     @include rem-fallback(margin-left, 8px);
   }
 
+  .new-deployment-info-star { @include rem-font-size(24px); }
+
   @include themify($themes) {
     .summary-icon svg { fill: themed('colorContentText'); }
 
     .new-deployment-flyout-error { border-color: themed('colorAlert'); }
 
     .new-deployment-success-labels { color: themed('colorFlyoutText'); }
+
+    .new-deployment-detail-page-link,
+    .new-deployment-info-text, { color: themed('colorContentText'); }
+
+    .new-deployment-info-star { color: themed('colorAlert'); }
   }
 }