Merge pull request #134 from PRO-Robotech/feature/dev

search: design fixes
2026-01-27 10:19:49 +00:00 · 2025-10-01 16:11:00 +03:00
parent 15efff05df d0a0cf1cdb
commit 61b7b8a11d
7 changed files with 106 additions and 23 deletions
--- 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",
--- 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",
--- 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<TKindWithVersion[]>()

  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 = () => {
            )
          })}
        </ConfigProvider>
-        <Spacer $space={20} $samespace />
+
+        {(watchedKinds && watchedKinds.length) ||
+        (watchedName && watchedName.length) ||
+        (watchedLabels && watchedLabels.length) ||
+        (watchedFields && watchedFields.length) ? (
+          <Spacer $space={20} $samespace />
+        ) : (
+          <Styled.EmptyContainer $height={emptyHeight}>
+            <LookingGlassIcon />
+            <Styled.EmptyText>Select search options</Styled.EmptyText>
+          </Styled.EmptyContainer>
+        )}
      </Styled.OverflowContainer>
    </Styled.Container>
  )
--- 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<TSearchEntryProps> = ({ 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<TSearchEntryProps> = ({ resource, labels, fields, f
  return (
    <Styled.Container $colorBorder={token.colorBorder} $colorText={token.colorText}>
      <Flex justify="space-between" align="center">
-        <Styled.CustomTag
-          key={resource}
-          onClose={e => {
-            e.preventDefault()
-            removeKind(resource)
-          }}
-          closable
-        >
-          {kindName && kindName.length && bgColor.length && <Styled.Abbr $bgColor={bgColor}>{abbr}</Styled.Abbr>}
-          {kindName}
-        </Styled.CustomTag>
+        <Flex gap={10}>
+          <Styled.CustomTag
+            key={resource}
+            onClose={e => {
+              e.preventDefault()
+              removeKind(resource)
+            }}
+            closable
+          >
+            {kindName && kindName.length && bgColor.length && <Styled.Abbr $bgColor={bgColor}>{abbr}</Styled.Abbr>}
+            {kindName}
+          </Styled.CustomTag>
+          <Styled.ApiGroupVersion $colorTextDescription={token.colorTextDescription}>
+            {apiGroup && apiGroup.length > 0 ? `${apiGroup}/` : ''}
+            {apiVersion}
+          </Styled.ApiGroupVersion>
+        </Flex>
        <div>
          <Button type="text" onClick={() => setIsOpen(!isOpen)}>
            {isOpen ? <DownIcon size={14} /> : <UpIcon size={14} />}
--- a/src/components/organisms/Search/molecules/SearchEntry/styled.ts
+++ b/src/components/organisms/Search/molecules/SearchEntry/styled.ts
@@ -10,7 +10,6 @@ const Container = styled.div<TContainerProps>`
  border-radius: 0 6px 6px 0;
  border: 1px solid ${({ $colorBorder }) => $colorBorder};
  padding: 12px;
-  margin-left: 20px;
  border-left-color: ${({ $colorText }) => $colorText};
  border-left-width: 3px;
 `
@@ -29,12 +28,29 @@ type TAbbrProps = {
 const Abbr = styled.span<TAbbrProps>`
  background-color: ${({ $bgColor }) => $bgColor};
  border-radius: 13px;
-  padding: 2px 5px;
+  padding: 1px 5px;
+  font-size: 13px;
  height: min-content;
+  margin-right: 4px;
+`
+
+type TApiGroupVersionProps = {
+  $colorTextDescription: string
+}
+
+const ApiGroupVersion = styled.div<TApiGroupVersionProps>`
+  display: flex;
+  padding-top: 4px;
+  color: ${({ $colorTextDescription }) => $colorTextDescription};
+  font-size: 12px;
+  font-style: italic;
+  font-weight: 400;
+  line-height: 14px; /* 116.667% */
 `

 export const Styled = {
  Container,
  CustomTag,
  Abbr,
+  ApiGroupVersion,
 }
--- 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<TEmptyContainerProps>`
+  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,
 }
--- a/src/pages/SearchPage/SearchPage.tsx
+++ b/src/pages/SearchPage/SearchPage.tsx
@@ -16,10 +16,14 @@ export const SearchPage: FC<TSearchPageProps> = ({ forcedTheme }) => {
  const possibleProject = syntheticProject && namespace ? syntheticProject : namespace
  const possibleInstance = syntheticProject && namespace ? namespace : undefined

-  const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace })}search-page`
+  // const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace })}search-page`
+  // const breadcrumbsId = `${getBreadcrumbsIdPrefix({
+  //   instance: !!syntheticProject,
+  //   project: !!namespace,
+  // })}search-page`
+  const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace })}search-page`
  const breadcrumbsId = `${getBreadcrumbsIdPrefix({
-    instance: !!syntheticProject,
-    project: !!namespace,
+    namespace: !!namespace,
  })}search-page`

  return (