feature(ui): registry access screen EE-3770 (#7332)

app/assets/css/bootstrap-override.css

@@ -33,10 +33,6 @@
   justify-content: center;
 }
 
-.justify-left {
-  justify-content: left;
-}
-
 .blue {
   background: var(--bg-dashboard-item) !important;
 }
@@ -409,3 +405,7 @@ input:checked + .slider:before {
   cursor: pointer;
   color: var(--ui-gray-9) !important;
 }
+
+.widget-header {
+  font-size: 16px;
+}

app/assets/css/icon.css

@@ -12,6 +12,7 @@ pr-icon {
 .icon {
   color: currentColor;
   margin: 0;
+  display: inline-block;
 
   font-size: var(--icon-size);
   height: var(--icon-size);

app/assets/ico/plug.svg

@@ -1 +1,3 @@
-<svg width="auto" height="auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.0001 17.8562C16.3478 17.8562 19.8723 14.3317 19.8723 9.98398L19.8723 5.90019L15.935 5.90019M12.0001 17.8562C7.6524 17.8562 4.12789 14.3317 4.12789 9.98398L4.12789 5.90019L15.935 5.90019M12.0001 17.8562C12.0001 20.292 12.0001 22.9895 15.935 22.9895L17.2222 22.9895M15.935 5.90019L15.935 1.01038M8.05729 5.90019L8.05729 1.01038" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg>
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M50.0004 74.401C68.1158 74.401 82.8013 59.7156 82.8013 41.6001L82.8013 24.5843L66.3959 24.5843M50.0004 74.401C31.885 74.401 17.1995 59.7156 17.1995 41.6001L17.1995 24.5843L66.3959 24.5843M50.0004 74.401C50.0004 84.5503 50.0004 95.7898 66.3959 95.7898L71.7592 95.7898M66.3959 24.5843L66.3959 4.21012M33.572 24.5843L33.572 4.21012" stroke="currentColor" stroke-width="8.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

app/assets/ico/user-lock.svg

@@ -1 +1,5 @@
-<svg width="auto" height="auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M21.25 8.5V6.75C21.25 5.7835 20.4665 5 19.5 5C18.5335 5 17.75 5.7835 17.75 6.75V8.5M13 7C13 9.20914 11.2091 11 9 11C6.79086 11 5 9.20914 5 7C5 4.79086 6.79086 3 9 3C11.2091 3 13 4.79086 13 7ZM17.6 12.5H21.4C21.9601 12.5 22.2401 12.5 22.454 12.391C22.6422 12.2951 22.7951 12.1422 22.891 11.954C23 11.7401 23 11.4601 23 10.9V10.1C23 9.53995 23 9.25992 22.891 9.04601C22.7951 8.85785 22.6422 8.70487 22.454 8.60899C22.2401 8.5 21.9601 8.5 21.4 8.5H17.6C17.0399 8.5 16.7599 8.5 16.546 8.60899C16.3578 8.70487 16.2049 8.85785 16.109 9.04601C16 9.25992 16 9.53995 16 10.1V10.9C16 11.4601 16 11.7401 16.109 11.954C16.2049 12.1422 16.3578 12.2951 16.546 12.391C16.7599 12.5 17.0399 12.5 17.6 12.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg>
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M70.8333 87.5V79.1667C70.8333 74.7464 69.0774 70.5072 65.9518 67.3816C62.8262 64.256 58.5869 62.5 54.1667 62.5H20.8333C16.413 62.5 12.1738 64.256 9.04821 67.3816C5.9226 70.5072 4.16666 74.7464 4.16666 79.1667V87.5" stroke="currentColor" stroke-width="8.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M37.5 45.8333C46.7048 45.8333 54.1667 38.3714 54.1667 29.1667C54.1667 19.9619 46.7048 12.5 37.5 12.5C28.2953 12.5 20.8333 19.9619 20.8333 29.1667C20.8333 38.3714 28.2953 45.8333 37.5 45.8333Z" stroke="currentColor" stroke-width="8.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M88.5417 35.4166V28.1249C88.5417 24.0978 85.2771 20.8333 81.25 20.8333C77.2229 20.8333 73.9583 24.0978 73.9583 28.1249V35.4166M73.3333 52.0833H89.1667C91.5002 52.0833 92.667 52.0832 93.5583 51.6291C94.3423 51.2296 94.9797 50.5922 95.3792 49.8082C95.8333 48.9169 95.8333 47.7501 95.8333 45.4166V42.0833C95.8333 39.7497 95.8333 38.5829 95.3792 37.6916C94.9797 36.9076 94.3423 36.2702 93.5583 35.8707C92.667 35.4166 91.5002 35.4166 89.1667 35.4166H73.3333C70.9998 35.4166 69.833 35.4166 68.9417 35.8707C68.1577 36.2702 67.5203 36.9076 67.1208 37.6916C66.6667 38.5829 66.6667 39.7497 66.6667 42.0833V45.4166C66.6667 47.7501 66.6667 48.9169 67.1208 49.8082C67.5203 50.5922 68.1577 51.2296 68.9417 51.6291C69.833 52.0832 70.9998 52.0833 73.3333 52.0833Z" stroke="currentColor" stroke-width="8.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

app/kubernetes/registries/kube-registry-access-view/kube-registry-access-view.html

@@ -5,7 +5,7 @@
 <div class="row">
   <div class="col-sm-12">
     <rd-widget>
-      <rd-widget-header icon="fa-user-lock" title-text="Create access"></rd-widget-header>
+      <rd-widget-header icon="svg-userlock" title-text="Create access"></rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal">
           <div class="form-group">
@@ -26,8 +26,8 @@
               >
               </span>
             </div>
-            <div class="col-sm-12 small text-muted">
-              <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
+            <div class="col-sm-12 small text-muted vertical-center">
+              <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
               Note: adding this registry will expose the registry credentials to all users of this namespace
             </div>
           </div>
@@ -37,12 +37,12 @@
             <div class="col-sm-12">
               <button
                 type="submit"
-                class="btn btn-primary btn-sm"
+                class="btn btn-primary btn-sm !ml-0"
                 ng-disabled="$ctrl.selectedResourcePools.length === 0 || $ctrl.state.actionInProgress"
                 ng-click="$ctrl.submit()"
                 button-spinner="$ctrl.state.actionInProgress"
               >
-                <span ng-hide="$ctrl.state.actionInProgress"><i class="fa fa-plus" aria-hidden="true"></i> Create access</span>
+                <span ng-hide="$ctrl.state.actionInProgress" class="vertical-center"><pr-icon icon="'plus'" size="'sm'" feather="true"></pr-icon> Create access</span>
                 <span ng-show="$ctrl.state.actionInProgress">Creating access...</span>
               </button>
             </div>
@@ -57,7 +57,7 @@
   <div class="col-sm-12">
     <strings-datatable
       title-text="Access"
-      title-icon="fa-user-lock"
+      title-icon="svg-userlock"
       table-key="access_registry_resourcepools"
       dataset="$ctrl.savedResourcePools"
       empty-dataset-message="No namespace has been authorized yet."

app/kubernetes/views/configure/configure.html

@@ -291,7 +291,7 @@
                     </tr>
                     <tr ng-repeat="class in ctrl.StorageClasses">
                       <td>
-                        <div class="flex-center justify-left">
+                        <div class="flex-center justify-start">
                           <label class="switch mr-2 mb-0">
                             <input type="checkbox" ng-model="class.selected" /><span class="slider round" data-cy="kubeSetup-storageToggle{{ class.Name }}"></span>
                           </label>

app/portainer/components/datatables/strings-datatable/strings-datatable.html

@@ -1,14 +1,12 @@
 <div class="datatable">
   <rd-widget>
-    <rd-widget-header icon="{{ $ctrl.titleIcon }}" title-text="{{ $ctrl.titleText }}"> </rd-widget-header>
-    <rd-widget-body classes="no-padding">
-      <div class="actionBar">
-        <button type="button" class="btn btn-sm btn-danger" ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.onRemove($ctrl.state.selectedItems)">
-          <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
-        </button>
+    <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap w-full relative">
+      <div class="toolBarTitle vertical-center">
+        <pr-icon icon="$ctrl.titleIcon" feather="true" mode="'primary'" class-name="'icon-nested-blue space-right'"></pr-icon>
+        {{ $ctrl.titleText }}
       </div>
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
+      <div class="searchBar vertical-center">
+        <pr-icon icon="'search'" feather="true"></pr-icon>
         <input
           type="text"
           class="searchInput"
@@ -18,6 +16,18 @@
           ng-model-options="{ debounce: 300 }"
         />
       </div>
+      <div class="actionBar">
+        <button
+          type="button"
+          class="btn btn-sm btn-dangerlight vertical-center"
+          ng-disabled="$ctrl.state.selectedItemCount === 0"
+          ng-click="$ctrl.onRemove($ctrl.state.selectedItems)"
+        >
+          <pr-icon icon="'trash-2'" feather="true"></pr-icon>Remove
+        </button>
+      </div>
+    </div>
+    <rd-widget-body classes="no-padding">
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
@@ -27,11 +37,14 @@
                   <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')">
-                  {{ $ctrl.columnHeader }}
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="$ctrl.columnHeader"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Name'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Name')"
+                  style="display: inline-block"
+                ></table-column-header>
               </th>
             </tr>
           </thead>

app/portainer/components/registry-details/registry-details.html

@@ -1,18 +1,18 @@
 <div class="row" ng-if="$ctrl.registry">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="radio" feather-icon="true" title-text="Registry"></rd-widget-header>
+      <rd-widget-header icon="svg-plug" title-text="Registry"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
             <tr>
-              <td>Name</td>
+              <td style="padding-left: 20px">Name</td>
               <td>
                 {{ $ctrl.registry.Name }}
               </td>
             </tr>
             <tr>
-              <td>URL</td>
+              <td style="padding-left: 20px">URL</td>
               <td>
                 {{ $ctrl.registry.URL }}
               </td>

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

@@ -14,8 +14,8 @@ 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" feather="$ctrl.featherIcon" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
-          <span ng-transclude="title">{{ $ctrl.titleText }}</span>
+        <pr-icon icon="$ctrl.icon" class-name="'icon-nested-blue space-right'" mode="'primary'" feather="$ctrl.featherIcon"></pr-icon>
+        <span ng-transclude="title">{{ $ctrl.titleText }}</span>
         </span>
         <span ng-class="$ctrl.classes" class="pull-right" ng-transclude></span>
       </div>

app/portainer/services/modal.service/confirm.ts

@@ -155,7 +155,7 @@ export function confirmDetachment(message: string, callback: ConfirmCallback) {
     buttons: {
       confirm: {
         label: 'Detach',
-        className: 'btn-danger',
+        className: 'btn-primary',
       },
     },
     callback,