EE-3487 update ui of docker/configs (#7370)

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;
   }
 }

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 -->

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>

app/portainer/components/form-components/web-editor-form/index.js

@@ -9,6 +9,7 @@ export const webEditorForm = {
     placeholder: '@',
     yml: '<',
     value: '<',
+    readOnly: '<',
     onChange: '<',
   },
 

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>