diff --git a/index.html b/index.html index 35c9688..880ae3e 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - + diff --git a/src/App.tsx b/src/App.tsx index c477a60..e8477c6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -167,7 +167,7 @@ export const App: FC = ({ isFederation, forcedTheme }) => { trackHoverBg: colors?.colorText, }, Menu: { - itemBg: colors?.colorBgContainer, + itemBg: colors?.colorBgLayout, itemHoverBg: colors?.colorBgContainer, itemActiveBg: colors?.colorInfoBg, itemSelectedBg: colors?.colorInfoBg, diff --git a/src/components/atoms/BackLink/BackLink.tsx b/src/components/atoms/BackLink/BackLink.tsx index 20310d3..38f0a5d 100644 --- a/src/components/atoms/BackLink/BackLink.tsx +++ b/src/components/atoms/BackLink/BackLink.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react' import { To } from 'react-router-dom' import { ArrowLeftOutlined } from '@ant-design/icons' -import { TitleWithNoTopMargin } from '../TitleWithNoTopMargin' +import { TitleWithNoMargin } from '../TitleWithNoMargin' import { Styled } from './styled' type TBackLinkProps = { @@ -14,11 +14,11 @@ export const BackLink: FC = ({ to, title }) => { return ( - + - + - {title} + {title} ) } diff --git a/src/components/atoms/BackLink/styled.ts b/src/components/atoms/BackLink/styled.ts index be5a6f6..53bb0ca 100644 --- a/src/components/atoms/BackLink/styled.ts +++ b/src/components/atoms/BackLink/styled.ts @@ -1,13 +1,16 @@ import styled from 'styled-components' import { Link } from 'react-router-dom' -import { BACKLINK_HEIGHT, BACKLINK_MARGIN_TOP } from 'constants/blocksSizes' +import { BACKLINK_HEIGHT } from 'constants/blocksSizes' const Container = styled.div` display: flex; gap: 8px; align-items: baseline; - margin-top: ${BACKLINK_MARGIN_TOP}px; height: ${BACKLINK_HEIGHT}px; + + * { + white-space: nowrap; + } ` const CustomLink = styled(Link)` diff --git a/src/components/atoms/DefaultLayout/DefaultLayout.ts b/src/components/atoms/DefaultLayout/DefaultLayout.ts index 5e61a5f..6f7eaf7 100644 --- a/src/components/atoms/DefaultLayout/DefaultLayout.ts +++ b/src/components/atoms/DefaultLayout/DefaultLayout.ts @@ -1,12 +1,5 @@ import styled from 'styled-components' -import { - HEAD_FIRST_ROW, - HEAD_SECOND_ROW, - HEAD_BORDER_BOTTOM, - FOOTER_HEIGHT, - MAIN_CONTENT_VERTICAL_PADDING, - MAIN_CONTENT_HORIZONTAL_PADDING, -} from 'constants/blocksSizes' +import { HEAD_FIRST_ROW, FOOTER_HEIGHT, MAIN_CONTENT_HORIZONTAL_PADDING } from 'constants/blocksSizes' type TLayoutProps = { $bgColor: string @@ -28,9 +21,8 @@ type TContentPaddingProps = { } const ContentPadding = styled.div` - padding: ${({ $isFederation }) => - $isFederation ? 0 : `${MAIN_CONTENT_VERTICAL_PADDING}px ${MAIN_CONTENT_HORIZONTAL_PADDING}px`}; - min-height: calc(100vh - ${HEAD_FIRST_ROW}px - ${HEAD_SECOND_ROW}px - ${HEAD_BORDER_BOTTOM}px - ${FOOTER_HEIGHT}px); + padding: ${({ $isFederation }) => ($isFederation ? 0 : `0 ${MAIN_CONTENT_HORIZONTAL_PADDING}px`)}; + min-height: calc(100vh - ${HEAD_FIRST_ROW}px - ${FOOTER_HEIGHT}px); display: flex; flex-flow: column; ` diff --git a/src/components/organisms/Header/organisms/SelectorInside/molecules/EntrySelect/EntrySelect.tsx b/src/components/atoms/EntrySelect/EntrySelect.tsx similarity index 80% rename from src/components/organisms/Header/organisms/SelectorInside/molecules/EntrySelect/EntrySelect.tsx rename to src/components/atoms/EntrySelect/EntrySelect.tsx index d54753b..1098408 100644 --- a/src/components/organisms/Header/organisms/SelectorInside/molecules/EntrySelect/EntrySelect.tsx +++ b/src/components/atoms/EntrySelect/EntrySelect.tsx @@ -10,9 +10,10 @@ type TEntrySelectProps = { value?: string onChange: (val: string) => void disabled?: boolean + fullwidth?: boolean } -export const EntrySelect: FC = ({ placeholder, value, disabled, options, onChange }) => { +export const EntrySelect: FC = ({ placeholder, value, disabled, options, onChange, fullwidth }) => { return ( ({ label, value }))} - onChange={(selectedValue: string) => onChange(selectedValue)} - disabled={disabled} - style={{ width: '150px' }} - /> - ) -} diff --git a/src/components/organisms/Header/organisms/Selector/molecules/index.ts b/src/components/organisms/Header/organisms/Selector/molecules/index.ts deleted file mode 100644 index c316af3..0000000 --- a/src/components/organisms/Header/organisms/Selector/molecules/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './EntrySelect' diff --git a/src/components/organisms/Header/organisms/SelectorInside/molecules/EntrySelect/index.ts b/src/components/organisms/Header/organisms/SelectorInside/molecules/EntrySelect/index.ts deleted file mode 100644 index c316af3..0000000 --- a/src/components/organisms/Header/organisms/SelectorInside/molecules/EntrySelect/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './EntrySelect' diff --git a/src/components/organisms/Header/organisms/SelectorInside/molecules/index.ts b/src/components/organisms/Header/organisms/SelectorInside/molecules/index.ts deleted file mode 100644 index c316af3..0000000 --- a/src/components/organisms/Header/organisms/SelectorInside/molecules/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './EntrySelect' diff --git a/src/components/organisms/Header/organisms/index.ts b/src/components/organisms/Header/organisms/index.ts index 1ab0f5b..bf99b1c 100644 --- a/src/components/organisms/Header/organisms/index.ts +++ b/src/components/organisms/Header/organisms/index.ts @@ -2,5 +2,3 @@ export * from './Logo' export * from './Documentation' export * from './ThemeSelector' export * from './User' -export * from './Selector' -export * from './SelectorInside' diff --git a/src/components/organisms/Header/styled.ts b/src/components/organisms/Header/styled.ts index 1374fae..17bb467 100644 --- a/src/components/organisms/Header/styled.ts +++ b/src/components/organisms/Header/styled.ts @@ -1,27 +1,15 @@ import styled from 'styled-components' +import { MAIN_CONTENT_HORIZONTAL_PADDING } from 'constants/blocksSizes' type TPaddingContainerProps = { $height: number } const PaddingContainer = styled.div` - padding: 10px 48px; + padding: 12px ${MAIN_CONTENT_HORIZONTAL_PADDING}px; height: ${({ $height }) => $height}px; ` -type TBackgroundContainerProps = { - $bgColor: string - $borderColor: string - $borderSize: number -} - -const BackgroundContainer = styled.div` - border-bottom: ${({ $borderSize }) => $borderSize}px solid ${({ $borderColor }) => $borderColor}; - background-color: ${({ $bgColor }) => $bgColor}; - width: 100%; -` - export const Styled = { PaddingContainer, - BackgroundContainer, } diff --git a/src/components/organisms/HeaderSecond/HeaderSecond.tsx b/src/components/organisms/HeaderSecond/HeaderSecond.tsx new file mode 100644 index 0000000..ea7343b --- /dev/null +++ b/src/components/organisms/HeaderSecond/HeaderSecond.tsx @@ -0,0 +1,35 @@ +import React, { FC } from 'react' +import { theme } from 'antd' +import { useParams } from 'react-router-dom' +import { HEAD_SECOND_ROW } from 'constants/blocksSizes' +import { Selector, SelectorInside } from './organisms' +import { Styled } from './styled' + +type THeaderProps = { + inside?: boolean +} + +export const HeaderSecond: FC = ({ inside }) => { + // const { projectName, instanceName, clusterName, entryType, namespace, syntheticProject } = useParams() + const { projectName, instanceName, clusterName, namespace, syntheticProject } = useParams() + const { token } = theme.useToken() + + const possibleProject = syntheticProject && namespace ? syntheticProject : namespace + const possibleInstance = syntheticProject && namespace ? namespace : undefined + + return ( + + + {inside ? ( + + ) : ( + + )} + + + ) +} diff --git a/src/components/organisms/HeaderSecond/index.ts b/src/components/organisms/HeaderSecond/index.ts new file mode 100644 index 0000000..6473642 --- /dev/null +++ b/src/components/organisms/HeaderSecond/index.ts @@ -0,0 +1 @@ +export * from './HeaderSecond' diff --git a/src/components/organisms/Header/organisms/Selector/Selector.tsx b/src/components/organisms/HeaderSecond/organisms/Selector/Selector.tsx similarity index 84% rename from src/components/organisms/Header/organisms/Selector/Selector.tsx rename to src/components/organisms/HeaderSecond/organisms/Selector/Selector.tsx index cd83324..3f0e7a7 100644 --- a/src/components/organisms/Header/organisms/Selector/Selector.tsx +++ b/src/components/organisms/HeaderSecond/organisms/Selector/Selector.tsx @@ -5,7 +5,7 @@ import { useSelector } from 'react-redux' import { RootState } from 'store/store' import { useNavSelector } from 'hooks/useNavSelector' import { useMountEffect } from 'hooks/useMountEffect' -import { EntrySelect } from './molecules' +import { EntrySelect } from 'components/atoms' type TSelectorProps = { clusterName?: string @@ -21,21 +21,19 @@ export const Selector: FC = ({ clusterName, projectName, instanc const [selectedProjectName, setSelectedProjectName] = useState(projectName) const [selectedInstanceName, setSelectedInstanceName] = useState(instanceName) - const { projectsInSidebar, instancesInSidebar, allInstancesLoadingSuccess, clustersInSidebar } = useNavSelector( + // const { projectsInSidebar, instancesInSidebar, allInstancesLoadingSuccess, clustersInSidebar } = useNavSelector( + const { projectsInSidebar, instancesInSidebar, allInstancesLoadingSuccess } = useNavSelector( selectedClusterName, projectName, ) - const handleClusterChange = (value: string) => { - setSelectedClusterName(value) - navigate(`${baseprefix}/clusters/${value}`) - setSelectedProjectName(undefined) - setSelectedInstanceName(undefined) - } + // const handleClusterChange = (value: string) => { + // setSelectedClusterName(value) + // navigate(`${baseprefix}/clusters/${value}`) + // } const handleProjectChange = (value: string) => { setSelectedProjectName(value) - setSelectedInstanceName(undefined) navigate(`${baseprefix}/clusters/${selectedClusterName}/projects/${value}`) } @@ -51,13 +49,13 @@ export const Selector: FC = ({ clusterName, projectName, instanc }, [projectName, instanceName, clusterName]) return ( - - + {/* + /> */} = ({ clusterName, namespac const [selectedClusterName, setSelectedClusterName] = useState(clusterName) const [selectedNamespace, setSelectedNamespace] = useState(namespace) - const { namespacesInSidebar, clustersInSidebar } = useNavSelectorInside(selectedClusterName) + // const { namespacesInSidebar, clustersInSidebar } = useNavSelectorInside(selectedClusterName) + const { namespacesInSidebar } = useNavSelectorInside(selectedClusterName) - const handleClusterChange = (value: string) => { - setSelectedClusterName(value) - navigate(`${baseprefix}/inside/${value}/apis`) - setSelectedNamespace(undefined) - } + // const handleClusterChange = (value: string) => { + // setSelectedClusterName(value) + // navigate(`${baseprefix}/inside/${value}/apis`) + // } const handleNamepsaceChange = (value: string) => { setSelectedNamespace(value) @@ -38,13 +38,13 @@ export const SelectorInside: FC = ({ clusterName, namespac }, [namespace, clusterName]) return ( - - + {/* + /> */} ` + padding: 12px ${MAIN_CONTENT_HORIZONTAL_PADDING}px; + height: ${({ $height }) => $height}px; +` + +type TBackgroundContainerProps = { + $bgColor: string + $borderRadius: number +} + +const BackgroundContainer = styled.div` + background-color: ${({ $bgColor }) => $bgColor}; + border-radius: ${({ $borderRadius }) => $borderRadius}px; + width: 100%; +` + +export const Styled = { + PaddingContainer, + BackgroundContainer, +} diff --git a/src/components/organisms/Sidebar/Sidebar.tsx b/src/components/organisms/Sidebar/Sidebar.tsx new file mode 100644 index 0000000..0173486 --- /dev/null +++ b/src/components/organisms/Sidebar/Sidebar.tsx @@ -0,0 +1,30 @@ +import React, { FC, ReactNode } from 'react' +import { theme } from 'antd' +import { useParams } from 'react-router-dom' +import { Selector, SelectorInside } from './organisms' +import { Styled } from './styled' + +type TSidebarProps = { + inside?: boolean + sidebar?: ReactNode +} + +export const Sidebar: FC = ({ inside, sidebar }) => { + const { projectName, clusterName, namespace, syntheticProject } = useParams() + const { token } = theme.useToken() + + const possibleProject = syntheticProject && namespace ? syntheticProject : namespace + + return ( + + + {inside ? ( + + ) : ( + + )} + + {sidebar} + + ) +} diff --git a/src/components/organisms/Sidebar/index.ts b/src/components/organisms/Sidebar/index.ts new file mode 100644 index 0000000..9130e63 --- /dev/null +++ b/src/components/organisms/Sidebar/index.ts @@ -0,0 +1 @@ +export * from './Sidebar' diff --git a/src/components/organisms/Sidebar/organisms/Selector/Selector.tsx b/src/components/organisms/Sidebar/organisms/Selector/Selector.tsx new file mode 100644 index 0000000..9485e93 --- /dev/null +++ b/src/components/organisms/Sidebar/organisms/Selector/Selector.tsx @@ -0,0 +1,40 @@ +import React, { FC, useState } from 'react' +import { useNavigate } from 'react-router-dom' +import { useSelector } from 'react-redux' +import { RootState } from 'store/store' +import { useNavSelector } from 'hooks/useNavSelector' +import { useMountEffect } from 'hooks/useMountEffect' +import { EntrySelect } from 'components/atoms' + +type TSelectorProps = { + clusterName?: string + projectName?: string +} + +export const Selector: FC = ({ clusterName, projectName }) => { + const navigate = useNavigate() + const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix) + + const [selectedClusterName, setSelectedClusterName] = useState(clusterName) + + const { clustersInSidebar } = useNavSelector(selectedClusterName, projectName) + + const handleClusterChange = (value: string) => { + setSelectedClusterName(value) + navigate(`${baseprefix}/clusters/${value}`) + } + + useMountEffect(() => { + setSelectedClusterName(clusterName) + }, [clusterName]) + + return ( + + ) +} diff --git a/src/components/organisms/Sidebar/organisms/Selector/index.ts b/src/components/organisms/Sidebar/organisms/Selector/index.ts new file mode 100644 index 0000000..8ea8ac3 --- /dev/null +++ b/src/components/organisms/Sidebar/organisms/Selector/index.ts @@ -0,0 +1 @@ +export * from './Selector' diff --git a/src/components/organisms/Sidebar/organisms/SelectorInside/SelectorInside.tsx b/src/components/organisms/Sidebar/organisms/SelectorInside/SelectorInside.tsx new file mode 100644 index 0000000..c85ab19 --- /dev/null +++ b/src/components/organisms/Sidebar/organisms/SelectorInside/SelectorInside.tsx @@ -0,0 +1,39 @@ +import React, { FC, useState } from 'react' +import { useNavigate } from 'react-router-dom' +import { useSelector } from 'react-redux' +import { RootState } from 'store/store' +import { useNavSelectorInside } from 'hooks/useNavSelectorInside' +import { useMountEffect } from 'hooks/useMountEffect' +import { EntrySelect } from 'components/atoms' + +type TSelectorInsideProps = { + clusterName?: string +} + +export const SelectorInside: FC = ({ clusterName }) => { + const navigate = useNavigate() + const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix) + + const [selectedClusterName, setSelectedClusterName] = useState(clusterName) + + const { clustersInSidebar } = useNavSelectorInside(selectedClusterName) + + const handleClusterChange = (value: string) => { + setSelectedClusterName(value) + navigate(`${baseprefix}/inside/${value}/apis`) + } + + useMountEffect(() => { + setSelectedClusterName(clusterName) + }, [clusterName]) + + return ( + + ) +} diff --git a/src/components/organisms/Sidebar/organisms/SelectorInside/index.ts b/src/components/organisms/Sidebar/organisms/SelectorInside/index.ts new file mode 100644 index 0000000..88397f6 --- /dev/null +++ b/src/components/organisms/Sidebar/organisms/SelectorInside/index.ts @@ -0,0 +1 @@ +export * from './SelectorInside' diff --git a/src/components/organisms/Sidebar/organisms/index.ts b/src/components/organisms/Sidebar/organisms/index.ts new file mode 100644 index 0000000..cdc6d40 --- /dev/null +++ b/src/components/organisms/Sidebar/organisms/index.ts @@ -0,0 +1,2 @@ +export * from './Selector' +export * from './SelectorInside' diff --git a/src/components/organisms/Sidebar/styled.ts b/src/components/organisms/Sidebar/styled.ts new file mode 100644 index 0000000..5158974 --- /dev/null +++ b/src/components/organisms/Sidebar/styled.ts @@ -0,0 +1,28 @@ +import styled from 'styled-components' +import { HEAD_FIRST_ROW, SIDEBAR_CLUSTER_HEIGHT } from 'constants/blocksSizes' + +type TBackgroundContainerProps = { + $borderRadius: number + $borderColor: string +} + +const BackgroundContainer = styled.div` + border-top-right-radius: ${({ $borderRadius }) => $borderRadius}px; + border: 1px ${({ $borderColor }) => $borderColor} solid; + border-left: 0; + width: 250px; + height: calc(100vh - ${HEAD_FIRST_ROW}px); +` + +const ClusterSelectorContainer = styled.div` + height: ${SIDEBAR_CLUSTER_HEIGHT}px; + display: flex; + justify-content: center; + align-items: center; + padding: 16px 12px; +` + +export const Styled = { + BackgroundContainer, + ClusterSelectorContainer, +} diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts index 1e386e7..b6418d4 100644 --- a/src/components/organisms/index.ts +++ b/src/components/organisms/index.ts @@ -10,4 +10,6 @@ export * from './TableBuiltinInfo' export * from './Forms' export * from './Factory' export * from './Header' +export * from './HeaderSecond' +export * from './Sidebar' export * from './Footer' diff --git a/src/constants/blocksSizes.ts b/src/constants/blocksSizes.ts index a3aa555..9fb6686 100644 --- a/src/constants/blocksSizes.ts +++ b/src/constants/blocksSizes.ts @@ -1,15 +1,13 @@ export const HEAD_FIRST_ROW = 52 -export const HEAD_SECOND_ROW = 52 -export const HEAD_BORDER_BOTTOM = 1 -export const FOOTER_HEIGHT = 70 -export const MAIN_CONTENT_VERTICAL_PADDING = 20 -export const MAIN_CONTENT_HORIZONTAL_PADDING = 48 -export const BACKLINK_HEIGHT = 38 -export const BACKLINK_MARGIN_TOP = 4 -export const AFTER_BREADCRUMBS_SPACE = 20 -export const AFTER_BACKLINK_SPACE = 20 +export const HEAD_SECOND_ROW = 56 +export const NAV_HEIGHT = 50 +export const FOOTER_HEIGHT = 38 +export const MAIN_CONTENT_HORIZONTAL_PADDING = 24 +export const BACKLINK_HEIGHT = 26 +/* sidebar */ +export const SIDEBAR_CLUSTER_HEIGHT = 64 /* computed only */ export const BREADCRUMBS_HEIGHT = 26 -export const CONTENT_CARD_PADDING = 24 -export const BLACKHOLE_FORM_VIEW_SWITCH_HEIGHT = 28 -export const BLACKHOLE_FORM_SUBMIT_ROW_HEIGHT = 46 +export const CONTENT_CARD_PADDING = 25 +export const BLACKHOLE_FORM_VIEW_SWITCH_HEIGHT = 42 +export const BLACKHOLE_FORM_SUBMIT_ROW_HEIGHT = 48 diff --git a/src/pages/FactoryPage/FactoryPage.tsx b/src/pages/FactoryPage/FactoryPage.tsx index 4cae843..46628b5 100644 --- a/src/pages/FactoryPage/FactoryPage.tsx +++ b/src/pages/FactoryPage/FactoryPage.tsx @@ -1,8 +1,6 @@ import React, { FC } from 'react' -import { Spacer } from '@prorobotech/openapi-k8s-toolkit' -import { ManageableBreadcrumbs, Factory } from 'components' +import { ManageableBreadcrumbs, Factory, NavigationContainer } from 'components' import { BaseTemplate } from 'templates' -import { AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes' type TFactoryPageProps = { forcedTheme?: 'light' | 'dark' @@ -11,8 +9,9 @@ type TFactoryPageProps = { export const FactoryPage: FC = ({ forcedTheme }) => { return ( - - + + + ) diff --git a/src/pages/FormApiPage/FormApiPage.tsx b/src/pages/FormApiPage/FormApiPage.tsx index 8c8b26e..bb69836 100644 --- a/src/pages/FormApiPage/FormApiPage.tsx +++ b/src/pages/FormApiPage/FormApiPage.tsx @@ -1,6 +1,5 @@ import React, { FC } from 'react' -import { Col } from 'antd' -import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit' +import { ContentCard } from '@prorobotech/openapi-k8s-toolkit' import { useParams, useSearchParams } from 'react-router-dom' import { useSelector } from 'react-redux' import type { RootState } from 'store/store' @@ -10,11 +9,9 @@ import { BackLink, ManageableBreadcrumbs, ManageableSidebar, - RowFlexGrow, - FlexCol, + NavigationContainer, } from 'components' import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix' -import { AFTER_BACKLINK_SPACE, AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes' import { BaseTemplate } from 'templates' type TFormApiPageProps = { @@ -43,47 +40,46 @@ export const FormApiPage: FC = ({ forcedTheme, inside }) => { const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}api-form` return ( - - - - - + + } + > + + + + - - - - - - {entryName ? ( - - ) : ( - - )} - - + {entryName ? ( + + ) : ( + + )} ) diff --git a/src/pages/FormBuiltinPage/FormBuiltinPage.tsx b/src/pages/FormBuiltinPage/FormBuiltinPage.tsx index 3df5eb2..acc8084 100644 --- a/src/pages/FormBuiltinPage/FormBuiltinPage.tsx +++ b/src/pages/FormBuiltinPage/FormBuiltinPage.tsx @@ -1,6 +1,5 @@ import React, { FC } from 'react' -import { Col } from 'antd' -import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit' +import { ContentCard } from '@prorobotech/openapi-k8s-toolkit' import { useParams, useSearchParams } from 'react-router-dom' import { useSelector } from 'react-redux' import type { RootState } from 'store/store' @@ -10,11 +9,9 @@ import { BackLink, ManageableBreadcrumbs, ManageableSidebar, - RowFlexGrow, - FlexCol, + NavigationContainer, } from 'components' import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix' -import { AFTER_BACKLINK_SPACE, AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes' import { BaseTemplate } from 'templates' type TFormBuiltinPageProps = { @@ -43,32 +40,31 @@ export const FormBuiltinPage: FC = ({ forcedTheme, inside const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}builtin-form` return ( - - - - - + + } + > + + + + - - - - - - {entryName ? ( - - ) : ( - - )} - - + {entryName ? ( + + ) : ( + + )} ) diff --git a/src/pages/FormCrdPage/FormCrdPage.tsx b/src/pages/FormCrdPage/FormCrdPage.tsx index 45f8b74..98172bb 100644 --- a/src/pages/FormCrdPage/FormCrdPage.tsx +++ b/src/pages/FormCrdPage/FormCrdPage.tsx @@ -1,6 +1,5 @@ import React, { FC } from 'react' -import { Col } from 'antd' -import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit' +import { ContentCard } from '@prorobotech/openapi-k8s-toolkit' import { useParams, useSearchParams } from 'react-router-dom' import { useSelector } from 'react-redux' import type { RootState } from 'store/store' @@ -10,11 +9,9 @@ import { BackLink, ManageableBreadcrumbs, ManageableSidebar, - RowFlexGrow, - FlexCol, + NavigationContainer, } from 'components' import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix' -import { AFTER_BACKLINK_SPACE, AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes' import { BaseTemplate } from 'templates' type TFormCrdPageProps = { @@ -43,47 +40,46 @@ export const FormCrdPage: FC = ({ forcedTheme, inside }) => { const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}crd-form` return ( - - - - - + + } + > + + + + - - - - - - {entryName ? ( - - ) : ( - - )} - - + {entryName ? ( + + ) : ( + + )} ) diff --git a/src/pages/ListClustersPage/ListClustersPage.tsx b/src/pages/ListClustersPage/ListClustersPage.tsx index 20ddfeb..08e9e5b 100644 --- a/src/pages/ListClustersPage/ListClustersPage.tsx +++ b/src/pages/ListClustersPage/ListClustersPage.tsx @@ -1,10 +1,10 @@ import React, { FC } from 'react' import { Breadcrumb } from 'antd' -import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit' +import { ContentCard } from '@prorobotech/openapi-k8s-toolkit' import { Link } from 'react-router-dom' import { useSelector } from 'react-redux' import type { RootState } from 'store/store' -import { ListClusters } from 'components' +import { ListClusters, NavigationContainer } from 'components' import { BaseTemplate } from 'templates' type TListClustersPageProps = { @@ -27,9 +27,10 @@ export const ListClustersPage: FC = ({ forcedTheme }) => return ( - - - + + + + diff --git a/src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx b/src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx index 4b59536..c5ef263 100644 --- a/src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx +++ b/src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx @@ -1,11 +1,9 @@ import React, { FC } from 'react' -import { Col } from 'antd' -import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit' +import { ContentCard } from '@prorobotech/openapi-k8s-toolkit' import { useParams } from 'react-router-dom' -import { ListInsideApisByApiGroup, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components' +import { ListInsideApisByApiGroup, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components' import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix' import { BaseTemplate } from 'templates' -import { AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes' type TListInsideApiByApiGroupPageProps = { forcedTheme?: 'light' | 'dark' @@ -18,20 +16,14 @@ export const ListInsideApiByApiGroupPage: FC const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace, inside })}api-by-api` return ( - - - {' '} + }> + + + - - - - - - {apiGroup && apiVersion && ( - - )} - - + {apiGroup && apiVersion && ( + + )} ) diff --git a/src/pages/ListInsideApiPage/ListInsideApiPage.tsx b/src/pages/ListInsideApiPage/ListInsideApiPage.tsx index 634b447..f2df20b 100644 --- a/src/pages/ListInsideApiPage/ListInsideApiPage.tsx +++ b/src/pages/ListInsideApiPage/ListInsideApiPage.tsx @@ -1,11 +1,9 @@ import React, { FC } from 'react' -import { Col } from 'antd' -import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit' +import { ContentCard } from '@prorobotech/openapi-k8s-toolkit' import { useParams } from 'react-router-dom' -import { ListInsideAllResources, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components' +import { ListInsideAllResources, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components' import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix' import { BaseTemplate } from 'templates' -import { AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes' type TListInsideApiPageProps = { forcedTheme?: 'light' | 'dark' @@ -18,18 +16,12 @@ export const ListInsideApiPage: FC = ({ forcedTheme, in const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace, inside })}apis` return ( - - - + }> + + + - - - - - - - - + ) diff --git a/src/pages/ListInsideClustersAndNsPage/ListInsideClustersAndNsPage.tsx b/src/pages/ListInsideClustersAndNsPage/ListInsideClustersAndNsPage.tsx index 7497066..ded39d0 100644 --- a/src/pages/ListInsideClustersAndNsPage/ListInsideClustersAndNsPage.tsx +++ b/src/pages/ListInsideClustersAndNsPage/ListInsideClustersAndNsPage.tsx @@ -1,10 +1,10 @@ import React, { FC } from 'react' import { Breadcrumb } from 'antd' -import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit' +import { ContentCard } from '@prorobotech/openapi-k8s-toolkit' import { Link } from 'react-router-dom' import { useSelector } from 'react-redux' import type { RootState } from 'store/store' -import { ListInsideClusterAndNs } from 'components' +import { ListInsideClusterAndNs, NavigationContainer } from 'components' import { BaseTemplate } from 'templates' type TListInsideClustersAndNsPageProps = { @@ -28,9 +28,10 @@ export const ListInsideClustersAndNsPage: FC return ( - - - + + + + diff --git a/src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx b/src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx index 048902a..00d4cfd 100644 --- a/src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx +++ b/src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx @@ -1,11 +1,9 @@ import React, { FC } from 'react' -import { Col } from 'antd' -import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit' +import { ContentCard } from '@prorobotech/openapi-k8s-toolkit' import { useParams } from 'react-router-dom' -import { ListInsideCrdsByApiGroup, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components' +import { ListInsideCrdsByApiGroup, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components' import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix' import { BaseTemplate } from 'templates' -import { AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes' type TListInsideCrdByApiGroupPageProps = { forcedTheme?: 'light' | 'dark' @@ -18,25 +16,19 @@ export const ListInsideCrdByApiGroupPage: FC const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace, inside })}crd-by-api` return ( - - - + }> + + + - - - - - - {apiGroup && apiVersion && apiExtensionVersion && ( - - )} - - + {apiGroup && apiVersion && apiExtensionVersion && ( + + )} ) diff --git a/src/pages/ListProjectsPage/ListProjectsPage.tsx b/src/pages/ListProjectsPage/ListProjectsPage.tsx index b7c64c0..1f2f7d2 100644 --- a/src/pages/ListProjectsPage/ListProjectsPage.tsx +++ b/src/pages/ListProjectsPage/ListProjectsPage.tsx @@ -1,10 +1,8 @@ import React, { FC } from 'react' -import { Col } from 'antd' -import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit' -import { ListProjects, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components' +import { ContentCard } from '@prorobotech/openapi-k8s-toolkit' +import { ListProjects, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components' import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix' import { BaseTemplate } from 'templates' -import { AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes' type TListProjectsPageProps = { forcedTheme?: 'light' | 'dark' @@ -14,18 +12,12 @@ export const ListProjectsPage: FC = ({ forcedTheme }) => const sidebarId = `${getSidebarIdPrefix({})}projects-list` return ( - - - + }> + + + - - - - - - - - + ) diff --git a/src/pages/TableApiPage/TableApiPage.tsx b/src/pages/TableApiPage/TableApiPage.tsx index 51a3905..cf1107e 100644 --- a/src/pages/TableApiPage/TableApiPage.tsx +++ b/src/pages/TableApiPage/TableApiPage.tsx @@ -1,10 +1,9 @@ import React, { FC } from 'react' -import { Col } from 'antd' -import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit' +import { ContentCard } from '@prorobotech/openapi-k8s-toolkit' import { useParams, useSearchParams } from 'react-router-dom' import { useSelector } from 'react-redux' import type { RootState } from 'store/store' -import { TableNonCrdInfo, BackLink, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components' +import { TableNonCrdInfo, BackLink, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components' import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix' import { BaseTemplate } from 'templates' import { @@ -12,7 +11,6 @@ import { BASE_INSTANCES_VERSION, BASE_INSTANCES_RESOURCE_NAME, } from 'constants/customizationApiGroupAndVersion' -import { AFTER_BACKLINK_SPACE, AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes' type TTableApiPageProps = { forcedTheme?: 'light' | 'dark' @@ -48,37 +46,36 @@ export const TableApiPage: FC = ({ forcedTheme, inside }) => const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}api-table` return ( - - - - - + + } + > + + + + - - - - - - {typeName && apiGroup && apiVersion && ( - - )} - - + {typeName && apiGroup && apiVersion && ( + + )} ) diff --git a/src/pages/TableBuiltinPage/TableBuiltinPage.tsx b/src/pages/TableBuiltinPage/TableBuiltinPage.tsx index 3944fc5..50a37d7 100644 --- a/src/pages/TableBuiltinPage/TableBuiltinPage.tsx +++ b/src/pages/TableBuiltinPage/TableBuiltinPage.tsx @@ -1,10 +1,9 @@ import React, { FC } from 'react' -import { Col } from 'antd' -import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit' +import { ContentCard } from '@prorobotech/openapi-k8s-toolkit' import { useParams, useSearchParams } from 'react-router-dom' import { useSelector } from 'react-redux' import type { RootState } from 'store/store' -import { TableBuiltinInfo, BackLink, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components' +import { TableBuiltinInfo, BackLink, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components' import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix' import { BaseTemplate } from 'templates' import { @@ -12,7 +11,6 @@ import { BASE_INSTANCES_VERSION, BASE_INSTANCES_RESOURCE_NAME, } from 'constants/customizationApiGroupAndVersion' -import { AFTER_BACKLINK_SPACE, AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes' type TTableBuiltinPageProps = { forcedTheme?: 'light' | 'dark' @@ -40,32 +38,31 @@ export const TableBuiltinPage: FC = ({ forcedTheme, insi const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}builtin-table` return ( - - - - - + + } + > + + + + - - - - - - {typeName && ( - - )} - - + {typeName && ( + + )} ) diff --git a/src/pages/TableCrdPage/TableCrdPage.tsx b/src/pages/TableCrdPage/TableCrdPage.tsx index 013cc6c..3663a06 100644 --- a/src/pages/TableCrdPage/TableCrdPage.tsx +++ b/src/pages/TableCrdPage/TableCrdPage.tsx @@ -1,10 +1,9 @@ import React, { FC } from 'react' -import { Col } from 'antd' -import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit' +import { ContentCard } from '@prorobotech/openapi-k8s-toolkit' import { useParams } from 'react-router-dom' import { useSelector } from 'react-redux' import type { RootState } from 'store/store' -import { TableCrdInfo, BackLink, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components' +import { TableCrdInfo, BackLink, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components' import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix' import { BaseTemplate } from 'templates' import { @@ -12,7 +11,6 @@ import { BASE_INSTANCES_VERSION, BASE_INSTANCES_RESOURCE_NAME, } from 'constants/customizationApiGroupAndVersion' -import { AFTER_BACKLINK_SPACE, AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes' type TTableCrdPageProps = { forcedTheme?: 'light' | 'dark' @@ -39,37 +37,36 @@ export const TableCrdPage: FC = ({ forcedTheme, inside }) => const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}crd-table` return ( - - - - - + + } + > + + + + - - - - - - {crdName && apiGroup && apiVersion && apiExtensionVersion && ( - - )} - - + {crdName && apiGroup && apiVersion && apiExtensionVersion && ( + + )} ) diff --git a/src/templates/BaseTemplate/BaseTemplate.tsx b/src/templates/BaseTemplate/BaseTemplate.tsx index 1442f1f..fe89a26 100644 --- a/src/templates/BaseTemplate/BaseTemplate.tsx +++ b/src/templates/BaseTemplate/BaseTemplate.tsx @@ -1,5 +1,5 @@ import React, { FC, ReactNode, useEffect, useCallback } from 'react' -import { Layout, theme as antdtheme, Alert } from 'antd' +import { Layout, theme as antdtheme, Alert, Col } from 'antd' import { useClusterList } from '@prorobotech/openapi-k8s-toolkit' import { useSelector, useDispatch } from 'react-redux' import { useParams, useNavigate } from 'react-router-dom' @@ -7,7 +7,16 @@ import type { RootState } from 'store/store' import { setTheme } from 'store/theme/theme/theme' import { setCluster } from 'store/cluster/cluster/cluster' import { setClusterList } from 'store/clusterList/clusterList/clusterList' -import { DefaultLayout, DefaultColorProvider, Header, Footer } from 'components' +import { + DefaultLayout, + DefaultColorProvider, + Header, + HeaderSecond, + Footer, + Sidebar, + RowFlexGrow, + FlexCol, +} from 'components' import { Styled } from './styled' type TBaseTemplateProps = { @@ -15,9 +24,10 @@ type TBaseTemplateProps = { children?: ReactNode | undefined forcedTheme?: 'dark' | 'light' inside?: boolean + sidebar?: ReactNode } -export const BaseTemplate: FC = ({ children, withNoCluster, forcedTheme, inside }) => { +export const BaseTemplate: FC = ({ children, withNoCluster, forcedTheme, inside, sidebar }) => { const navigate = useNavigate() const { clusterName } = useParams() const { useToken } = antdtheme @@ -85,14 +95,22 @@ export const BaseTemplate: FC = ({ children, withNoCluster, -
- - {clusterListQuery.error && ( - - )} - {children} - -