feat(ui): ui improvements create template EE-3628 (#7352)

app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.controller.js

@@ -9,8 +9,8 @@ class KubeCreateCustomTemplateViewController {
     Object.assign(this, { $async, $state, Authentication, CustomTemplateService, FormValidator, ModalService, Notifications, ResourceControlService });
 
     this.methodOptions = [
-      buildOption('method_editor', 'fa fa-edit', 'Web editor', 'Use our Web editor', 'editor'),
-      buildOption('method_upload', 'fa fa-upload', 'Upload', 'Upload from your computer', 'upload'),
+      buildOption('method_editor', 'svg-custom', 'Web editor', 'Use our Web editor', 'editor'),
+      buildOption('method_upload', 'svg-upload', 'Upload', 'Upload from your computer', 'upload'),
     ];
 
     this.templates = null;
@@ -97,7 +97,12 @@ class KubeCreateCustomTemplateViewController {
 
       this.state.actionInProgress = true;
       try {
-        const customTemplate = await this.createCustomTemplateByMethod(method, this.formValues);
+        const formValues = { ...this.formValues, Variables: null };
+        if (this.formValues.Variables.length > 0) {
+          formValues.Variables = JSON.stringify(this.formValues.Variables);
+        }
+
+        const customTemplate = await this.createCustomTemplateByMethod(method, formValues);
 
         const accessControlData = this.formValues.AccessControlData;
         const userDetails = this.Authentication.getUserDetails();

app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.html

@@ -11,23 +11,25 @@
           <div class="col-sm-12 form-section-title"> Build method </div>
           <box-selector radio-name="'method'" value="$ctrl.state.method" options="$ctrl.methodOptions" on-change="($ctrl.onChangeMethod)"></box-selector>
 
-          <web-editor-form
-            ng-if="$ctrl.state.method === 'editor'"
-            identifier="template-creation-editor"
-            value="$ctrl.formValues.FileContent"
-            on-change="($ctrl.onChangeFileContent)"
-            ng-required="true"
-            yml="true"
-            placeholder="# Define or paste the content of your manifest file here"
-          >
-            <editor-description>
-              <div>Templates allow deploying any kind of Kubernetes resource (Deployment, Secret, ConfigMap...)</div>
-              <div>
-                You can get more information about Kubernetes file format in the
-                <a href="https://kubernetes.io/docs/concepts/overview/working-with-objects/kubernetes-objects/" target="_blank">official documentation</a>.
-              </div>
-            </editor-description>
-          </web-editor-form>
+          <div class="mt-4">
+            <web-editor-form
+              ng-if="$ctrl.state.method === 'editor'"
+              identifier="template-creation-editor"
+              value="$ctrl.formValues.FileContent"
+              on-change="($ctrl.onChangeFileContent)"
+              ng-required="true"
+              yml="true"
+              placeholder="# Define or paste the content of your manifest file here"
+            >
+              <editor-description>
+                <p>Templates allow deploying any kind of Kubernetes resource (Deployment, Secret, ConfigMap...)</p>
+                <p>
+                  You can get more information about Kubernetes file format in the
+                  <a href="https://kubernetes.io/docs/concepts/overview/working-with-objects/kubernetes-objects/" target="_blank">official documentation</a>.
+                </p>
+              </editor-description>
+            </web-editor-form>
+          </div>
 
           <file-upload-form ng-if="$ctrl.state.method === 'upload'" file="$ctrl.formValues.File" on-change="($ctrl.onChangeFile)" ng-required="true">
             <file-upload-description> You can upload a Manifest file from your computer. </file-upload-description>
@@ -48,7 +50,7 @@
             <div class="col-sm-12">
               <button
                 type="button"
-                class="btn btn-primary btn-sm"
+                class="btn btn-primary btn-sm !ml-0"
                 ng-disabled="!$ctrl.state.isTemplateValid ||$ctrl.state.actionInProgress || $ctrl.form.$invalid || ($ctrl.state.method === 'editor' && !$ctrl.formValues.FileContent)"
                 ng-click="$ctrl.createCustomTemplate()"
                 button-spinner="$ctrl.state.actionInProgress"

app/portainer/components/accessControlForm/porAccessControlForm.html

@@ -66,11 +66,11 @@
   <!-- restricted-access -->
   <!-- authorized-teams -->
   <div
-    class="form-group"
+    class="form-group mt-4"
     ng-if="$ctrl.formData.AccessControlEnabled && $ctrl.formData.Ownership === $ctrl.RCO.RESTRICTED && ($ctrl.isAdmin || (!$ctrl.isAdmin && $ctrl.availableTeams.length > 1))"
   >
     <div class="col-sm-12">
-      <label for="group-access" class="control-label text-left">
+      <label for="group-access" class="control-label text-left col-sm-3 col-sm-2 !p-0">
         Authorized teams
         <portainer-tooltip
           ng-if="$ctrl.isAdmin && $ctrl.availableTeams.length > 0"
@@ -105,7 +105,7 @@
   <!-- authorized-users -->
   <div class="form-group" ng-if="$ctrl.formData.AccessControlEnabled && $ctrl.formData.Ownership === $ctrl.RCO.RESTRICTED && $ctrl.isAdmin">
     <div class="col-sm-12">
-      <label for="group-access" class="control-label text-left">
+      <label for="group-access" class="control-label text-left col-sm-3 col-sm-2 !p-0">
         Authorized users
         <portainer-tooltip
           ng-if="$ctrl.isAdmin && $ctrl.availableUsers.length > 0"

app/portainer/components/custom-template-common-fields/customTemplateCommonFields.html

@@ -1,8 +1,8 @@
 <ng-form name="commonCustomTemplateForm">
   <!-- title-input -->
-  <div class="form-group">
+  <div class="form-group mb-0">
     <label for="template_title" class="col-sm-3 col-lg-2 control-label text-left"> Title </label>
-    <div class="col-sm-9 col-lg-10">
+    <div class="col-sm-8">
       <input
         type="text"
         class="form-control"
@@ -14,39 +14,37 @@
         auto-focus
         required
       />
-    </div>
-  </div>
-  <div class="form-group" ng-show="commonCustomTemplateForm.template_title.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="commonCustomTemplateForm.template_title.$error">
-        <p ng-message="pattern">
-          <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
-          <span>This field must consist of lower case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').</span>
-        </p>
-      </div>
-    </div>
-  </div>
-  <div class="form-group" ng-show="commonCustomTemplateForm.template_title.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="commonCustomTemplateForm.template_title.$error">
-        <p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Title is required.</p>
-      </div>
+      <span class="help-block">
+        <div ng-show="commonCustomTemplateForm.template_title.$invalid">
+          <div class="mt-2 small text-muted">
+            <div ng-messages="commonCustomTemplateForm.template_title.$error">
+              <p class="vertical-center" ng-message="required"> <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> Title is required. </p>
+              <p class="vertical-center" ng-message="pattern">
+                <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
+                This field must consist of lower case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').
+              </p>
+            </div>
+          </div>
+        </div>
+      </span>
     </div>
   </div>
   <!-- !title-input -->
 
   <!-- description-input -->
-  <div class="form-group">
+  <div class="form-group mb-0">
     <label for="description" class="col-sm-3 col-lg-2 control-label text-left">Description</label>
-    <div class="col-sm-9 col-lg-10">
+    <div class="col-sm-8">
       <input type="text" class="form-control" id="description" ng-model="$ctrl.formValues.Description" name="description" required />
-    </div>
-  </div>
-  <div class="form-group" ng-show="commonCustomTemplateForm.description.$invalid">
-    <div class="col-sm-12 small text-warning">
-      <div ng-messages="commonCustomTemplateForm.description.$error">
-        <p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Description is required.</p>
-      </div>
+      <span class="help-block">
+        <div class="mt-2 small text-muted">
+          <div ng-show="commonCustomTemplateForm.description.$invalid">
+            <div ng-messages="commonCustomTemplateForm.description.$error">
+              <p class="vertical-center" ng-message="required"> <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> Description is required.</p>
+            </div>
+          </div>
+        </div>
+      </span>
     </div>
   </div>
   <!-- !description-input -->
@@ -54,7 +52,7 @@
   <!-- note-input -->
   <div class="form-group">
     <label for="note" class="col-sm-3 col-lg-2 control-label text-left">Note</label>
-    <div class="col-sm-9 col-lg-10">
+    <div class="col-sm-8">
       <input type="text" class="form-control" id="note" ng-model="$ctrl.formValues.Note" />
     </div>
   </div>
@@ -63,7 +61,7 @@
   <!-- icon-url-input -->
   <div class="form-group">
     <label for="icon-url" class="col-sm-3 col-lg-2 control-label text-left">Icon URL</label>
-    <div class="col-sm-9 col-lg-10">
+    <div class="col-sm-8">
       <input type="text" class="form-control" id="icon-url" ng-model="$ctrl.formValues.Logo" />
     </div>
   </div>
@@ -72,7 +70,7 @@
   <!-- platform-input -->
   <div ng-if="$ctrl.showPlatformField" class="form-group">
     <label for="platform" class="col-sm-3 col-lg-2 control-label text-left">Platform</label>
-    <div class="col-sm-9 col-lg-10">
+    <div class="col-sm-8">
       <select class="form-control" ng-model="$ctrl.formValues.Platform" ng-options="+(opt.value) as opt.label for opt in $ctrl.platformTypes"> </select>
     </div>
   </div>
@@ -81,7 +79,7 @@
   <!-- platform-input -->
   <div ng-if="$ctrl.showTypeField" class="form-group">
     <label for="platform" class="col-sm-3 col-lg-2 control-label text-left">Type</label>
-    <div class="col-sm-9 col-lg-10">
+    <div class="col-sm-8">
       <select class="form-control" ng-model="$ctrl.formValues.Type" ng-options="+(opt.value) as opt.label for opt in $ctrl.templateTypes"> </select>
     </div>
   </div>

app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html

@@ -118,7 +118,7 @@
             <div class="col-sm-12">
               <button
                 type="button"
-                class="btn btn-primary btn-sm"
+                class="btn btn-primary btn-sm !ml-0"
                 ng-disabled="$ctrl.state.actionInProgress || customTemplateForm.$invalid
               || ($ctrl.state.Method === 'editor' && !$ctrl.formValues.FileContent)
               || ($ctrl.state.Method === 'upload' && !$ctrl.formValues.File)

app/react/components/buttons/AddButton.tsx

@@ -18,6 +18,7 @@ export function AddButton({ label, onClick, className, disabled }: Props) {
         className,
         'label',
         'label-default',
+        'vertical-center',
         'interactive',
         'vertical-center',
         styles.addButton

app/react/components/form-components/FileUpload/FileUploadField.tsx

@@ -1,6 +1,7 @@
 import { ChangeEvent, createRef } from 'react';
 
 import { Button } from '@@/buttons';
+import { Icon } from '@@/Icon';
 
 import styles from './FileUploadField.module.css';
 
@@ -24,7 +25,7 @@ export function FileUploadField({
   const fileRef = createRef<HTMLInputElement>();
 
   return (
-    <div className="file-upload-field">
+    <div className="file-upload-field vertical-center">
       <input
         id={inputId}
         ref={fileRef}
@@ -44,12 +45,8 @@ export function FileUploadField({
         {title}
       </Button>
 
-      <span className="space-left">
-        {value ? (
-          value.name
-        ) : (
-          <i className="fa fa-times red-icon" aria-hidden="true" />
-        )}
+      <span className="vertical-center">
+        {value ? value.name : <Icon icon="x" feather mode="danger" />}
       </span>
     </div>
   );

app/react/components/form-components/InputList/InputList.tsx

@@ -94,7 +94,7 @@ export function InputList<T = DefaultType>({
       </div>
 
       {textTip && (
-        <div className="col-sm-12 my-5">
+        <div className="col-sm-12 mt-5">
           <TextTip color="blue">{textTip}</TextTip>
         </div>
       )}
@@ -131,6 +131,7 @@ export function InputList<T = DefaultType>({
                       size="small"
                       disabled={disabled || index === 0}
                       onClick={() => handleMoveUp(index)}
+                      className="vertical-center btn-only-icon"
                     >
                       <Icon icon="arrow-up" feather />
                     </Button>
@@ -139,6 +140,7 @@ export function InputList<T = DefaultType>({
                       type="button"
                       disabled={disabled || index === value.length - 1}
                       onClick={() => handleMoveDown(index)}
+                      className="vertical-center btn-only-icon"
                     >
                       <Icon icon="arrow-down" feather />
                     </Button>
@@ -146,12 +148,12 @@ export function InputList<T = DefaultType>({
                 )}
                 {!readOnly && (
                   <Button
-                    color="danger"
-                    size="medium"
+                    color="dangerlight"
+                    size="small"
                     onClick={() => handleRemoveItem(key, item)}
-                    disabled={disabled}
+                    className="vertical-center btn-only-icon"
                   >
-                    <Icon icon="trash-2" feather />
+                    <Icon icon="trash-2" feather size="md" />
                   </Button>
                 )}
               </div>

app/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField.tsx

@@ -27,7 +27,7 @@ export function CustomTemplatesVariablesDefinitionField({
 }: Props) {
   return (
     <InputList
-      label="Variables Definition"
+      label="Variables definition"
       onChange={onChange}
       value={value}
       renderItem={(item, onChange, error) => (