Automation: Loki Outputs URL can accept invalid input (rancher#9042)

* Add prefix in management settings test description

* Add dictionary term

* Add url validation test for Banzai cloud

* Test presence of placeholder for Loki URL input

* Prevent issues with optional values

* Prevent issues with missing imported statics

* Hide warnings from unit tests on CI

* Correct issues with replaceAll unsupported on Safari

.vscode/settings.json

@@ -18,6 +18,7 @@
   "cSpell.words": [
     "apiserver",
     "autoscroll",
+    "banzaicloud",
     "cacerts",
     "chainable",
     "Codecov",

package.json

@@ -22,7 +22,7 @@
     "lint:lib": "cd pkg/rancher-components && yarn lint",
     "lint-l10n": "./node_modules/.bin/yamllint ./shell/assets/translations",
     "test": "jest --watch",
-    "test:ci": "jest --collectCoverage",
+    "test:ci": "jest --collectCoverage --silent",
     "install:ci": "yarn install --frozen-lockfile",
     "dev": "bash -c 'source ./scripts/version && NODE_ENV=dev ./node_modules/.bin/vue-cli-service serve'",
     "mem-dev": "bash -c 'source ./scripts/version && NODE_ENV=dev node --max-old-space-size=8192 ./node_modules/.bin/vue-cli-service serve'",

shell/edit/__tests__/management.cattle.io.setting.test.ts

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import Settings from '@shell/edit/management.cattle.io.setting.vue';
 import { SETTING } from '@shell/config/settings';
 
-describe('management.cattle.io.setting should', () => {
+describe('view: management.cattle.io.setting should', () => {
   const requiredSetup = () => ({
     // Remove all these mocks after migration to Vue 2.7/3 due mixin logic
     mocks: {

shell/edit/logging.banzaicloud.io.output/__tests__/logging.banzaicloud.io.output.test.ts

@@ -0,0 +1,43 @@
+import { mount } from '@vue/test-utils';
+import Banzai from '@shell/edit/logging.banzaicloud.io.output/index.vue';
+
+describe('view: logging.banzaicloud.io.output', () => {
+  it.each([
+    ['http://localhost:3100', []],
+    ['not a proper URL', ['logging.loki.urlInvalid']],
+  ])('should validate Loki URL on save', (url, expectation) => {
+    const wrapper = mount(Banzai, {
+      data:      () => ({ selectedProvider: 'loki' }),
+      propsData: {
+        value: {
+          save: jest.fn(),
+          spec: { loki: { url } }
+        }
+      },
+      mocks: {
+        $store: {
+          getters: {
+            currentStore:              () => 'current_store',
+            'management/schemaFor':    jest.fn(),
+            'current_store/all':       jest.fn(),
+            'current_store/schemaFor': jest.fn(),
+            'cluster/all':             jest.fn(),
+            'type-map/isSpoofed':      jest.fn(),
+            'i18n/t':                  jest.fn().mockImplementation((key: string) => key),
+            namespaces:                () => ({}),
+          }
+        },
+        $route: {
+          name:  'whatever',
+          query: { AS: '' }
+        },
+        $router: { replace: jest.fn() },
+      }
+    });
+    const fakeDone = jest.fn();
+
+    (wrapper.vm as any).saveSettings(fakeDone);
+
+    expect((wrapper.vm as any).errors).toStrictEqual(expectation);
+  });
+});

shell/edit/logging.banzaicloud.io.output/index.vue

@@ -70,15 +70,15 @@ export default {
       // I'm manipulating the output since I'm not sure it's something we want to actually support
       // seeing as it's really createResourceYaml and this here is a gray area between spoofed types
       // and just a field within a spec.
-      bufferYaml = bufferYaml.substring(bufferYaml.indexOf('\n') + 1).replaceAll('#  ', '#');
+      bufferYaml = bufferYaml.substring(bufferYaml.indexOf('\n') + 1).replace(/# {2}/g, '#');
     }
 
     return {
       bufferYaml,
       initialBufferYaml:            bufferYaml,
       providers,
       selectedProvider,
-      hasMultipleProvidersSelected: selectedProviders.length > 1,
+      hasMultipleProvidersSelected: selectedProviders?.length > 1,
       selectedProviders,
       LOGGING
     };
@@ -91,8 +91,11 @@ export default {
     enabledProviders() {
       return this.providers.filter(p => p.enabled);
     },
+    isNamespaced() {
+      return this.value.type !== LOGGING?.CLUSTER_OUTPUT;
+    },
     cruMode() {
-      if (this.selectedProviders.length > 1 || !this.value.allProvidersSupported) {
+      if (this.hasMultipleProvidersSelected || !this.value.allProvidersSupported) {
         return _VIEW;
       }
 
@@ -173,10 +176,10 @@ export default {
         :mode="mode"
         label="generic.name"
         :register-before-hook="registerBeforeHook"
-        :namespaced="value.type !== LOGGING.CLUSTER_OUTPUT"
+        :namespaced="isNamespaced"
       />
       <Banner
-        v-if="selectedProviders.length > 1"
+        v-if="hasMultipleProvidersSelected"
         color="info"
       >
         This output is configured with multiple providers. We currently only support a single provider per output. You can view or edit the YAML.

shell/edit/logging.banzaicloud.io.output/providers/__tests__/loki.test.ts

@@ -0,0 +1,13 @@
+import { shallowMount } from '@vue/test-utils';
+import Loki from '@shell/edit/logging.banzaicloud.io.output/providers/loki.vue';
+
+describe('component: Loki', () => {
+  it('should display URL placeholder', () => {
+    const wrapper = shallowMount(Loki, { propsData: { mode: 'edit', namespace: 'whatever' } });
+    const url = 'https://127.0.0.1:8000';
+
+    const placeholder = wrapper.find('[data-testid="loki-url"]').attributes('placeholder');
+
+    expect(placeholder).toBe(url);
+  });
+});

shell/edit/logging.banzaicloud.io.output/providers/loki.vue

@@ -48,6 +48,7 @@ export default {
           :disabled="disabled"
           class="url"
           placeholder="https://127.0.0.1:8000"
+          data-testid="loki-url"
           :label="t('logging.loki.url')"
         />
       </div>