Add report results to global search page [SCI-10479]

app/controllers/search_controller.rb

@@ -42,6 +42,21 @@ class SearchController < ApplicationController
                    next_page: results.try(:next_page)
                  }
           return
+        when 'reports'
+          @report_search_count = fetch_cached_count Report
+          search_reports
+          results = if params[:preview] == 'true'
+                      @report_results.limit(Constants::GLOBAL_SEARCH_PREVIEW_LIMIT)
+                    else
+                      @report_results.page(params[:page]).per(Constants::SEARCH_LIMIT)
+                    end
+          render json: results.includes(:team, :project, :user),
+                 each_serializer: GlobalSearch::ReportSerializer,
+                 meta: {
+                   total: @search_count,
+                   next_page: results.try(:next_page)
+                 }
+          return
         when 'experiments'
           @experiment_search_count = fetch_cached_count Experiment
           search_experiments
@@ -348,7 +363,7 @@ class SearchController < ApplicationController
   end
 
   def search_reports
-    @report_results = []
+    @report_results = Report.none
     @report_results = search_by_name(Report) if @report_search_count.positive?
     @search_count = @report_search_count
   end

app/javascript/vue/global_search/groups/reports.vue

@@ -1,14 +1,66 @@
 <template>
-  <div class="bg-white rounded p-4 mb-4">
+  <div v-if="total" class="bg-white rounded p-4 mb-4">
     <h2 class="flex items-center gap-2 mt-0 mb-4">
       <i class="sn-icon sn-icon-reports"></i>
       {{ i18n.t('search.index.reports') }}
+      [{{ total }}]
     </h2>
+    <div>
+      <div class="grid grid-cols-[auto_110px_auto_auto_auto_auto_auto] items-center">
+        <template v-for="row in preparedResults" :key="row.id">
+          <a target="_blank" :href="row.attributes.url" class="h-full py-2 px-4 overflow-hidden font-bold border-0 border-b border-solid border-sn-light-grey">
+            <StringWithEllipsis class="w-full" :text="row.attributes.name"></StringWithEllipsis>
+          </a>
+          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
+            <b class="shrink-0">{{ i18n.t('search.index.id') }}:</b>
+            <span class="shrink-0">{{ row.attributes.code }}</span>
+          </div>
+          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
+            <b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
+            <span class="shrink-0">{{ row.attributes.created_at }}</span>
+          </div>
+          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
+            <b class="shrink-0">{{ i18n.t('search.index.updated_at') }}:</b>
+            <span class="shrink-0">{{ row.attributes.updated_at }}</span>
+          </div>
+          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
+            <b class="shrink-0">{{ i18n.t('search.index.created_by') }}:</b>
+            <div class="truncate">
+              <img :src="row.attributes.created_by.avatar_url" class="w-5 h-5 border border-sn-super-light-grey rounded-full mx-1" />
+              <span class="truncate">{{ row.attributes.created_by.name }}</span>
+            </div>
+          </div>
+          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
+            <b class="shrink-0">{{ i18n.t('search.index.team') }}:</b>
+            <a target="_blank" :href="row.attributes.team.url" class="shrink-0 overflow-hidden">
+              <StringWithEllipsis class="w-full" :text="row.attributes.team.name"></StringWithEllipsis>
+            </a>
+          </div>
+          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
+            <b class="shrink-0">{{ i18n.t('search.index.project') }}:</b>
+            <a target="_blank" :href="row.attributes.project.url" class="shrink-0 overflow-hidden">
+              <StringWithEllipsis class="w-full" :text="row.attributes.project.name"></StringWithEllipsis>
+            </a>
+          </div>
+        </template>
+      </div>
+      <div v-if="viewAll" class="mt-4">
+        <button class="btn btn-light" @click="$emit('selectGroup', 'ReportsComponent')">View all</button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import searchMixin from './search_mixin';
+
 export default {
-  name: 'ReportsComponent'
+  name: 'ReportsComponent',
+  mixins: [searchMixin],
+  data() {
+    return {
+      group: 'reports'
+    };
+  }
 };
 </script>

app/javascript/vue/reports/table.vue

@@ -48,6 +48,9 @@ import UpdateReportModal from './modals/update.vue';
 
 export default {
   name: 'ReportsTable',
+  provide() {
+    return { initSearchValue: this.initSearchValue };
+  },
   components: {
     DataTable,
     DocxRenderer,
@@ -61,6 +64,10 @@ export default {
       type: String,
       required: true
     },
+    initSearchValue: {
+      type: String,
+      default: ''
+    },
     actionsUrl: {
       type: String,
       required: true

app/javascript/vue/shared/datatable/table.vue

@@ -120,6 +120,7 @@ import RowMenuRenderer from './row_menu_renderer.vue';
 
 export default {
   name: 'App',
+  inject: ['initSearchValue'],
   props: {
     withCheckboxes: {
       type: Boolean,
@@ -334,6 +335,9 @@ export default {
   mounted() {
     this.navigatorCollapsed = document.querySelector('.sci--layout').getAttribute('data-navigator-collapsed') === 'true';
     this.setGridColsClass();
+    if (this.initSearchValue) {
+      this.searchValue = this.initSearchValue;
+    }
 
     window.addEventListener('resize', this.resize);
   },

app/javascript/vue/shared/datatable/toolbar.vue

@@ -174,6 +174,11 @@ export default {
       type: Object
     }
   },
+  mounted() {
+    if (this.searchValue.length > 0) {
+      this.openSearch();
+    }
+  },
   components: {
     MenuDropdown,
     FilterDropdown,

app/serializers/global_search/report_serializer.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module GlobalSearch
+  class ReportSerializer < ActiveModel::Serializer
+    include Rails.application.routes.url_helpers
+
+    attributes :id, :name, :code, :created_at, :updated_at, :created_by, :team, :project, :url
+
+    def team
+      {
+        name: object.team.name,
+        url: projects_path(team: object.team)
+      }
+    end
+
+    def project
+      {
+        name: object.project.name,
+        url: project_experiments_path(project_id: object.project.id)
+      }
+    end
+
+    def created_by
+      {
+        name: object.created_by.name,
+        avatar_url: avatar_path(object.created_by, :icon_small)
+      }
+    end
+
+    def created_at
+      I18n.l(object.created_at, format: :full_date)
+    end
+
+    def updated_at
+      I18n.l(object.updated_at, format: :full_date)
+    end
+
+    def url
+      reports_path(search: object.code)
+    end
+  end
+end

app/views/reports/index.html.erb

@@ -17,6 +17,7 @@
       available-columns-url="<%= available_asset_type_columns_path %>"
       available-rows-url="<%= available_rows_repositories_path %>"
       data-source="<%= reports_path(format: :json) %>"
+      init-search-value="<%= params[:search] %>"
       create-url="<%= new_report_path if can_create_reports?(current_team) %>"
     />
   </div>