Add Empty Search to CertificatesList

src/components/certificates-list/CertificatesList.stories.tsx

@@ -38,3 +38,10 @@ export const Empty: Story = {
     certificates: [],
   },
 };
+
+export const EmptySearch: Story = {
+  args: {
+    certificates: [],
+    highlightedText: "test",
+  },
+};

src/components/certificates-list/CertificatesList.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentProps, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import clsx from "clsx";
 import {
   Button,
@@ -15,7 +15,7 @@ import {
   TableHeader,
   TableRow,
 } from "../table";
-import CertificatesIcon from "../../icons/certificates.svg?react";
+
 import { CertificateTypeLabel } from "../certificate-type-label";
 import { Date } from "../date";
 import { CertificateName } from "../certificate-name";
@@ -29,6 +29,8 @@ import { CertificateProps } from "../../types";
 
 import DeleteIcon from "../../icons/delete.svg?react";
 import DownloadIcon from "../../icons/download-20.svg?react";
+import CertificatesIcon from "../../icons/certificates.svg?react";
+import SearchIcon from "../../icons/search-120.svg?react";
 
 import styles from "./styles/index.module.scss";
 
@@ -69,6 +71,32 @@ export const CertificatesList: React.FunctionComponent<
 
   const [currentRow, setCurrentRow] = useState<string>();
 
+  if (highlightedText && !certificates?.length && !loading) {
+    return (
+      <div className={clsx(styles.empty_list, styles.empty_search_list)}>
+        <div className={styles.empty_search_list_icon}>
+          <SearchIcon />
+        </div>
+        <Typography variant="b2" color="gray-9">
+          <Trans
+            i18nKey="certificates.list.empty-search-text"
+            values={{ text: highlightedText }}
+            components={[
+              <Typography
+                className={styles.empty_list_search_text}
+                variant="b2"
+                color="black"
+                component="span"
+              >
+                {0}
+              </Typography>,
+            ]}
+          />
+        </Typography>
+      </div>
+    );
+  }
+
   if (!certificates?.length && !loading) {
     return (
       <div className={styles.empty_list}>

src/components/certificates-list/styles/index.module.scss

@@ -76,6 +76,7 @@
   border: solid var(--pv-color-gray-4);
   border-width: 1px 1px 0 1px;
   background-color: var(--pv-color-white);
+  text-align: center;
 
   .empty_list_icon {
     width: 180px;
@@ -92,6 +93,22 @@
   }
 }
 
+.empty_search_list {
+  gap: var(--pv-size-base-4);
+
+  .empty_search_list_icon {
+    width: 120px;
+    height: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .empty_list_search_text {
+    word-break: break-all;
+  }
+}
+
 .skeleton_tr {
   .skeleton_td {
     border-bottom: none;

src/i18n/locales/en/main.json

@@ -24,7 +24,8 @@
         "delete": "Delete certificate",
         "download": "Download certificate"
       },
-      "empty-text": "There are no certificates yet."
+      "empty-text": "There are no certificates yet.",
+      "empty-search-text": "There are no results for <0>{{text}}</0>"
     },
     "dialog": {
       "create": {