From 6d3a33635d05f469fdb91cb7b7409ad7f02ae58d Mon Sep 17 00:00:00 2001
From: Rex Wang <109048808+RexWangPT@users.noreply.github.com>
Date: Wed, 27 Jul 2022 21:04:31 +0800
Subject: [PATCH] EE-3694 update UI of docker/custom template (#7345)

---
 .../git-form-auth-fieldset.html               |  3 +-
 .../createCustomTemplateView.html             | 42 +++++++++----------
 .../createCustomTemplateViewController.js     |  3 +-
 .../customTemplatesView.html                  | 42 +++++++++----------
 .../customTemplatesViewController.js          |  4 +-
 .../editCustomTemplateView.html               | 39 ++++++++---------
 .../editCustomTemplateViewController.js       |  3 +-
 app/react/components/buttons/AddButton.tsx    |  6 ++-
 .../form-components/InputList/InputList.tsx   |  5 ++-
 9 files changed, 71 insertions(+), 76 deletions(-)

diff --git a/app/portainer/components/forms/git-form/git-form-auth-fieldset/git-form-auth-fieldset.html b/app/portainer/components/forms/git-form/git-form-auth-fieldset/git-form-auth-fieldset.html
index 8d9b4dc35..b8ba415de 100644
--- a/app/portainer/components/forms/git-form/git-form-auth-fieldset/git-form-auth-fieldset.html
+++ b/app/portainer/components/forms/git-form/git-form-auth-fieldset/git-form-auth-fieldset.html
@@ -1,6 +1,7 @@
 <div class="form-group">
   <div class="col-sm-12">
     <por-switch-field
+      label-class="'col-sm-2'"
       checked="$ctrl.model.RepositoryAuthentication"
       label="'Authentication'"
       name="'authSwitch'"
@@ -9,7 +10,7 @@
     ></por-switch-field>
   </div>
 </div>
-<div class="small" style="margin: 5px 0 15px 0" ng-if="$ctrl.model.RepositoryAuthentication && $ctrl.showAuthExplanation">
+<div class="small mt-1 mb-3" ng-if="$ctrl.model.RepositoryAuthentication && $ctrl.showAuthExplanation">
   <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
   <span class="text-muted">Enabling authentication will store the credentials and it is advisable to use a git service account</span>
 </div>
diff --git a/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html b/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html
index 5ee02b659..eeed469e3 100644
--- a/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html
+++ b/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html
@@ -16,7 +16,7 @@
           <div ng-if="!$ctrl.state.fromStack">
             <div class="col-sm-12 form-section-title"> Build method </div>
             <div class="form-group"></div>
-            <div class="form-group" style="margin-bottom: 0">
+            <div class="form-group mb-0">
               <div class="boxselector_wrapper">
                 <div>
                   <input type="radio" id="method_editor" ng-model="$ctrl.state.Method" value="editor" ng-change="$ctrl.onChangeMethod()" />
@@ -53,27 +53,23 @@
           </div>
           <!-- !build-method -->
           <!-- web-editor -->
-          <div ng-show="$ctrl.state.Method === 'editor'">
-            <div class="col-sm-12 form-section-title"> Web editor </div>
-            <div class="form-group">
-              <span class="col-sm-12 text-muted small">
+          <web-editor-form
+            ng-if="$ctrl.state.Method === 'editor'"
+            identifier="custom-template-creation-editor"
+            value="$ctrl.formValues.FileContent"
+            on-change="($ctrl.editorUpdate)"
+            ng-required="true"
+            yml="true"
+            placeholder="# Define or paste the content of your docker compose file here"
+          >
+            <editor-description>
+              <span class="col-sm-12 text-muted">
                 You can get more information about Compose file format in the
                 <a href="https://docs.docker.com/compose/compose-file/" target="_blank"> official documentation </a>
                 .
               </span>
-            </div>
-            <div class="form-group">
-              <div class="col-sm-12">
-                <code-editor
-                  identifier="custom-template-creation-editor"
-                  placeholder="# Define or paste the content of your docker compose file here"
-                  yml="true"
-                  value="$ctrl.formValues.FileContent"
-                  on-change="($ctrl.editorUpdate)"
-                ></code-editor>
-              </div>
-            </div>
-          </div>
+            </editor-description>
+          </web-editor-form>
           <!-- !web-editor -->
           <!-- upload -->
           <div ng-show="$ctrl.state.Method === 'upload'">
@@ -84,9 +80,11 @@
             <div class="form-group">
               <div class="col-sm-12">
                 <button type="button" class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formValues.File"> Select file </button>
-                <span style="margin-left: 5px">
+                <span class="space-left">
                   {{ $ctrl.formValues.File.name }}
-                  <i class="fa fa-times red-icon" ng-if="!$ctrl.formValues.File" aria-hidden="true"></i>
+                  <span ng-if="$ctrl.formValues.File">
+                    <pr-icon icon="'x'" feather="true" mode="'danger'"></pr-icon>
+                  </span>
                 </span>
               </div>
             </div>
@@ -98,7 +96,7 @@
           <div class="form-group" ng-if="!$ctrl.state.isTemplateValid">
             <div class="col-sm-12">
               <div class="small text-warning">
-                <i class="fa fa-exclamation-triangle space-right" aria-hidden="true"></i>
+                <pr-icon icon="'alert-triangle'" feather="true" class-name="space-right"></pr-icon>
                 Template is invalid.
               </div>
             </div>
@@ -133,7 +131,7 @@
                 <span ng-hide="$ctrl.state.actionInProgress">Create custom template</span>
                 <span ng-show="$ctrl.state.actionInProgress">Creation in progress...</span>
               </button>
-              <span class="text-danger" ng-if="$ctrl.state.formValidationError" style="margin-left: 5px">
+              <span class="text-danger space-left" ng-if="$ctrl.state.formValidationError">
                 {{ $ctrl.state.formValidationError }}
               </span>
             </div>
diff --git a/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateViewController.js b/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateViewController.js
index e0971784a..97b5aca90 100644
--- a/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateViewController.js
+++ b/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateViewController.js
@@ -171,8 +171,7 @@ class CreateCustomTemplateViewController {
     return this.CustomTemplateService.createCustomTemplateFromGitRepository(this.formValues);
   }
 
-  editorUpdate(cm) {
-    const value = cm.getValue();
+  editorUpdate(value) {
     this.formValues.FileContent = value;
     this.state.isEditorDirty = true;
     this.parseTemplate(value);
diff --git a/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html b/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html
index 98ae467d0..e99aeb03c 100644
--- a/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html
+++ b/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html
@@ -20,37 +20,33 @@
 
       <div class="form-group">
         <div class="col-sm-12">
-          <a class="small interactive" ng-show="!$ctrl.state.showAdvancedOptions" ng-click="$ctrl.state.showAdvancedOptions = true;">
-            <i class="fa fa-plus space-right" aria-hidden="true"></i> Customize stack
+          <a class="small interactive vertical-center" ng-show="!$ctrl.state.showAdvancedOptions" ng-click="$ctrl.state.showAdvancedOptions = true;">
+            <pr-icon icon="'plus'" class-name="space-right" feather="true"></pr-icon> Customize stack
           </a>
-          <a class="small interactive" ng-show="$ctrl.state.showAdvancedOptions" ng-click="$ctrl.state.showAdvancedOptions = false;">
-            <i class="fa fa-minus space-right" aria-hidden="true"></i> Hide custom stack
+          <a class="small interactive vertical-center" ng-show="$ctrl.state.showAdvancedOptions" ng-click="$ctrl.state.showAdvancedOptions = false;">
+            <pr-icon icon="'minus'" class-name="space-right" feather="true"></pr-icon> Hide custom stack
           </a>
         </div>
       </div>
-      <div ng-if="$ctrl.state.showAdvancedOptions">
-        <!-- web-editor -->
-        <div class="col-sm-12 form-section-title"> Web editor </div>
-        <div class="form-group">
-          <span class="col-sm-12 text-muted small">
+      <!-- web-editor -->
+      <web-editor-form
+        ng-if="$ctrl.state.showAdvancedOptions"
+        identifier="custom-template-creation-editor"
+        value="$ctrl.formValues.FileContent"
+        on-change="($ctrl.editorUpdate)"
+        ng-required="true"
+        yml="true"
+        placeholder="# Define or paste the content of your docker compose file here"
+      >
+        <editor-description>
+          <span class="col-sm-12 text-muted">
             You can get more information about Compose file format in the
             <a href="https://docs.docker.com/compose/compose-file/" target="_blank"> official documentation </a>
             .
           </span>
-        </div>
-        <div class="form-group">
-          <div class="col-sm-12">
-            <code-editor
-              identifier="custom-template-creation-editor"
-              placeholder="# Define or paste the content of your docker compose file here"
-              yml="true"
-              value="$ctrl.formValues.fileContent"
-              on-change="($ctrl.editorUpdate)"
-            ></code-editor>
-          </div>
-        </div>
-        <!-- !web-editor -->
-      </div>
+        </editor-description>
+      </web-editor-form>
+      <!-- !web-editor -->
     </advanced-form>
   </stack-from-template-form>
 </div>
diff --git a/app/portainer/views/custom-templates/custom-templates-view/customTemplatesViewController.js b/app/portainer/views/custom-templates/custom-templates-view/customTemplatesViewController.js
index 48ee28352..560f00fd1 100644
--- a/app/portainer/views/custom-templates/custom-templates-view/customTemplatesViewController.js
+++ b/app/portainer/views/custom-templates/custom-templates-view/customTemplatesViewController.js
@@ -259,8 +259,8 @@ class CustomTemplatesViewController {
     }
   }
 
-  editorUpdate(cm) {
-    this.formValues.fileContent = cm.getValue();
+  editorUpdate(value) {
+    this.formValues.fileContent = value;
   }
 
   isDeployable(endpoint, templateType) {
diff --git a/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html b/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html
index 329abfec4..b285f093a 100644
--- a/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html
+++ b/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html
@@ -8,31 +8,28 @@
           <custom-template-common-fields form-values="$ctrl.formValues" show-platform-field="true" show-type-field="true"></custom-template-common-fields>
 
           <!-- web-editor -->
-          <div class="col-sm-12 form-section-title"> Web editor </div>
-          <div class="form-group">
-            <span class="col-sm-12 text-muted small">
-              You can get more information about Compose file format in the
-              <a href="https://docs.docker.com/compose/compose-file/" target="_blank"> official documentation </a>
-              .
-            </span>
-          </div>
-          <div class="form-group">
-            <div class="col-sm-12">
-              <code-editor
-                identifier="custom-template-creation-editor"
-                placeholder="# Define or paste the content of your docker compose file here"
-                yml="true"
-                value="$ctrl.formValues.FileContent"
-                on-change="($ctrl.editorUpdate)"
-              ></code-editor>
-            </div>
-          </div>
+          <web-editor-form
+            identifier="custom-template-creation-editor"
+            value="$ctrl.formValues.FileContent"
+            on-change="($ctrl.editorUpdate)"
+            ng-required="true"
+            yml="true"
+            placeholder="# Define or paste the content of your docker compose file here"
+          >
+            <editor-description>
+              <span class="col-sm-12 text-muted">
+                You can get more information about Compose file format in the
+                <a href="https://docs.docker.com/compose/compose-file/" target="_blank"> official documentation </a>
+                .
+              </span>
+            </editor-description>
+          </web-editor-form>
           <!-- !web-editor -->
 
           <div class="form-group" ng-if="!$ctrl.state.isTemplateValid">
             <div class="col-sm-12">
               <div class="small text-warning">
-                <i class="fa fa-exclamation-triangle space-right" aria-hidden="true"></i>
+                <pr-icon icon="'alert-triangle'" feather="true" class-name="space-right"></pr-icon>
                 Template is invalid.
               </div>
             </div>
@@ -64,7 +61,7 @@
                 <span ng-hide="$ctrl.actionInProgress">Update the template</span>
                 <span ng-show="$ctrl.actionInProgress">Update in progress...</span>
               </button>
-              <span class="text-danger" ng-if="$ctrl.state.formValidationError" style="margin-left: 5px">
+              <span class="text-danger space-left" ng-if="$ctrl.state.formValidationError">
                 {{ $ctrl.state.formValidationError }}
               </span>
             </div>
diff --git a/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateViewController.js b/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateViewController.js
index 829afe54a..5cf31592d 100644
--- a/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateViewController.js
+++ b/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateViewController.js
@@ -120,8 +120,7 @@ class EditCustomTemplateViewController {
     }
   }
 
-  editorUpdate(cm) {
-    const value = cm.getValue();
+  editorUpdate(value) {
     if (this.formValues.FileContent.replace(/(\r\n|\n|\r)/gm, '') !== value.replace(/(\r\n|\n|\r)/gm, '')) {
       this.formValues.FileContent = value;
       this.parseTemplate(value);
diff --git a/app/react/components/buttons/AddButton.tsx b/app/react/components/buttons/AddButton.tsx
index d94ae2446..51f6024d7 100644
--- a/app/react/components/buttons/AddButton.tsx
+++ b/app/react/components/buttons/AddButton.tsx
@@ -1,5 +1,7 @@
 import clsx from 'clsx';
 
+import { Icon } from '@/react/components/Icon';
+
 import styles from './AddButton.module.css';
 
 export interface Props {
@@ -17,13 +19,15 @@ export function AddButton({ label, onClick, className, disabled }: Props) {
         'label',
         'label-default',
         'interactive',
+        'vertical-center',
         styles.addButton
       )}
       type="button"
       onClick={onClick}
       disabled={disabled}
     >
-      <i className="fa fa-plus-circle space-right" aria-hidden="true" /> {label}
+      <Icon icon="plus" feather className="space-right" />
+      {label}
     </button>
   );
 }
diff --git a/app/react/components/form-components/InputList/InputList.tsx b/app/react/components/form-components/InputList/InputList.tsx
index f76e2a9b7..246b6af64 100644
--- a/app/react/components/form-components/InputList/InputList.tsx
+++ b/app/react/components/form-components/InputList/InputList.tsx
@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { FormikErrors } from 'formik';
 
 import { AddButton, Button } from '@@/buttons';
+import { Icon } from '@@/Icon';
 import { Tooltip } from '@@/Tip/Tooltip';
 import { TextTip } from '@@/Tip/TextTip';
 
@@ -131,7 +132,7 @@ export function InputList<T = DefaultType>({
                       disabled={disabled || index === 0}
                       onClick={() => handleMoveUp(index)}
                     >
-                      <i className="fa fa-arrow-up" aria-hidden="true" />
+                      <Icon icon="arrow-up" feather />
                     </Button>
                     <Button
                       size="small"
@@ -139,7 +140,7 @@ export function InputList<T = DefaultType>({
                       disabled={disabled || index === value.length - 1}
                       onClick={() => handleMoveDown(index)}
                     >
-                      <i className="fa fa-arrow-down" aria-hidden="true" />
+                      <Icon icon="arrow-down" feather />
                     </Button>
                   </>
                 )}