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

ItemCounter | Labels | LabelsToSearchParams | SearchPage mock

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.89",
+        "@prorobotech/openapi-k8s-toolkit": "^0.0.1-alpha.90",
         "@readme/openapi-parser": "4.0.0",
         "@reduxjs/toolkit": "2.2.5",
         "@tanstack/react-query": "5.62.2",
@@ -2802,9 +2802,9 @@
       }
     },
     "node_modules/@prorobotech/openapi-k8s-toolkit": {
-      "version": "0.0.1-alpha.89",
-      "resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.89.tgz",
-      "integrity": "sha512-QBYQsmFbHoVsGKRzhZepqyEobva5tStmY3oep8bdzNey9r9UgCwWJAEd/uJiQQvZE0ibtd4jw3uT9vpAK0Qq5Q==",
+      "version": "0.0.1-alpha.90",
+      "resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.90.tgz",
+      "integrity": "sha512-1Ay+yTXg85VWlijRKCcM26W0fis7oTU889UgSRa4MjHoAAgw2VJunOXGWKC61AGp9CFEs4TrdFDLVJtI3PsNOg==",
       "license": "MIT",
       "dependencies": {
         "@monaco-editor/react": "4.6.0",

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.89",
+    "@prorobotech/openapi-k8s-toolkit": "0.0.1-alpha.90",
     "@readme/openapi-parser": "4.0.0",
     "@reduxjs/toolkit": "2.2.5",
     "@tanstack/react-query": "5.62.2",

src/App.tsx

@@ -26,6 +26,7 @@ import {
   FormCrdPage,
   FactoryPage,
   FactoryAdminPage,
+  SearchPage,
 } from 'pages'
 import { getBasePrefix } from 'utils/getBaseprefix'
 import { colorsLight, colorsDark, sizes } from 'constants/colors'
@@ -129,6 +130,10 @@ export const App: FC<TAppProps> = ({ isFederation, forcedTheme }) => {
         path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/factory/:key/*`}
         element={<FactoryPage forcedTheme={forcedTheme} />}
       />
+      <Route
+        path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/search/*`}
+        element={<SearchPage forcedTheme={forcedTheme} />}
+      />
       <Route path={`${prefix}/factory-admin/*`} element={<FactoryAdminPage />} />
     </Routes>
   )
@@ -179,6 +184,9 @@ export const App: FC<TAppProps> = ({ isFederation, forcedTheme }) => {
               itemSelectedColor: colors?.colorText,
               itemBorderRadius: 0,
             },
+            Tag: {
+              defaultBg: colors?.colorPrimaryBg,
+            },
           },
         }}
       >

src/components/atoms/BackLink/BackLink.tsx

@@ -7,17 +7,19 @@ import { Styled } from './styled'
 type TBackLinkProps = {
   title?: string
   className?: string
-  to: To
+  to?: To
 }
 
 export const BackLink: FC<TBackLinkProps> = ({ to, title }) => {
   return (
     <Styled.Container>
-      <Styled.CustomLink to={to}>
-        <TitleWithNoMargin level={5}>
-          <ArrowLeftOutlined />
-        </TitleWithNoMargin>
-      </Styled.CustomLink>
+      {to && (
+        <Styled.CustomLink to={to}>
+          <TitleWithNoMargin level={5}>
+            <ArrowLeftOutlined />
+          </TitleWithNoMargin>
+        </Styled.CustomLink>
+      )}
       <TitleWithNoMargin level={5}>{title}</TitleWithNoMargin>
     </Styled.Container>
   )

src/components/organisms/Search/index.ts

@@ -0,0 +1 @@
+export * from './Search'

src/components/organisms/Search/styled.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+export const CatContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+export const Styled = {
+  CatContainer,
+}

src/components/organisms/Sidebar/styled.ts

@@ -19,7 +19,7 @@ const ClusterSelectorContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 12px 12px;
+  padding: 12px;
 `
 
 export const Styled = {

src/components/organisms/index.ts

@@ -12,3 +12,4 @@ export * from './Header'
 export * from './HeaderSecond'
 export * from './Sidebar'
 export * from './Footer'
+export * from './Search'

src/pages/SearchPage/SearchPage.tsx

@@ -0,0 +1,47 @@
+import React, { FC } from 'react'
+import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
+import { useParams } from 'react-router-dom'
+import { BackLink, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer, Search } from 'components'
+import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
+import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix'
+import { BaseTemplate } from 'templates'
+
+type TSearchPageProps = {
+  forcedTheme?: 'light' | 'dark'
+}
+
+export const SearchPage: FC<TSearchPageProps> = ({ forcedTheme }) => {
+  const { namespace, syntheticProject } = useParams()
+
+  const possibleProject = syntheticProject && namespace ? syntheticProject : namespace
+  const possibleInstance = syntheticProject && namespace ? namespace : undefined
+
+  const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace })}seach-page`
+  const breadcrumbsId = `${getBreadcrumbsIdPrefix({
+    instance: !!syntheticProject,
+    project: !!namespace,
+  })}seach-page`
+
+  return (
+    <BaseTemplate
+      forcedTheme={forcedTheme}
+      inside={false}
+      sidebar={
+        <ManageableSidebar
+          instanceName={possibleInstance}
+          projectName={possibleProject}
+          idToCompare={sidebarId}
+          currentTags={['search']}
+        />
+      }
+    >
+      <NavigationContainer>
+        <ManageableBreadcrumbs idToCompare={breadcrumbsId} inside={false} />
+        <BackLink title="Search" />
+      </NavigationContainer>
+      <ContentCard flexGrow={1} displayFlex flexFlow="column">
+        <Search />
+      </ContentCard>
+    </BaseTemplate>
+  )
+}

src/pages/SearchPage/index.ts

@@ -0,0 +1 @@
+export { SearchPage } from './SearchPage'

src/pages/index.ts

@@ -17,3 +17,5 @@ export { FormApiPage } from './FormApiPage'
 export { FormBuiltinPage } from './FormBuiltinPage'
 export { FactoryPage } from './FactoryPage'
 export { FactoryAdminPage } from './FactoryAdminPage'
+/* search */
+export { SearchPage } from './SearchPage'