IO-847 Show search terms on paginated components

client/src/pages/bills/bills.page.component.jsx

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Checkbox, Input, Space, Table } from "antd";
+import { Button, Card, Checkbox, Input, Space, Table, Typography } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -205,6 +205,21 @@ export function BillsListPage({
       title={t("bills.labels.bills")}
       extra={
         <Space wrap>
+          {search.search && (
+            <>
+              <Typography.Title level={4}>
+                {t("general.labels.searchresults", { search: search.search })}
+              </Typography.Title>
+              <Button
+                onClick={() => {
+                  delete search.search;
+                  history.push({ search: queryString.stringify(search) });
+                }}
+              >
+                {t("general.actions.clear")}
+              </Button>
+            </>
+          )}
           <Button onClick={() => refetch()}>
             <SyncOutlined />
           </Button>
@@ -218,15 +233,14 @@ export function BillsListPage({
           >
             {t("jobs.actions.postbills")}
           </Button>
-          <div className="imex-table-header__search">
-            <Input.Search
-              placeholder={t("general.labels.search")}
-              onSearch={(value) => {
-                search.search = value;
-                history.push({ search: queryString.stringify(search) });
-              }}
-            />
-          </div>
+
+          <Input.Search
+            placeholder={search.search || t("general.labels.search")}
+            onSearch={(value) => {
+              search.search = value;
+              history.push({ search: queryString.stringify(search) });
+            }}
+          />
         </Space>
       }
     >