fix(#831): Remove sort field when only one is applied

frontend/components/commons/header/filters/SortList.vue

@@ -78,7 +78,11 @@ export default {
       this.numberOfSortFields += 1;
     },
     onRemoveSortField(index) {
-      this.selectedFields.splice(index - 1, 1);
+      if (this.selectedFields.length === 1) {
+        this.$emit("sortBy", []);
+      } else {
+        this.selectedFields.splice(index - 1, 1);
+      }
       if (this.numberOfSortFields > 1) {
         this.numberOfSortFields -= 1;
       }

frontend/specs/components/filters/SortList.spec.js

@@ -0,0 +1,45 @@
+import { mount } from "@vue/test-utils";
+import SortList from "@/components/commons/header/filters/SortList";
+
+function mountSortList() {
+  return mount(SortList, {
+    propsData: {
+      sort: [
+        {
+          disabled: false,
+          group: "Predictions",
+          id: "predicted_as",
+          key: "predicted_as",
+          name: "Predicted as",
+          options: Object,
+          order: "asc",
+          placeholder: "Select labels",
+          type: "select",
+        }
+      ],
+      sortOptions: [
+        {
+          disabled: false,
+          group: "Predictions",
+          id: "predicted_as",
+          key: "predicted_as",
+          name: "Predicted as",
+          options: Object,
+          placeholder: "Select labels",
+          selected: undefined,
+          type: "select",
+        }
+      ]
+    },
+  });
+}
+
+describe("SortList", () => {
+  let spy = jest.spyOn(console, "error");
+  afterEach(() => spy.mockReset());
+
+  test("renders properly", () => {
+    const wrapper = mountSortList();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

frontend/specs/components/filters/__snapshots__/SortList.spec.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SortList renders properly 1`] = `
+<div>
+  <sortfilter sort-options="[object Object]" class="sort"></sortfilter>
+  <!---->
+  <div class="sort__buttons">
+    <re-button class="button-tertiary--small button-tertiary--outline">Cancel</re-button>
+    <re-button class="button-primary--small">Sort</re-button>
+  </div>
+</div>
+`;