feat(ui): EE-3719 css portainer environments access (#7359)

app/portainer/components/access-datatable/accessDatatable.html

@@ -1,23 +1,10 @@
 <div class="datatable">
   <rd-widget>
-    <rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="{{ $ctrl.titleText }}"> </rd-widget-header>
     <rd-widget-body classes="no-padding">
-      <div class="toolBar small" ng-if="$ctrl.inheritFrom">
+      <div class="toolBar">
-        Access tagged as <code>inherited</code> are inherited from the group access. They cannot be removed or modified at the environment level but they can be overridden.
+        <div class="toolBarTitle vertical-center">
-      </div>
+          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-white icon-primary icon-nested-blue'"></pr-icon>
-      <div class="toolBar small" ng-if="$ctrl.inheritFrom"> Access tagged as <code>override</code> are overriding the group access for the related users/teams. </div>
+          {{ $ctrl.titleText }}
-      <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
-        <div class="actionBar !gap-3">
-          <button
-            type="button"
-            class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
-            authorization="PortainerStackDelete"
-            ng-disabled="$ctrl.state.selectedItemCount === 0"
-            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
-            data-cy="access-removeButton"
-          >
-            <pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
-          </button>
         </div>
         <div class="searchBar vertical-center">
           <pr-icon icon="'search'" feather="true"></pr-icon>
@@ -28,31 +15,55 @@
             ng-change="$ctrl.onTextFilterChange()"
             placeholder="Search..."
             ng-model-options="{ debounce: 300 }"
-            data-cy="access-searchInput"
           />
         </div>
+        <div class="actionBar">
+          <button
+            type="button"
+            class="btn btn-sm btn-dangerlight vertical-center"
+            ng-disabled="$ctrl.state.selectedItemCount === 0"
+            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+          >
+            <pr-icon icon="'trash-2'" feather="true"></pr-icon>
+            Remove
+          </button>
         </div>
+      </div>
+
+      <div class="mx-4 mb-4 small text-muted">
+        <div class="" ng-if="$ctrl.inheritFrom">
+          Access tagged as <code>inherited</code> are inherited from the group access. They cannot be removed or modified at the environment level but they can be overridden.
+        </div>
+        <div class="" ng-if="$ctrl.inheritFrom"> Access tagged as <code>override</code> are overriding the group access for the related users/teams. </div>
+      </div>
+
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
+                <div class="vertical-center">
                   <span class="md-checkbox">
                     <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('Name')">
+                  <table-column-header
-                  Name
+                    col-title="'Name'"
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
+                    can-sort="true"
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
+                    is-sorted="$ctrl.state.orderBy === 'Name'"
-                </a>
+                    is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
+                    ng-click="$ctrl.changeOrderBy('Name')"
+                  ></table-column-header>
+                </div>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Type')">
+                <table-column-header
-                  Type
+                  col-title="'Type'"
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && !$ctrl.state.reverseOrder"></i>
+                  can-sort="true"
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"></i>
+                  is-sorted="$ctrl.state.orderBy === 'Type'"
-                </a>
+                  is-sorted-desc="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Type')"
+                ></table-column-header>
               </th>
             </tr>
           </thead>

app/portainer/components/accessManagement/por-access-management-users-selector/por-access-management-users-selector.html

@@ -1,6 +1,6 @@
 <div class="form-group">
-  <label class="col-sm-3 col-lg-2 control-label text-left"> Select user(s) and/or team(s) </label>
+  <label class="col-sm-3 col-lg-2 control-label text-left vertical-center"> Select user(s) and/or team(s) </label>
-  <div class="col-sm-9 col-lg-4">
+  <div class="col-sm-9 col-lg-4 vertical-center">
     <span class="small text-muted" ng-if="$ctrl.options.length === 0"> No users or teams available. </span>
     <span
       isteven-multi-select

app/portainer/components/accessManagement/porAccessManagement.html

@@ -6,7 +6,7 @@
         <form class="form-horizontal">
           <div ng-if="ctrl.entityType !== 'registry'" class="form-group">
             <span class="col-sm-12 small text-warning">
-              <p>
+              <p class="vertical-center">
                 <pr-icon icon="'alert-circle'" mode="'warning'" feather="true"></pr-icon>
                 Adding user access will require the affected user(s) to logout and login for the changes to be taken into account.
               </p>
@@ -19,12 +19,14 @@
             <label class="col-sm-3 col-lg-2 control-label text-left"> Role </label>
             <div class="col-sm-9 col-lg-6">
               <div class="flex items-center">
+                <div>
                   <select
                     class="form-control"
                     ng-model="ctrl.formValues.selectedRole"
                     ng-options="role as ctrl.roleLabel(role) disable when ctrl.isRoleLimitedToBE(role) for role in ctrl.roles"
                   >
                   </select>
+                </div>
                 <be-feature-indicator feature="ctrl.limitedFeature" class="space-left"></be-feature-indicator>
               </div>
             </div>
@@ -41,7 +43,10 @@
                 button-spinner="ctrl.actionInProgress"
                 data-cy="access-createAccess"
               >
-                <span ng-hide="ctrl.state.actionInProgress"><pr-icon icon="'plus'" feather="true"></pr-icon> Create access</span>
+                <span ng-hide="ctrl.state.actionInProgress" class="vertical-center">
+                  <pr-icon icon="'plus'" feather="true"></pr-icon>
+                  Create access
+                </span>
                 <span ng-show="ctrl.state.actionInProgress">Creating access...</span>
               </button>
             </div>

app/portainer/components/widget/rd-widget-title.ts

@@ -14,7 +14,7 @@ export const rdWidgetTitle = {
     <div class="widget-header" ng-class="$ctrl.parentClasses">
       <div class="row">
         <span ng-class="$ctrl.classes" class="pull-left vertical-center">
-        <pr-icon icon="$ctrl.icon" class-name="'icon-nested-blue space-right'" mode="'primary'" feather="$ctrl.featherIcon"></pr-icon>
+          <pr-icon icon="$ctrl.icon" feather="$ctrl.featherIcon" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
           <span ng-transclude="title">{{ $ctrl.titleText }}</span>
         </span>
         <span ng-class="$ctrl.classes" class="pull-right" ng-transclude></span>