From e4d358944f0e848e65da871878f439ef8e329493 Mon Sep 17 00:00:00 2001
From: Eric Corson <public@giraffedev.com>
Date: Wed, 28 Jun 2023 12:22:23 +0900
Subject: [PATCH] feat: add all validators search box

---
 .../StakingOverview.components.ts             |  4 ++++
 .../StakingOverview/StakingOverview.tsx       | 24 +++++++++++++++++--
 packages/components/src/Table/Table.tsx       |  4 +++-
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.components.ts b/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.components.ts
index 6f8a460dc6..5c75351603 100644
--- a/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.components.ts
+++ b/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.components.ts
@@ -20,3 +20,7 @@ export const StakingBalances = styled.div`
 export const StakingBalancesLabel = styled.div``;
 
 export const StakingBalancesValue = styled.div``;
+
+export const AllValidatorsSearchBar = styled.div`
+  margin-bottom: 8px;
+`;
diff --git a/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.tsx b/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.tsx
index 562bebaba1..eaccfe65a0 100644
--- a/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.tsx
+++ b/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.tsx
@@ -8,6 +8,7 @@ import {
   StakingBalancesLabel,
   StakingBalancesValue,
   StakingOverviewContainer,
+  AllValidatorsSearchBar,
 } from "./StakingOverview.components";
 import { formatPercentage, assertNever } from "@anoma/utils";
 
@@ -280,12 +281,20 @@ const AllValidatorsTable: React.FC<{
   validators,
   navigateToValidatorDetails,
 }) => {
+  const [search, setSearch] = useState("");
+
   const [sort, setSort] = useState<Sort>({
     column: AllValidatorsColumn.Validator,
     ascending: true
   });
 
-  const sortedValidators = sortValidators(sort, validators);
+  const filteredValidators = validators.filter(v =>
+    search === ""
+      ? true
+      : v.name.toLowerCase().startsWith(search.toLowerCase())
+  );
+
+  const sortedFilteredValidators = sortValidators(sort, filteredValidators);
 
   const handleColumnClick = (column: AllValidatorsColumn): void =>
     setSort({
@@ -302,7 +311,18 @@ const AllValidatorsTable: React.FC<{
   return (
     <Table
       title="All Validators"
-      data={sortedValidators}
+      subheadingSlot={
+        <AllValidatorsSearchBar>
+          <input
+            type="search"
+            placeholder="Validator"
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+          >
+          </input>
+        </AllValidatorsSearchBar>
+      }
+      data={sortedFilteredValidators}
       tableConfigurations={allValidatorsConfiguration}
     />
   );
diff --git a/packages/components/src/Table/Table.tsx b/packages/components/src/Table/Table.tsx
index 46da50be29..63b8888df7 100644
--- a/packages/components/src/Table/Table.tsx
+++ b/packages/components/src/Table/Table.tsx
@@ -6,6 +6,7 @@ export type Props<RowType extends RowBase, Callbacks> = {
   data: RowType[];
   tableConfigurations: TableConfigurations<RowType, Callbacks>;
   className?: string;
+  subheadingSlot?: JSX.Element;
 };
 
 const getRenderedHeaderRow = (
@@ -55,7 +56,7 @@ const getRenderedDataRows = <RowType extends RowBase, Callbacks>(
 export const Table = <RowType extends RowBase, Callbacks>(
   props: Props<RowType, Callbacks>
 ): JSX.Element => {
-  const { data, tableConfigurations, title, className } = props;
+  const { data, tableConfigurations, title, className, subheadingSlot } = props;
   const { columns, rowRenderer, callbacks } =
     tableConfigurations && tableConfigurations;
 
@@ -70,6 +71,7 @@ export const Table = <RowType extends RowBase, Callbacks>(
   return (
     <TableContainer className={className}>
       <h3>{title}</h3>
+      {subheadingSlot}
       <TableElement style={{ borderCollapse: "collapse" }}>
         <tbody>{renderedRows}</tbody>
       </TableElement>