From 6e3f5c11863f373306a0114d3503c5824342ccc7 Mon Sep 17 00:00:00 2001 From: typescreep Date: Wed, 1 Oct 2025 15:24:03 +0300 Subject: [PATCH 1/2] search: design fixes --- src/components/organisms/Search/Search.tsx | 38 +++++++++++++++++++++- src/components/organisms/Search/styled.ts | 21 ++++++++++++ 2 files changed, 58 insertions(+), 1 deletion(-) diff --git a/src/components/organisms/Search/Search.tsx b/src/components/organisms/Search/Search.tsx index 863dbd3..020d809 100644 --- a/src/components/organisms/Search/Search.tsx +++ b/src/components/organisms/Search/Search.tsx @@ -9,6 +9,7 @@ import { TKindWithVersion, getKinds, getSortedKinds, + LookingGlassIcon, } from '@prorobotech/openapi-k8s-toolkit' import { ConfigProvider, theme as antdtheme, Form, Spin, Alert } from 'antd' import { useSelector } from 'react-redux' @@ -55,6 +56,7 @@ export const Search: FC = () => { const [kindsWithVersion, setKindWithVersion] = useState() const [height, setHeight] = useState(0) + const [emptyHeight, setEmptyHeight] = useState(0) useEffect(() => { const height = @@ -72,6 +74,29 @@ export const Search: FC = () => { } }, []) + useEffect(() => { + const emptyHeight = + window.innerHeight - + HEAD_FIRST_ROW - + HEAD_SECOND_ROW - + NAV_HEIGHT - + CONTENT_CARD_PADDING * 2 - + FOOTER_HEIGHT - + 1 - + 50 // packagesearch emptyy height + setEmptyHeight(emptyHeight) + + const handleResize = () => { + setEmptyHeight(emptyHeight) + } + + window.addEventListener('resize', handleResize) + + return () => { + window.removeEventListener('resize', handleResize) + } + }, []) + useEffect(() => { setIsLoading(true) setError(undefined) @@ -281,7 +306,18 @@ export const Search: FC = () => { ) })} - + + {(watchedKinds && watchedKinds.length) || + (watchedName && watchedName.length) || + (watchedLabels && watchedLabels.length) || + (watchedFields && watchedFields.length) ? ( + + ) : ( + + + Select search options + + )} ) diff --git a/src/components/organisms/Search/styled.ts b/src/components/organisms/Search/styled.ts index b6089f0..04f3b93 100644 --- a/src/components/organisms/Search/styled.ts +++ b/src/components/organisms/Search/styled.ts @@ -13,7 +13,28 @@ const OverflowContainer = styled.div` scrollbar-width: thin; ` +type TEmptyContainerProps = { + $height?: number +} + +const EmptyContainer = styled.div` + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + height: ${({ $height }) => ($height ? `${$height}px` : '25vh')}; +` + +const EmptyText = styled.div` + margin-top: 12px; + font-size: 16px; + font-weight: 400; + line-height: 24px; /* 150% */ +` + export const Styled = { Container, OverflowContainer, + EmptyContainer, + EmptyText, } From d0a0cf1cdb0f8770fe02853dc61b759c6e21f82d Mon Sep 17 00:00:00 2001 From: typescreep Date: Wed, 1 Oct 2025 16:10:04 +0300 Subject: [PATCH 2/2] icon designs --- package-lock.json | 8 ++--- package.json | 2 +- .../molecules/SearchEntry/SearchEntry.tsx | 30 +++++++++++-------- .../Search/molecules/SearchEntry/styled.ts | 20 +++++++++++-- src/pages/SearchPage/SearchPage.tsx | 10 +++++-- 5 files changed, 48 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index a105c68..95a740d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "@ant-design/icons": "5.6.0", "@monaco-editor/react": "4.6.0", "@originjs/vite-plugin-federation": "1.3.6", - "@prorobotech/openapi-k8s-toolkit": "^0.0.1-alpha.124", + "@prorobotech/openapi-k8s-toolkit": "^0.0.1-alpha.126", "@readme/openapi-parser": "4.0.0", "@reduxjs/toolkit": "2.2.5", "@tanstack/react-query": "5.62.2", @@ -2804,9 +2804,9 @@ } }, "node_modules/@prorobotech/openapi-k8s-toolkit": { - "version": "0.0.1-alpha.124", - "resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.124.tgz", - "integrity": "sha512-/y3lgZKivdK/ra/7/n2HU4LTI7Z/u4GdQ+vwXhUj6839YDqL/cfMSBiZbjATo5U7sC8A1SNKGiuYH++nkxO13Q==", + "version": "0.0.1-alpha.126", + "resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.126.tgz", + "integrity": "sha512-sTEz+LeMhddSOnhOEtFmH1KNHwANVAkuaoF++umrnIQ1msMKLRCbCNHEeH7glQYr10D7HJQCwlgyplRCtUmvAg==", "license": "MIT", "dependencies": { "@monaco-editor/react": "4.6.0", diff --git a/package.json b/package.json index 07d1a9f..076b7da 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "@ant-design/icons": "5.6.0", "@monaco-editor/react": "4.6.0", "@originjs/vite-plugin-federation": "1.3.6", - "@prorobotech/openapi-k8s-toolkit": "0.0.1-alpha.124", + "@prorobotech/openapi-k8s-toolkit": "0.0.1-alpha.126", "@readme/openapi-parser": "4.0.0", "@reduxjs/toolkit": "2.2.5", "@tanstack/react-query": "5.62.2", diff --git a/src/components/organisms/Search/molecules/SearchEntry/SearchEntry.tsx b/src/components/organisms/Search/molecules/SearchEntry/SearchEntry.tsx index c4e766d..5f3cf6e 100644 --- a/src/components/organisms/Search/molecules/SearchEntry/SearchEntry.tsx +++ b/src/components/organisms/Search/molecules/SearchEntry/SearchEntry.tsx @@ -44,7 +44,7 @@ export const SearchEntry: FC = ({ resource, labels, fields, f const kindName = kindByGvr(kindsWithVersion)(resource) const abbr = getUppercase(kindName && kindName.length ? kindName : 'Loading') - const bgColor = kindName && kindName.length ? hslFromString(abbr, theme) : '' + const bgColor = kindName && kindName.length ? hslFromString(kindName, theme) : '' const isNamespaceResource = namespacedByGvr(kindsWithVersion)(resource) @@ -63,17 +63,23 @@ export const SearchEntry: FC = ({ resource, labels, fields, f return ( - { - e.preventDefault() - removeKind(resource) - }} - closable - > - {kindName && kindName.length && bgColor.length && {abbr}} - {kindName} - + + { + e.preventDefault() + removeKind(resource) + }} + closable + > + {kindName && kindName.length && bgColor.length && {abbr}} + {kindName} + + + {apiGroup && apiGroup.length > 0 ? `${apiGroup}/` : ''} + {apiVersion} + +