Implement Codemirror view for known_list dialog; add FileSelector action

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>

shell/components/form/SSHKnownHosts/KnownHostsEditDialog.vue

@@ -1,40 +1,75 @@
 <script>
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import CodeMirror from '@shell/components/CodeMirror';
+import FileSelector from '@shell/components/form/FileSelector.vue';
 import AppModal from '@shell/components/AppModal.vue';
 
 export default {
   emits: ['closed'],
 
-  components: { AppModal },
+  components: {
+    FileSelector,
+    AppModal,
+    CodeMirror,
+  },
+
+  props: {
+    value: {
+      type:     String,
+      required: true
+    },
+
+    mode: {
+      type:    String,
+      default: _EDIT
+    },
+  },
 
   data() {
+    const codeMirrorOptions = {
+      readOnly:        this.isView,
+      gutters:         ['CodeMirror-foldgutter'],
+      mode:            'text/x-properties',
+      lint:            false,
+      lineNumbers:     !this.isView,
+      styleActiveLine: false,
+      tabSize:         2,
+      indentWithTabs:  false,
+      cursorBlinkRate: 530,
+    };
+
     return {
-      data:                   '',
+      codeMirrorOptions,
-      currentVersion:         '',
+      text:      this.value,
-      defaultRegistrySetting: null,
-      plugin:                 undefined,
-      busy:                   false,
-      version:                '',
-      update:                 false,
-      mode:                   '',
       showModal: false,
-      chartVersionInfo:       null
     };
   },
 
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    }
+  },
+
   methods: {
-    showDialog(data) {
+    onTextChange(value) {
+      this.text = value?.trim();
+    },
+
+    showDialog() {
       this.showModal = true;
-      this.data = data;
     },
 
     closeDialog(result) {
-      this.showModal = false;
+      if (!result) {
+        this.text = this.value;
+      }
 
-      const value = (this.$refs.textbox)?.value;
+      this.showModal = false;
 
       this.$emit('closed', {
         success: result,
-        value,
+        value:   this.text,
       });
     },
   }
@@ -57,15 +92,24 @@ export default {
       </h4>
       <div class="custom mt-10">
         <div class="dialog-panel">
-          <textarea
+          <CodeMirror
-            ref="textbox"
+            :value="text"
-            :value="data"
+            class="editor"
-            class="edit-box"
+            :options="codeMirrorOptions"
+            :showKeyMapBox="true"
+            @onInput="onTextChange"
           />
         </div>
-        <div class="dialog-buttons">
+        <div class="dialog-actions">
+          <div class="action-pannel file-selector">
+            <FileSelector
+              class="btn role-secondary"
+              :label="t('generic.readFromFile')"
+              @selected="onTextChange"
+            />
+          </div>
+          <div class="action-pannel form-actions">
             <button
-            :disabled="busy"
               class="btn role-secondary"
               data-testid="ssh-known-hosts-dialog-cancel-btn"
               @click="closeDialog(false)"
@@ -82,65 +126,65 @@ export default {
           </div>
         </div>
       </div>
+    </div>
   </app-modal>
 </template>
 
 <style lang="scss" scoped>
   .ssh-known-hosts-dialog {
-    padding: 10px;
+    padding: 15px;
 
     h4 {
       font-weight: bold;
+      margin-bottom: 20px;
     }
 
     .dialog-panel {
       display: flex;
       flex-direction: column;
       min-height: 100px;
+      border: 1px solid var(--border);
 
-      .edit-box {
+      :deep() .editor {
-        font-family: monospace;
+        display: flex;
-        font-size: 12px;
+        flex-direction: column;
         resize: none;
         max-height: 400px;
         height: 50vh;
-        padding: 10px;
+
+        .CodeMirror,
+        .CodeMirror-gutters {
+          min-height: 400px;
+          max-height: 400px;
+          background-color: var(--yaml-editor-bg);
         }
 
-      p {
+        .CodeMirror-gutters {
-        margin-bottom: 5px;
+          width: 25px;
         }
 
-      .dialog-info {
+        .CodeMirror-linenumber {
-        flex: 1;
+          padding-left: 0;
+        }
+      }
     }
 
-      .toggle-advanced {
+    .dialog-actions {
       display: flex;
-        align-items: center;
+      justify-content: space-between;
-        cursor: pointer;
-        margin: 10px 0;
 
-        &:hover {
+      .action-pannel {
-          text-decoration: none;
+        margin-top: 10px;
-          color: var(--link);
-        }
       }
 
-      .version-selector {
+      .form-actions {
-        margin: 0 10px 10px 10px;
-        width: auto;
-      }
-    }
-
-    .dialog-buttons {
         display: flex;
         justify-content: flex-end;
-      margin-top: 10px;
 
         > *:not(:last-child) {
           margin-right: 10px;
         }
       }
     }
+  }
 </style>

shell/components/form/SSHKnownHosts/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import EditDialog from './KnownHostsEditDialog.vue';
+import KnownHostsEditDialog from './KnownHostsEditDialog.vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 
 export default defineComponent({
@@ -20,7 +20,7 @@ export default defineComponent({
     },
   },
 
-  components: { EditDialog },
+  components: { KnownHostsEditDialog },
 
   computed: {
     isViewMode() {
@@ -38,7 +38,7 @@ export default defineComponent({
   methods: {
     openDialog() {
       (this.$refs.button as HTMLInputElement)?.blur();
-      (this.$refs.editDialog as any).showDialog(this.value);
+      (this.$refs.editDialog as any).showDialog();
     },
 
     dialogClosed(result: any) {
@@ -52,29 +52,31 @@ export default defineComponent({
 <template>
   <div class="input-known-ssh-hosts labeled-input">
     <label>{{ t('secret.ssh.knownHosts') }}</label>
-    <div
+    <div class="hosts-input">
-      class="hosts-input"
-    >
       {{ summary }}
     </div>
+    <template v-if="!isViewMode">
       <button
-      v-if="!isViewMode"
         ref="button"
-      class="show-dialog btn"
+        class="show-dialog-btn btn"
         @click="openDialog"
       >
-      ...
+        <i class="icon icon-edit" />
       </button>
-    <EditDialog
+
-      v-if="!isViewMode"
+      <KnownHostsEditDialog
         ref="editDialog"
+        :value="value"
+        :mode="mode"
         @closed="dialogClosed"
       />
+    </template>
   </div>
 </template>
 <style lang="scss" scoped>
   .input-known-ssh-hosts {
-    $ssKnownHostsButtonHeight: 20px;
+    display: flex;
+    justify-content: space-between;
 
     .hosts-input {
       cursor: default;
@@ -82,20 +84,9 @@ export default defineComponent({
       padding: 18px 0 0 0;
     }
 
-    .show-dialog {
+    .show-dialog-btn {
-      position: absolute;
+      display: contents;
-      top: 28px;
+      background-color: transparent;
-      padding: 0 6px;
-      min-height: $ssKnownHostsButtonHeight;
-      line-height: $ssKnownHostsButtonHeight;
-      right: 4px;
-
-      &:hover, &:focus {
-        border-color: var(--primary);
-        //color: var(--primary);
-        // TODO: Don't use hard-coded color
-        color: #fff
-      }
     }
   }
 </style>