fix(ui): box-selector fixes [EE-3949] (#7489)

app/edge/components/edge-job-form/edgeJobForm.html

@@ -34,27 +34,29 @@
   <!-- edge-job-method-select -->
   <div class="col-sm-12 form-section-title"> Edge job configuration </div>
   <div class="form-group"></div>
-  <div class="form-group px-4">
-    <div class="boxselector_wrapper !mt-0">
-      <div>
-        <input type="radio" id="config_basic" ng-model="$ctrl.formValues.cronMethod" value="basic" />
-        <label for="config_basic">
-          <div class="boxselector_header vertical-center">
-            <pr-icon icon="'calendar'" feather="true"></pr-icon>
-            Basic configuration
-          </div>
-          <p>Select date from calendar</p>
-        </label>
-      </div>
-      <div>
-        <input type="radio" id="config_advanced" ng-model="$ctrl.formValues.cronMethod" value="advanced" />
-        <label for="config_advanced">
-          <div class="boxselector_header vertical-center">
-            <pr-icon icon="'edit'" feather="true"></pr-icon>
-            Advanced configuration
-          </div>
-          <p>Write your own cron rule</p>
-        </label>
+  <div class="form-group">
+    <div class="col-sm-12">
+      <div class="boxselector_wrapper !mt-0">
+        <div>
+          <input type="radio" id="config_basic" ng-model="$ctrl.formValues.cronMethod" value="basic" />
+          <label for="config_basic">
+            <div class="boxselector_header vertical-center">
+              <pr-icon icon="'calendar'" feather="true"></pr-icon>
+              Basic configuration
+            </div>
+            <p>Select date from calendar</p>
+          </label>
+        </div>
+        <div>
+          <input type="radio" id="config_advanced" ng-model="$ctrl.formValues.cronMethod" value="advanced" />
+          <label for="config_advanced">
+            <div class="boxselector_header vertical-center">
+              <pr-icon icon="'edit'" feather="true"></pr-icon>
+              Advanced configuration
+            </div>
+            <p>Write your own cron rule</p>
+          </label>
+        </div>
       </div>
     </div>
   </div>
@@ -151,28 +153,29 @@
   <!-- execution-method -->
   <div ng-if="!$ctrl.model.Id">
     <div class="col-sm-12 form-section-title"> Job content </div>
-    <div class="form-group"></div>
-    <div class="form-group px-4">
-      <div class="boxselector_wrapper !mt-0">
-        <div>
-          <input type="radio" id="method_editor" ng-model="$ctrl.formValues.method" value="editor" />
-          <label for="method_editor">
-            <div class="boxselector_header vertical-center">
-              <pr-icon icon="'edit'" feather="true"></pr-icon>
-              Web editor
-            </div>
-            <p>Use our Web editor</p>
-          </label>
-        </div>
-        <div>
-          <input type="radio" id="method_upload" ng-model="$ctrl.formValues.method" value="upload" />
-          <label for="method_upload">
-            <div class="boxselector_header vertical-center">
-              <pr-icon icon="'upload'" feather="true"></pr-icon>
-              Upload
-            </div>
-            <p>Upload from your computer</p>
-          </label>
+    <div class="form-group">
+      <div class="col-sm-12">
+        <div class="boxselector_wrapper">
+          <div>
+            <input type="radio" id="method_editor" ng-model="$ctrl.formValues.method" value="editor" />
+            <label for="method_editor">
+              <div class="boxselector_header vertical-center">
+                <pr-icon icon="'edit'" feather="true"></pr-icon>
+                Web editor
+              </div>
+              <p>Use our Web editor</p>
+            </label>
+          </div>
+          <div>
+            <input type="radio" id="method_upload" ng-model="$ctrl.formValues.method" value="upload" />
+            <label for="method_upload">
+              <div class="boxselector_header vertical-center">
+                <pr-icon icon="'upload'" feather="true"></pr-icon>
+                Upload
+              </div>
+              <p>Upload from your computer</p>
+            </label>
+          </div>
         </div>
       </div>
     </div>

app/edge/components/edge-stack-deployment-type-selector/edge-stack-deployment-type-selector.controller.js

@@ -1,13 +1,15 @@
+import { compose, kubernetes } from '@@/BoxSelector/common-options/deployment-methods';
+
 export default class EdgeStackDeploymentTypeSelectorController {
   /* @ngInject */
   constructor() {
     this.deploymentOptions = [
-      { id: 'deployment_compose', icon: 'fab fa-docker', label: 'Compose', description: 'Docker compose format', value: 0 },
       {
-        id: 'deployment_kube',
-        icon: 'fa fa-cubes',
-        label: 'Kubernetes',
-        description: 'Kubernetes manifest format',
+        ...compose,
+        value: 0,
+      },
+      {
+        ...kubernetes,
         value: 1,
         disabled: () => {
           return this.hasDockerEndpoint();

app/edge/components/group-form/groupForm.html

@@ -26,27 +26,29 @@
   </div>
 
   <div class="col-sm-12 form-section-title"> Group type </div>
-  <div class="col-sm-12 !px-0">
-    <div class="boxselector_wrapper">
-      <div class="boxselector">
-        <input type="radio" id="static-group" ng-model="$ctrl.model.Dynamic" ng-value="false" ng-checked="!$ctrl.model.Dynamic" />
-        <label for="static-group">
-          <div class="boxselector_header vertical-center">
-            <pr-icon icon="'list'" feather="true"></pr-icon>
-            Static
-          </div>
-          <p>Manually select Edge environments</p>
-        </label>
-      </div>
-      <div class="boxselector">
-        <input type="radio" id="dynamic-group" ng-model="$ctrl.model.Dynamic" ng-value="true" ng-checked="$ctrl.model.Dynamic" />
-        <label for="dynamic-group">
-          <div class="boxselector_header vertical-center">
-            <pr-icon icon="'tag'" feather="true" className="'feather'"></pr-icon>
-            Dynamic
-          </div>
-          <p>Automatically associate environments via tags</p>
-        </label>
+  <div class="form-group">
+    <div class="col-sm-12">
+      <div class="boxselector_wrapper">
+        <div class="boxselector">
+          <input type="radio" id="static-group" ng-model="$ctrl.model.Dynamic" ng-value="false" ng-checked="!$ctrl.model.Dynamic" />
+          <label for="static-group">
+            <div class="boxselector_header vertical-center">
+              <pr-icon icon="'list'" feather="true"></pr-icon>
+              Static
+            </div>
+            <p>Manually select Edge environments</p>
+          </label>
+        </div>
+        <div class="boxselector">
+          <input type="radio" id="dynamic-group" ng-model="$ctrl.model.Dynamic" ng-value="true" ng-checked="$ctrl.model.Dynamic" />
+          <label for="dynamic-group">
+            <div class="boxselector_header vertical-center">
+              <pr-icon icon="'tag'" feather="true"></pr-icon>
+              Dynamic
+            </div>
+            <p>Automatically associate environments via tags</p>
+          </label>
+        </div>
       </div>
     </div>
   </div>
@@ -78,27 +80,29 @@
   <!-- DynamicGroup -->
   <div ng-if="$ctrl.model.Dynamic">
     <div class="col-sm-12 form-section-title"> Tags </div>
-    <div ng-if="$ctrl.tags.length" class="form-group col-sm-12">
-      <div class="boxselector_wrapper">
-        <div class="boxselector">
-          <input type="radio" id="or-selector" ng-model="$ctrl.model.PartialMatch" ng-value="true" ng-checked="$ctrl.model.PartialMatch" />
-          <label for="or-selector">
-            <div class="boxselector_header vertical-center">
-              <pr-icon icon="'tag'" feather="true"></pr-icon>
-              Partial match
-            </div>
-            <p>Associate any environment matching at least one of the selected tags</p>
-          </label>
-        </div>
-        <div class="boxselector">
-          <input type="radio" id="and-selector" ng-model="$ctrl.model.PartialMatch" ng-value="false" ng-checked="!$ctrl.model.PartialMatch" />
-          <label for="and-selector">
-            <div class="boxselector_header vertical-center">
-              <pr-icon icon="'tag'" feather="true" className="'feather'"></pr-icon>
-              Full match
-            </div>
-            <p>Associate any environment matching all of the selected tags</p>
-          </label>
+    <div class="form-group">
+      <div class="col-sm-12">
+        <div class="boxselector_wrapper">
+          <div class="boxselector">
+            <input type="radio" id="or-selector" ng-model="$ctrl.model.PartialMatch" ng-value="true" ng-checked="$ctrl.model.PartialMatch" />
+            <label for="or-selector">
+              <div class="boxselector_header vertical-center">
+                <pr-icon icon="'tag'" feather="true"></pr-icon>
+                Partial match
+              </div>
+              <p>Associate any environment matching at least one of the selected tags</p>
+            </label>
+          </div>
+          <div class="boxselector">
+            <input type="radio" id="and-selector" ng-model="$ctrl.model.PartialMatch" ng-value="false" ng-checked="!$ctrl.model.PartialMatch" />
+            <label for="and-selector">
+              <div class="boxselector_header vertical-center">
+                <pr-icon icon="'tag'" feather="true"></pr-icon>
+                Full match
+              </div>
+              <p>Associate any environment matching all of the selected tags</p>
+            </label>
+          </div>
         </div>
       </div>
     </div>

app/edge/views/edge-stacks/createEdgeStackView/docker-compose-form/docker-compose-form.controller.js

@@ -1,14 +1,11 @@
+import { editor, git, template, upload } from '@@/BoxSelector/common-options/build-methods';
+
 class DockerComposeFormController {
   /* @ngInject */
   constructor($async, EdgeTemplateService, Notifications) {
     Object.assign(this, { $async, EdgeTemplateService, Notifications });
 
-    this.methodOptions = [
-      { id: 'method_editor', icon: 'edit', featherIcon: true, label: 'Web editor', description: 'Use our Web editor', value: 'editor' },
-      { id: 'method_upload', icon: 'upload', featherIcon: true, label: 'Upload', description: 'Upload from your computer', value: 'upload' },
-      { id: 'method_repository', icon: 'github', featherIcon: true, label: 'Repository', description: 'Use a git repository', value: 'repository' },
-      { id: 'method_template', icon: 'file-text', featherIcon: true, label: 'Template', description: 'Use an Edge stack template', value: 'template' },
-    ];
+    this.methodOptions = [editor, upload, git, template];
 
     this.selectedTemplate = null;
 

app/edge/views/edge-stacks/createEdgeStackView/kube-manifest-form/kube-manifest-form.controller.js

@@ -1,13 +1,11 @@
+import { editor, git, upload } from '@@/BoxSelector/common-options/build-methods';
+
 class KubeManifestFormController {
   /* @ngInject */
   constructor($async) {
     Object.assign(this, { $async });
 
-    this.methodOptions = [
-      { id: 'method_editor', icon: 'edit', featherIcon: true, label: 'Web editor', description: 'Use our Web editor', value: 'editor' },
-      { id: 'method_upload', icon: 'upload', featherIcon: true, label: 'Upload', description: 'Upload from your computer', value: 'upload' },
-      { id: 'method_repository', icon: 'github', featherIcon: true, label: 'Repository', description: 'Use a git repository', value: 'repository' },
-    ];
+    this.methodOptions = [editor, upload, git];
 
     this.onChangeFileContent = this.onChangeFileContent.bind(this);
     this.onChangeFormValues = this.onChangeFormValues.bind(this);