Return-Path: <commits-return-49371-archive-asf-public=cust-asf.ponee.io@ambari.apache.org>
X-Original-To: archive-asf-public-internal@cust-asf2.ponee.io
Delivered-To: archive-asf-public-internal@cust-asf2.ponee.io
Received: from cust-asf.ponee.io (cust-asf.ponee.io [163.172.22.183])
	by cust-asf2.ponee.io (Postfix) with ESMTP id 13928200D4E
	for <archive-asf-public-internal@cust-asf2.ponee.io>; Thu, 16 Nov 2017 16:36:28 +0100 (CET)
Received: by cust-asf.ponee.io (Postfix)
	id 129A7160C0D; Thu, 16 Nov 2017 15:36:28 +0000 (UTC)
Delivered-To: archive-asf-public@cust-asf.ponee.io
Received: from mail.apache.org (hermes.apache.org [140.211.11.3])
	by cust-asf.ponee.io (Postfix) with SMTP id 5C37F160C17
	for <archive-asf-public@cust-asf.ponee.io>; Thu, 16 Nov 2017 16:36:26 +0100 (CET)
Received: (qmail 61477 invoked by uid 500); 16 Nov 2017 15:36:25 -0000
Mailing-List: contact commits-help@ambari.apache.org; run by ezmlm
Precedence: bulk
List-Help: <mailto:commits-help@ambari.apache.org>
List-Unsubscribe: <mailto:commits-unsubscribe@ambari.apache.org>
List-Post: <mailto:commits@ambari.apache.org>
List-Id: <commits.ambari.apache.org>
Reply-To: ambari-dev@ambari.apache.org
Delivered-To: mailing list commits@ambari.apache.org
Received: (qmail 61184 invoked by uid 99); 16 Nov 2017 15:36:25 -0000
Received: from git1-us-west.apache.org (HELO git1-us-west.apache.org) (140.211.11.23)
    by apache.org (qpsmtpd/0.29) with ESMTP; Thu, 16 Nov 2017 15:36:25 +0000
Received: by git1-us-west.apache.org (ASF Mail Server at git1-us-west.apache.org, from userid 33)
	id 7E3F8F5EC3; Thu, 16 Nov 2017 15:36:24 +0000 (UTC)
Content-Type: text/plain; charset="us-ascii"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit
From: amagyar@apache.org
To: commits@ambari.apache.org
Date: Thu, 16 Nov 2017 15:36:50 -0000
Message-Id: <2800daab7bf84e41a71a865fe96e8faa@git.apache.org>
In-Reply-To: <385b5a1905bb4dbfa30f4f3192ec10a2@git.apache.org>
References: <385b5a1905bb4dbfa30f4f3192ec10a2@git.apache.org>
X-Mailer: ASF-Git Admin Mailer
Subject: [27/50] [abbrv] ambari git commit: AMBARI-22425 Ambari 3.0: Implement
 new design for Admin View: fix checkboxes. (atkach)
archived-at: Thu, 16 Nov 2017 15:36:28 -0000

AMBARI-22425 Ambari 3.0: Implement new design for Admin View: fix checkboxes. (atkach)


Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/2a2fdaae
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/2a2fdaae
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/2a2fdaae

Branch: refs/heads/branch-feature-AMBARI-22008
Commit: 2a2fdaaee7f522732ba3f22f0fc499f001c28a7d
Parents: 08a83fa
Author: Andrii Tkach <atkach@apache.org>
Authored: Mon Nov 13 13:55:43 2017 +0200
Committer: Attila Magyar <amagyar@hortonworks.com>
Committed: Thu Nov 16 16:35:29 2017 +0100

----------------------------------------------------------------------
 .../resources/ui/admin-web/app/styles/main.css  | 15 ++++----
 .../ui/admin-web/app/styles/top-nav.css         |  3 ++
 .../admin-web/app/views/ambariViews/create.html | 20 +++++------
 .../admin-web/app/views/ambariViews/edit.html   | 37 +++++++++-----------
 .../app/views/authentication/main.html          |  8 ++---
 .../app/views/modals/AddVersionModal.html       | 14 ++++----
 .../admin-web/app/views/stackVersions/list.html | 11 ++++--
 .../views/stackVersions/stackVersionPage.html   | 27 +++++++-------
 8 files changed, 65 insertions(+), 70 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/2a2fdaae/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css b/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css
index 4224f62..9838227 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css
@@ -459,6 +459,11 @@ table.no-border tr td{
   vertical-align: top;
 }
 
+.table td > .checkbox {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
 .groups-pane table ul{
   list-style-type: none;
   margin: 0;
@@ -821,15 +826,6 @@ accordion .panel-group .panel{
   padding-left: 19px;
 }
 
-.repo-version-inline {
-  left: 11%;
-}
-
-.repo-version-inline .repo-version-label {
-  text-align: left;
-
-}
-
 .repo-version-inline .dot {
   padding-right: 15px;
 }
@@ -1164,6 +1160,7 @@ thead.view-permission-header > tr > th {
 }
 
 .register-version-form .details-panel .control-label {
+  line-height: 20px;
   text-align: left;
   padding: 7px 2px;
   font-weight: normal;

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a2fdaae/ambari-admin/src/main/resources/ui/admin-web/app/styles/top-nav.css
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/styles/top-nav.css b/ambari-admin/src/main/resources/ui/admin-web/app/styles/top-nav.css
index f93b2e6..327dc7f 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/styles/top-nav.css
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/styles/top-nav.css
@@ -37,6 +37,9 @@
   font-size: 16px;
 }
 
+#top-nav .container {
+  background: #fff;
+}
 
 /** Override bootstrap styles **/
 @media (min-width: 0) {

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a2fdaae/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/create.html
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/create.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/create.html
index 25f1487..81171c1 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/create.html
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/create.html
@@ -80,9 +80,8 @@
       <div class="form-group">
         <div class="col-sm-10 col-sm-offset-3">
           <div class="checkbox">
-            <label>
-              <input type="checkbox" ng-model='instance.visible' class="visibilityCheckbox"> {{'views.visible' | translate}}
-            </label>
+            <input type="checkbox" ng-model='instance.visible' id="visibility-checkbox" class="visibilityCheckbox">
+            <label for="visibility-checkbox">{{'views.visible' | translate}}</label>
           </div>
         </div>
       </div>
@@ -122,9 +121,8 @@
 
     <div class="panel-body property-form" popover="{{clusterConfigurableErrorMsg}}" popover-trigger="mouseenter">
       <div class="checkbox create-checkbox-cluster">
-        <label>
-          <input type="radio" ng-disabled="!clusterConfigurable || noLocalClusterAvailible" ng-model="instance.clusterType" ng-change="enableLocalCluster()" value="LOCAL_AMBARI" class="visibilityCheckbox"> {{'views.localCluster' | translate}}
-        </label>
+        <input type="radio" id="local-cluster" ng-disabled="!clusterConfigurable || noLocalClusterAvailible" ng-model="instance.clusterType" ng-change="enableLocalCluster()" value="LOCAL_AMBARI" class="visibilityCheckbox">
+        <label for="local-cluster">{{'views.localCluster' | translate}}</label>
       </div>
 
       <div class="form-horizontal property-form">
@@ -143,9 +141,8 @@
 
     <div class="panel-body property-form" popover="{{clusterConfigurableErrorMsg}}" popover-trigger="mouseenter">
       <div class="checkbox create-checkbox-cluster">
-        <label>
-          <input type="radio" ng-disabled="!clusterConfigurable || noRemoteClusterAvailible" ng-model="instance.clusterType" ng-change="enableLocalCluster()" value="REMOTE_AMBARI" class="visibilityCheckbox"> {{'views.remoteCluster' | translate}}
-        </label>
+        <input type="radio" id="remote-cluster" ng-disabled="!clusterConfigurable || noRemoteClusterAvailible" ng-model="instance.clusterType" ng-change="enableLocalCluster()" value="REMOTE_AMBARI" class="visibilityCheckbox">
+        <label for="remote-cluster">{{'views.remoteCluster' | translate}}</label>
       </div>
 
       <div class="form-horizontal property-form">
@@ -164,9 +161,8 @@
 
     <div class="panel-body property-form" ng-hide="!numberOfClusterConfigs">
       <div class="checkbox">
-        <label>
-          <input type="radio" ng-model="instance.clusterType" value="NONE" class="visibilityCheckbox"> {{'views.custom' | translate}}
-        </label>
+        <input type="radio" id="custom-view" ng-model="instance.clusterType" value="NONE" class="visibilityCheckbox">
+        <label for="custom-view">{{'views.custom' | translate}}</label>
       </div>
       <div class="alert alert-danger bottom-margin top-margin" ng-show='form.instanceCreateForm.generalValidationError'>
         {{form.instanceCreateForm.generalValidationError}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a2fdaae/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/edit.html
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/edit.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/edit.html
index f91862d..a86e285 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/edit.html
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/edit.html
@@ -107,9 +107,8 @@
         <div class="form-group">
           <div class="col-sm-offset-3 col-sm-10">
             <div class="checkbox">
-              <label>
-                <input type="checkbox" ng-model="settings.visible" ng-class="instancevisibility-input"> {{'views.visible' | translate}}
-              </label>
+              <input type="checkbox" class="form-control" ng-model="settings.visible" id="visible" ng-class="instancevisibility-input">
+              <label for="visible">{{'views.visible' | translate}}</label>
             </div>
           </div>
         </div>
@@ -173,9 +172,8 @@
   </div>
   <div class="panel-body property-form" popover="{{clusterConfigurableErrorMsg}}" popover-trigger="mouseenter">
     <div class="checkbox">
-      <label>
-        <input type="radio" ng-model="data.clusterType" ng-change="enableLocalCluster()" ng-disabled="!clusterConfigurable || editConfigurationDisabled || noLocalClusterAvailible" value="LOCAL_AMBARI" class="visibilityCheckbox"> {{'views.localCluster' | translate}}
-      </label>
+      <input type="radio" id="local-cluster" ng-model="data.clusterType" ng-change="enableLocalCluster()" ng-disabled="!clusterConfigurable || editConfigurationDisabled || noLocalClusterAvailible" value="LOCAL_AMBARI" class="visibilityCheckbox form-control">
+      <label for="local-cluster">{{'views.localCluster' | translate}}</label>
     </div>
     <div class="form-horizontal property-form">
       <div class="form-group">
@@ -189,9 +187,8 @@
     </div>
     <p>&nbsp</p>
       <div class="checkbox">
-        <label>
-          <input type="radio" ng-model="data.clusterType" ng-change="enableLocalCluster()" ng-disabled="!clusterConfigurable || editConfigurationDisabled || noRemoteClusterAvailible" value="REMOTE_AMBARI" class="visibilityCheckbox"> {{'views.remoteCluster' | translate}}
-        </label>
+        <input type="radio" id="remote-cluster" ng-model="data.clusterType" ng-change="enableLocalCluster()" ng-disabled="!clusterConfigurable || editConfigurationDisabled || noRemoteClusterAvailible" value="REMOTE_AMBARI" class="visibilityCheckbox form-control">
+        <label for="remote-cluster">{{'views.remoteCluster' | translate}}</label>
       </div>
       <div class="form-horizontal property-form">
         <div class="form-group">
@@ -205,15 +202,14 @@
       </div>
       <p>&nbsp</p>
     <div class="checkbox" ng-hide="isConfigurationEmpty">
-      <label>
-        <input type="radio"
-         ng-model="data.clusterType"
-         ng-disabled="editConfigurationDisabled"
-         value="NONE"
-         ng-change="disableLocalCluster()"
-         class="visibilityCheckbox">
-        {{'views.custom' | translate}}
-      </label>
+      <input type="radio"
+             id="custom-view"
+             ng-model="data.clusterType"
+             ng-disabled="editConfigurationDisabled"
+             value="NONE"
+             ng-change="disableLocalCluster()"
+             class="visibilityCheckbox">
+      <label for="custom-view">{{'views.custom' | translate}}</label>
     </div>
   </div>
   <div class="panel-body edit-view-custom-wrap">
@@ -289,9 +285,8 @@
       <div class="col-sm-offset-2 col-sm-10">
         <div class="checkbox col-sm-12" ng-repeat="key in permissionRoles">
           <div ng-init="i18nKey = 'views.clusterPermissions.' + key.split('.').join('').toLowerCase()">
-            <label>
-              <input type="checkbox" ng-model="permissionsEdit['VIEW.USER']['ROLE'][key]"> {{i18nKey | translate}}
-            </label>
+            <input ng-attr-id="{{i18nKey}}" type="checkbox" class="form-control" ng-model="permissionsEdit['VIEW.USER']['ROLE'][key]">
+            <label ng-attr-for="{{i18nKey}}">{{i18nKey | translate}}</label>
           </div>
         </div>
         <a href ng-click="checkAllRoles()">{{'common.controls.checkAll' | translate}}</a> | <a href ng-click="clearAllRoles()">{{'common.controls.clearAll' | translate}}</a>

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a2fdaae/ambari-admin/src/main/resources/ui/admin-web/app/views/authentication/main.html
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/authentication/main.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/authentication/main.html
index fddedb9..0275a21 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/views/authentication/main.html
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/authentication/main.html
@@ -58,10 +58,8 @@
         </div>
       </div>
       <div class="form-group">
+        <input type="checkbox" id="ssl" ng-model="connectivity.ssl" class="col-sm-8">
         <label for="ssl" class="control-label col-sm-4">{{'authentication.connectivity.ssl' | translate}}</label>
-        <div class="col-sm-8">
-          <input type="checkbox" id="ssl" ng-model="connectivity.ssl">
-        </div>
       </div>
       <div class="form-group">
         <label for="trust-store" class="control-label col-sm-4">{{'authentication.connectivity.trustStore.label' | translate}}</label>
@@ -121,12 +119,12 @@
       <form class="form-horizontal" ng-submit="detectAttributes()">
         <div class="form-group col-sm-12">{{'authentication.attributes.detection.label' | translate}}</div>
         <div class="form-group">
+          <input type="radio" id="manual-detection" name="detection" ng-model="attributes.detection" ng-disabled="isAttributeDetectionRunning" value="manual">
           <label for="manual-detection" class="col-sm-12">
-            <input type="radio" id="manual-detection" name="detection" ng-model="attributes.detection" ng-disabled="isAttributeDetectionRunning" value="manual">
             {{'authentication.attributes.detection.options.manual' | translate}}
           </label>
+          <input type="radio" id="auto-detection" name="detection" ng-model="attributes.detection" ng-disabled="isAttributeDetectionRunning" value="auto">
           <label for="auto-detection" class="col-sm-12">
-            <input type="radio" id="auto-detection" name="detection" ng-model="attributes.detection" ng-disabled="isAttributeDetectionRunning" value="auto">
             {{'authentication.attributes.detection.options.auto' | translate}}
           </label>
         </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a2fdaae/ambari-admin/src/main/resources/ui/admin-web/app/views/modals/AddVersionModal.html
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/modals/AddVersionModal.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/modals/AddVersionModal.html
index 457be7b..be11e1a 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/views/modals/AddVersionModal.html
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/modals/AddVersionModal.html
@@ -20,9 +20,10 @@
 </div>
 <br>
 <div class="clearfix register-version-options" ng-click="selectedLocalOption.index=1">
-    <div class="option-radio-button">
-        <label class="option-label">
-            <input type="radio" ng-model="selectedLocalOption.index" value="1"> {{'versions.uploadFile' | translate}}
+    <div class="option-radio-button checkbox">
+        <input type="radio" id="upload-file" ng-model="selectedLocalOption.index" value="1">
+        <label for="upload-file" class="option-label">
+           {{'versions.uploadFile' | translate}}
         </label>
     </div>
     <div class="col-sm-7 choose-file-input">
@@ -31,9 +32,10 @@
     </div>
 </div>
 <div class="clearfix register-version-options bottom-margin" ng-click="selectedLocalOption.index=2">
-    <div class="option-radio-button">
-        <label class="option-label">
-            <input type="radio" ng-model="selectedLocalOption.index" value="2"> {{'versions.enterURL' | translate}}
+    <div class="option-radio-button checkbox">
+        <input type="radio" id="entire-url" ng-model="selectedLocalOption.index" value="2">
+        <label for="entire-url" class="option-label">
+             {{'versions.enterURL' | translate}}
         </label>
     </div>
     <div class="col-sm-9">

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a2fdaae/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/list.html
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/list.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/list.html
index 99f9ac0..a411640 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/list.html
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/list.html
@@ -97,11 +97,11 @@
           <span class="label {{'status-' + repo.status}}">{{'versions.installed' | translate}}:&nbsp;{{repo.installedHosts}}/{{repo.totalHosts}}</span>
         </div>
         <div ng-show="!repo.cluster">
-          <div class="btn-group display-inline-block" dropdown is-open="viewsdropdown.isopen" ng-mouseover="viewsdropdown.isopen=true" ng-mouseout="viewsdropdown.isopen=false" ng-init="viewsdropdown.isopen=false">
+          <div class="btn-group" ng-class="{open: viewsdropdown.isopen}" ng-mouseover="viewsdropdown.isopen=true" ng-mouseout="viewsdropdown.isopen=false" ng-init="viewsdropdown.isopen=false">
             <a class="btn dropdown-toggle">
               <span>{{'versions.installOn' | translate}}</span>
             </a>
-            <ul class="dropdown-menu" ng-show="viewsdropdown.isopen">
+            <ul class="dropdown-menu">
               <li ng-repeat="cluster in dropDownClusters">
                 <a href="javascript:void(null)" ng-click="goToCluster()">
                   <span>{{cluster.Clusters.cluster_name}}</span>
@@ -111,7 +111,12 @@
           </div>
         </div>
       </td>
-      <td class="text-center"><input type="checkbox" data-ng-model="repo.hidden" data-ng-change="toggleVisibility(repo)" data-ng-disabled="!isHideCheckBoxEnabled(repo)"/></td>
+      <td class="text-center">
+        <div class="checkbox">
+          <input ng-attr-id="{{ 'hidden-' + repo.id }}" type="checkbox" class="form-control" data-ng-model="repo.hidden" data-ng-change="toggleVisibility(repo)" data-ng-disabled="!isHideCheckBoxEnabled(repo)"/>
+          <label ng-attr-for="{{ 'hidden-' + repo.id }}"><span></span></label>
+        </div>
+      </td>
     </tr>
     </tbody>
   </table>

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a2fdaae/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/stackVersionPage.html
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/stackVersionPage.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/stackVersionPage.html
index 85d659d..ea30824 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/stackVersionPage.html
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/stackVersionPage.html
@@ -119,14 +119,14 @@
   </div>
 
   <div id="upload-definition-file-panel" ng-if="createController">
-    <div class="col-sm-12 big-radio clearfix hide-soft" ng-class="{'disabled' : networkLost || useRedhatSatellite,'visible':stackRepoUpdateLinkExists}">
-      <input type="radio" ng-model="selectedOption.index" value="1" ng-change="togglePublicLocalOptionSelect()" ng-disabled="networkLost || useRedhatSatellite">
-      <span>{{'versions.usePublic' | translate}}</span>
+    <div class="checkbox col-sm-12 big-radio clearfix hide-soft" ng-class="{'disabled' : networkLost || useRedhatSatellite,'visible':stackRepoUpdateLinkExists}">
+      <input id="use-public" type="radio" ng-model="selectedOption.index" value="1" ng-change="togglePublicLocalOptionSelect()" ng-disabled="networkLost || useRedhatSatellite">
+      <label for="use-public">{{'versions.usePublic' | translate}}</label>
       <a id="public-disabled-link" href="javascript:void(0);" ng-if="networkLost" ng-click="showPublicRepoDisabledDialog()">{{'versions.networkIssues.networkLost'| translate}}</a>
     </div>
-    <div class="col-sm-12 big-radio clearfix">
-      <input type="radio" ng-model="selectedOption.index" value="2" ng-change="togglePublicLocalOptionSelect()">
-      {{'versions.useLocal' | translate}}
+    <div class="checkbox col-sm-12 big-radio clearfix">
+      <input id="use-local" type="radio" ng-model="selectedOption.index" value="2" ng-change="togglePublicLocalOptionSelect()">
+      <label for="use-local">{{'versions.useLocal' | translate}}</label>
     </div>
   </div>
 
@@ -204,22 +204,21 @@
             </div>
           </div>
           <div class="clearfix advanced-radio-buttons">
-            <div class="col-sm-9" id="skip-validation">
+            <div class="col-sm-9">
               <div class="checkbox">
-                <label>
-                  <input type="checkbox" ng-model="skipValidation" ng-change="clearErrors()"
-                         ng-disabled="useRedhatSatellite">
+                <input type="checkbox" id="skip-validation" ng-model="skipValidation" ng-change="clearErrors()" ng-disabled="useRedhatSatellite">
+                <label for="skip-validation">
                   <span ng-class="{'disabled' : useRedhatSatellite}">{{'versions.skipValidation' | translate}}</span>
                   <i class="fa fa-question-circle"
                      tooltip-html-unsafe="{{'versions.alerts.skipValidationWarning' | translate}}" aria-hidden="true"></i>
                 </label>
               </div>
             </div>
-            <div class="col-sm-9" id="use-redhat">
+            <div class="col-sm-9">
               <div class="checkbox">
-                <label>
-                  <input type="checkbox" ng-model="useRedhatSatellite" ng-change="clearErrors()"
-                         ng-disabled="isPublicRepoSelected()">
+                <input type="checkbox" id="use-redhat" ng-model="useRedhatSatellite" ng-change="clearErrors()"
+                       ng-disabled="isPublicRepoSelected()">
+                <label for="use-redhat">
                   <span ng-class="{'disabled' : isPublicRepoSelected()}"
                         tooltip="{{(isPublicRepoSelected())? ('versions.useRedhatSatellite.disabledMsg' | translate) : ''}}">{{'versions.useRedhatSatellite.title' | translate}}</span>
                   <i class="fa fa-question-circle"