diff --git a/src/components/certificates-list/CertificatesList.stories.tsx b/src/components/certificates-list/CertificatesList.stories.tsx index fc52402b..2ca02887 100644 --- a/src/components/certificates-list/CertificatesList.stories.tsx +++ b/src/components/certificates-list/CertificatesList.stories.tsx @@ -38,3 +38,10 @@ export const Empty: Story = { certificates: [], }, }; + +export const EmptySearch: Story = { + args: { + certificates: [], + highlightedText: "test", + }, +}; diff --git a/src/components/certificates-list/CertificatesList.tsx b/src/components/certificates-list/CertificatesList.tsx index 5d0d7bad..859a6f55 100644 --- a/src/components/certificates-list/CertificatesList.tsx +++ b/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(); + if (highlightedText && !certificates?.length && !loading) { + return ( +
+
+ +
+ + + {0} + , + ]} + /> + +
+ ); + } + if (!certificates?.length && !loading) { return (
diff --git a/src/components/certificates-list/styles/index.module.scss b/src/components/certificates-list/styles/index.module.scss index 6ada34eb..265433dd 100644 --- a/src/components/certificates-list/styles/index.module.scss +++ b/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; diff --git a/src/i18n/locales/en/main.json b/src/i18n/locales/en/main.json index 6c80bf9b..473b3739 100644 --- a/src/i18n/locales/en/main.json +++ b/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}}" }, "dialog": { "create": { diff --git a/src/icons/search-120.svg b/src/icons/search-120.svg new file mode 100644 index 00000000..355344d7 --- /dev/null +++ b/src/icons/search-120.svg @@ -0,0 +1,3 @@ + + +