From 2d769d85a9f58d27da67ee6e378ae746321e4ca5 Mon Sep 17 00:00:00 2001
From: typescreep <typescri@yandex.ru>
Date: Mon, 14 Jul 2025 14:08:47 +0300
Subject: [PATCH] remove hardcoded api table

---
 .../RedirectProjectList.tsx                   |  27 +++
 .../atoms/RedirectProjectList/index.ts        |   1 +
 src/components/atoms/index.ts                 |   1 +
 .../organisms/ListProjects/ListProjects.tsx   | 158 ------------------
 .../organisms/ListProjects/index.ts           |   1 -
 .../TableBuiltinInfo/TableBuiltinInfo.tsx     |  37 ++--
 .../molecules/ResourceInfo/ResourceInfo.tsx   |  36 ++--
 .../TableNonCrdInfo/TableNonCrdInfo.tsx       |  36 ++--
 src/components/organisms/index.ts             |   1 -
 .../ListProjectsPage/ListProjectsPage.tsx     |  17 +-
 src/pages/TableApiPage/TableApiPage.tsx       |  15 +-
 11 files changed, 118 insertions(+), 212 deletions(-)
 create mode 100644 src/components/atoms/RedirectProjectList/RedirectProjectList.tsx
 create mode 100644 src/components/atoms/RedirectProjectList/index.ts
 delete mode 100644 src/components/organisms/ListProjects/ListProjects.tsx
 delete mode 100644 src/components/organisms/ListProjects/index.ts

diff --git a/src/components/atoms/RedirectProjectList/RedirectProjectList.tsx b/src/components/atoms/RedirectProjectList/RedirectProjectList.tsx
new file mode 100644
index 0000000..40e8c38
--- /dev/null
+++ b/src/components/atoms/RedirectProjectList/RedirectProjectList.tsx
@@ -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
+}
diff --git a/src/components/atoms/RedirectProjectList/index.ts b/src/components/atoms/RedirectProjectList/index.ts
new file mode 100644
index 0000000..b876941
--- /dev/null
+++ b/src/components/atoms/RedirectProjectList/index.ts
@@ -0,0 +1 @@
+export * from './RedirectProjectList'
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
index dacf67b..c74ce34 100644
--- a/src/components/atoms/index.ts
+++ b/src/components/atoms/index.ts
@@ -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'
diff --git a/src/components/organisms/ListProjects/ListProjects.tsx b/src/components/organisms/ListProjects/ListProjects.tsx
deleted file mode 100644
index b5db932..0000000
--- a/src/components/organisms/ListProjects/ListProjects.tsx
+++ /dev/null
@@ -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)} />
-      )}
-    </>
-  )
-}
diff --git a/src/components/organisms/ListProjects/index.ts b/src/components/organisms/ListProjects/index.ts
deleted file mode 100644
index 3637cce..0000000
--- a/src/components/organisms/ListProjects/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ListProjects'
diff --git a/src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx b/src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx
index f053f62..8728239 100644
--- a/src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx
+++ b/src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx
@@ -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()
+          }}
+        />
       )}
     </>
   )
diff --git a/src/components/organisms/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx b/src/components/organisms/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx
index 9ca06e4..d9a36f6 100644
--- a/src/components/organisms/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx
+++ b/src/components/organisms/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx
@@ -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()
+          }}
+        />
       )}
     </>
   )
diff --git a/src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx b/src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx
index 6ee9a89..9d601ad 100644
--- a/src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx
+++ b/src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx
@@ -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()
+          }}
+        />
       )}
     </>
   )
diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts
index b6418d4..9cda41a 100644
--- a/src/components/organisms/index.ts
+++ b/src/components/organisms/index.ts
@@ -1,5 +1,4 @@
 export * from './ListClusters'
-export * from './ListProjects'
 export * from './ListInsideClusterAndNs'
 export * from './ListInsideAllResources'
 export * from './ListInsideCrdsByApiGroup'
diff --git a/src/pages/ListProjectsPage/ListProjectsPage.tsx b/src/pages/ListProjectsPage/ListProjectsPage.tsx
index 66f6b60..1b9c9e4 100644
--- a/src/pages/ListProjectsPage/ListProjectsPage.tsx
+++ b/src/pages/ListProjectsPage/ListProjectsPage.tsx
@@ -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>
   )
 }
diff --git a/src/pages/TableApiPage/TableApiPage.tsx b/src/pages/TableApiPage/TableApiPage.tsx
index a9325ef..e6e045b 100644
--- a/src/pages/TableApiPage/TableApiPage.tsx
+++ b/src/pages/TableApiPage/TableApiPage.tsx
@@ -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}`}