From 9a7f2c520a9d54f0b62349ab20935b278897ac0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Tue, 2 Sep 2025 16:44:28 +0100
Subject: [PATCH] chore: add server-side search to archived flags (#10600)

https://linear.app/unleash/issue/2-3842/archived-flag-not-showing

Adds server-side search to archived flags.

In the future we'll probably want to dedicate a project to this page, to
bring it up to speed with the flags overview page. In the meantime, this
bandaid fix at least allows us to search outside the 50 results limit.

Also added a small alert to better explain the current behavior:

<img width="902" height="275" alt="image"
src="https://github.com/user-attachments/assets/ab3da3ca-3408-471a-a74a-abb65e95e012"
/>
---
 .../archive/ArchiveTable/ArchiveTable.tsx          | 14 ++++++++------
 .../src/component/archive/FeaturesArchiveTable.tsx |  3 +++
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx b/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx
index d55c3d24b7..388592a206 100644
--- a/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx
+++ b/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx
@@ -9,7 +9,7 @@ import {
     useTable,
 } from 'react-table';
 import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
-import { useMediaQuery } from '@mui/material';
+import { Alert, useMediaQuery } from '@mui/material';
 import { sortTypes } from 'utils/sortTypes';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
@@ -240,11 +240,7 @@ export const ArchiveTable = ({
                 isLoading={loading}
                 header={
                     <PageHeader
-                        titleElement={`${title} (${
-                            rows.length < data.length
-                                ? `${rows.length} of ${data.length}`
-                                : data.length
-                        })`}
+                        titleElement={`${title} (${rows.length})`}
                         actions={
                             <Search
                                 initialValue={searchValue}
@@ -256,6 +252,12 @@ export const ArchiveTable = ({
                     />
                 }
             >
+                {rows.length >= 50 && (
+                    <Alert color='info' sx={{ mb: 2 }}>
+                        A maximum of 50 archived flags are displayed. If you
+                        don't see the one you're looking for, try using search.
+                    </Alert>
+                )}
                 <SearchHighlightProvider value={getSearchText(searchValue)}>
                     <VirtualizedTable
                         rows={rows}
diff --git a/frontend/src/component/archive/FeaturesArchiveTable.tsx b/frontend/src/component/archive/FeaturesArchiveTable.tsx
index a4a4cfcbb6..99071173a5 100644
--- a/frontend/src/component/archive/FeaturesArchiveTable.tsx
+++ b/frontend/src/component/archive/FeaturesArchiveTable.tsx
@@ -3,6 +3,7 @@ import type { SortingRule } from 'react-table';
 import { usePageTitle } from 'hooks/usePageTitle';
 import { createLocalStorage } from 'utils/createLocalStorage';
 import { useFeatureSearch } from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
+import { useSearchParams } from 'react-router-dom';
 
 const defaultSort: SortingRule<string> = { id: 'createdAt' };
 const { value, setValue } = createLocalStorage(
@@ -12,12 +13,14 @@ const { value, setValue } = createLocalStorage(
 
 export const FeaturesArchiveTable = () => {
     usePageTitle('Archive');
+    const [searchParams] = useSearchParams();
 
     const {
         features: archivedFeatures,
         loading,
         refetch,
     } = useFeatureSearch({
+        query: searchParams.get('search') || undefined,
         archived: 'IS:true',
     });