fix(extensions): preserve pagination state on search and add i18n support

workspaces/extensions/.changeset/fix-pagination-drawer-state.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-extensions': patch
+---
+
+Fix pagination state reset when searching in the Installed Packages table, add localization support for pagination labels, fix table state being lost when opening package drawer, and fix author filter appearing cleared when clicking author link in plugin drawer.

workspaces/extensions/plugins/extensions/report-alpha.api.md

@@ -144,6 +144,9 @@ const extensionsPlugin: OverridableFrontendPlugin<
     >;
     catalogTabRouteRef: SubRouteRef<undefined>;
     installedTabRouteRef: SubRouteRef<undefined>;
+    installedPackageRouteRef: SubRouteRef<
+      PathParams<'/installed-packages/:namespace/:name'>
+    >;
   },
   {},
   {
@@ -361,6 +364,8 @@ export const extensionsTranslationRef: TranslationRef<
     readonly 'installedPackages.table.tooltips.disablePackage': string;
     readonly 'installedPackages.table.emptyMessages.noResults': string;
     readonly 'installedPackages.table.emptyMessages.noRecords': string;
+    readonly 'installedPackages.table.pagination.labelRowsPerPage': string;
+    readonly 'installedPackages.table.pagination.labelDisplayedRows': string;
     readonly 'button.update': string;
     readonly 'button.install': string;
     readonly 'button.uninstall': string;

workspaces/extensions/plugins/extensions/report.api.md

@@ -49,6 +49,9 @@ export const extensionsPlugin: BackstagePlugin<
     >;
     catalogTabRouteRef: SubRouteRef<undefined>;
     installedTabRouteRef: SubRouteRef<undefined>;
+    installedPackageRouteRef: SubRouteRef<
+      PathParams<'/installed-packages/:namespace/:name'>
+    >;
   },
   {},
   {}
@@ -88,6 +91,9 @@ export const marketplacePlugin: BackstagePlugin<
     >;
     catalogTabRouteRef: SubRouteRef<undefined>;
     installedTabRouteRef: SubRouteRef<undefined>;
+    installedPackageRouteRef: SubRouteRef<
+      PathParams<'/installed-packages/:namespace/:name'>
+    >;
   },
   {},
   {}

workspaces/extensions/plugins/extensions/src/alpha/translations/de.ts

@@ -176,6 +176,9 @@ const extensionsTranslationDe = createTranslationMessages({
       'Keine Ergebnisse gefunden. Versuchen Sie es mit einem anderen Suchbegriff.',
     'installedPackages.table.emptyMessages.noRecords':
       'Keine Datensätze zum Anzeigen vorhanden',
+    'installedPackages.table.pagination.labelRowsPerPage': 'Zeilen',
+    'installedPackages.table.pagination.labelDisplayedRows':
+      '{from}-{to} von {count}',
     'actions.install': 'Installieren',
     'actions.view': 'Anzeigen',
     'actions.edit': 'Bearbeiten',

workspaces/extensions/plugins/extensions/src/alpha/translations/es.ts

@@ -177,6 +177,9 @@ const extensionsTranslationEs = createTranslationMessages({
       'No se encontraron resultados. Pruebe con un término de búsqueda diferente.',
     'installedPackages.table.emptyMessages.noRecords':
       'No hay registros para mostrar',
+    'installedPackages.table.pagination.labelRowsPerPage': 'filas',
+    'installedPackages.table.pagination.labelDisplayedRows':
+      '{from}-{to} de {count}',
     'actions.install': 'Instalar',
     'actions.view': 'Ver',
     'actions.edit': 'Modificar',

workspaces/extensions/plugins/extensions/src/alpha/translations/fr.ts

@@ -176,6 +176,9 @@ const extensionsTranslationFr = createTranslationMessages({
       'Aucun résultat trouvé. Essayez un autre terme de recherche.',
     'installedPackages.table.emptyMessages.noRecords':
       'Aucun enregistrement à afficher',
+    'installedPackages.table.pagination.labelRowsPerPage': 'lignes',
+    'installedPackages.table.pagination.labelDisplayedRows':
+      '{from}-{to} sur {count}',
     'actions.install': 'Installer',
     'actions.view': 'Voir',
     'actions.edit': 'Modifier',

workspaces/extensions/plugins/extensions/src/alpha/translations/it.ts

@@ -179,6 +179,9 @@ const extensionsTranslationIt = createTranslationMessages({
       'Nessun risultato trovato. Provare un termine di ricerca diverso.',
     'installedPackages.table.emptyMessages.noRecords':
       'Nessun record da visualizzare',
+    'installedPackages.table.pagination.labelRowsPerPage': 'righe',
+    'installedPackages.table.pagination.labelDisplayedRows':
+      '{from}-{to} di {count}',
     'actions.install': 'Installa',
     'actions.view': 'Visualizza',
     'actions.edit': 'Modifica',

workspaces/extensions/plugins/extensions/src/alpha/translations/ja.ts

@@ -177,6 +177,9 @@ const extensionsTranslationJa = createTranslationMessages({
       '結果が見つかりません。別の検索語句を試してください。',
     'installedPackages.table.emptyMessages.noRecords':
       '表示するレコードがありません',
+    'installedPackages.table.pagination.labelRowsPerPage': '行',
+    'installedPackages.table.pagination.labelDisplayedRows':
+      '{from}-{to} / {count}',
     'actions.install': 'インストール',
     'actions.view': '表示',
     'actions.edit': '編集',

workspaces/extensions/plugins/extensions/src/alpha/translations/ref.ts

@@ -222,6 +222,10 @@ export const extensionsMessages = {
         noResults: 'No results found. Try a different search term.',
         noRecords: 'No records to display',
       },
+      pagination: {
+        labelRowsPerPage: 'rows',
+        labelDisplayedRows: '{from}-{to} of {count}',
+      },
     },
   },
 

workspaces/extensions/plugins/extensions/src/components/ExtensionsPluginContent.tsx

@@ -586,7 +586,7 @@ export const ExtensionsPluginContent = ({
                       {index > 0 ? t('metadata.comma') : t('metadata.by')}
                       <Link
                         key={author.name}
-                        to={withFilter('spec.authors.name', author.name)}
+                        to={withFilter('author', author.name)}
                         color="primary"
                         onClick={e => e.stopPropagation()}
                       >
@@ -604,7 +604,7 @@ export const ExtensionsPluginContent = ({
                   {t('metadata.by')}{' '}
                   <Link
                     key={plugin.spec?.author}
-                    to={withFilter('spec.author', plugin.spec?.author)}
+                    to={withFilter('author', plugin.spec?.author)}
                     color="primary"
                     onClick={e => e.stopPropagation()}
                   >

workspaces/extensions/plugins/extensions/src/components/InstalledPackages/InstalledPackagesTable.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import {
   ResponseErrorPanel,
   Table,
@@ -69,6 +69,12 @@ export const InstalledPackagesTable = () => {
   const dynamicPluginInfo = useApi(dynamicPluginsInfoApiRef);
   const extensionsApi = useExtensionsApi();
   const fullTextSearch = useQueryFullTextSearch();
+  const searchTerm = fullTextSearch.current;
+  const tableRef = useRef<any>(null);
+
+  useEffect(() => {
+    tableRef.current?.onQueryChange();
+  }, [searchTerm]);
 
   const showUninstall = false;
   const isProductionEnvironment =
@@ -330,7 +336,8 @@ export const InstalledPackagesTable = () => {
         <SearchTextField variant="search" />
       </div>
       <Table
-        key={`${installedQuery.data?.length ?? 0}-${packagesQuery.data?.items?.length ?? 0}-${fullTextSearch.current || ''}`}
+        tableRef={tableRef}
+        key={`${installedQuery.data?.length ?? 0}-${packagesQuery.data?.items?.length ?? 0}`}
         title={t('installedPackages.table.title' as any, {
           count: filteredCount.toString(),
         })}
@@ -355,6 +362,18 @@ export const InstalledPackagesTable = () => {
           toolbar: {
             searchPlaceholder: t('installedPackages.table.searchPlaceholder'),
           },
+          pagination: {
+            labelRowsPerPage: t(
+              'installedPackages.table.pagination.labelRowsPerPage',
+            ),
+            labelRowsSelect: t(
+              'installedPackages.table.pagination.labelRowsPerPage',
+            ),
+            labelDisplayedRows: t(
+              'installedPackages.table.pagination.labelDisplayedRows',
+              {},
+            ),
+          },
         }}
       />
       <InstalledPluginsDialog

workspaces/extensions/plugins/extensions/src/components/InstalledPackages/RowActions.tsx

@@ -30,7 +30,7 @@
 import { ExtensionsPackageInstallStatus } from '@red-hat-developer-hub/backstage-plugin-extensions-common';
 
 import { useTranslation } from '../../hooks/useTranslation';
-import { packageInstallRouteRef, packageRouteRef } from '../../routes';
+import { packageInstallRouteRef, installedPackageRouteRef } from '../../routes';
 import { usePackageConfig } from '../../hooks/usePackageConfig';
 import { usePackage } from '../../hooks/usePackage';
 import { downloadPackageYAML } from '../../utils/downloadPackageYaml';
@@ -433,12 +433,13 @@
 };
 
 export const PackageName = ({ pkg }: { pkg: InstalledPackageRow }) => {
-  const packagePath = useRouteRef(packageRouteRef);
+  const packagePath = useRouteRef(installedPackageRouteRef);
+  const [searchParams] = useSearchParams();
 
   if (!pkg.hasEntity) return <>{pkg.displayName}</>;
-  return (
-    <Link to={packagePath({ namespace: pkg.namespace!, name: pkg.name! })}>
-      {pkg.displayName}
-    </Link>
-  );
+
+  const path = packagePath({ namespace: pkg.namespace!, name: pkg.name! });
+  const searchParamString = searchParams.size > 0 ? `?${searchParams}` : '';
+
+  return <Link to={`${path}${searchParamString}`}>{pkg.displayName}</Link>;
 };

workspaces/extensions/plugins/extensions/src/routes.ts

@@ -80,6 +80,12 @@ export const installedTabRouteRef = createSubRouteRef({
   parent: rootRouteRef,
 });
 
+export const installedPackageRouteRef = createSubRouteRef({
+  id: 'extensions/installed-package',
+  path: '/installed-packages/:namespace/:name',
+  parent: rootRouteRef,
+});
+
 export const allRoutes = {
   rootRouteRef,
   pluginsRouteRef,
@@ -92,4 +98,5 @@ export const allRoutes = {
   collectionRouteRef,
   catalogTabRouteRef,
   installedTabRouteRef,
+  installedPackageRouteRef,
 };