github-personal/openapi-ui
1
0
Fork 0
mirror of https://github.com/outbackdingo/openapi-ui.git synced 2026-01-28 02:19:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove hardcoded api table

Browse Source
This commit is contained in:
typescreep
2025-07-14 14:08:47 +03:00
parent 612a3c4366
commit 2d769d85a9
11 changed files with 118 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/atoms/RedirectProjectList/RedirectProjectList.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { FC, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { RootState } from 'store/store'
import {
BASE_PROJECTS_API_GROUP,
BASE_PROJECTS_VERSION,
BASE_PROJECTS_RESOURCE_NAME,
} from 'constants/customizationApiGroupAndVersion'
export const RedirectProjectList: FC = () => {
const { clusterName } = useParams()
const navigate = useNavigate()
const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
navigate(
`${baseprefix}/${clusterName}/api-table/${BASE_PROJECTS_API_GROUP}/${BASE_PROJECTS_VERSION}/${BASE_PROJECTS_RESOURCE_NAME}`,
)
useEffect(() => {
navigate(
`${baseprefix}/${clusterName}/api-table/${BASE_PROJECTS_API_GROUP}/${BASE_PROJECTS_VERSION}/${BASE_PROJECTS_RESOURCE_NAME}`,
)
}, [clusterName, baseprefix, navigate])
return null
}

1
src/components/atoms/RedirectProjectList/index.ts Normal file
View File

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

1
src/components/atoms/index.ts
View File

@@ -6,6 +6,7 @@ export * from './ThemeSelector'
export * from './FlexEnd'
export * from './BackLink'
export * from './FlexGrow'
export * from './RedirectProjectList'
export * from './RedirectProjectInfo'
export * from './RowFlexGrow'
export * from './FlexCol'

158
src/components/organisms/ListProjects/ListProjects.tsx
View File

@@ -1,158 +0,0 @@
import React, { FC, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { Spin, Alert, Button, Flex } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import {
EnrichedTableProvider,
usePermissions,
DeleteModal,
DeleteModalMany,
useApiResources,
} from '@prorobotech/openapi-k8s-toolkit'
import { useSelector } from 'react-redux'
import { RootState } from 'store/store'
import {
BASE_PROJECTS_API_GROUP,
BASE_PROJECTS_VERSION,
BASE_PROJECTS_RESOURCE_NAME,
} from 'constants/customizationApiGroupAndVersion'
import { FlexGrow } from 'components'
import { TABLE_PROPS } from 'constants/tableProps'
export const ListProjects: FC = () => {
const navigate = useNavigate()
const theme = useSelector((state: RootState) => state.openapiTheme.theme)
const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
const { clusterName } = useParams()
const cluster = clusterName || ''
const apiGroup = BASE_PROJECTS_API_GROUP
const apiVersion = BASE_PROJECTS_VERSION
const typeName = BASE_PROJECTS_RESOURCE_NAME
const isNamespaced = false
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<false | { name: string; endpoint: string }>(false)
const [isDeleteModalManyOpen, setIsDeleteModalManyOpen] = useState<false | { name: string; endpoint: string }[]>(
false,
)
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
const [selectedRowsData, setSelectedRowsData] = useState<{ name: string; endpoint: string }[]>([])
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: null,
})
const onDeleteHandle = (name: string, endpoint: string) => {
setIsDeleteModalOpen({ name, endpoint })
}
const clearSelected = () => {
setSelectedRowKeys([])
setSelectedRowsData([])
}
return (
<>
{isPending && <Spin />}
{error && <Alert message={`An error has occurred: ${error?.message} `} type="error" />}
{!error && data && (
<EnrichedTableProvider
customizationId={`default-/${apiGroup}/${apiVersion}/${typeName}`}
tableMappingsReplaceValues={{ clusterName }}
cluster={cluster}
theme={theme}
baseprefix={baseprefix}
dataItems={data.items}
dataForControls={{
cluster,
syntheticProject: undefined,
pathPrefix: 'forms/apis',
typeName,
apiVersion: `${apiGroup}/${apiVersion}`,
backlink: `${baseprefix}/clusters/${cluster}`,
deletePathPrefix: `/api/clusters/${cluster}/k8s/apis`,
onDeleteHandle,
permissions: {
canUpdate: isNamespaced ? true : updatePermission.data?.status.allowed,
canDelete: isNamespaced ? true : deletePermission.data?.status.allowed,
},
}}
selectData={{
selectedRowKeys,
onChange: (selectedRowKeys: React.Key[], selectedRowsData: { name: string; endpoint: string }[]) => {
setSelectedRowKeys(selectedRowKeys)
setSelectedRowsData(selectedRowsData)
},
}}
tableProps={TABLE_PROPS}
/>
)}
<FlexGrow />
<Flex justify="space-between">
<Button
type="primary"
onClick={() =>
navigate(
`${baseprefix}/${cluster}/forms/apis/${apiGroup}/${apiVersion}/${typeName}?backlink=${baseprefix}/clusters/${cluster}`,
)
}
loading={isNamespaced ? false : createPermission.isPending}
disabled={isNamespaced ? false : !createPermission.data?.status.allowed}
>
<PlusOutlined />
Add
</Button>
{selectedRowKeys.length > 0 && (
<Flex gap={8}>
<Button onClick={clearSelected}>Clear</Button>
<Button onClick={() => setIsDeleteModalManyOpen(selectedRowsData)} danger>
Delete
</Button>
</Flex>
)}
</Flex>
{isDeleteModalOpen && (
<DeleteModal
name={isDeleteModalOpen.name}
onClose={() => setIsDeleteModalOpen(false)}
endpoint={isDeleteModalOpen.endpoint}
/>
)}
{isDeleteModalManyOpen !== false && (
<DeleteModalMany data={isDeleteModalManyOpen} onClose={() => setIsDeleteModalManyOpen(false)} />
)}
</>
)
}

1
src/components/organisms/ListProjects/index.ts
View File

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

37
src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx
View File

@@ -173,6 +173,7 @@ export const TableBuiltinInfo: FC<TTableBuiltinInfoProps> = ({ namespace, typeNa
},
}}
tableProps={TABLE_PROPS}
// maxHeight={height - 65}
/>
)}
{/* {selectedRowKeys.length > 0 && (
@@ -209,26 +210,38 @@ export const TableBuiltinInfo: FC<TTableBuiltinInfoProps> = ({ namespace, typeNa
<PlusOutlined />
Add
</Button>
<Flex gap={16}>
<Button type="primary" onClick={clearSelected}>
<ClearOutlined />
Clear
</Button>
<Button type="primary" onClick={() => setIsDeleteModalManyOpen(selectedRowsData)}>
<MinusOutlined />
Delete
</Button>
</Flex>
{selectedRowKeys.length > 0 && (
<Flex gap={16}>
<Button type="primary" onClick={clearSelected}>
<ClearOutlined />
Clear
</Button>
<Button type="primary" onClick={() => setIsDeleteModalManyOpen(selectedRowsData)}>
<MinusOutlined />
Delete
</Button>
</Flex>
)}
</Flex>
{isDeleteModalOpen && (
<DeleteModal
name={isDeleteModalOpen.name}
onClose={() => setIsDeleteModalOpen(false)}
onClose={() => {
setIsDeleteModalOpen(false)
clearSelected()
}}
endpoint={isDeleteModalOpen.endpoint}
/>
)}
{isDeleteModalManyOpen !== false && (
<DeleteModalMany data={isDeleteModalManyOpen} onClose={() => setIsDeleteModalManyOpen(false)} />
<DeleteModalMany
data={isDeleteModalManyOpen}
onClose={() => {
setIsDeleteModalManyOpen(false)
clearSelected()
}}
/>
)}
</>
)

36
src/components/organisms/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx
View File

@@ -172,6 +172,7 @@ export const ResourceInfo: FC<TResourceInfoProps> = ({
},
}}
tableProps={TABLE_PROPS}
// maxHeight={height - 65}
/>
)}
{/* {selectedRowKeys.length > 0 && (
@@ -210,26 +211,37 @@ export const ResourceInfo: FC<TResourceInfoProps> = ({
<PlusOutlined />
Add
</Button>
<Flex gap={16}>
<Button type="primary" onClick={clearSelected}>
<ClearOutlined />
Clear
</Button>
<Button type="primary" onClick={() => setIsDeleteModalManyOpen(selectedRowsData)}>
<MinusOutlined />
Delete
</Button>
</Flex>
{selectedRowKeys.length > 0 && (
<Flex gap={16}>
<Button type="primary" onClick={clearSelected}>
<ClearOutlined />
Clear
</Button>
<Button type="primary" onClick={() => setIsDeleteModalManyOpen(selectedRowsData)}>
<MinusOutlined />
Delete
</Button>
</Flex>
)}
</Flex>
{isDeleteModalOpen && (
<DeleteModal
name={isDeleteModalOpen.name}
onClose={() => setIsDeleteModalOpen(false)}
onClose={() => {
setIsDeleteModalOpen(false)
clearSelected()
}}
endpoint={isDeleteModalOpen.endpoint}
/>
)}
{isDeleteModalManyOpen !== false && (
<DeleteModalMany data={isDeleteModalManyOpen} onClose={() => setIsDeleteModalManyOpen(false)} />
<DeleteModalMany
data={isDeleteModalManyOpen}
onClose={() => {
setIsDeleteModalManyOpen(false)
clearSelected()
}}
/>
)}
</>
)

36
src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx
View File

@@ -187,6 +187,7 @@ export const TableNonCrdInfo: FC<TTableNonCrdInfoProps> = ({
},
}}
tableProps={TABLE_PROPS}
// maxHeight={height - 65}
/>
)}
{/* {selectedRowKeys.length > 0 && (
@@ -225,26 +226,37 @@ export const TableNonCrdInfo: FC<TTableNonCrdInfoProps> = ({
<PlusOutlined />
Add
</Button>
<Flex gap={16}>
<Button type="primary" onClick={clearSelected}>
<ClearOutlined />
Clear
</Button>
<Button type="primary" onClick={() => setIsDeleteModalManyOpen(selectedRowsData)}>
<MinusOutlined />
Delete
</Button>
</Flex>
{selectedRowKeys.length > 0 && (
<Flex gap={16}>
<Button type="primary" onClick={clearSelected}>
<ClearOutlined />
Clear
</Button>
<Button type="primary" onClick={() => setIsDeleteModalManyOpen(selectedRowsData)}>
<MinusOutlined />
Delete
</Button>
</Flex>
)}
</Flex>
{isDeleteModalOpen && (
<DeleteModal
name={isDeleteModalOpen.name}
onClose={() => setIsDeleteModalOpen(false)}
onClose={() => {
setIsDeleteModalOpen(false)
clearSelected()
}}
endpoint={isDeleteModalOpen.endpoint}
/>
)}
{isDeleteModalManyOpen !== false && (
<DeleteModalMany data={isDeleteModalManyOpen} onClose={() => setIsDeleteModalManyOpen(false)} />
<DeleteModalMany
data={isDeleteModalManyOpen}
onClose={() => {
setIsDeleteModalManyOpen(false)
clearSelected()
}}
/>
)}
</>
)

1
src/components/organisms/index.ts
View File

@@ -1,5 +1,4 @@
export * from './ListClusters'
export * from './ListProjects'
export * from './ListInsideClusterAndNs'
export * from './ListInsideAllResources'
export * from './ListInsideCrdsByApiGroup'

17
src/pages/ListProjectsPage/ListProjectsPage.tsx
View File

@@ -1,8 +1,5 @@
import React, { FC } from 'react'
import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
import { ListProjects, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components'
import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix'
import { RedirectProjectList } from 'components'
import { BaseTemplate } from 'templates'
type TListProjectsPageProps = {
@@ -10,17 +7,9 @@ type TListProjectsPageProps = {
}
export const ListProjectsPage: FC<TListProjectsPageProps> = ({ forcedTheme }) => {
const sidebarId = `${getSidebarIdPrefix({})}projects-list`
const breadcrumbsId = `${getBreadcrumbsIdPrefix({})}projects-list`
return (
<BaseTemplate forcedTheme={forcedTheme} sidebar={<ManageableSidebar idToCompare={sidebarId} />}>
<NavigationContainer>
<ManageableBreadcrumbs idToCompare={breadcrumbsId} />
</NavigationContainer>
<ContentCard flexGrow={1} displayFlex flexFlow="column">
<ListProjects />
</ContentCard>
<BaseTemplate forcedTheme={forcedTheme}>
<RedirectProjectList />
</BaseTemplate>
)
}

15
src/pages/TableApiPage/TableApiPage.tsx
View File

@@ -11,6 +11,9 @@ import {
BASE_INSTANCES_API_GROUP,
BASE_INSTANCES_VERSION,
BASE_INSTANCES_RESOURCE_NAME,
BASE_PROJECTS_API_GROUP,
BASE_PROJECTS_VERSION,
BASE_PROJECTS_RESOURCE_NAME,
} from 'constants/customizationApiGroupAndVersion'
type TTableApiPageProps = {
@@ -51,6 +54,14 @@ export const TableApiPage: FC<TTableApiPageProps> = ({ forcedTheme, inside }) =>
inside,
})}api-table`
const isProjectList =
!namespace &&
apiGroup === BASE_PROJECTS_API_GROUP &&
apiVersion === BASE_PROJECTS_VERSION &&
typeName === BASE_PROJECTS_RESOURCE_NAME
const sidebarIdProjectList = `${getSidebarIdPrefix({})}projects-list`
const breadcrumbsIdProjectList = `${getBreadcrumbsIdPrefix({})}projects-list`
return (
<BaseTemplate
forcedTheme={forcedTheme}
@@ -59,13 +70,13 @@ export const TableApiPage: FC<TTableApiPageProps> = ({ forcedTheme, inside }) =>
<ManageableSidebar
instanceName={possibleInstance}
projectName={possibleProject}
idToCompare={sidebarId}
idToCompare={isProjectList ? sidebarIdProjectList : sidebarId}
currentTags={[`${apiGroup}/${apiVersion}/${typeName}`]}
/>
}
>
<NavigationContainer>
<ManageableBreadcrumbs idToCompare={breadcrumbsId} inside={inside} />
<ManageableBreadcrumbs idToCompare={isProjectList ? breadcrumbsIdProjectList : breadcrumbsId} inside={inside} />
<BackLink
to={namespace ? customBacklinkWithInside : clustererBacklink}
title={`${apiGroup}/${apiVersion}/${typeName}`}