mock search page

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>
   )

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'