Issue 2049 : Use `TokenPaginatedTable` for Component Search by sahibamittal · Pull Request #438 · DependencyTrack/hyades-frontend

sahibamittal · 2026-03-23T15:22:57Z

Description

Replace the legacy bootstrap-table with TokenPaginatedTable and update table props/behaviour to use token-based pagination.

Addressed Issue

Issue: DependencyTrack/hyades#2049
Backend: DependencyTrack/hyades-apiserver#1867

Additional Details

Checklist

I have read and understand the contributing guidelines
This PR introduces new or alters existing behavior, and I have updated the documentation accordingly

Replace the legacy bootstrap-table with TokenPaginatedTable and update table props/behaviour to use token-based pagination.

src/views/portfolio/components/ComponentSearch.vue

…ration

src/views/portfolio/components/ComponentSearch.vue

codacy-production · 2026-03-31T16:16:07Z

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

_{TIP This summary will be updated as you push new changes. Give us feedback}

nscuro · 2026-04-14T11:27:22Z

Not sure if that was an issue before, but when clicking the search button I'm getting these warnings:

src/views/portfolio/components/ComponentSearch.vue

Copilot

Pull request overview

Migrates the Portfolio Component Search view from legacy bootstrap-table server pagination to the shared TokenPaginatedTable component, aligning the frontend with the backend’s token-based pagination API (Issue #2049 / hyades-apiserver#1867).

Changes:

Replaced <bootstrap-table> usage with <token-paginated-table> and switched to /api/v2/components with query-param based filtering + sorting.
Updated search UI/logic (notably HASH search now includes hash-type selection) and refactored query param construction to an object-based approach.
Simplified hashes_short_desc translations across multiple locales.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/views/portfolio/components/ComponentSearch.vue	Migrates component search results to TokenPaginatedTable; updates filters, sorting, and HASH search UI.
src/i18n/locales/en.json	Simplifies `hashes_short_desc` string.
src/i18n/locales/de.json	Simplifies `hashes_short_desc` string.
src/i18n/locales/es.json	Simplifies `hashes_short_desc` string.
src/i18n/locales/fr.json	Simplifies `hashes_short_desc` string.
src/i18n/locales/hi.json	Simplifies `hashes_short_desc` string.
src/i18n/locales/it.json	Simplifies `hashes_short_desc` string.
src/i18n/locales/ja.json	Simplifies `hashes_short_desc` string.
src/i18n/locales/pl.json	Simplifies `hashes_short_desc` string.
src/i18n/locales/pt.json	Simplifies `hashes_short_desc` string.
src/i18n/locales/pt-BR.json	Simplifies `hashes_short_desc` string.
src/i18n/locales/ru.json	Simplifies `hashes_short_desc` string.
src/i18n/locales/uk-UA.json	Simplifies `hashes_short_desc` string.
src/i18n/locales/zh.json	Simplifies `hashes_short_desc` string.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-14T15:12:11Z

src/views/portfolio/components/ComponentSearch.vue

+
+      return params;
    },
    performSearch: function () {


performSearch() can be triggered via the Enter key handlers even when isSearchDisabled is true (e.g., HASH search without hashType), which will apply incomplete filters and potentially issue invalid/ineffective requests. Add a guard in performSearch() to no-op when isSearchDisabled is true (or remove the Enter handlers / validate required fields inside createQueryParams).

Suggested change

performSearch: function () {

performSearch: function () {

if (this.isSearchDisabled) {

return;

}

Copilot · 2026-04-14T15:12:12Z

src/views/portfolio/components/ComponentSearch.vue

+        if (this.coordinatesGroup)
+          params.group = common.trimToNull(this.coordinatesGroup);
+        if (this.coordinatesName)
+          params.name = common.trimToNull(this.coordinatesName);
+        if (this.coordinatesVersion)
+          params.version = common.trimToNull(this.coordinatesVersion);


In the COORDINATES branch, you check if (this.coordinatesGroup) before trimming. Whitespace-only input is truthy, so common.trimToNull() can yield null, and common.setQueryParams() will serialize it as the literal string "null" (e.g., group=null). Trim first and only add the param if the trimmed value is non-null.

Suggested change

if (this.coordinatesGroup)

params.group = common.trimToNull(this.coordinatesGroup);

if (this.coordinatesName)

params.name = common.trimToNull(this.coordinatesName);

if (this.coordinatesVersion)

params.version = common.trimToNull(this.coordinatesVersion);

let group = common.trimToNull(this.coordinatesGroup);

if (group) params.group = group;

let name = common.trimToNull(this.coordinatesName);

if (name) params.name = name;

let version = common.trimToNull(this.coordinatesVersion);

if (version) params.version = version;

Copilot · 2026-04-14T15:12:12Z

src/views/portfolio/components/ComponentSearch.vue

-                  `<a href="${url}">${xssFilters.inHTMLData(value)}</a>`
-              : `<a href="${url}">${xssFilters.inHTMLData(value)}</a>`;
+            return (
+              `<a href="${dependencyGraphUrl}"<i class="fa fa-sitemap" aria-hidden="true" style="float:right; padding-top: 4px; cursor:pointer" data-toggle="tooltip" data-placement="bottom" title="Show in dependency graph"></i></a> ` +


The component name column formatter generates invalid HTML: the dependency graph link is missing a > after the href attribute (<a href="..."). This will break rendering/click behavior and may interfere with tooltips/events. Fix the anchor tag markup so it is valid HTML.

Suggested change

`<a href="${dependencyGraphUrl}"</a> ` +

`<a href="${dependencyGraphUrl}"></a> ` +

Copilot · 2026-04-14T15:12:13Z

src/views/portfolio/components/ComponentSearch.vue

+              placeholder="Select hash type"
+              v-model="hashType"
+              :options="hashTypes"
+              class="mr-2"
+            ></b-form-select>


<b-form-select> does not support a placeholder prop (BootstrapVue expects a null option like { value: null, text: '…', disabled: true } to emulate a placeholder). As written, the placeholder will be ignored and hashType may remain null while the UI shows the first option, keeping the Search button disabled. Add an explicit placeholder option (or initialize hashType to a valid default) so the model and UI state are consistent.

Suggested change

placeholder="Select hash type"

v-model="hashType"

:options="hashTypes"

class="mr-2"

></b-form-select>

v-model="hashType"

:options="hashTypes"

class="mr-2"

>

<b-form-select-option :value="null" disabled>Select hash type</b-form-select-option>

</b-form-select>

Copilot · 2026-04-14T15:12:13Z

src/views/portfolio/components/ComponentSearch.vue

+      tableOptions: {
        showColumns: true,
        showRefresh: true,
-        pagination: true,
        silentSort: false,
        toolbar: '#componentSearchToolbar',
-        sidePagination: 'server',
-        queryParamsType: 'pageSize',
-        pageList: '[10, 25, 50, 100]',
-        pageSize:
-          localStorage &&
-          localStorage.getItem('ComponentSearchPageSize') !== null
-            ? Number(localStorage.getItem('ComponentSearchPageSize'))
-            : 10,
-        sortName:
-          localStorage &&
-          localStorage.getItem('ComponentSearchSortName') !== null
-            ? localStorage.getItem('ComponentSearchSortName')
-            : undefined,
-        sortOrder:
-          localStorage &&
-          localStorage.getItem('ComponentSearchSortOrder') !== null
-            ? localStorage.getItem('ComponentSearchSortOrder')
-            : undefined,
        icons: {
          refresh: 'fa-refresh',
        },
-        //toolbar: '#componentSearchToolbar',
-        responseHandler: function (res, xhr) {
-          res.total = xhr.getResponseHeader('X-Total-Count');
-          return res;
-        },
-        url: `${this.$api.BASE_URL}/${this.$api.URL_COMPONENT}/identity`,
-        onPageChange: (number, size) => {
-          if (localStorage) {
-            localStorage.setItem('ComponentSearchPageSize', size.toString());
-          }
-        },
-        onColumnSwitch: (field, checked) => {
-          if (localStorage) {
-            localStorage.setItem(
-              'ComponentSearchShow' + common.capitalize(field),
-              checked.toString(),
-            );
-          }
-        },
+        sortName: 'name',
+        sortOrder: 'asc',
+        customSort: () => {},
        onSort: (name, order) => {
-          if (localStorage) {
-            localStorage.setItem('ComponentSearchSortName', name);
-            localStorage.setItem('ComponentSearchSortOrder', order);
-          }
+          this.sortBy = name;
+          this.sortDirection = order;
        },
      },


This migration drops column visibility / sort preference persistence for the ComponentSearch table: the previous onColumnSwitch localStorage writes and loadUserPreferencesForBootstrapTable hook are no longer connected, so user column toggles won't be restored (see loadUserPreferencesForBootstrapTable in src/shared/utils.js:102-129). If TokenPaginatedTable doesn't handle this internally, consider wiring the same persistence behavior via bootstrap-table events (or enhancing TokenPaginatedTable to apply preferences).

Copilot · 2026-04-14T15:12:13Z

src/views/portfolio/components/ComponentSearch.vue

+  mounted() {
+    this.changeSearchUrl = true;
+  },


changeSearchUrl is now only assigned (beforeMount/mounted) but no longer read anywhere, and tableBaseUrl is declared but unused. Similarly, onPreBody() is no longer wired to any table event after switching to TokenPaginatedTable. Removing these dead fields/methods will avoid confusion and make it clearer how initial searches and URL state are intended to work.

Copilot · 2026-04-14T15:12:14Z

src/views/portfolio/components/ComponentSearch.vue

+    tableDataBaseUrl() {
+      if (!this.appliedFilters) return null;
+      const url = `${this.$api.BASE_URL}/api/v2/components`;
+      const queryParams = { ...this.appliedFilters };
+      const sortBy = this.sortBy || 'name';
+      const sortDirection = this.sortDirection || 'asc';
+      queryParams.sort_by = sortBy;
+      queryParams.sort_direction = sortDirection.toUpperCase();
+      return common.setQueryParams(url, queryParams);


TokenPaginatedTable calls loadPage(this.baseUrl) on mount and whenever baseUrl changes, but tableDataBaseUrl() returns null until appliedFilters is set. This will result in runtime errors (e.g., url.startsWith in common.setQueryParams) and the table never loading for deep-linked searches (since performSearch() is no longer invoked during initial route-hash parsing). Consider rendering the table only when a non-empty base URL exists (e.g., v-if), and/or initializing appliedFilters during beforeMount/mounted when the route hash provides initial search values.

Use TokenPaginatedTable for Component Search

1c9b824

Replace the legacy bootstrap-table with TokenPaginatedTable and update table props/behaviour to use token-based pagination.

sahibamittal mentioned this pull request Mar 23, 2026

Issue 2049 : Improve component search performance with JDBI DependencyTrack/hyades-apiserver#1867

Open

5 tasks

nscuro requested changes Mar 23, 2026

View reviewed changes

src/views/portfolio/components/ComponentSearch.vue Show resolved Hide resolved

src/views/portfolio/components/ComponentSearch.vue Outdated Show resolved Hide resolved

sahibamittal added 2 commits March 26, 2026 14:33

Use v2 endpoint for HASH search

5e37743

Merge branch 'main' into issue-2049-update-component-search-api-integ…

468cdf9

…ration

sahibamittal requested a review from nscuro March 26, 2026 14:39

Fix sorting for component search

b62dc22

nscuro requested changes Mar 30, 2026

View reviewed changes

src/views/portfolio/components/ComponentSearch.vue Show resolved Hide resolved

Add hash type search for components

11938b0

sahibamittal requested a review from nscuro March 31, 2026 16:15

nscuro reviewed Apr 14, 2026

View reviewed changes

src/views/portfolio/components/ComponentSearch.vue Outdated Show resolved Hide resolved

Update ComponentSearch.vue

541add5

sahibamittal requested a review from nscuro April 14, 2026 12:18

nscuro requested a review from Copilot April 14, 2026 15:05

Copilot started reviewing on behalf of nscuro April 14, 2026 15:06 View session

Copilot AI reviewed Apr 14, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Issue 2049 : Use `TokenPaginatedTable` for Component Search#438

Issue 2049 : Use `TokenPaginatedTable` for Component Search#438
sahibamittal wants to merge 6 commits intomainfrom
issue-2049-update-component-search-api-integration

sahibamittal commented Mar 23, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

codacy-production bot commented Mar 31, 2026 •

edited

Loading

Uh oh!

nscuro commented Apr 14, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	`<a href="${dependencyGraphUrl}"<i class="fa fa-sitemap" aria-hidden="true" style="float:right; padding-top: 4px; cursor:pointer" data-toggle="tooltip" data-placement="bottom" title="Show in dependency graph"></i></a> ` +
	`<a href="${dependencyGraphUrl}"><i class="fa fa-sitemap" aria-hidden="true" style="float:right; padding-top: 4px; cursor:pointer" data-toggle="tooltip" data-placement="bottom" title="Show in dependency graph"></i></a> ` +

Uh oh!

Conversation

sahibamittal commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Addressed Issue

Additional Details

Checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

codacy-production bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Up to standards ✅

Uh oh!

nscuro commented Apr 14, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sahibamittal commented Mar 23, 2026 •

edited

Loading

codacy-production bot commented Mar 31, 2026 •

edited

Loading