From a95d734c34cba8a2e554d879b685d0eeee01008e Mon Sep 17 00:00:00 2001
From: Rex Wang <109048808+RexWangPT@users.noreply.github.com>
Date: Mon, 1 Aug 2022 20:31:56 +0800
Subject: [PATCH] EE-3487 update ui of docker/configs (#7370)

---
 .../views/configs/create/createConfigController.js       | 4 ++--
 app/docker/views/configs/create/createconfig.html        | 4 ++--
 app/docker/views/configs/edit/config.html                | 8 ++++----
 .../components/form-components/web-editor-form/index.js  | 1 +
 .../form-components/web-editor-form/web-editor-form.html | 9 ++++++++-
 5 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/app/docker/views/configs/create/createConfigController.js b/app/docker/views/configs/create/createConfigController.js
index 968a2279a..c17ea179c 100644
--- a/app/docker/views/configs/create/createConfigController.js
+++ b/app/docker/views/configs/create/createConfigController.js
@@ -147,8 +147,8 @@ class CreateConfigController {
     }
   }
 
-  editorUpdate(cm) {
-    this.formValues.ConfigContent = cm.getValue();
+  editorUpdate(value) {
+    this.formValues.ConfigContent = value;
     this.state.isEditorDirty = true;
   }
 }
diff --git a/app/docker/views/configs/create/createconfig.html b/app/docker/views/configs/create/createconfig.html
index df2808e3d..ecc693989 100644
--- a/app/docker/views/configs/create/createconfig.html
+++ b/app/docker/views/configs/create/createconfig.html
@@ -16,13 +16,13 @@
           <!-- config-data -->
           <div class="form-group">
             <div class="col-sm-12" ng-if="ctrl.formValues.displayCodeEditor">
-              <code-editor
+              <web-editor-form
                 identifier="config-creation-editor"
                 placeholder="Define or paste the content of your config here"
                 yml="false"
                 on-change="(ctrl.editorUpdate)"
                 value="ctrl.formValues.Data"
-              ></code-editor>
+              ></web-editor-form>
             </div>
           </div>
           <!-- !config-data -->
diff --git a/app/docker/views/configs/edit/config.html b/app/docker/views/configs/edit/config.html
index e4d822568..a3b45cbe9 100644
--- a/app/docker/views/configs/edit/config.html
+++ b/app/docker/views/configs/edit/config.html
@@ -15,11 +15,11 @@
               <td>ID</td>
               <td>
                 {{ config.Id }}
-                <button authorization="DockerConfigDelete" class="btn btn-xs btn-danger" ng-click="removeConfig(config.Id)"
-                  ><i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Delete this config</button
+                <button authorization="DockerConfigDelete" class="btn btn-xs btn-dangerlight" ng-click="removeConfig(config.Id)"
+                  ><pr-icon icon="'trash-2'" feather="true"></pr-icon>Delete this config</button
                 >
-                <button authorization="DockerConfigCreate" class="btn btn-xs btn-primary" ui-sref="docker.configs.new({id: config.Id})"
-                  ><i class="fa fa-copy space-right" aria-hidden="true"></i>Clone config</button
+                <button authorization="DockerConfigCreate" class="btn btn-xs btn-secondary" ui-sref="docker.configs.new({id: config.Id})"
+                  ><pr-icon icon="'copy'" feather="true"></pr-icon>Clone config</button
                 >
               </td>
             </tr>
diff --git a/app/portainer/components/form-components/web-editor-form/index.js b/app/portainer/components/form-components/web-editor-form/index.js
index ab3c06417..8dc4beffc 100644
--- a/app/portainer/components/form-components/web-editor-form/index.js
+++ b/app/portainer/components/form-components/web-editor-form/index.js
@@ -9,6 +9,7 @@ export const webEditorForm = {
     placeholder: '@',
     yml: '<',
     value: '<',
+    readOnly: '<',
     onChange: '<',
   },
 
diff --git a/app/portainer/components/form-components/web-editor-form/web-editor-form.html b/app/portainer/components/form-components/web-editor-form/web-editor-form.html
index 0222e3ec2..ef4e93461 100644
--- a/app/portainer/components/form-components/web-editor-form/web-editor-form.html
+++ b/app/portainer/components/form-components/web-editor-form/web-editor-form.html
@@ -6,7 +6,14 @@
     </div>
     <div class="form-group">
       <div class="col-sm-12 col-lg-12">
-        <code-editor identifier="{{ $ctrl.identifier }}" placeholder="{{ $ctrl.placeholder }}" yml="$ctrl.yml" value="$ctrl.value" on-change="($ctrl.editorUpdate)"></code-editor>
+        <code-editor
+          identifier="{{ $ctrl.identifier }}"
+          placeholder="{{ $ctrl.placeholder }}"
+          read-only="$ctrl.readOnly"
+          yml="$ctrl.yml"
+          value="$ctrl.value"
+          on-change="($ctrl.editorUpdate)"
+        ></code-editor>
       </div>
     </div>
   </div>