AMBARI-23188 UI Changes required for Manage Versions /Register Versions Page

ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css

@@ -754,8 +754,9 @@ accordion .panel-group .panel{
   padding-left: 19px;
 }
 
-.repo-version-inline .dot {
-  padding-right: 15px;
+.repo-version-inline .form-group {
+  margin-left: 0;
+  margin-right: 0;
 }
 
 .status-CURRENT {
@@ -984,12 +985,14 @@ thead.view-permission-header > tr > th {
 }
 
 #current-stack-details {
-  bottom: 20px;
-  padding-left: 0px;
+  padding-left: 0;
+  margin-right: 15px;
 }
 
-#current-stack-details .table-borderless {
- border: transparent;
+#current-stack-details .table {
+  position: absolute;
+  top: 2px;
+  border: transparent;
 }
 
 #current-stack-details .table-borderless tbody tr td, .table-borderless tbody tr th, .table-borderless thead tr th {
@@ -1084,7 +1087,7 @@ thead.view-permission-header > tr > th {
   overflow: auto;
   border: 1px solid #ddd;
   padding: 8px 25px;
-  margin: 8px;
+  margin: 2px;
 }
 
 .register-version-form .details-panel .control-label {
@@ -1382,3 +1385,7 @@ a[disabled] i:before {
   color: #ccc;
   cursor: not-allowed;
 }
+
+.display-inline {
+  display: inline;
+}

ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/stackVersionPage.html

@@ -50,7 +50,7 @@
     <div class="tab-content">
       <div class="panel panel-default details-panel">
         <div class="panel-body">
-          <div class="col-sm-3 .pull-left" id="current-stack-details" ng-if="editController">

+          <div class="col-sm-3" id="current-stack-details" ng-if="editController">

             <table class='table table-borderless alert alert-info'>
               <tr>
                 <td>{{'common.stack' | translate}}</td>
@@ -88,13 +88,11 @@
               </ul>
             </div>
             <div class="pull-right form-inline repo-version-inline" ng-if="activeStackVersion.isNonXMLdata">
-              <label class="control-label col-sm-1 repo-version-label">{{'common.name' | translate}}:</label>
-              <div class="col-sm-11">
-                <span class="control-label">
-                  {{activeStackVersion.stackNameVersion}}
-                </span>
-                <span class="dot">.</span>
-                <div class="form-group" ng-class="{'has-error' : versionRegForm.version.$error.pattern}">
+              <div>
+                <label class="control-label repo-version-label">
+                  {{'common.name' | translate}}:&nbsp;{{activeStackVersion.stackNameVersion}}&nbsp;.
+                </label>
+                <div class="form-group reset-horizontal-margin" ng-class="{'has-error' : versionRegForm.version.$error.pattern}">
                   <input class="form-control" name="version" type="text" ng-model="activeStackVersion.editableDisplayName" ng-pattern="activeStackVersion.subVersionPattern"
                          placeholder="{{'versions.placeholder' | translate:{pattern: activeStackVersion.pattern} }}" ng-change="updateCurrentVersionInput()" required/>
                 </div>
@@ -104,7 +102,6 @@
               </div>
             </div>
           </div>
-          <br>
           <div class="version-contents-section" ng-class="{'version-contents-section-register-version': createController}">
             <table class="table table-striped table-condensed">
               <tr ng-repeat="service in activeStackVersion.services">
@@ -199,8 +196,10 @@
                     </div>
                   </div>
                 </div>
-                <div class="col-sm-1 remove-icon" ng-click="removeOS()" ng-class="{'disabled' : useRedhatSatellite}"><i
-                        class="fa fa-minus" aria-hidden="true"></i>{{'common.controls.remove' | translate}}
+                <div class="col-sm-1 remove-icon" ng-click="removeOS()" ng-class="{'disabled' : useRedhatSatellite}">
+                  <span>
+                    <i class="fa fa-minus display-inline" aria-hidden="true"></i>&nbsp;{{'common.controls.remove' | translate}}
+                  </span>
                 </div>
               </div>
             </div>