Add support for known hosts on ssh secret in Fleet Git Repo

shell/assets/translations/en-us.yaml

@@ -2441,6 +2441,7 @@ fleet:
       resources: Resources
       unready: Non-Ready
     auth:
+      title: Authentication
       label: Authentication
       git: Git Authentication
       helm: Helm Authentication
@@ -5144,10 +5145,22 @@ secret:
     username: Username
   ssh:
     keys: Keys
+    keysAndHosts: Keys and Known Hosts
     public: Public Key
     publicPlaceholder: "Paste in your public key"
     private: Private Key
     privatePlaceholder: "Paste in your private key"
+    knownHosts: Known Hosts
+    knownHostsPlaceholder: "Known hosts metadata, one per line"
+    editKnownHosts:
+      title: SSH Known Hosts Configuration
+      entries:  |-
+        {entries, plural,
+          =0 {Empty}
+          =1 {1 Entry}
+          other {{entries} Entries}
+        }
+
   serviceAcct:
     ca: CA Certificate
     token: Token

shell/components/form/SSHKnownHosts/KnownHostsEditDialog.vue

@@ -0,0 +1,192 @@
+<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: {
+    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 {
+      codeMirrorOptions,
+      text:      this.value,
+      showModal: false,
+    };
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    }
+  },
+
+  methods: {
+    onTextChange(value) {
+      this.text = value?.trim();
+    },
+
+    showDialog() {
+      this.showModal = true;
+    },
+
+    closeDialog(result) {
+      if (!result) {
+        this.text = this.value;
+      }
+
+      this.showModal = false;
+
+      this.$emit('closed', {
+        success: result,
+        value:   this.text,
+      });
+    },
+  }
+};
+</script>
+
+<template>
+  <app-modal
+    v-if="showModal"
+    ref="sshKnownHostsDialog"
+    height="auto"
+    :scrollable="true"
+    @close="closeDialog(false)"
+  >
+    <div
+      class="ssh-known-hosts-dialog"
+    >
+      <h4 class="mt-10">
+        {{ t('secret.ssh.editKnownHosts.title') }}
+      </h4>
+      <div class="custom mt-10">
+        <div class="dialog-panel">
+          <CodeMirror
+            class="code-mirror"
+            :value="text"
+            data-testid="ssh-known-hosts-dialog_code-mirror"
+            :options="codeMirrorOptions"
+            :showKeyMapBox="true"
+            @onInput="onTextChange"
+          />
+        </div>
+        <div class="dialog-actions">
+          <div class="action-pannel file-selector">
+            <FileSelector
+              class="btn role-secondary"
+              data-testid="ssh-known-hosts-dialog_file-selector"
+              :label="t('generic.readFromFile')"
+              @selected="onTextChange"
+            />
+          </div>
+          <div class="action-pannel form-actions">
+            <button
+              class="btn role-secondary"
+              data-testid="ssh-known-hosts-dialog_cancel-btn"
+              @click="closeDialog(false)"
+            >
+              {{ t('generic.cancel') }}
+            </button>
+            <button
+              class="btn role-primary"
+              data-testid="ssh-known-hosts-dialog_save-btn"
+              @click="closeDialog(true)"
+            >
+              {{ t('generic.save') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </app-modal>
+</template>
+
+<style lang="scss" scoped>
+  .ssh-known-hosts-dialog {
+    padding: 15px;
+
+    h4 {
+      font-weight: bold;
+      margin-bottom: 20px;
+    }
+
+    .dialog-panel {
+      display: flex;
+      flex-direction: column;
+      min-height: 100px;
+      border: 1px solid var(--border);
+
+      :deep() .code-mirror {
+        display: flex;
+        flex-direction: column;
+        resize: none;
+        max-height: 400px;
+        height: 50vh;
+
+        .CodeMirror,
+        .CodeMirror-gutters {
+          min-height: 400px;
+          max-height: 400px;
+          background-color: var(--yaml-editor-bg);
+        }
+
+        .CodeMirror-gutters {
+          width: 25px;
+        }
+
+        .CodeMirror-linenumber {
+          padding-left: 0;
+        }
+      }
+    }
+
+    .dialog-actions {
+      display: flex;
+      justify-content: space-between;
+
+      .action-pannel {
+        margin-top: 10px;
+      }
+
+      .form-actions {
+        display: flex;
+        justify-content: flex-end;
+
+        > *:not(:last-child) {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+</style>

shell/components/form/SSHKnownHosts/__tests__/KnownHostsEditDialog.test.ts

@@ -0,0 +1,104 @@
+import { mount, VueWrapper } from '@vue/test-utils';
+import { _EDIT } from '@shell/config/query-params';
+import KnownHostsEditDialog from '@shell/components/form/SSHKnownHosts/KnownHostsEditDialog.vue';
+import CodeMirror from '@shell/components/CodeMirror.vue';
+import FileSelector from '@shell/components/form/FileSelector.vue';
+
+let wrapper: VueWrapper<InstanceType<typeof KnownHostsEditDialog>>;
+
+const mockedStore = () => {
+  return { getters: { 'prefs/get': () => jest.fn() } };
+};
+
+const requiredSetup = () => {
+  return { global: { mocks: { $store: mockedStore() } } };
+};
+
+describe('component: KnownHostsEditDialog', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="modals"></div>';
+    wrapper = mount(KnownHostsEditDialog, {
+      attachTo: document.body,
+      props:    {
+        mode:  _EDIT,
+        value: 'line1\nline2\n',
+      },
+      ...requiredSetup(),
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+    document.body.innerHTML = '';
+  });
+
+  it('should update text from CodeMirror', async() => {
+    await wrapper.setData({ showModal: true });
+
+    expect(wrapper.vm.text).toBe('line1\nline2\n');
+
+    const codeMirror = wrapper.getComponent(CodeMirror);
+
+    expect(codeMirror.element).toBeDefined();
+
+    await codeMirror.setData({ loaded: true });
+
+    // Emit CodeMirror value
+    codeMirror.vm.$emit('onInput', 'bar');
+    await codeMirror.vm.$nextTick();
+
+    expect(wrapper.vm.text).toBe('bar');
+  });
+
+  it('should update text from FileSelector', async() => {
+    await wrapper.setData({ showModal: true });
+
+    expect(wrapper.vm.text).toBe('line1\nline2\n');
+
+    const fileSelector = wrapper.getComponent(FileSelector);
+
+    expect(fileSelector.element).toBeDefined();
+
+    // Emit Fileselector value
+    fileSelector.vm.$emit('selected', 'foo');
+    await fileSelector.vm.$nextTick();
+
+    expect(wrapper.vm.text).toBe('foo');
+  });
+
+  it('should save changes and close dialog', async() => {
+    await wrapper.setData({
+      showModal: true,
+      text:      'foo',
+    });
+
+    expect(wrapper.vm.value).toBe('line1\nline2\n');
+    expect(wrapper.vm.text).toBe('foo');
+
+    await wrapper.vm.closeDialog(true);
+
+    expect((wrapper.emitted('closed') as any)[0][0].value).toBe('foo');
+
+    const dialog = wrapper.vm.$refs['sshKnownHostsDialog'];
+
+    expect(dialog).toBeNull();
+  });
+
+  it('should discard changes and close dialog', async() => {
+    await wrapper.setData({
+      showModal: true,
+      text:      'foo',
+    });
+
+    expect(wrapper.vm.value).toBe('line1\nline2\n');
+    expect(wrapper.vm.text).toBe('foo');
+
+    await wrapper.vm.closeDialog(false);
+
+    expect((wrapper.emitted('closed') as any)[0][0].value).toBe('line1\nline2\n');
+
+    const dialog = wrapper.vm.$refs['sshKnownHostsDialog'];
+
+    expect(dialog).toBeNull();
+  });
+});