[PLAT-4447][Platform][UI]Alignment issue

Summary: Fixed alignment issue in Volume Info field Test Plan: Tested manually {F27221} {F27222} Reviewers: kkannan, ssutar, cpadinjareveettil, mjoshi, lsangappa Reviewed By: lsangappa Subscribers: jenkins-bot, ui, yugaware Differential Revision: https://phabricator.dev.yugabyte.com/D18238
yugabyte · Jul 12, 2022 · fa73a75 · fa73a75
1 parent b1e5b34
commit fa73a75
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 19 deletions.
diff --git a/managed/ui/src/components/universes/UniverseForm/ClusterFields.js b/managed/ui/src/components/universes/UniverseForm/ClusterFields.js
@@ -1552,7 +1552,7 @@ export default class ClusterFields extends Component {
     //filter out regions that are not from current provider
     const currentProvider = providers.data.find((a) => a.uuid === formValues[clusterType].provider);
     const providerRegions = currentProvider.regions.map((regions) => regions.uuid);
-    const regionItems = value.filter((region) => providerRegions.includes(region.value));
+    const regionItems = value ?? [].filter((region) => providerRegions.includes(region.value));
 
     updateFormField(`${clusterType}.regionList`, regionItems);
     this.setState({ nodeSetViaAZList: false, regionList: regionItems });
@@ -1877,7 +1877,7 @@ export default class ClusterFields extends Component {
         deviceDetail = (
           <span className="volume-info">
             {numVolumes}
-            &times;
+            &nbsp;&times;&nbsp;
             {volumeSize}
           </span>
         );
@@ -2652,28 +2652,24 @@ export default class ClusterFields extends Component {
             </Col>
           </Row>
 
-          <Row className="form-sub-field">
+          <Row className="form-sub-field volume-info-c">
             <Row>
               <Col sm={12} md={12} lg={6}>
                 {deviceDetail && (
-                  <div className="form-right-aligned-labels">
-                    <div className="form-inline-controls">
-                      <div
-                        className="form-group universe-form-instance-info"
-                        data-yb-field="volumn-info"
-                      >
+                  <>
+                    <Col sm={6} className="noPaddingLeft">
+                      <div className="form-right-aligned-labels">
                         <label className="form-item-label form-item-label-shrink">
                           Volume Info
                         </label>
                         {deviceDetail}
                       </div>
-                    </div>
-                    <div className="form-inline-controls">
-                      <div className="form-group universe-form-instance-info">
-                        {storageTypeSelector}
-                      </div>
-                    </div>
-                  </div>
+                    </Col>
+
+                    <Col sm={5} className="noPaddingLeft">
+                      <span className="volume-info">{storageTypeSelector}</span>
+                    </Col>
+                  </>
                 )}
                 {!this.checkVolumeSizeRestrictions() && (
                   <div className="has-error">
@@ -2687,11 +2683,11 @@ export default class ClusterFields extends Component {
 
             <Row>
               <Col sm={12} md={12} lg={6}>
-                <Col sm={5} className="noPaddingLeft">
+                <Col sm={6} className="noPaddingLeft">
                   <div className="form-right-aligned-labels right-side-form-field">{iopsField}</div>
                 </Col>
 
-                <Col sm={6} className="noPaddingLeft">
+                <Col sm={5} className="noPaddingLeft">
                   <div className="form-right-aligned-labels right-side-form-field throughput-field">
                     {throughputField}
                   </div>

diff --git a/managed/ui/src/components/universes/UniverseForm/UniverseForm.scss b/managed/ui/src/components/universes/UniverseForm/UniverseForm.scss
@@ -202,8 +202,17 @@
     padding-bottom: 10px;
   }
 
-  .throughput-field .form-item-label {
+  .volume-info-c .form-item-label {
     min-width: 170px !important;
+    font-weight: 500;
+  }
+
+  .volume-info,
+  .volume-info .form-group,
+  .volume-info .yb-field-group {
+    display: flex;
+    align-items: center;
+    width: 100%;
   }
 }