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

tableprops

Browse Source
This commit is contained in:
typescreep
2025-06-02 15:29:16 +03:00
parent bf630e5551
commit ff38abe4dd
16 changed files with 71 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@@ -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.18",
"@prorobotech/openapi-k8s-toolkit": "^0.0.1-alpha.19",
"@readme/openapi-parser": "4.0.0",
"@reduxjs/toolkit": "2.2.5",
"@tanstack/react-query": "5.62.2",
@@ -2752,9 +2752,9 @@
}
},
"node_modules/@prorobotech/openapi-k8s-toolkit": {
"version": "0.0.1-alpha.18",
"resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.18.tgz",
"integrity": "sha512-Pe+2fjJqB4C/3dJ3tzJinswTQobmpWNG7Nl+riMIfI1krQOixQQ3NC6A9U1XYUXIdeXa40J9AdJZK3ADlCWE5g==",
"version": "0.0.1-alpha.19",
"resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.19.tgz",
"integrity": "sha512-xg6lVLbzbTdXNts/j6QbgRKc0TxtMxysiTkTWPV6NOHNvGbU8nwndCAuY+xCnLCktE4sCIQ/0oK+1uUPifF4lA==",
"license": "MIT",
"dependencies": {
"@monaco-editor/react": "4.6.0",

2
package.json
View File

@@ -17,7 +17,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.18",
"@prorobotech/openapi-k8s-toolkit": "0.0.1-alpha.19",
"@readme/openapi-parser": "4.0.0",
"@reduxjs/toolkit": "2.2.5",
"@tanstack/react-query": "5.62.2",

8
src/App.tsx
View File

@@ -151,6 +151,14 @@ export const App: FC<TAppProps> = ({ isFederation, forcedTheme }) => {
colorPrimary: theme === 'dark' ? '#fff' : '#000',
primaryColor: theme === 'dark' ? '#000' : '#fff',
},
Tooltip: {
colorBgSpotlight: colors?.colorBgLayout,
colorText: colors?.colorText,
colorTextLightSolid: colors?.colorText,
},
Table: {
headerBg: colors?.colorBgLayout,
},
},
}}
>

15
src/components/atoms/Icons/DeleteIcon.tsx Normal file
View File

@@ -0,0 +1,15 @@
import React, { FC } from 'react'
import { theme } from 'antd'
export const DeleteIcon: FC = () => {
const { token } = theme.useToken()
return (
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M17.25 3.5H14.25V1.625C14.25 0.797656 13.5773 0.125 12.75 0.125H5.25C4.42266 0.125 3.75 0.797656 3.75 1.625V3.5H0.75C0.335156 3.5 0 3.83516 0 4.25V5C0 5.10313 0.084375 5.1875 0.1875 5.1875H1.60312L2.18203 17.4453C2.21953 18.2445 2.88047 18.875 3.67969 18.875H14.3203C15.1219 18.875 15.7805 18.2469 15.818 17.4453L16.3969 5.1875H17.8125C17.9156 5.1875 18 5.10313 18 5V4.25C18 3.83516 17.6648 3.5 17.25 3.5ZM12.5625 3.5H5.4375V1.8125H12.5625V3.5Z"
fill={token.colorText}
/>
</svg>
)
}

15
src/components/atoms/Icons/EditIcon.tsx Normal file
View File

@@ -0,0 +1,15 @@
import React, { FC } from 'react'
import { theme } from 'antd'
export const EditIcon: FC = () => {
const { token } = theme.useToken()
return (
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M17.28 16.79H0.72C0.32175 16.79 0 17.1117 0 17.51V18.32C0 18.419 0.081 18.5 0.18 18.5H17.82C17.919 18.5 18 18.419 18 18.32V17.51C18 17.1117 17.6783 16.79 17.28 16.79ZM3.27825 14.9C3.32325 14.9 3.36825 14.8955 3.41325 14.8888L7.19775 14.225C7.24275 14.216 7.2855 14.1958 7.317 14.162L16.8547 4.62425C16.8756 4.60343 16.8922 4.57871 16.9034 4.55149C16.9147 4.52427 16.9205 4.49509 16.9205 4.46562C16.9205 4.43616 16.9147 4.40698 16.9034 4.37976C16.8922 4.35254 16.8756 4.32782 16.8547 4.307L13.1153 0.56525C13.0725 0.5225 13.0163 0.5 12.9555 0.5C12.8948 0.5 12.8385 0.5225 12.7958 0.56525L3.258 10.103C3.22425 10.1367 3.204 10.1772 3.195 10.2222L2.53125 14.0067C2.50936 14.1273 2.51718 14.2513 2.55404 14.3682C2.59089 14.485 2.65566 14.5911 2.74275 14.6772C2.89125 14.8212 3.078 14.9 3.27825 14.9Z"
fill={token.colorText}
/>
</svg>
)
}

2
src/components/atoms/Icons/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * from './DeleteIcon'
export * from './EditIcon'

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

@@ -6,3 +6,4 @@ export * from './FlexEnd'
export * from './BackLink'
export * from './ContentCard'
export * from './FlexGrow'
export * from './Icons'

2
src/components/organisms/Footer/styled.ts
View File

@@ -1,7 +1,7 @@
import styled from 'styled-components'
const Container = styled.div`
height: 70px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;

4
src/components/organisms/Header/organisms/Logo/Logo.tsx
View File

@@ -8,7 +8,6 @@ import { Styled } from './styled'
export const Logo: FC = () => {
const navigate = useNavigate()
const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
const theme = useSelector((state: RootState) => state.openapiTheme.theme)
const { token } = antdtheme.useToken()
return (
@@ -17,8 +16,7 @@ export const Logo: FC = () => {
<svg width="26" height="31" viewBox="0 0 26 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18.7467 19.3641C18.7467 20.808 17.6069 21.9784 16.2007 21.9784H8.82597C7.71912 21.9784 6.8217 21.057 6.8217 19.9204C6.8217 18.7837 7.71912 17.8623 8.82597 17.8623C8.83507 17.8623 8.84412 17.8626 8.85317 17.8627C9.01052 16.8873 9.83572 16.1435 10.8302 16.1435C10.9381 16.1435 11.0441 16.1524 11.1474 16.1692C11.6261 15.1372 12.6512 14.4239 13.8386 14.4239C15.2587 14.4239 16.4467 15.4443 16.7453 16.81C17.8898 17.0662 18.7466 18.1123 18.7467 19.3641ZM14.768 13.9194C15.8071 14.1367 16.8944 13.078 17.1963 11.5548C17.4984 10.0315 16.9008 8.62062 15.8616 8.40337C14.8225 8.18613 13.7353 9.24488 13.4333 10.7681C13.1313 12.2913 13.7288 13.7022 14.768 13.9194ZM11.271 13.9194C12.3102 13.7022 12.9078 12.2913 12.6057 10.768C12.3037 9.24479 11.2165 8.18608 10.1774 8.40332C9.13825 8.62057 8.54068 10.0315 8.8427 11.5547C9.14468 13.0779 10.2319 14.1366 11.271 13.9194ZM8.45417 16.4552C9.25412 16.0652 9.46307 14.7984 8.92087 13.6258C8.37866 12.4531 7.29057 11.8187 6.49057 12.2087C5.69062 12.5988 5.48167 13.8656 6.02387 15.0382C6.56612 16.2108 7.65417 16.8453 8.45417 16.4552ZM19.296 12.1539C18.456 11.8658 17.4504 12.6304 17.0499 13.8617C16.6494 15.0929 17.0057 16.3246 17.8457 16.6128C18.6857 16.9008 19.6913 16.1362 20.0918 14.905C20.4922 13.6737 20.136 12.442 19.296 12.1539ZM26 21.6578C26.0001 22.6152 25.5027 23.4999 24.6954 23.9789L14.3072 30.1406C13.4999 30.6197 12.5048 30.6198 11.697 30.141L1.30716 23.9827C0.499661 23.5039 0.00204077 22.6193 0.00181896 21.6619L7.41513e-08 9.34205C-0.000221741 8.38456 0.497221 7.49995 1.30454 7.02082L11.6925 0.859252C12.5002 0.380394 13.4952 0.380257 14.3027 0.858797L24.6928 7.01709C25.5003 7.49585 25.9979 8.38041 25.9982 9.33786L26 21.6578ZM24.6065 20.9976L24.6048 9.99838C24.6047 9.14357 24.1603 8.35408 23.4394 7.92647L14.1631 2.42843C13.4422 2.0011 12.5537 2.00123 11.8328 2.42884L2.55819 7.92989C1.8376 8.35768 1.3934 9.1473 1.39357 10.0021L1.39522 21.0014C1.39531 21.8562 1.83978 22.6457 2.56054 23.0733L11.8367 28.5714C12.5578 28.9988 13.4464 28.9987 14.1671 28.571L23.4417 23.0698C24.1625 22.6421 24.6066 21.8524 24.6065 20.9976Z"
fill={theme === 'dark' ? 'white' : 'black'}
fillOpacity="0.88"
fill={token.colorText}
/>
</svg>
<Styled.LogoText onClick={() => navigate(`${baseprefix}`)}>In-Cloud</Styled.LogoText>

10
src/components/organisms/Header/organisms/User/User.tsx
View File

@@ -1,15 +1,13 @@
import React, { FC } from 'react'
import { Button, Tooltip, Dropdown } from 'antd'
import { Button, Tooltip, Dropdown, theme } from 'antd'
import { LogoutOutlined } from '@ant-design/icons'
import { useSelector } from 'react-redux'
import { RootState } from 'store/store'
import { useAuth } from 'hooks/useAuth'
import { logout } from 'api/auth'
import { Styled } from './styled'
export const User: FC = () => {
const { fullName } = useAuth()
const theme = useSelector((state: RootState) => state.openapiTheme.theme)
const { token } = theme.useToken()
return (
<Dropdown
@@ -36,11 +34,9 @@ export const User: FC = () => {
<svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M23.1429 0.0712891H0.857143C0.383036 0.0712891 0 0.454325 0 0.928432V18.0713C0 18.5454 0.383036 18.9284 0.857143 18.9284H23.1429C23.617 18.9284 24 18.5454 24 18.0713V0.928432C24 0.454325 23.617 0.0712891 23.1429 0.0712891ZM22.0714 16.9999H1.92857V1.99986H22.0714V16.9999ZM14.633 8.53558H17.9384C17.9732 8.53558 18 8.43915 18 8.32129V7.03558C18 6.91772 17.9732 6.82129 17.9384 6.82129H14.633C14.5982 6.82129 14.5714 6.91772 14.5714 7.03558V8.32129C14.5714 8.43915 14.5982 8.53558 14.633 8.53558ZM14.7616 12.3927H19.7357C19.8402 12.3927 19.9259 12.2963 19.9259 12.1784V10.8927C19.9259 10.7749 19.8402 10.6784 19.7357 10.6784H14.7616C14.6571 10.6784 14.5714 10.7749 14.5714 10.8927V12.1784C14.5714 12.2963 14.6571 12.3927 14.7616 12.3927ZM4.28571 13.8124H5.46161C5.57411 13.8124 5.66518 13.724 5.67321 13.6115C5.775 12.2588 6.90536 11.1874 8.27679 11.1874C9.64821 11.1874 10.7786 12.2588 10.8804 13.6115C10.8884 13.724 10.9795 13.8124 11.092 13.8124H12.2679C12.2969 13.8124 12.3257 13.8065 12.3524 13.7951C12.3791 13.7837 12.4033 13.7669 12.4233 13.7459C12.4433 13.7248 12.4589 13.6999 12.469 13.6727C12.4791 13.6454 12.4836 13.6164 12.4821 13.5874C12.4071 12.1597 11.625 10.9168 10.4839 10.2097C10.9871 9.65654 11.2652 8.93514 11.2634 8.18736C11.2634 6.52933 9.92679 5.18736 8.27946 5.18736C6.63214 5.18736 5.29554 6.52933 5.29554 8.18736C5.29554 8.96683 5.59018 9.67397 6.075 10.2097C5.49409 10.5697 5.00894 11.0649 4.66098 11.6531C4.31302 12.2412 4.11258 12.9049 4.07679 13.5874C4.06607 13.7106 4.1625 13.8124 4.28571 13.8124ZM8.27679 6.7945C9.04018 6.7945 9.66161 7.41861 9.66161 8.18736C9.66161 8.95611 9.04018 9.58022 8.27679 9.58022C7.51339 9.58022 6.89196 8.95611 6.89196 8.18736C6.89196 7.41861 7.51339 6.7945 8.27679 6.7945Z"
fill={theme === 'dark' ? 'white' : 'black'}
fillOpacity="0.88"
fill={token.colorText}
/>
</svg>
{fullName && fullName.length > 25 ? (
<Tooltip title={fullName}>
<Styled.Name>{fullName.slice(25)}</Styled.Name>

2
src/components/organisms/ListClusters/ListClusters.tsx
View File

@@ -2,6 +2,7 @@ import React, { FC } from 'react'
import { EnrichedTable } from '@prorobotech/openapi-k8s-toolkit'
import { useSelector } from 'react-redux'
import { RootState } from 'store/store'
import { TABLE_PROPS } from 'constants/tableProps'
export const ListClusters: FC = () => {
const theme = useSelector((state: RootState) => state.openapiTheme.theme)
@@ -42,6 +43,7 @@ export const ListClusters: FC = () => {
pathToNavigate={`${baseprefix}/clusters/~recordValue~`}
recordKeysForNavigation={['name']}
withoutControls
tableProps={TABLE_PROPS}
/>
)
}

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

@@ -19,6 +19,7 @@ import { useSelector } from 'react-redux'
import { RootState } from 'store/store'
import { BASE_API_GROUP, BASE_API_VERSION, BASE_RPROJECTS_VERSION } from 'constants/customizationApiGroupAndVersion'
import { FlexGrow } from 'components'
import { TABLE_PROPS } from 'constants/tableProps'
export const ListProjects: FC = () => {
const navigate = useNavigate()
@@ -168,6 +169,7 @@ export const ListProjects: FC = () => {
setSelectedRowsData(selectedRowsData)
},
}}
tableProps={TABLE_PROPS}
/>
)}
<FlexGrow />

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

@@ -20,6 +20,7 @@ import {
} from '@prorobotech/openapi-k8s-toolkit'
import { BASE_API_GROUP, BASE_API_VERSION } from 'constants/customizationApiGroupAndVersion'
import { FlexGrow } from 'components'
import { TABLE_PROPS } from 'constants/tableProps'
type TTableBuiltinInfoProps = {
namespace?: string
@@ -192,6 +193,7 @@ export const TableBuiltinInfo: FC<TTableBuiltinInfoProps> = ({ namespace, typeNa
setSelectedRowsData(selectedRowsData)
},
}}
tableProps={TABLE_PROPS}
/>
)}
<FlexGrow />

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

@@ -17,6 +17,7 @@ import {
} from '@prorobotech/openapi-k8s-toolkit'
import { BASE_API_GROUP, BASE_API_VERSION } from 'constants/customizationApiGroupAndVersion'
import { FlexGrow } from 'components'
import { TABLE_PROPS } from 'constants/tableProps'
type TResourceInfoProps = {
clusterName: string
@@ -174,6 +175,7 @@ export const ResourceInfo: FC<TResourceInfoProps> = ({
setSelectedRowsData(selectedRowsData)
},
}}
tableProps={TABLE_PROPS}
/>
)}
<FlexGrow />

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

@@ -20,6 +20,7 @@ import {
} from '@prorobotech/openapi-k8s-toolkit'
import { BASE_API_GROUP, BASE_API_VERSION } from 'constants/customizationApiGroupAndVersion'
import { FlexGrow } from 'components'
import { TABLE_PROPS } from 'constants/tableProps'
type TTableNonCrdInfoProps = {
namespace?: string
@@ -200,6 +201,7 @@ export const TableNonCrdInfo: FC<TTableNonCrdInfoProps> = ({ namespace, apiGroup
setSelectedRowsData(selectedRowsData)
},
}}
tableProps={TABLE_PROPS}
/>
)}
<FlexGrow />

10
src/constants/tableProps.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { TEnrichedTableProps } from '@prorobotech/openapi-k8s-toolkit'
import { EditIcon, DeleteIcon } from 'components/atoms'
export const TABLE_PROPS: TEnrichedTableProps['tableProps'] = {
borderless: true,
paginationPosition: ['bottomRight'],
isTotalLeft: true,
editIcon: <EditIcon />,
deleteIcon: <DeleteIcon />,
}