fix(ui/buttons): set hyperlink style [EE-4007] (#7524)

app/assets/css/app.css

@@ -117,10 +117,6 @@ input[type='checkbox'] {
   text-align: center;
 }
 
-a[ng-click] {
-  cursor: pointer;
-}
-
 .space-right {
   margin-right: 5px;
 }

app/assets/css/button.css

@@ -25,14 +25,14 @@ fieldset[disabled] .btn {
   box-shadow: none;
 }
 
-.btn-primary {
+.btn.btn-primary {
   @apply text-white bg-blue-8 border-blue-8;
   @apply hover:text-white hover:bg-blue-9 hover:border-blue-9;
   @apply th-dark:hover:bg-blue-7 th-dark:hover:border-blue-7;
 }
 
-.btn-primary:active,
-.btn-primary.active,
+.btn.btn-primary:active,
+.btn.btn-primary.active,
 .open > .dropdown-toggle.btn-primary {
   @apply bg-blue-9 border-blue-5;
 }
@@ -44,7 +44,7 @@ fieldset[disabled] .btn {
 }
 
 /* Button Secondary */
-.btn-secondary {
+.btn.btn-secondary {
   @apply border border-solid;
 
   @apply text-blue-9 bg-blue-2 border-blue-8;
@@ -54,18 +54,18 @@ fieldset[disabled] .btn {
   @apply th-dark:hover:bg-blue-11;
 }
 
-.btn-danger {
+.btn.btn-danger {
   @apply bg-error-8 border-error-8;
   @apply hover:bg-error-7 hover:border-error-7 hover:text-white;
 }
 
-.btn-danger:active,
-.btn-danger.active,
+.btn.btn-danger:active,
+.btn.btn-danger.active,
 .open > .dropdown-toggle.btn-danger {
   @apply bg-error-8 text-white border-blue-5;
 }
 
-.btn-dangerlight {
+.btn.btn-dangerlight {
   @apply text-error-9 th-dark:text-white;
   @apply bg-error-3 th-dark:bg-error-9;
   @apply hover:bg-error-2 th-dark:hover:bg-error-11;
@@ -73,18 +73,18 @@ fieldset[disabled] .btn {
   @apply border border-solid;
 }
 
-.btn-success {
+.btn.btn-success {
   background-color: var(--ui-success-7);
 }
 
-.btn-success:hover {
+.btn.btn-success:hover {
   color: var(--white-color);
 }
 
 /* secondary-grey */
-.btn-default,
-.btn-light {
-  @apply bg-gray-2 border-gray-5 text-gray-9;
+.btn.btn-default,
+.btn.btn-light {
+  @apply bg-white border-gray-5 text-gray-9;
   @apply hover:bg-gray-3 hover:border-gray-5 hover:text-gray-10;
 
   /* dark mode */
@@ -95,28 +95,18 @@ fieldset[disabled] .btn {
   @apply th-highcontrast:hover:bg-gray-9 th-highcontrast:hover:border-gray-6 th-highcontrast:hover:text-gray-warm-4;
 }
 
-.btn-light:active,
-.btn-light.active,
+.btn.btn-light:active,
+.btn.btn-light.active,
 .open > .dropdown-toggle.btn-light {
   background-color: var(--ui-gray-3);
 }
 
-.btn-link {
+.btn.btn-link {
   @apply text-blue-8 hover:text-blue-9 disabled:text-gray-5;
   @apply th-dark:text-blue-8 th-dark:hover:text-blue-7;
   @apply th-highcontrast:text-blue-8 th-highcontrast:hover:text-blue-7;
 }
 
-.hyperlink,
-.hyperlink:focus {
-  color: var(--ui-blue-8);
-}
-
-.hyperlink:hover {
-  text-decoration: underline;
-  color: var(--ui-blue-9);
-}
-
 .btn-group {
   display: inline-flex;
 }
@@ -129,30 +119,43 @@ fieldset[disabled] .btn {
 
 /* focus */
 
-.btn-primary:focus,
-.btn-secondary:focus,
-.btn-light:focus {
+.btn.btn-primary:focus,
+.btn.btn-secondary:focus,
+.btn.btn-light:focus {
   @apply border-blue-5;
 }
 
-.btn-danger:focus,
-.btn-dangerlight:focus {
+.btn.btn-danger:focus,
+.btn.btn-dangerlight:focus {
   @apply border-blue-6;
 }
 
-.btn-primary:focus,
-.btn-secondary:focus,
-.btn-light:focus,
-.btn-danger:focus,
-.btn-dangerlight:focus {
+.btn.btn-primary:focus,
+.btn.btn-secondary:focus,
+.btn.btn-light:focus,
+.btn.btn-danger:focus,
+.btn.btn-dangerlight:focus {
   --btn-focus-color: var(--ui-blue-3);
   box-shadow: 0px 0px 0px 4px var(--btn-focus-color);
 }
 
-[theme='dark'] .btn-primary:focus,
-[theme='dark'] .btn-secondary:focus,
-[theme='dark'] .btn-light:focus,
-[theme='dark'] .btn-danger:focus,
-[theme='dark'] .btn-dangerlight:focus {
+[theme='dark'] .btn.btn-primary:focus,
+[theme='dark'] .btn.btn-secondary:focus,
+[theme='dark'] .btn.btn-light:focus,
+[theme='dark'] .btn.btn-danger:focus,
+[theme='dark'] .btn.btn-dangerlight:focus {
   --btn-focus-color: var(--ui-blue-11);
 }
+
+a.no-link,
+a[ng-click] {
+  @apply text-current;
+  @apply hover:no-underline hover:text-current;
+  @apply focus:no-underline focus:text-current;
+}
+
+a,
+a.hyperlink {
+  @apply text-blue-8 hover:text-blue-9;
+  @apply hover:underline cursor-pointer;
+}

app/assets/css/vendor-override.css

@@ -31,17 +31,6 @@
   border-top: 1px solid var(--border-table-top-color);
 }
 
-a {
-  color: inherit;
-  cursor: pointer;
-}
-
-a:hover,
-a:focus {
-  color: inherit;
-  text-decoration: none;
-}
-
 .input-group-addon {
   color: var(--text-input-group-addon-color);
   background-color: var(--bg-input-group-addon-color);

app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html

@@ -50,9 +50,9 @@
               ng-click="$ctrl.expandItem(value, !value.Expanded)"
             >
               <td>
-                <a ng-if="$ctrl.itemCanExpand(value)">
+                <button class="btn btn-none" ng-if="$ctrl.itemCanExpand(value)" type="button">
                   <i ng-class="{ 'fas fa-angle-down': value.Expanded, 'fas fa-angle-right': !value.Expanded }" class="space-right" aria-hidden="true"></i>
-                </a>
+                </button>
                 <a ui-sref="docker.networks.network({ id: key, nodeName: $ctrl.nodeName })">{{ key }}</a>
               </td>
               <td>{{ value.IPAddress || '-' }}</td>

app/docker/components/datatables/images-datatable/imagesDatatable.html

@@ -127,15 +127,20 @@
           <thead>
             <tr>
               <th uib-dropdown dropdown-append-to-body auto-close="disabled" popover-placement="bottom-left" is-open="$ctrl.filters.state.open">
-                <span class="md-checkbox" ng-if="!$ctrl.offlineMode">
-                  <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
-                  <label for="select_all"></label>
-                </span>
-                <a ng-click="$ctrl.changeOrderBy('Id')">
-                  Id
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <div class="flex gap-1 items-center">
+                  <span class="md-checkbox" ng-if="!$ctrl.offlineMode">
+                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
+                    <label for="select_all"></label>
+                  </span>
+                  <table-column-header
+                    col-title="'Id'"
+                    can-sort="true"
+                    is-sorted="$ctrl.state.orderBy === 'Id'"
+                    is-sorted-desc="$ctrl.state.orderBy === 'Id' && $ctrl.state.reverseOrder"
+                    ng-click="$ctrl.changeOrderBy('Id')"
+                  ></table-column-header>
+                </div>
+
                 <div>
                   <span uib-dropdown-toggle class="table-filter" ng-if="!$ctrl.filters.state.enabled">Filter <i class="fa fa-filter" aria-hidden="true"></i></span>
                   <span uib-dropdown-toggle class="table-filter filter-active" ng-if="$ctrl.filters.state.enabled">Filter <i class="fa fa-check" aria-hidden="true"></i></span>
@@ -160,32 +165,40 @@
                 </div>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('RepoTags')">
-                  Tags
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'RepoTags' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'RepoTags' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Tags'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'RepoTags'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'RepoTags' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('RepoTags')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('VirtualSize')">
-                  Size
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'VirtualSize' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'VirtualSize' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Size'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'VirtualSize'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'VirtualSize' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('VirtualSize')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Created')">
-                  Created
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Created' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Created' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Created'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Created'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Created' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Created')"
+                ></table-column-header>
               </th>
               <th ng-if="$ctrl.showHostColumn">
-                <a ng-click="$ctrl.changeOrderBy('NodeName')">
-                  Host
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeName' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeName' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Host'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'NodeName'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'NodeName' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('NodeName')"
+                ></table-column-header>
               </th>
             </tr>
           </thead>

app/docker/components/datatables/services-datatable/servicesDatatable.html

@@ -156,7 +156,7 @@
                   <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event); $event.stopPropagation()" />
                   <label for="select_{{ $index }}"></label>
                 </span>
-                <a><i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i></a>
+                <i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i>
               </td>
               <td>
                 <a ui-sref="docker.services.service({id: item.Id})" ng-click="$event.stopPropagation()">{{ item.Name }}</a>

app/docker/components/datatables/volumes-datatable/volumesDatatable.html

@@ -190,11 +190,17 @@
                   item.Id | truncate: 40
                 }}</a>
                 <span ng-if="$ctrl.offlineMode">{{ item.Id | truncate: 40 }}</span>
-                <btn authorization="DockerAgentBrowseList" ng-if="$ctrl.showBrowseAction && !$ctrl.offlineMode">
-                  <a ui-sref="docker.volumes.volume.browse({ id: item.Id, nodeName: item.NodeName })" class="btn btn-xs btn-primary space-left">
-                    <pr-icon icon="'search'" feather="true"></pr-icon> browse
-                  </a>
-                </btn>
+
+                <button
+                  ng-if="$ctrl.showBrowseAction && !$ctrl.offlineMode"
+                  type="button"
+                  ui-sref="docker.volumes.volume.browse({ id: item.Id, nodeName: item.NodeName })"
+                  class="btn btn-xs btn-primary space-left"
+                  authorization="DockerAgentBrowseList"
+                >
+                  <pr-icon icon="'search'" feather="true"></pr-icon> browse
+                </button>
+
                 <span style="margin-left: 10px" class="label label-warning image-tag space-left" ng-if="item.dangling">Unused</span>
               </td>
               <td>{{ item.StackName ? item.StackName : '-' }}</td>

app/docker/views/dashboard/dashboard.html

@@ -77,29 +77,29 @@
   </div>
 
   <div class="dashboard-grid mx-4">
-    <a ui-sref="docker.stacks" ng-if="showStacks">
-      <dashboard-item feather-icon="true" icon="'layers'" feather-icon="true" type="'Stack'" value="stackCount"></dashboard-item>
+    <a class="no-link" ui-sref="docker.stacks" ng-if="showStacks">
+      <dashboard-item feather-icon="true" icon="'layers'" type="'Stack'" value="stackCount"></dashboard-item>
     </a>
 
     <div ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.role === 'MANAGER'">
-      <a ui-sref="docker.services">
+      <a class="no-link" ui-sref="docker.services">
         <dashboard-item feather-icon="true" icon="'shuffle'" type="'Service'" value="serviceCount"></dashboard-item>
       </a>
     </div>
 
-    <a ng-if="containers" ui-sref="docker.containers">
+    <a class="no-link" ng-if="containers" ui-sref="docker.containers">
       <dashboard-item feather-icon="true" icon="'box'" type="'Container'" value="containers.length" children="containerStatusComponent"></dashboard-item>
     </a>
 
-    <a ng-if="images" ui-sref="docker.images">
+    <a class="no-link" ng-if="images" ui-sref="docker.images">
       <dashboard-item feather-icon="true" icon="'list'" type="'Image'" value="images.length" children="imagesTotalSizeComponent"></dashboard-item>
     </a>
 
-    <a ui-sref="docker.volumes">
+    <a class="no-link" ui-sref="docker.volumes">
       <dashboard-item feather-icon="true" icon="'database'" type="'Volume'" value="volumeCount"></dashboard-item>
     </a>
 
-    <a ui-sref="docker.networks">
+    <a class="no-link" ui-sref="docker.networks">
       <dashboard-item feather-icon="true" icon="'share2'" type="'Network'" value="networkCount"></dashboard-item>
     </a>
 

app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html

@@ -238,13 +238,18 @@
             </div>
           </td>
           <td>
-            <a ng-if="item.KubernetesApplications" ui-sref="kubernetes.helm({ name: item.Name, namespace: item.ResourcePool })" ng-click="$event.stopPropagation()"
+            <a
+              ng-if="item.KubernetesApplications"
+              ui-sref="kubernetes.helm({ name: item.Name, namespace: item.ResourcePool })"
+              ng-click="$event.stopPropagation()"
+              class="hyperlink"
               >{{ item.Name }}
             </a>
             <a
               ng-if="!item.KubernetesApplications"
               ui-sref="kubernetes.applications.application({ name: item.Name, namespace: item.ResourcePool })"
               ng-click="$event.stopPropagation()"
+              class="hyperlink"
               >{{ item.Name }}
             </a>
             <span class="label label-info image-tag label-margins" ng-if="$ctrl.isSystemNamespace(item)">system</span>

app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html

@@ -3,14 +3,12 @@
 
   <div class="form-group" ng-if="$ctrl.isCreation">
     <div class="col-sm-12">
-      <p>
-        <a class="small interactive vertical-center" ng-if="$ctrl.formValues.IsSimple" ng-click="$ctrl.showAdvancedMode()">
-          <pr-icon icon="'list'" feather="true"></pr-icon> Advanced mode
-        </a>
-        <a class="small interactive vertical-center" ng-if="!$ctrl.formValues.IsSimple" ng-click="$ctrl.showSimpleMode()">
-          <pr-icon icon="'edit'" feather="true"></pr-icon> Simple mode
-        </a>
-      </p>
+      <button type="button" class="btn btn-link btn-sm hover:no-underline !ml-0 p-0" ng-if="$ctrl.formValues.IsSimple" ng-click="$ctrl.showAdvancedMode()">
+        <pr-icon icon="'list'" feather="true"></pr-icon> Advanced mode
+      </button>
+      <button type="button" class="btn btn-link btn-sm hover:no-underline !ml-0 p-0" ng-if="!$ctrl.formValues.IsSimple" ng-click="$ctrl.showSimpleMode()">
+        <pr-icon icon="'edit'" feather="true"></pr-icon> Simple mode
+      </button>
     </div>
     <div class="col-sm-12 small text-muted vertical-center" ng-if="$ctrl.formValues.IsSimple">
       <pr-icon icon="'info'" mode="'primary'" feather="true"></pr-icon>

app/kubernetes/views/dashboard/dashboard.html

@@ -40,23 +40,23 @@
 
   <div class="dashboard-grid mx-4">
     <div ng-if="ctrl.pools" data-cy="k8sDashboard-namespaces">
-      <a ui-sref="kubernetes.resourcePools">
+      <a class="no-link" ui-sref="kubernetes.resourcePools">
         <dashboard-item feather-icon="true" icon="'layers'" type="'Namespace'" value="ctrl.pools.length"></dashboard-item>
       </a>
     </div>
 
     <div ng-if="ctrl.applications" data-cy="k8sDashboard-applications">
-      <a ui-sref="kubernetes.applications">
+      <a class="no-link" ui-sref="kubernetes.applications">
         <dashboard-item feather-icon="true" icon="'box'" type="'Application'" value="ctrl.applications.length"></dashboard-item>
       </a>
     </div>
     <div ng-if="ctrl.configurations" data-cy="k8sDashboard-configurations">
-      <a ui-sref="kubernetes.configurations">
+      <a class="no-link" ui-sref="kubernetes.configurations">
         <dashboard-item feather-icon="true" icon="'lock'" type="'ConfigMaps & Secret'" value="ctrl.configurations.length"></dashboard-item>
       </a>
     </div>
     <div ng-if="ctrl.volumes" data-cy="k8sDashboard-volumes">
-      <a ui-sref="kubernetes.volumes">
+      <a class="no-link" ui-sref="kubernetes.volumes">
         <dashboard-item feather-icon="true" icon="'database'" type="'Volume'" value="ctrl.volumes.length"></dashboard-item>
       </a>
     </div>

app/portainer/components/custom-template-selector/custom-template-selector.html

@@ -12,7 +12,7 @@
         <option value="" label="Select a Custom template" disabled selected="selected"> </option>
       </select>
       <span class="small text-muted pt-[7px]" ng-if="!$ctrl.templates.length">
-        No custom templates are available. Head over to the <a class="hyperlink" ui-state="$ctrl.newTemplatePath">custom template view</a> to create one.
+        No custom templates are available. Head over to the <a ui-state="$ctrl.newTemplatePath">custom template view</a> to create one.
       </span>
     </div>
   </div>

app/portainer/components/datatables/datatable.css

@@ -40,19 +40,6 @@
   @apply text-blue-7;
 }
 
-.datatable tr > td a:not(.btn) {
-  color: var(--ui-blue-8);
-}
-
-.datatable tr > td a:not(.btn):hover,
-.datatable tr > td a:not(.btn):focus {
-  text-decoration: underline;
-}
-
-.datatable tr > td a.actions {
-  color: currentColor;
-}
-
 .toolBar .actionBar {
   display: inline-flex;
 }

app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html

@@ -48,14 +48,24 @@
 
   <div class="form-group">
     <div class="col-sm-12">
-      <a class="small interactive vertical-center" ng-if="!$ctrl.state.overrideConfiguration" ng-click="$ctrl.state.overrideConfiguration = true;">
+      <button
+        type="button"
+        class="btn btn-link btn-sm hover:no-underline !ml-0 p-0"
+        ng-if="!$ctrl.state.overrideConfiguration"
+        ng-click="$ctrl.state.overrideConfiguration = true;"
+      >
         <pr-icon icon="'tool'" feather="true"></pr-icon>
         Override default configuration
-      </a>
-      <a class="small interactive vertical-center" ng-if="$ctrl.state.overrideConfiguration" ng-click="$ctrl.state.overrideConfiguration = false; $ctrl.resetDefaults()">
+      </button>
+      <button
+        type="button"
+        class="btn btn-link btn-sm hover:no-underline !ml-0 p-0"
+        ng-if="$ctrl.state.overrideConfiguration"
+        ng-click="$ctrl.state.overrideConfiguration = false; $ctrl.resetDefaults()"
+      >
         <pr-icon icon="'settings'" feather="true"></pr-icon>
         Use default configuration
-      </a>
+      </button>
     </div>
   </div>
 

app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx

@@ -46,12 +46,11 @@ export function EnvironmentItem({ environment, onClick, groupName }: Props) {
     <div className={styles.root}>
       <button
         type="button"
-        color="link"
         onClick={() => onClick(environment)}
         className={styles.wrapperButton}
       >
         <Link
-          className={clsx('blocklist-item', styles.item)}
+          className={clsx('blocklist-item no-link', styles.item)}
           to={route}
           params={{
             endpointId: environment.Id,