All files / ee/app/assets/javascripts/audit_events/components audit_events_filter.vue

100% Statements 17/17
100% Branches 2/2
100% Functions 11/11
100% Lines 17/17

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74  2x 2x 2x                   8x         10x         21x 81x 201x           21x 83x     21x     21x 15x           18x         2x     2x           69x                            
<script>
import { GlFilteredSearch } from '@gitlab/ui';
import { AUDIT_FILTER_CONFIGS } from '../constants';
import { filterTokenOptionsValidator } from '../validators';
 
export default {
  components: {
    GlFilteredSearch,
  },
  props: {
    value: {
      type: Array,
      required: false,
      default: () => [],
    },
    filterTokenOptions: {
      type: Array,
      required: false,
      default: () => AUDIT_FILTER_CONFIGS,
      validator: filterTokenOptionsValidator,
    },
  },
  data() {
    return {
      filterTokens: this.filterTokenOptions.map((option) => ({
        ...AUDIT_FILTER_CONFIGS.find(({ type }) => type === option.type),
        ...option,
      })),
    };
  },
  computed: {
    tokenSearchTerm() {
      return this.value.find((term) => this.filterTokens.find((token) => token.type === term.type));
    },
    enabledTokens() {
      const { tokenSearchTerm } = this;
 
      // If a user has searched for a term within a token, limit the user to that one token
      if (tokenSearchTerm) {
        return this.filterTokens.map((token) => ({
          ...token,
          disabled: tokenSearchTerm.type !== token.type,
        }));
      }
 
      return this.filterTokens;
    },
  },
  methods: {
    onSubmit() {
      this.$emit('submit');
    },
    onInput(val) {
      this.$emit('selected', val);
    },
  },
};
</script>
 
<template>
  <div class="input-group bg-white flex-grow-1" data-testid="audit-events-filter">
    <gl-filtered-search
      :value="value"
      :placeholder="__('Search')"
      :clear-button-title="__('Clear')"
      :close-button-title="__('Close')"
      :available-tokens="enabledTokens"
      class="gl-h-32 w-100"
      @submit="onSubmit"
      @input="onInput"
    />
  </div>
</template>