feat(ui): portainer registry boxselector icon ce EE-3848 (#7419)

* add icon to registry boxselector

app/portainer/views/registries/create/createRegistry.html

@@ -10,78 +10,7 @@
           <div class="form-group"></div>
 
           <div class="form-group" style="margin-bottom: 0">
-            <div class="boxselector_wrapper">
+            <box-selector radio-name="'registry'" value="$ctrl.state.registryValue" options="$ctrl.state.availableRegistry" on-change="($ctrl.setRegistry)"></box-selector>
-              <div>
-                <input type="radio" id="registry_dockerhub" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.DOCKERHUB" />
-                <label for="registry_dockerhub" ng-click="$ctrl.selectDockerHub()">
-                  <div class="boxselector_header vertical-center">
-                    <pr-icon icon="'database'" feather="true"></pr-icon>
-                    DockerHub
-                  </div>
-                  <p>DockerHub authenticated account</p>
-                </label>
-              </div>
-              <div>
-                <input type="radio" id="registry_aws_ecr" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.ECR" />
-                <label for="registry_aws_ecr" ng-click="$ctrl.selectEcr()">
-                  <div class="boxselector_header">
-                    <i class="fab fa-aws" aria-hidden="true" style="margin-right: 2px"></i>
-                    AWS ECR
-                  </div>
-                  <p>Amazon elastic container registry</p>
-                </label>
-              </div>
-              <div>
-                <input type="radio" id="registry_quay" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.QUAY" />
-                <label for="registry_quay" ng-click="$ctrl.selectQuayRegistry()">
-                  <div class="boxselector_header vertical-center">
-                    <pr-icon icon="'database'" feather="true"></pr-icon>
-                    Quay.io
-                  </div>
-                  <p>Quay container registry</p>
-                </label>
-              </div>
-              <div>
-                <input type="radio" id="registry_proget" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.PROGET" />
-                <label for="registry_proget" ng-click="$ctrl.selectProGetRegistry()">
-                  <div class="boxselector_header vertical-center">
-                    <pr-icon icon="'database'" feather="true"></pr-icon>
-                    ProGet
-                  </div>
-                  <p>ProGet container registry</p>
-                </label>
-              </div>
-              <div>
-                <input type="radio" id="registry_azure" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.AZURE" />
-                <label for="registry_azure" ng-click="$ctrl.selectAzureRegistry()">
-                  <div class="boxselector_header">
-                    <i class="fab fa-microsoft" aria-hidden="true" style="margin-right: 2px"></i>
-                    Azure
-                  </div>
-                  <p>Azure container registry</p>
-                </label>
-              </div>
-              <div>
-                <input type="radio" id="registry_gitlab" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.GITLAB" />
-                <label for="registry_gitlab" ng-click="$ctrl.selectGitlabRegistry()">
-                  <div class="boxselector_header">
-                    <i class="fab fa-gitlab" aria-hidden="true" style="margin-right: 2px"></i>
-                    Gitlab
-                  </div>
-                  <p>Gitlab container registry</p>
-                </label>
-              </div>
-              <div>
-                <input type="radio" id="registry_custom" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.CUSTOM" />
-                <label for="registry_custom" ng-click="$ctrl.selectCustomRegistry()">
-                  <div class="boxselector_header vertical-center">
-                    <pr-icon icon="'database'" feather="true"></pr-icon>
-                    Custom registry
-                  </div>
-                  <p>Define your own registry</p>
-                </label>
-              </div>
-            </div>
           </div>
 
           <registry-form-quay

app/portainer/views/registries/create/createRegistryController.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import { RegistryTypes } from 'Portainer/models/registryTypes';
 import { RegistryCreateFormValues } from 'Portainer/models/registry';
+import { options } from './options';
 
 class CreateRegistryController {
   /* @ngInject */
@@ -26,6 +27,16 @@ class CreateRegistryController {
     this.nameIsUsed = this.nameIsUsed.bind(this);
     this.retrieveGitlabRegistries = this.retrieveGitlabRegistries.bind(this);
     this.createGitlabRegistries = this.createGitlabRegistries.bind(this);
+
+    this.selectDockerHub = this.selectDockerHub.bind(this);
+    this.selectEcr = this.selectEcr.bind(this);
+    this.selectQuayRegistry = this.selectQuayRegistry.bind(this);
+    this.selectProGetRegistry = this.selectProGetRegistry.bind(this);
+    this.selectAzureRegistry = this.selectAzureRegistry.bind(this);
+    this.selectGitlabRegistry = this.selectGitlabRegistry.bind(this);
+    this.selectCustomRegistry = this.selectCustomRegistry.bind(this);
+
+    this.setRegistry = this.setRegistry.bind(this);
   }
 
   useDefaultQuayConfiguration() {
@@ -39,6 +50,7 @@ class CreateRegistryController {
     this.model.Authentication = true;
     this.model.Quay = {};
     this.useDefaultQuayConfiguration();
+    this.model.Type = RegistryTypes.QUAY;
   }
 
   useDefaultGitlabConfiguration() {
@@ -51,12 +63,14 @@ class CreateRegistryController {
     this.model.Authentication = true;
     this.model.Gitlab = {};
     this.useDefaultGitlabConfiguration();
+    this.model.Type = RegistryTypes.GITLAB;
   }
 
   selectAzureRegistry() {
     this.model.Name = '';
     this.model.URL = '';
     this.model.Authentication = true;
+    this.model.Type = RegistryTypes.AZURE;
   }
 
   selectProGetRegistry() {
@@ -64,18 +78,21 @@ class CreateRegistryController {
     this.model.URL = '';
     this.model.BaseURL = '';
     this.model.Authentication = true;
+    this.model.Type = RegistryTypes.PROGET;
   }
 
   selectCustomRegistry() {
     this.model.Name = '';
     this.model.URL = '';
     this.model.Authentication = false;
+    this.model.Type = RegistryTypes.CUSTOM;
   }
 
   selectDockerHub() {
     this.model.Name = '';
     this.model.URL = 'docker.io';
     this.model.Authentication = true;
+    this.model.Type = RegistryTypes.DOCKERHUB;
   }
 
   useDefaultEcrConfiguration() {
@@ -88,6 +105,7 @@ class CreateRegistryController {
     this.model.Authentication = false;
     this.model.Ecr = {};
     this.useDefaultEcrConfiguration();
+    this.model.Type = RegistryTypes.ECR;
   }
 
   retrieveGitlabRegistries() {
@@ -146,11 +164,42 @@ class CreateRegistryController {
     });
   }
 
+  setRegistry(registry) {
+    this.state.registryValue = registry;
+
+    switch (registry) {
+      case '6':
+        this.selectDockerHub();
+        break;
+      case '7':
+        this.selectEcr();
+        break;
+      case '1':
+        this.selectQuayRegistry();
+        break;
+      case '5':
+        this.selectProGetRegistry();
+        break;
+      case '2':
+        this.selectAzureRegistry();
+        break;
+      case '4':
+        this.selectGitlabRegistry();
+        break;
+      case '3':
+        this.selectCustomRegistry();
+        break;
+    }
+  }
+
   $onInit() {
     return this.$async(async () => {
       this.model = new RegistryCreateFormValues();
       this.model.Type = RegistryTypes.DOCKERHUB;
       this.selectDockerHub();
+      this.state.availableRegistry = options;
+      // Default registryValue is DockerHub, which is 6
+      this.state.registryValue = '6';
 
       const from = this.$transition$.from();
       const params = this.$transition$.params('from');

app/portainer/views/registries/create/options.tsx

@@ -0,0 +1,59 @@
+import Docker from '@/assets/ico/vendor/docker.svg?c';
+import Ecr from '@/assets/ico/vendor/ecr.svg?c';
+import Quay from '@/assets/ico/vendor/quay.svg?c';
+import Proget from '@/assets/ico/vendor/proget.svg?c';
+import Azure from '@/assets/ico/vendor/azure.svg?c';
+import Gitlab from '@/assets/ico/vendor/gitlab.svg?c';
+import Custom from '@/assets/ico/custom.svg?c';
+
+export const options = [
+  {
+    id: 'registry_dockerhub',
+    icon: Docker,
+    label: 'DockerHub',
+    description: 'DockerHub authenticated account',
+    value: '6',
+  },
+  {
+    id: 'registry_aws_ecr',
+    icon: Ecr,
+    label: 'AWS ECR',
+    description: 'Amazon elastic container registry',
+    value: '7',
+  },
+  {
+    id: 'registry_quay',
+    icon: Quay,
+    label: 'Quay.io',
+    description: 'Quay container registry',
+    value: '1',
+  },
+  {
+    id: 'registry_proget',
+    icon: Proget,
+    label: 'ProGet',
+    description: 'ProGet container registry',
+    value: '5',
+  },
+  {
+    id: 'registry_azure',
+    icon: Azure,
+    label: 'Azure',
+    description: 'Azure container registry',
+    value: '2',
+  },
+  {
+    id: 'registry_gitlab',
+    icon: Gitlab,
+    label: 'Gitlab',
+    description: 'Gitlab container registry',
+    value: '4',
+  },
+  {
+    id: 'registry_custom',
+    icon: Custom,
+    label: 'Custom registry',
+    description: 'Define your own registry',
+    value: '3',
+  },
+];