Version 3.5.2: Add (secret) filter on filename (#49)

Author: ildyria

package.json

@@ -1,6 +1,6 @@
 {
   "name": "resc-frontend",
-  "version": "3.5.1",
+  "version": "3.5.2",
   "author": "ABN AMRO Bank",
   "description": "Repository Scanner Frontend",
   "license": "MIT",

src/components/Findings/FindingsTable.vue

@@ -1,21 +1,16 @@
 <template>
-  <div class="ml-3">
-    <!-- Button to audit multiple findings -->
-    <!-- Audit Modal -->
-    <AuditModal
-      ref="auditModal"
-      :selectedCheckBoxIds="selectedCheckBoxIds"
-      @update-audit="updateAudit"
-    />
-    <!-- Column Modal -->
-    <ColumnSelector ref="columnModal" @update-columns="setTableFields" />
-  </div>
+  <AuditModal
+    ref="auditModal"
+    :selectedCheckBoxIds="selectedCheckBoxIds"
+    @update-audit="updateAudit"
+  />
+  <ColumnSelector ref="columnModal" @update-columns="setTableFields" />
 
   <div class="py-3">
     <BTable
       ref="auditTable"
       id="rule-analysis-table"
-      :items="findingList"
+      :items="filteredList"
       :fields="fields as TableField[]"
       :current-page="1"
       :per-page="0"
@@ -29,23 +24,36 @@
       :caption-top="true"
     >
       <template #table-caption>
-        <BButton
-          class="d-inline-block me-3"
-          variant="primary"
-          size="sm"
-          id="AuditButton"
-          v-on:click="showAuditModal()"
-          :disabled="auditButtonDisabled"
-          >AUDIT</BButton
-        >
-        <BButton
-          class="d-inline-block"
-          variant="primary"
-          size="sm"
-          id="AuditButton"
-          v-on:click="showColumnSelect()"
-          >Columns</BButton
-        >
+        <div class="row me-0 mr-0">
+          <div class="col-md-4">
+            <BButton
+              class="d-inline-block me-3"
+              variant="primary"
+              size="sm"
+              id="AuditButton"
+              v-on:click="showAuditModal()"
+              :disabled="auditButtonDisabled"
+              >AUDIT</BButton
+            >
+            <BButton
+              class="d-inline-block"
+              variant="primary"
+              size="sm"
+              id="AuditButton"
+              v-on:click="showColumnSelect()"
+              >Columns</BButton
+            >
+          </div>
+          <div class="col-md-4">
+            <BFormInput
+              class="hover-opacity"
+              id="filter-files"
+              placeholder="filename"
+              v-model="filterString"
+              :required="true"
+            />
+          </div>
+        </div>
       </template>
 
       <!-- Select all checkboxes -->
@@ -129,6 +137,7 @@ import {
   BButton,
   type TableField,
   type TableItem,
+  BFormInput,
 } from 'bootstrap-vue-next';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import FindingsService from '@/services/findings-service';
@@ -153,6 +162,7 @@ const props = defineProps<Props>();
 const auditModal = ref();
 const columnModal = ref();
 const auditTable = ref();
+const filterString = ref('');
 
 const findingList = ref(props.findings as TableItemDetailedFindingRead[]);
 const selectedCheckBoxIds = ref([] as number[]);
@@ -164,6 +174,36 @@ const selectedIndex = ref(undefined as number | undefined);
 const store = useAuthUserStore();
 const emit = defineEmits(['refresh-table']);
 
+// Simple filter function
+// if start with * we check the ending of the file path.
+// if end with * we check the beginning of the file path.
+// if does not contain * we only check if the needle is in the string.
+function applyFilter() {
+  if (filterString.value === '') {
+    return findingList.value;
+  }
+
+  const token = filterString.value;
+
+  if (token.startsWith('*')) {
+    return findingList.value.filter((finding) => {
+      return finding.file_path.endsWith(token.substring(1));
+    });
+  }
+
+  if (token.endsWith('*')) {
+    return findingList.value.filter((finding) => {
+      return finding.file_path.startsWith(token.substring(0, token.length - 1));
+    });
+  }
+
+  return findingList.value.filter((finding) => {
+    return finding.file_path.includes(token);
+  });
+}
+
+const filteredList = computed(applyFilter);
+
 function setTableFields(selectedColumns: TableColumn[] = []) {
   // @ts-ignore ignore TS2589
   fields.value = ColumnUtils.getColumns(selectedColumns, store.tableColumns, props.is_rule_finding);
@@ -178,7 +218,7 @@ function selectSingleCheckbox() {
 function selectAllCheckboxes() {
   selectedCheckBoxIds.value = [];
   if (allSelected.value) {
-    for (const finding of findingList.value) {
+    for (const finding of filteredList.value) {
       selectedCheckBoxIds.value.push(finding.id_);
     }
   }
@@ -188,7 +228,7 @@ function toggleAllCheckboxes() {
   selectedCheckBoxIds.value = [];
   allSelected.value = !allSelected.value;
   if (allSelected.value) {
-    for (const finding of findingList.value) {
+    for (const finding of filteredList.value) {
       selectedCheckBoxIds.value.push(finding.id_);
     }
   }
@@ -243,14 +283,14 @@ function getCurrentFindingSelected(): TableItemDetailedFindingRead | undefined {
     return undefined;
   }
 
-  return findingList.value[selectedIndex.value];
+  return filteredList.value[selectedIndex.value];
 }
 
 function selectDown(): boolean {
   const detailsStatus = getCurrentFindingSelected()?._showDetails;
   closeAllDetails();
 
-  selectedIndex.value = ((selectedIndex.value ?? -1) + 1) % props.findings.length;
+  selectedIndex.value = ((selectedIndex.value ?? -1) + 1) % filteredList.value.length;
   auditTable.value.clearSelected();
   auditTable.value.selectRow(selectedIndex.value);
 
@@ -444,3 +484,21 @@ watch(
   },
 );
 </script>
+<style lang="scss">
+.hover-opacity {
+  opacity: 0;
+  transition: all 0.2s ease-in-out !important;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:focus {
+    opacity: 1;
+  }
+}
+
+input.hover-opacity:valid {
+  opacity: 1;
+}
+</style>

tests/unit/components/Findings/FindingsTable.spec.js

@@ -16,7 +16,7 @@ importFA();
 vi.mock('axios');
 
 describe('FindingsTable tests', () => {
-  it('Given a FindingsTable in rule findings then FindingsTable will be displayed', () => {
+  it('Given a FindingsTable in rule findings then FindingsTable will be displayed', async () => {
     axios.get.mockResolvedValueOnce({ data: rule_packs });
     axios.get.mockResolvedValueOnce({ data: allProjects });
     axios.get.mockResolvedValueOnce({ data: allRepos });
@@ -95,6 +95,12 @@ describe('FindingsTable tests', () => {
     expect(() => wrapper.vm.markAllAsGone()).not.toThrow();
     expect(() => wrapper.vm.auditThis()).not.toThrow();
 
+    expect(() => wrapper.find('#filter-files').setValue('file1')).not.toThrow();
+    await wrapper.vm.$nextTick();
+    expect(() => wrapper.find('#filter-files').setValue('fi*')).not.toThrow();
+    await wrapper.vm.$nextTick();
+    expect(() => wrapper.find('#filter-files').setValue('*e1')).not.toThrow();
+
     axios.get.mockResolvedValueOnce({ data: detailed_findings });
     expect(() => wrapper.vm.updateAudit('NOT_ANALYZED', 'Rien a declarer')).not.toThrow();
   });