Reworked how search error works with repository table [SCI-5961]

app/assets/stylesheets/repository/repository_table.scss

@@ -4,10 +4,28 @@
 @import "constants";
 
 .repository-table {
+  position: relative;
+
   .dataTables_filter {
     float: right;
   }
 
+  .repository-table-error {
+    background: $color-white;
+    display: none;
+    height: 200px;
+    padding: 1em;
+    position: absolute;
+    text-align: center;
+    top: 176px;
+    width: 100%;
+    z-index: 1;
+
+    &.active {
+      display: block;
+    }
+  }
+
   // hack only for firefox
   @-moz-document url-prefix() {
     input.form-control[type="file"] {

app/javascript/packs/vue/bmt_filter.js

@@ -34,6 +34,7 @@ window.initBMTFilter = () => {
         this.reloadDataTable();
       },
       clearFilters() {
+        this.clearSearchError();
         this.dataTableElement.removeAttr('data-external-ids');
         this.reloadDataTable();
       },
@@ -41,10 +42,14 @@ window.initBMTFilter = () => {
         $(this.$el).closest('.dropdown').removeClass('open');
       },
       reloadDataTable() {
+        this.clearSearchError();
         this.dataTableElement.DataTable().ajax.reload();
       },
       handleSearchError(error) {
-        setTimeout(() => $('.dataTables_empty').html(error), 100);
+        $('.repository-table-error').addClass('active').html(error);
+      },
+      clearSearchError() {
+        $('.repository-table-error').removeClass('active').html('');
       }
     }
   });

app/views/repositories/_repository_table.html.erb

@@ -1,4 +1,5 @@
 <div class="repository-table">
+  <div class="repository-table-error"></div>
   <table id="repository-table-<%= repository.id %>" class="table"
     data-current-uri="<%= request.original_url %>"
     data-repository-id="<%= repository.id %>"