Fix up styles with ellipsis & add tooltips for deployment columns (#1197)

public/locales/en/translations.json

@@ -680,7 +680,9 @@
       "packageType": "Package Type",
       "configType": "Configuration Type",
       "targeted": "Targeted",
+      "targetedTooltip": "Number of device twins that match the target condition.",
       "applied": "Applied",
+      "appliedTooltip": "Number of device twins that have been modified by the configuration.",
       "failed": "Failed",
       "succeeded": "Succeeded",
       "dateCreated": "Created On"

src/components/pages/deployments/deploymentsHome/deploymentsGrid/deploymentsGridConfig.js

@@ -42,11 +42,13 @@ export const deploymentsColumnDefs = {
   },
   targeted: {
     headerName: 'deployments.grid.targeted',
+    headerTooltip: 'deployments.grid.targetedTooltip',
     field: 'targetedCount',
     valueFormatter: ({ value }) => checkForEmpty(value)
   },
   applied: {
     headerName: 'deployments.grid.applied',
+    headerTooltip: 'deployments.grid.appliedTooltip',
     field: 'appliedCount',
     valueFormatter: ({ value }) => checkForEmpty(value)
   },

src/components/pages/deployments/deploymentsHome/flyouts/deploymentNew/deploymentNew.js

@@ -316,7 +316,7 @@ export class DeploymentNew extends LinkedComponent {
                   !completedSuccessfully &&
                   <FormControl
                     type="select"
-                    className="long"
+                    className="config-type-select"
                     onChange={this.configTypeChange}
                     link={this.configTypeLink}
                     options={configTypeSelectOptions}

src/components/pages/deployments/deploymentsHome/flyouts/deploymentNew/deploymentNew.scss

@@ -28,6 +28,17 @@
 
   .new-deployment-info-star { @include rem-font-size(24px); }
 
+  .config-type-select {
+    @include rem-fallback(width, 400px);
+
+    .Select-value {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      @include rem-fallback(width, 370px);
+    }
+  }
+
   @include themify($themes) {
     .summary-icon svg { fill: themed('colorContentText'); }
 

src/components/shared/cellRenderers/cellRenderer.scss

@@ -35,6 +35,13 @@ $iconSize: 14px;
     > .icon-only { display: none !important; }
   }
 
+  .soft-select-text,
+  .pcs-renderer-time-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .soft-select-link {
     background-color: transparent;
     border: none;
@@ -44,6 +51,8 @@ $iconSize: 14px;
     text-decoration: underline;
     font-family: inherit;
     padding: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
     @include rem-fallback(margin, 4px, 0px);
     @include rem-font-size(14px);
 
@@ -90,6 +99,8 @@ $iconSize: 14px;
     }
 
     .glimmer-icon svg { fill: themed('colorGlimmerSvgFill'); }
+
+    .soft-select-text { color: themed('colorGridCellText'); }
   }
 }
 

src/components/shared/cellRenderers/softSelectLinkRenderer/softSelectLinkRenderer.js

@@ -28,7 +28,7 @@ export class SoftSelectLinkRenderer extends Component {
         {
           isFunc(context.onSoftSelectChange)
             ? <button type="button" className="pcs-renderer-link soft-select-link" onClick={this.onClick}>{value}</button>
-            : value
+            : <div className="soft-select-text">{value}</div>
         }
       </div>
     );

src/components/shared/cellRenderers/timeRenderer/timeRenderer.js

@@ -1,5 +1,7 @@
 // Copyright (c) Microsoft. All rights reserved.
 
+import React from "react";
+
 import moment from 'moment';
 import { DEFAULT_TIME_FORMAT, EMPTY_FIELD_VAL, gridValueFormatters } from 'components/shared/pcsGrid/pcsGridConfig';
 
@@ -16,6 +18,12 @@ const formatTime = (value) => {
 export const TimeRenderer = ({ value }) => {
   const formattedTime = formatTime(value);
   return (
-    formattedTime ? formattedTime : EMPTY_FIELD_VAL
+    <div className="pcs-renderer-cell">
+      <div className="pcs-renderer-time-text">
+        {
+          formattedTime ? formattedTime : EMPTY_FIELD_VAL
+        }
+      </div>
+    </div>
   );
 }

src/components/shared/pageStats/statPropertyPair/statPropertyPair.scss

@@ -15,6 +15,11 @@
     @include rem-fallback(padding-bottom, 10px);
   }
 
+  .stat-property-pair-label-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   @include themify($themes) {
     .stat-property-pair-label { color: themed('colorHeaderText'); }