@rancher/shell 3.0.9-rc.3 → 3.0.9-rc.5

package/edit/auditlog.cattle.io.auditpolicy/Filters.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import ArrayList from '@shell/components/form/ArrayList.vue';
+import { AuditPolicy, FilterRule } from '@shell/edit/auditlog.cattle.io.auditpolicy/types';
+
+// Component Props & Emits
+const props = defineProps({
+  value: {
+    type:    Object,
+    default: () => ({})
+  },
+  mode: {
+    type:    String,
+    default: 'create'
+  },
+});
+
+const emit = defineEmits<{
+  'update:value': [value: AuditPolicy];
+}>();
+
+// Default Values & Reactive Spec
+const defaults: AuditPolicy = { filters: [] };
+const spec = ref<AuditPolicy>({ ...defaults, ...props.value });
+const defaultAddValue: FilterRule = {
+  action:     'allow',
+  requestURI: '',
+};
+
+// Methods
+function addRow(key: 'action' | 'requestURI', filters: FilterRule[]) {
+  const valueToEmit = { ...props.value, ...spec.value };
+
+  valueToEmit.filters = filters;
+
+  emit('update:value', valueToEmit);
+}
+
+function updateRow(key: 'action' | 'requestURI', index: number, value: string) {
+  const valueToEmit = { ...props.value, ...spec.value };
+
+  if (!valueToEmit.filters) {
+    valueToEmit.filters = [];
+  }
+
+  // Ensure the filter exists at the given index
+  if (!valueToEmit.filters[index]) {
+    valueToEmit.filters[index] = { action: '', requestURI: '' };
+  }
+
+  valueToEmit.filters[index][key] = value;
+  emit('update:value', valueToEmit);
+}
+</script>
+
+<template>
+  <div>
+    <div class="row mb-40">
+      <div class="col span-12">
+        <ArrayList
+          key="headers"
+          v-model:value="spec.filters"
+          :value-placeholder="t('auditPolicy.filters.placeholder')"
+          :add-label="t('auditPolicy.filters.add')"
+          :mode="mode"
+          :protip="false"
+          :defaultAddValue="defaultAddValue"
+          :show-header="true"
+          @update:value="addRow('action', $event)"
+        >
+          <template v-slot:column-headers>
+            <div class="filters-heading mb-10">
+              <div
+                class="row"
+              >
+                <div class="col span-6">
+                  <span class="text-label">{{ t('auditPolicy.filters.action.title') }}</span>
+                </div>
+                <div class="col span-6 send-to">
+                  <span class="text-label">{{ t('auditPolicy.filters.requestURI.title') }}</span>
+                </div>
+              </div>
+            </div>
+          </template>
+          <template v-slot:columns="scope">
+            <div class="row">
+              <div class="col span-6">
+                <LabeledSelect
+                  v-model:value="scope.row.value.action"
+                  :options="[{ value: 'allow', label: t('auditPolicy.filters.action.allow')},{ value: 'deny', label: t('auditPolicy.filters.action.deny') }]"
+                  :mode="mode"
+                  :placeholder="t('auditPolicy.filters.action.placeholder')"
+                  @update:value="updateRow('action', scope.i, $event)"
+                />
+              </div>
+              <div class="col span-6">
+                <LabeledInput
+                  v-model:value="scope.row.value.requestURI"
+                  :mode="mode"
+                  :placeholder="t('auditPolicy.filters.requestURI.placeholder')"
+                  @update:value="updateRow('requestURI', scope.i, $event, )"
+                />
+              </div>
+            </div>
+          </template>
+        </ArrayList>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .filters-heading {
+    display: grid;
+    grid-template-columns: auto $array-list-remove-margin;
+  }
+</style>

package/edit/auditlog.cattle.io.auditpolicy/General.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import { AuditPolicy } from '@shell/edit/auditlog.cattle.io.auditpolicy/types';
+import Banner from '@components/Banner/Banner.vue';
+
+// Component Props & Emits
+const props = defineProps({
+  value: {
+    type:    Object,
+    default: () => ({})
+  },
+  mode: {
+    type:    String,
+    default: 'create'
+  }
+});
+
+const emit = defineEmits<{
+  'update:value': [value: AuditPolicy];
+}>();
+
+// Options
+const levelOptions = [0, 1, 2, 3];
+
+// Store & i18n
+const store = useStore();
+const { t } = useI18n(store);
+
+// Default Values & Reactive Spec
+const defaults: AuditPolicy = {
+  enabled:   false,
+  verbosity: {
+    level:   0, // The default level is 0, even if you set null, it will save as 0
+    request: {
+      headers: false,
+      body:    false,
+    },
+    response: {
+      headers: false,
+      body:    false,
+    }
+  }
+};
+
+const spec = ref<AuditPolicy>({
+  ...defaults,
+  ...props.value,
+  verbosity: {
+    ...defaults.verbosity,
+    ...props.value?.verbosity,
+    request: {
+      ...defaults.verbosity?.request,
+      ...props.value?.verbosity?.request,
+    },
+    response: {
+      ...defaults.verbosity?.response,
+      ...props.value?.verbosity?.response,
+    }
+  },
+});
+
+// Emit update immediately after initializing spec
+emit('update:value', { ...props.value, ...spec.value });
+
+// Watch for changes and emit updates
+watch(spec, (newSpec) => {
+  const valueToEmit = { ...props.value, ...newSpec };
+
+  emit('update:value', valueToEmit);
+}, { deep: true });
+
+// Computed Properties
+const levelOptionsMap = computed(() => levelOptions.map((value) => {
+  return { value, label: `${ t(`auditPolicy.general.verbosity.level.${ value }`) }` };
+}));
+</script>
+
+<template>
+  <div>
+    <div class="row">
+      <div class="col span-6">
+        <fieldset>
+          <h3>{{ t("auditPolicy.general.enabled.title") }}</h3>
+          <Checkbox
+            v-model:value="spec.enabled"
+            :mode="mode"
+            label-key="auditPolicy.general.enabled.checkbox"
+            data-testid="auditPolicy-enabled"
+          />
+        </fieldset>
+      </div>
+    </div>
+    <div class="spacer" />
+    <div class="row">
+      <div class="col span-6">
+        <fieldset>
+          <h3>{{ t("auditPolicy.general.verbosity.title") }}</h3>
+          <Banner
+            class="mt-0"
+            color="info"
+            label-key="auditPolicy.general.verbosity.banner"
+          />
+
+          <h4>
+            {{ t("auditPolicy.general.verbosity.level.title") }}
+            <i
+              v-clean-tooltip="t('auditPolicy.general.verbosity.level.tooltip')"
+              class="icon icon-info"
+            />
+          </h4>
+          <div class="row">
+            <div class="col span-12">
+              <LabeledSelect
+                v-model:value="spec.verbosity!.level"
+                :label="t('auditPolicy.general.verbosity.level.label')"
+                :options="levelOptionsMap"
+                :mode="mode"
+              />
+            </div>
+          </div>
+          <div class="spacer-small" />
+          <div
+            class="row"
+          >
+            <div class="col span-6">
+              <h4>
+                {{ t("auditPolicy.general.verbosity.request.title") }}
+                <i
+                  v-clean-tooltip="t('auditPolicy.general.verbosity.requestResponse.tooltip')"
+                  class="icon icon-info"
+                />
+              </h4>
+              <div class="row">
+                <Checkbox
+                  v-model:value="spec.verbosity!.request!.headers"
+                  :label="t('auditPolicy.general.verbosity.request.requestHeaders')"
+                  :mode="mode"
+                />
+              </div>
+              <div class="row">
+                <Checkbox
+                  v-model:value="spec.verbosity!.request!.body"
+                  :label="t('auditPolicy.general.verbosity.request.requestBody')"
+                  :mode="mode"
+                />
+              </div>
+            </div>
+            <div class="col span-6">
+              <h4>
+                {{ t("auditPolicy.general.verbosity.response.title") }}
+                <i
+                  v-clean-tooltip="t('auditPolicy.general.verbosity.requestResponse.tooltip')"
+                  class="icon icon-info"
+                />
+              </h4>
+              <div class="row">
+                <Checkbox
+                  v-model:value="spec.verbosity!.response!.headers"
+                  :label="t('auditPolicy.general.verbosity.response.responseHeaders')"
+                  :mode="mode"
+                />
+              </div>
+              <div class="row">
+                <Checkbox
+                  v-model:value="spec.verbosity!.response!.body"
+                  :label="t('auditPolicy.general.verbosity.response.responseBody')"
+                  :mode="mode"
+                />
+              </div>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+    </div>
+  </div>
+</template>

package/edit/auditlog.cattle.io.auditpolicy/__tests__/AdditionalRedactions.test.ts

@@ -0,0 +1,327 @@
+import { shallowMount, VueWrapper } from '@vue/test-utils';
+import AdditionalRedactions from '../AdditionalRedactions.vue';
+import { ComponentPublicInstance } from 'vue';
+import { AuditPolicy } from '@shell/edit/auditlog.cattle.io.auditpolicy/types';
+
+// Mock the ID generation to have consistent snapshots
+jest.mock('@shell/utils/string', () => ({ generateRandomAlphaString: () => 'test-id-123' }));
+
+interface AdditionalRedactionsComponent extends ComponentPublicInstance {
+  spec: AuditPolicy;
+  addRedaction: () => void;
+  removeRedaction: (index: number) => void;
+  redactionLabel: (index: number) => string;
+}
+
+const defaultProps = {
+  value: { additionalRedactions: [] },
+  mode:  'create'
+};
+
+const globalMocks = {
+  global: {
+    mocks: {
+      $t:     (key: string) => key,
+      t:      (key: string) => key,
+      $store: {
+        getters:  { 'i18n/t': (key: string) => key },
+        dispatch: jest.fn()
+      },
+      $route: {
+        params: {},
+        query:  {}
+      },
+      $router: {
+        push:    jest.fn(),
+        replace: jest.fn()
+      }
+    },
+    stubs: {
+      Tabbed:    true,
+      Tab:       true,
+      ArrayList: true
+    }
+  }
+};
+
+function factory(props: Record<string, any> = {}, options: Record<string, any> = {}): VueWrapper<AdditionalRedactionsComponent> {
+  return shallowMount(AdditionalRedactions, {
+    props: { ...defaultProps, ...props },
+    ...globalMocks,
+    ...options
+  }) as unknown as VueWrapper<AdditionalRedactionsComponent>;
+}
+
+describe('component: AdditionalRedactions', () => {
+  describe('rendering & initial state', () => {
+    it('should render with default props (snapshot)', () => {
+      const wrapper = factory();
+
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('should render with create mode', () => {
+      const wrapper = factory({ mode: 'create' });
+
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.find('.row.mb-40').exists()).toBe(true);
+    });
+
+    it('should render with edit mode', () => {
+      const wrapper = factory({ mode: 'edit' });
+
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.find('.row.mb-40').exists()).toBe(true);
+    });
+
+    it('should render with initial redactions data', () => {
+      const value = {
+        additionalRedactions: [
+          { headers: ['X-Test-Header'], paths: ['/api/test'] },
+          { headers: ['Authorization'], paths: ['/secure'] }
+        ]
+      };
+      const wrapper = factory({ value });
+
+      expect(wrapper.vm.spec.additionalRedactions).toHaveLength(2);
+    });
+  });
+
+  describe('props & state changes', () => {
+    it('should handle empty value prop gracefully', () => {
+      const wrapper = factory({ value: undefined });
+
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.vm.spec.additionalRedactions).toStrictEqual([]);
+    });
+
+    it('should handle null value prop gracefully', () => {
+      const wrapper = factory({ value: null });
+
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.vm.spec.additionalRedactions).toStrictEqual([]);
+    });
+
+    it('should update when mode prop changes', async() => {
+      const wrapper = factory({ mode: 'create' });
+
+      expect((wrapper.props() as any).mode).toBe('create');
+      await wrapper.setProps({ mode: 'view' });
+      expect((wrapper.props() as any).mode).toBe('view');
+    });
+
+    it('should merge defaults with provided value', () => {
+      const value = {
+        additionalRedactions: [{ headers: ['Custom'], paths: ['/custom'] }],
+        customProp:           'test'
+      };
+      const wrapper = factory({ value });
+
+      expect((wrapper.vm.spec.additionalRedactions ?? [])).toHaveLength(1);
+      expect((wrapper.vm.spec.additionalRedactions ?? [])[0]).toStrictEqual({ headers: ['Custom'], paths: ['/custom'] });
+      expect((wrapper.vm.spec as any).customProp).toBe('test');
+    });
+  });
+
+  describe('user interaction', () => {
+    it('should emit update:value when addRedaction is called', () => {
+      const wrapper = factory();
+
+      wrapper.vm.addRedaction();
+
+      expect(wrapper.emitted('update:value')).toBeTruthy();
+      const events = wrapper.emitted('update:value');
+
+      expect(events && events[0]).toBeTruthy();
+
+      const emitted = events && events[0] && events[0][0] as AuditPolicy;
+
+      expect(emitted && emitted.additionalRedactions?.length).toBe(1);
+      expect(emitted && emitted.additionalRedactions?.[0]).toStrictEqual({
+        headers: [],
+        paths:   []
+      });
+    });
+
+    it('should emit update:value when removeRedaction is called', () => {
+      const value = {
+        additionalRedactions: [
+          { headers: ['X-Test'], paths: ['/foo'] },
+          { headers: ['Authorization'], paths: ['/bar'] }
+        ]
+      };
+      const wrapper = factory({ value });
+
+      wrapper.vm.removeRedaction(0);
+
+      expect(wrapper.emitted('update:value')).toBeTruthy();
+      const events = wrapper.emitted('update:value');
+
+      expect(events && events[0]).toBeTruthy();
+
+      const emitted = events && events[0] && events[0][0] as AuditPolicy;
+
+      expect(emitted && emitted.additionalRedactions?.length).toBe(1);
+      expect(emitted && emitted.additionalRedactions?.[0]).toStrictEqual({
+        headers: ['Authorization'],
+        paths:   ['/bar']
+      });
+    });
+
+    it('should preserve existing prop values when emitting updates', () => {
+      const existingValue = { someOtherProp: 'existing' };
+      const wrapper = factory({ value: existingValue });
+
+      wrapper.vm.addRedaction();
+
+      const events = wrapper.emitted('update:value');
+
+      expect(events && events[0]).toBeTruthy();
+      const emitted = events && events[0] && events[0][0] as AuditPolicy & { someOtherProp: string };
+
+      expect(emitted && emitted.someOtherProp).toBe('existing');
+      expect(emitted && emitted.additionalRedactions).toHaveLength(1);
+    });
+
+    it('should remove correct redaction by index', () => {
+      const value = {
+        additionalRedactions: [
+          { headers: ['First'], paths: ['/first'] },
+          { headers: ['Second'], paths: ['/second'] },
+          { headers: ['Third'], paths: ['/third'] }
+        ]
+      };
+      const wrapper = factory({ value });
+
+      wrapper.vm.removeRedaction(1); // Remove middle item
+
+      const events = wrapper.emitted('update:value');
+
+      expect(events && events[0]).toBeTruthy();
+      const emitted = events && events[0] && events[0][0] as AuditPolicy;
+
+      expect(emitted && emitted.additionalRedactions).toHaveLength(2);
+      expect(emitted && emitted.additionalRedactions?.[0]).toStrictEqual({ headers: ['First'], paths: ['/first'] });
+      expect(emitted && emitted.additionalRedactions?.[1]).toStrictEqual({ headers: ['Third'], paths: ['/third'] });
+    });
+  });
+
+  describe('computed properties & logic', () => {
+    it('should return correct redactionLabel values', () => {
+      const wrapper = factory();
+
+      expect(wrapper.vm.redactionLabel(0)).toBe('Rule 1');
+      expect(wrapper.vm.redactionLabel(4)).toBe('Rule 5');
+      expect(wrapper.vm.redactionLabel(99)).toBe('Rule 100');
+    });
+
+    it('should have reactive redactionLabel computed property', () => {
+      const wrapper = factory();
+      const labelFn = wrapper.vm.redactionLabel;
+
+      // Test that it returns a function that computes labels
+      expect(typeof labelFn).toBe('function');
+      expect(labelFn(0)).toBe('Rule 1');
+      expect(labelFn(1)).toBe('Rule 2');
+    });
+
+    it('should initialize spec reactive ref correctly', () => {
+      const wrapper = factory();
+
+      expect(wrapper.vm.spec).toBeDefined();
+      expect(Array.isArray(wrapper.vm.spec.additionalRedactions ?? [])).toBe(true);
+    });
+
+    it('should merge defaults with props correctly in spec', () => {
+      const value = { additionalRedactions: [{ headers: ['Test'], paths: ['/test'] }] };
+      const wrapper = factory({ value });
+
+      expect((wrapper.vm.spec.additionalRedactions ?? [])).toHaveLength(1);
+      expect((wrapper.vm.spec.additionalRedactions ?? [])[0]).toStrictEqual({
+        headers: ['Test'],
+        paths:   ['/test']
+      });
+    });
+  });
+
+  describe('component configuration', () => {
+    it('should configure Tabbed component with correct props', () => {
+      const wrapper = factory();
+      const tabbedComponent = wrapper.findComponent({ name: 'Tabbed' });
+
+      expect(tabbedComponent.exists()).toBe(true);
+      expect(tabbedComponent.props('sideTabs')).toBe(true);
+      expect(tabbedComponent.props('useHash')).toBe(true);
+    });
+
+    it('should show/hide add/remove tabs based on mode', () => {
+      const createWrapper = factory({ mode: 'create' });
+      const editWrapper = factory({ mode: 'edit' });
+      const viewWrapper = factory({ mode: 'view' });
+
+      expect(createWrapper.findComponent({ name: 'Tabbed' }).props('showTabsAddRemove')).toBe(true);
+      expect(editWrapper.findComponent({ name: 'Tabbed' }).props('showTabsAddRemove')).toBe(true);
+      expect(viewWrapper.findComponent({ name: 'Tabbed' }).props('showTabsAddRemove')).toBe(false);
+    });
+
+    it('should bind correct event handlers to Tabbed component', () => {
+      const wrapper = factory();
+      const tabbedComponent = wrapper.findComponent({ name: 'Tabbed' });
+
+      // Simulate events from Tabbed component
+      tabbedComponent.vm.$emit('addTab');
+      expect(wrapper.emitted('update:value')).toBeTruthy();
+
+      const value = { additionalRedactions: [{ headers: [], paths: [] }] };
+      const wrapperWithData = factory({ value });
+      const tabbedWithData = wrapperWithData.findComponent({ name: 'Tabbed' });
+
+      tabbedWithData.vm.$emit('removeTab', 0);
+      expect(wrapperWithData.emitted('update:value')).toBeTruthy();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle empty additionalRedactions array', () => {
+      const wrapper = factory({ value: { additionalRedactions: [] } });
+
+      expect((wrapper.vm.spec.additionalRedactions ?? [])).toStrictEqual([]);
+      expect(wrapper.findAllComponents({ name: 'Tab' })).toHaveLength(0);
+    });
+
+    it('should handle missing additionalRedactions property', () => {
+      const wrapper = factory({ value: {} });
+
+      expect((wrapper.vm.spec.additionalRedactions ?? [])).toStrictEqual([]);
+    });
+
+    it('should not crash when removing from empty array', () => {
+      const wrapper = factory({ value: { additionalRedactions: [] } });
+
+      expect(() => {
+        wrapper.vm.removeRedaction(0);
+      }).not.toThrow();
+
+      const events = wrapper.emitted('update:value');
+
+      expect(events && events[0]).toBeTruthy();
+      const emitted = events && events[0] && events[0][0] as AuditPolicy;
+
+      expect(emitted && emitted.additionalRedactions).toStrictEqual([]);
+    });
+
+    it('should handle out of bounds removal index gracefully', () => {
+      const value = { additionalRedactions: [{ headers: ['Test'], paths: ['/test'] }] };
+      const wrapper = factory({ value });
+
+      wrapper.vm.removeRedaction(5); // Index out of bounds
+
+      const events = wrapper.emitted('update:value');
+
+      expect(events && events[0]).toBeTruthy();
+      const emitted = events && events[0] && events[0][0] as AuditPolicy;
+
+      expect(emitted && emitted.additionalRedactions).toHaveLength(1); // Should remain unchanged
+    });
+  });
+});