diff --git a/package-lock.json b/package-lock.json index 2cf920b..a954b87 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.118", + "@prorobotech/openapi-k8s-toolkit": "^0.0.1-alpha.119", "@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.118", - "resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.118.tgz", - "integrity": "sha512-DGEug01G2lioiRHNmjSRecL0tOtBMuSOK3tV6EMwsOm8Cwl+HwQvEzEdpIhMU+r8/iUPQ1Q+ZGeoi5dYMmPWpA==", + "version": "0.0.1-alpha.119", + "resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.119.tgz", + "integrity": "sha512-e0AwwmMBAyjrpTPWMC9eSiyUimTzxskaNhAzs/+7DV7u0MqjJLOPehsko/AIpm/RkOoU6qOYjAHTjWZHV1hLhA==", "license": "MIT", "dependencies": { "@monaco-editor/react": "4.6.0", diff --git a/package.json b/package.json index 0e8d95a..cd91b3a 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.118", + "@prorobotech/openapi-k8s-toolkit": "0.0.1-alpha.119", "@readme/openapi-parser": "4.0.0", "@reduxjs/toolkit": "2.2.5", "@tanstack/react-query": "5.62.2", diff --git a/src/components/molecules/TableApiBuiltin/TableApiBuiltin.tsx b/src/components/molecules/TableApiBuiltin/TableApiBuiltin.tsx new file mode 100644 index 0000000..ccf0771 --- /dev/null +++ b/src/components/molecules/TableApiBuiltin/TableApiBuiltin.tsx @@ -0,0 +1,341 @@ +/* eslint-disable max-lines-per-function */ +import React, { FC, useState, useEffect } from 'react' +import { useLocation, useNavigate, useParams } from 'react-router-dom' +import { Spin, Alert, Button, Flex } from 'antd' +import { PlusOutlined, ClearOutlined, MinusOutlined } from '@ant-design/icons' +import { useSelector } from 'react-redux' +import { RootState } from 'store/store' +import { + EnrichedTableProvider, + usePermissions, + DeleteModal, + DeleteModalMany, + checkIfBuiltInInstanceNamespaceScoped, + checkIfApiInstanceNamespaceScoped, + useBuiltinResources, + useApiResources, +} from '@prorobotech/openapi-k8s-toolkit' +import { FlexGrow, PaddingContainer } from 'components' +import { TABLE_PROPS } from 'constants/tableProps' +import { + HEAD_FIRST_ROW, + HEAD_SECOND_ROW, + FOOTER_HEIGHT, + NAV_HEIGHT, + CONTENT_CARD_PADDING, + TABLE_ADD_BUTTON_HEIGHT, +} from 'constants/blocksSizes' +import { OverflowContainer } from './atoms' +import { getBackLinkToTable, getLinkToForm } from './utils' + +type TTableApiBuiltinProps = { + namespace?: string + resourceType: 'builtin' | 'api' + apiGroup?: string // api + apiVersion?: string // api + typeName: string + limit: string | null + inside?: boolean + customizationIdPrefix: string + searchMount?: boolean +} + +export const TableApiBuiltin: FC = ({ + namespace, + resourceType, + apiGroup, + apiVersion, + typeName, + limit, + inside, + customizationIdPrefix, + searchMount, +}) => { + const location = useLocation() + const navigate = useNavigate() + const params = useParams() + const cluster = useSelector((state: RootState) => state.cluster.cluster) + const theme = useSelector((state: RootState) => state.openapiTheme.theme) + const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix) + + const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false) + const [isDeleteModalManyOpen, setIsDeleteModalManyOpen] = useState( + false, + ) + const [selectedRowKeys, setSelectedRowKeys] = useState([]) + const [selectedRowsData, setSelectedRowsData] = useState<{ name: string; endpoint: string }[]>([]) + const [isNamespaced, setIsNamespaced] = useState() + + const [height, setHeight] = useState(0) + + useEffect(() => { + const height = + window.innerHeight - + HEAD_FIRST_ROW - + HEAD_SECOND_ROW - + NAV_HEIGHT - + CONTENT_CARD_PADDING * 2 - + FOOTER_HEIGHT - + TABLE_ADD_BUTTON_HEIGHT + setHeight(height) + + const handleResize = () => { + setHeight(height) + } + + window.addEventListener('resize', handleResize) + + return () => { + window.removeEventListener('resize', handleResize) + } + }, []) + + useEffect(() => { + if (resourceType === 'builtin') { + checkIfBuiltInInstanceNamespaceScoped({ + typeName, + clusterName: cluster, + }).then(({ isNamespaceScoped }) => { + if (isNamespaceScoped) { + setIsNamespaced(isNamespaceScoped) + } + }) + } + if (resourceType === 'api' && apiGroup && apiVersion) { + checkIfApiInstanceNamespaceScoped({ + apiGroup, + apiVersion, + typeName, + clusterName: cluster, + }).then(({ isNamespaceScoped }) => { + if (isNamespaceScoped) { + setIsNamespaced(true) + } + }) + } + }, [resourceType, cluster, typeName, apiGroup, apiVersion]) + + const createPermission = usePermissions({ + apiGroup: apiGroup || '', + typeName, + namespace: '', + clusterName: cluster, + verb: 'create', + refetchInterval: false, + }) + + const updatePermission = usePermissions({ + apiGroup: apiGroup || '', + typeName, + namespace: '', + clusterName: cluster, + verb: 'update', + refetchInterval: false, + }) + + const deletePermission = usePermissions({ + apiGroup: apiGroup || '', + typeName, + namespace: '', + clusterName: cluster, + verb: 'delete', + refetchInterval: false, + }) + + const { + isPending: isPendingBuiltin, + error: errorBuiltin, + data: dataBuiltin, + } = useBuiltinResources({ + clusterName: cluster, + namespace, + typeName, + limit, + isEnabled: resourceType === 'builtin', + }) + + const { + isPending: isPendingApi, + error: errorApi, + data: dataApi, + } = useApiResources({ + clusterName: cluster, + namespace, + apiGroup: apiGroup || '', + apiVersion: apiVersion || '', + typeName, + limit, + isEnabled: resourceType === 'api' && !!apiGroup && !!apiVersion, + }) + + const onDeleteHandle = (name: string, endpoint: string) => { + setIsDeleteModalOpen({ name, endpoint }) + } + + const clearSelected = () => { + setSelectedRowKeys([]) + setSelectedRowsData([]) + } + + const replaceValuesPartsOfUrls = location.pathname + .split('/') + .reduce>((acc, value, index) => { + acc[index.toString()] = value + return acc + }, {}) + + return ( + <> + {((resourceType === 'builtin' && isPendingBuiltin) || (resourceType === 'api' && isPendingApi)) && } + {resourceType === 'builtin' && errorBuiltin && ( + + )} + {resourceType === 'api' && errorApi && ( + + )} + + {!errorBuiltin && + !errorApi && + ((resourceType === 'builtin' && dataBuiltin) || (resourceType === 'api' && dataApi)) && ( + { + setSelectedRowKeys(selectedRowKeys) + setSelectedRowsData(selectedRowsData) + }, + }} + tableProps={{ ...TABLE_PROPS, disablePagination: !searchMount }} + // maxHeight={height - 65} + /> + )} + {/* {selectedRowKeys.length > 0 && ( + + + + + + + )} */} + + {!searchMount && ( + <> + + + + + {selectedRowKeys.length > 0 && ( + + + + + )} + + + + )} + {isDeleteModalOpen && ( + { + setIsDeleteModalOpen(false) + clearSelected() + }} + endpoint={isDeleteModalOpen.endpoint} + /> + )} + {isDeleteModalManyOpen !== false && ( + { + setIsDeleteModalManyOpen(false) + clearSelected() + }} + /> + )} + + ) +} diff --git a/src/components/molecules/TableApiBuiltin/atoms/OverflowContainer/OverflowContainer.tsx b/src/components/molecules/TableApiBuiltin/atoms/OverflowContainer/OverflowContainer.tsx new file mode 100644 index 0000000..fad87b6 --- /dev/null +++ b/src/components/molecules/TableApiBuiltin/atoms/OverflowContainer/OverflowContainer.tsx @@ -0,0 +1,17 @@ +/* eslint-disable max-lines-per-function */ +import React, { FC, PropsWithChildren } from 'react' +import { OverflowMaxHeightContainer } from 'components' + +type TOverflowContainerProps = PropsWithChildren<{ + height: number + searchMount?: boolean +}> + +export const OverflowContainer: FC = ({ height, searchMount, children }) => { + if (searchMount) { + // eslint-disable-next-line react/jsx-no-useless-fragment + return <>{children} + } + + return {children} +} diff --git a/src/components/molecules/TableApiBuiltin/atoms/OverflowContainer/index.ts b/src/components/molecules/TableApiBuiltin/atoms/OverflowContainer/index.ts new file mode 100644 index 0000000..95e3c0d --- /dev/null +++ b/src/components/molecules/TableApiBuiltin/atoms/OverflowContainer/index.ts @@ -0,0 +1 @@ +export * from './OverflowContainer' diff --git a/src/components/molecules/TableApiBuiltin/atoms/index.ts b/src/components/molecules/TableApiBuiltin/atoms/index.ts new file mode 100644 index 0000000..95e3c0d --- /dev/null +++ b/src/components/molecules/TableApiBuiltin/atoms/index.ts @@ -0,0 +1 @@ +export * from './OverflowContainer' diff --git a/src/components/molecules/TableApiBuiltin/index.ts b/src/components/molecules/TableApiBuiltin/index.ts new file mode 100644 index 0000000..50c1f37 --- /dev/null +++ b/src/components/molecules/TableApiBuiltin/index.ts @@ -0,0 +1 @@ +export * from './TableApiBuiltin' diff --git a/src/components/molecules/TableApiBuiltin/utils.ts b/src/components/molecules/TableApiBuiltin/utils.ts new file mode 100644 index 0000000..a7b2340 --- /dev/null +++ b/src/components/molecules/TableApiBuiltin/utils.ts @@ -0,0 +1,136 @@ +export const getBackLinkToBuiltinTable = ({ + cluster, + baseprefix, + namespace, + syntheticProject, + typeName, + inside, +}: { + cluster: string + baseprefix?: string + namespace?: string + syntheticProject?: string + typeName: string + inside?: boolean +}): string => { + const root = `${baseprefix}${inside ? '/inside' : ''}/${cluster}` + const mainRoute = `${root}${namespace ? `/${namespace}` : ''}${syntheticProject ? `/${syntheticProject}` : ''}` + + return `${mainRoute}/builtin-table/${typeName}` +} + +export const getBackLinkToApiTable = ({ + cluster, + baseprefix, + namespace, + syntheticProject, + apiGroup, + apiVersion, + typeName, + inside, +}: { + cluster: string + baseprefix?: string + namespace?: string + syntheticProject?: string + apiGroup?: string // api + apiVersion?: string // api + typeName: string + inside?: boolean +}): string => { + const root = `${baseprefix}${inside ? '/inside' : ''}/${cluster}` + const mainRoute = `${root}${namespace ? `/${namespace}` : ''}${syntheticProject ? `/${syntheticProject}` : ''}` + + return `${mainRoute}/api-table/${apiGroup}/${apiVersion}/${typeName}` +} + +export const getBackLinkToTable = ({ + resourceType, + ...rest +}: { + resourceType: 'builtin' | 'api' + cluster: string + baseprefix?: string + namespace?: string + syntheticProject?: string + apiGroup?: string // api + apiVersion?: string // api + typeName: string + inside?: boolean +}): string => { + return resourceType === 'builtin' ? getBackLinkToBuiltinTable({ ...rest }) : getBackLinkToApiTable({ ...rest }) +} + +export const getLinkToBuiltinForm = ({ + cluster, + baseprefix, + namespace, + syntheticProject, + typeName, + inside, +}: { + cluster: string + baseprefix?: string + namespace?: string + syntheticProject?: string + typeName: string + inside?: boolean +}): string => { + const root = `${baseprefix}${inside ? '/inside' : ''}/${cluster}` + const mainRoute = `${root}${namespace ? `/${namespace}` : ''}${syntheticProject ? `/${syntheticProject}` : ''}` + const backlink = getBackLinkToBuiltinTable({ cluster, baseprefix, namespace, syntheticProject, typeName, inside }) + + return `${mainRoute}/forms/builtin/v1/${typeName}?backlink=${backlink}` +} + +export const getLinkToApiForm = ({ + cluster, + baseprefix, + namespace, + syntheticProject, + apiGroup, + apiVersion, + typeName, + inside, +}: { + cluster: string + baseprefix?: string + namespace?: string + syntheticProject?: string + apiGroup?: string // api + apiVersion?: string // api + typeName: string + inside?: boolean +}): string => { + const root = `${baseprefix}${inside ? '/inside' : ''}/${cluster}` + const mainRoute = `${root}${namespace ? `/${namespace}` : ''}${syntheticProject ? `/${syntheticProject}` : ''}` + const backlink = getBackLinkToApiTable({ + cluster, + baseprefix, + namespace, + syntheticProject, + apiGroup, + apiVersion, + typeName, + inside, + }) + + return `${mainRoute}/forms/apis/${apiGroup}/${apiVersion}/${typeName}?backlink=${backlink}` +} + +export const getLinkToForm = ({ + resourceType, + ...rest +}: { + resourceType: 'builtin' | 'api' + cluster: string + baseprefix?: string + namespace?: string + syntheticProject?: string + apiGroup?: string // api + apiVersion?: string // api + typeName: string + inside?: boolean +}): string => { + return resourceType === 'builtin' ? getLinkToBuiltinForm({ ...rest }) : getLinkToApiForm({ ...rest }) +} diff --git a/src/components/organisms/TableCrdInfo/TableCrdInfo.tsx b/src/components/molecules/TableCrdInfo/TableCrdInfo.tsx similarity index 100% rename from src/components/organisms/TableCrdInfo/TableCrdInfo.tsx rename to src/components/molecules/TableCrdInfo/TableCrdInfo.tsx diff --git a/src/components/organisms/TableCrdInfo/index.ts b/src/components/molecules/TableCrdInfo/index.ts similarity index 100% rename from src/components/organisms/TableCrdInfo/index.ts rename to src/components/molecules/TableCrdInfo/index.ts diff --git a/src/components/organisms/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx b/src/components/molecules/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx similarity index 100% rename from src/components/organisms/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx rename to src/components/molecules/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx diff --git a/src/components/organisms/TableCrdInfo/molecules/ResourceInfo/index.ts b/src/components/molecules/TableCrdInfo/molecules/ResourceInfo/index.ts similarity index 100% rename from src/components/organisms/TableCrdInfo/molecules/ResourceInfo/index.ts rename to src/components/molecules/TableCrdInfo/molecules/ResourceInfo/index.ts diff --git a/src/components/organisms/TableCrdInfo/molecules/index.ts b/src/components/molecules/TableCrdInfo/molecules/index.ts similarity index 100% rename from src/components/organisms/TableCrdInfo/molecules/index.ts rename to src/components/molecules/TableCrdInfo/molecules/index.ts diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts index 7379a09..724ce03 100644 --- a/src/components/molecules/index.ts +++ b/src/components/molecules/index.ts @@ -1,3 +1,5 @@ export * from './BlackholeForm' export * from './ManageableBreadcrumbs' export * from './ManageableSidebar' +export * from './TableCrdInfo' +export * from './TableApiBuiltin' diff --git a/src/components/organisms/Search/Search.tsx b/src/components/organisms/Search/Search.tsx index e0f8f3d..064a124 100644 --- a/src/components/organisms/Search/Search.tsx +++ b/src/components/organisms/Search/Search.tsx @@ -1,11 +1,24 @@ /* eslint-disable max-lines-per-function */ -import React, { FC } from 'react' -import { Search as PackageSearch } from '@prorobotech/openapi-k8s-toolkit' +import React, { FC, Fragment, useState } from 'react' +import { Search as PackageSearch, Spacer } from '@prorobotech/openapi-k8s-toolkit' import { useSelector } from 'react-redux' import { RootState } from 'store/store' +import { SearchEntry } from './molecules' export const Search: FC = () => { const cluster = useSelector((state: RootState) => state.cluster.cluster) - return + const [currentSearch, setCurrentSearch] = useState() + + return ( + <> + setCurrentSearch(value)} /> + {currentSearch?.map(item => ( + + + + + ))} + + ) } diff --git a/src/components/organisms/Search/molecules/SearchEntry/SearchEntry.tsx b/src/components/organisms/Search/molecules/SearchEntry/SearchEntry.tsx new file mode 100644 index 0000000..677e95e --- /dev/null +++ b/src/components/organisms/Search/molecules/SearchEntry/SearchEntry.tsx @@ -0,0 +1,45 @@ +import React, { FC } from 'react' +import { useParams, useSearchParams } from 'react-router-dom' +import { Typography } from 'antd' +import { TableApiBuiltin } from 'components' +import { getTableCustomizationIdPrefix } from 'utils/getTableCustomizationIdPrefix' +import { BASE_USE_NAMESPACE_NAV } from 'constants/customizationApiGroupAndVersion' + +type TSearchEntryProps = { + resource: string +} + +export const SearchEntry: FC = ({ resource }) => { + const { namespace, syntheticProject } = useParams() + const [searchParams] = useSearchParams() + + const [apiGroup, apiVersion, typeName] = resource.split('~') + + const tableCustomizationIdPrefix = getTableCustomizationIdPrefix({ + instance: !!syntheticProject, + project: BASE_USE_NAMESPACE_NAV !== 'true' && !!namespace, + namespace: !!namespace, + search: true, + }) + + return ( +
+ + {apiGroup.length > 0 ? `${apiGroup}/${apiVersion}/` : 'v1/'} + {typeName} + + {typeName && apiGroup && apiVersion && ( + 0 ? apiGroup : undefined} + apiVersion={apiGroup.length > 0 ? apiVersion : undefined} + typeName={typeName} + limit={searchParams.get('limit')} + customizationIdPrefix={tableCustomizationIdPrefix} + searchMount + /> + )} +
+ ) +} diff --git a/src/components/organisms/Search/molecules/SearchEntry/index.ts b/src/components/organisms/Search/molecules/SearchEntry/index.ts new file mode 100644 index 0000000..366d15c --- /dev/null +++ b/src/components/organisms/Search/molecules/SearchEntry/index.ts @@ -0,0 +1 @@ +export * from './SearchEntry' diff --git a/src/components/organisms/Search/molecules/index.ts b/src/components/organisms/Search/molecules/index.ts new file mode 100644 index 0000000..366d15c --- /dev/null +++ b/src/components/organisms/Search/molecules/index.ts @@ -0,0 +1 @@ +export * from './SearchEntry' diff --git a/src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx b/src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx deleted file mode 100644 index 4302b6b..0000000 --- a/src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx +++ /dev/null @@ -1,267 +0,0 @@ -import React, { FC, useState, useEffect } from 'react' -import { useLocation, useNavigate, useParams } from 'react-router-dom' -import { Spin, Alert, Button, Flex } from 'antd' -import { PlusOutlined, ClearOutlined, MinusOutlined } from '@ant-design/icons' -import { useSelector } from 'react-redux' -import { RootState } from 'store/store' -import { - EnrichedTableProvider, - usePermissions, - DeleteModal, - DeleteModalMany, - checkIfBuiltInInstanceNamespaceScoped, - useBuiltinResources, -} from '@prorobotech/openapi-k8s-toolkit' -import { FlexGrow, OverflowMaxHeightContainer, PaddingContainer } from 'components' -import { TABLE_PROPS } from 'constants/tableProps' -import { - HEAD_FIRST_ROW, - HEAD_SECOND_ROW, - FOOTER_HEIGHT, - NAV_HEIGHT, - CONTENT_CARD_PADDING, - TABLE_ADD_BUTTON_HEIGHT, -} from 'constants/blocksSizes' - -type TTableBuiltinInfoProps = { - namespace?: string - typeName: string - limit: string | null - inside?: boolean - customizationIdPrefix: string -} - -export const TableBuiltinInfo: FC = ({ - namespace, - typeName, - limit, - inside, - customizationIdPrefix, -}) => { - const location = useLocation() - const navigate = useNavigate() - const params = useParams() - const cluster = useSelector((state: RootState) => state.cluster.cluster) - const theme = useSelector((state: RootState) => state.openapiTheme.theme) - const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix) - - const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false) - const [isDeleteModalManyOpen, setIsDeleteModalManyOpen] = useState( - false, - ) - const [selectedRowKeys, setSelectedRowKeys] = useState([]) - const [selectedRowsData, setSelectedRowsData] = useState<{ name: string; endpoint: string }[]>([]) - const [isNamespaced, setIsNamespaced] = useState() - - const [height, setHeight] = useState(0) - - useEffect(() => { - const height = - window.innerHeight - - HEAD_FIRST_ROW - - HEAD_SECOND_ROW - - NAV_HEIGHT - - CONTENT_CARD_PADDING * 2 - - FOOTER_HEIGHT - - TABLE_ADD_BUTTON_HEIGHT - setHeight(height) - - const handleResize = () => { - setHeight(height) - } - - window.addEventListener('resize', handleResize) - - return () => { - window.removeEventListener('resize', handleResize) - } - }, []) - - const createPermission = usePermissions({ - apiGroup: '', - typeName, - namespace: '', - clusterName: cluster, - verb: 'create', - refetchInterval: false, - }) - - const updatePermission = usePermissions({ - apiGroup: '', - typeName, - namespace: '', - clusterName: cluster, - verb: 'update', - refetchInterval: false, - }) - - const deletePermission = usePermissions({ - apiGroup: '', - typeName, - namespace: '', - clusterName: cluster, - verb: 'delete', - refetchInterval: false, - }) - - useEffect(() => { - checkIfBuiltInInstanceNamespaceScoped({ - typeName, - clusterName: cluster, - }).then(({ isNamespaceScoped }) => { - if (isNamespaceScoped) { - setIsNamespaced(isNamespaceScoped) - } - }) - }, [cluster, typeName]) - - const { isPending, error, data } = useBuiltinResources({ - clusterName: cluster, - namespace, - typeName, - limit, - }) - - const onDeleteHandle = (name: string, endpoint: string) => { - setIsDeleteModalOpen({ name, endpoint }) - } - - const clearSelected = () => { - setSelectedRowKeys([]) - setSelectedRowsData([]) - } - - const replaceValuesPartsOfUrls = location.pathname - .split('/') - .reduce>((acc, value, index) => { - acc[index.toString()] = value - return acc - }, {}) - - return ( - <> - {isPending && } - {error && } - - {!error && data && ( - { - setSelectedRowKeys(selectedRowKeys) - setSelectedRowsData(selectedRowsData) - }, - }} - tableProps={{ ...TABLE_PROPS, disablePagination: true }} - // maxHeight={height - 65} - /> - )} - {/* {selectedRowKeys.length > 0 && ( - - - - - - - )} */} - - - - - - - {selectedRowKeys.length > 0 && ( - - - - - )} - - - {isDeleteModalOpen && ( - { - setIsDeleteModalOpen(false) - clearSelected() - }} - endpoint={isDeleteModalOpen.endpoint} - /> - )} - {isDeleteModalManyOpen !== false && ( - { - setIsDeleteModalManyOpen(false) - clearSelected() - }} - /> - )} - - ) -} diff --git a/src/components/organisms/TableBuiltinInfo/index.ts b/src/components/organisms/TableBuiltinInfo/index.ts deleted file mode 100644 index 984b966..0000000 --- a/src/components/organisms/TableBuiltinInfo/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './TableBuiltinInfo' diff --git a/src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx b/src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx deleted file mode 100644 index cfc3c41..0000000 --- a/src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx +++ /dev/null @@ -1,277 +0,0 @@ -/* eslint-disable max-lines-per-function */ -import React, { FC, useState, useEffect } from 'react' -import { useLocation, useNavigate, useParams } from 'react-router-dom' -import { Spin, Alert, Button, Flex } from 'antd' -import { PlusOutlined, ClearOutlined, MinusOutlined } from '@ant-design/icons' -import { useSelector } from 'react-redux' -import { RootState } from 'store/store' -import { - EnrichedTableProvider, - usePermissions, - DeleteModal, - DeleteModalMany, - checkIfApiInstanceNamespaceScoped, - useApiResources, -} from '@prorobotech/openapi-k8s-toolkit' -import { FlexGrow, OverflowMaxHeightContainer, PaddingContainer } from 'components' -import { TABLE_PROPS } from 'constants/tableProps' -import { - HEAD_FIRST_ROW, - HEAD_SECOND_ROW, - FOOTER_HEIGHT, - NAV_HEIGHT, - CONTENT_CARD_PADDING, - TABLE_ADD_BUTTON_HEIGHT, -} from 'constants/blocksSizes' - -type TTableNonCrdInfoProps = { - namespace?: string - apiGroup: string - apiVersion: string - typeName: string - limit: string | null - inside?: boolean - customizationIdPrefix: string -} - -export const TableNonCrdInfo: FC = ({ - namespace, - apiGroup, - apiVersion, - typeName, - limit, - inside, - customizationIdPrefix, -}) => { - const location = useLocation() - const navigate = useNavigate() - const params = useParams() - const cluster = useSelector((state: RootState) => state.cluster.cluster) - const theme = useSelector((state: RootState) => state.openapiTheme.theme) - const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix) - - const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false) - const [isDeleteModalManyOpen, setIsDeleteModalManyOpen] = useState( - false, - ) - const [selectedRowKeys, setSelectedRowKeys] = useState([]) - const [selectedRowsData, setSelectedRowsData] = useState<{ name: string; endpoint: string }[]>([]) - const [isNamespaced, setIsNamespaced] = useState() - - const [height, setHeight] = useState(0) - - useEffect(() => { - const height = - window.innerHeight - - HEAD_FIRST_ROW - - HEAD_SECOND_ROW - - NAV_HEIGHT - - CONTENT_CARD_PADDING * 2 - - FOOTER_HEIGHT - - TABLE_ADD_BUTTON_HEIGHT - setHeight(height) - - const handleResize = () => { - setHeight(height) - } - - window.addEventListener('resize', handleResize) - - return () => { - window.removeEventListener('resize', handleResize) - } - }, []) - - useEffect(() => { - checkIfApiInstanceNamespaceScoped({ - apiGroup, - apiVersion, - typeName, - clusterName: cluster, - }).then(({ isNamespaceScoped }) => { - if (isNamespaceScoped) { - setIsNamespaced(true) - } - }) - }, [cluster, typeName, apiGroup, apiVersion]) - - const createPermission = usePermissions({ - apiGroup, - typeName, - namespace: '', - clusterName: cluster, - verb: 'create', - refetchInterval: false, - }) - - const updatePermission = usePermissions({ - apiGroup, - typeName, - namespace: '', - clusterName: cluster, - verb: 'update', - refetchInterval: false, - }) - - const deletePermission = usePermissions({ - apiGroup, - typeName, - namespace: '', - clusterName: cluster, - verb: 'delete', - refetchInterval: false, - }) - - const { isPending, error, data } = useApiResources({ - clusterName: cluster, - namespace, - apiGroup, - apiVersion, - typeName, - limit, - }) - - const onDeleteHandle = (name: string, endpoint: string) => { - setIsDeleteModalOpen({ name, endpoint }) - } - - const clearSelected = () => { - setSelectedRowKeys([]) - setSelectedRowsData([]) - } - - const replaceValuesPartsOfUrls = location.pathname - .split('/') - .reduce>((acc, value, index) => { - acc[index.toString()] = value - return acc - }, {}) - - return ( - <> - {isPending && } - {error && } - - {!error && data && ( - { - setSelectedRowKeys(selectedRowKeys) - setSelectedRowsData(selectedRowsData) - }, - }} - tableProps={{ ...TABLE_PROPS, disablePagination: true }} - // maxHeight={height - 65} - /> - )} - {/* {selectedRowKeys.length > 0 && ( - - - - - - - )} */} - - - - - - {selectedRowKeys.length > 0 && ( - - - - - )} - - - {isDeleteModalOpen && ( - { - setIsDeleteModalOpen(false) - clearSelected() - }} - endpoint={isDeleteModalOpen.endpoint} - /> - )} - {isDeleteModalManyOpen !== false && ( - { - setIsDeleteModalManyOpen(false) - clearSelected() - }} - /> - )} - - ) -} diff --git a/src/components/organisms/TableNonCrdInfo/index.ts b/src/components/organisms/TableNonCrdInfo/index.ts deleted file mode 100644 index 0e95b4b..0000000 --- a/src/components/organisms/TableNonCrdInfo/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './TableNonCrdInfo' diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts index 6459370..e79f7bc 100644 --- a/src/components/organisms/index.ts +++ b/src/components/organisms/index.ts @@ -3,9 +3,6 @@ export * from './ListInsideClusterAndNs' export * from './ListInsideAllResources' export * from './ListInsideCrdsByApiGroup' export * from './ListInsideApisByApiGroup' -export * from './TableCrdInfo' -export * from './TableNonCrdInfo' -export * from './TableBuiltinInfo' export * from './Forms' export * from './Factory' export * from './Header' diff --git a/src/pages/TableApiPage/TableApiPage.tsx b/src/pages/TableApiPage/TableApiPage.tsx index 5dcd40f..accb7e6 100644 --- a/src/pages/TableApiPage/TableApiPage.tsx +++ b/src/pages/TableApiPage/TableApiPage.tsx @@ -3,7 +3,7 @@ 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, NavigationContainer } from 'components' +import { TableApiBuiltin, BackLink, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components' import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix' import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix' import { getTableCustomizationIdPrefix } from 'utils/getTableCustomizationIdPrefix' @@ -79,7 +79,8 @@ export const TableApiPage: FC = ({ forcedTheme, inside }) => {typeName && apiGroup && apiVersion && ( - = ({ forcedTheme, insi {typeName && ( - { - let result = inside ? 'inside-' : 'stock-' + let result: string + + if (inside) { + result = 'inside-' + } else if (search) { + result = 'search-' + } else { + result = 'stock-' + } if (instance) { result += 'instance-'