From ff38abe4dd23fc533f20f9b2a92f6d8406d3b713 Mon Sep 17 00:00:00 2001 From: typescreep Date: Mon, 2 Jun 2025 15:29:16 +0300 Subject: [PATCH] tableprops --- package-lock.json | 8 ++++---- package.json | 2 +- src/App.tsx | 8 ++++++++ src/components/atoms/Icons/DeleteIcon.tsx | 15 +++++++++++++++ src/components/atoms/Icons/EditIcon.tsx | 15 +++++++++++++++ src/components/atoms/Icons/index.ts | 2 ++ src/components/atoms/index.ts | 1 + src/components/organisms/Footer/styled.ts | 2 +- .../organisms/Header/organisms/Logo/Logo.tsx | 4 +--- .../organisms/Header/organisms/User/User.tsx | 10 +++------- .../organisms/ListClusters/ListClusters.tsx | 2 ++ .../organisms/ListProjects/ListProjects.tsx | 2 ++ .../TableBuiltinInfo/TableBuiltinInfo.tsx | 2 ++ .../molecules/ResourceInfo/ResourceInfo.tsx | 2 ++ .../organisms/TableNonCrdInfo/TableNonCrdInfo.tsx | 2 ++ src/constants/tableProps.tsx | 10 ++++++++++ 16 files changed, 71 insertions(+), 16 deletions(-) create mode 100644 src/components/atoms/Icons/DeleteIcon.tsx create mode 100644 src/components/atoms/Icons/EditIcon.tsx create mode 100644 src/components/atoms/Icons/index.ts create mode 100644 src/constants/tableProps.tsx diff --git a/package-lock.json b/package-lock.json index c7c233f..0fa9db5 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.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", diff --git a/package.json b/package.json index a743b87..0ae391f 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.tsx b/src/App.tsx index a212276..5e3e969 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -151,6 +151,14 @@ export const App: FC = ({ 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, + }, }, }} > diff --git a/src/components/atoms/Icons/DeleteIcon.tsx b/src/components/atoms/Icons/DeleteIcon.tsx new file mode 100644 index 0000000..07595ee --- /dev/null +++ b/src/components/atoms/Icons/DeleteIcon.tsx @@ -0,0 +1,15 @@ +import React, { FC } from 'react' +import { theme } from 'antd' + +export const DeleteIcon: FC = () => { + const { token } = theme.useToken() + + return ( + + + + ) +} diff --git a/src/components/atoms/Icons/EditIcon.tsx b/src/components/atoms/Icons/EditIcon.tsx new file mode 100644 index 0000000..f140ae5 --- /dev/null +++ b/src/components/atoms/Icons/EditIcon.tsx @@ -0,0 +1,15 @@ +import React, { FC } from 'react' +import { theme } from 'antd' + +export const EditIcon: FC = () => { + const { token } = theme.useToken() + + return ( + + + + ) +} diff --git a/src/components/atoms/Icons/index.ts b/src/components/atoms/Icons/index.ts new file mode 100644 index 0000000..303b57f --- /dev/null +++ b/src/components/atoms/Icons/index.ts @@ -0,0 +1,2 @@ +export * from './DeleteIcon' +export * from './EditIcon' diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index 378e0c1..24c8cf1 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -6,3 +6,4 @@ export * from './FlexEnd' export * from './BackLink' export * from './ContentCard' export * from './FlexGrow' +export * from './Icons' diff --git a/src/components/organisms/Footer/styled.ts b/src/components/organisms/Footer/styled.ts index f407901..409b5a2 100644 --- a/src/components/organisms/Footer/styled.ts +++ b/src/components/organisms/Footer/styled.ts @@ -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; diff --git a/src/components/organisms/Header/organisms/Logo/Logo.tsx b/src/components/organisms/Header/organisms/Logo/Logo.tsx index eaefdb9..5fadd48 100644 --- a/src/components/organisms/Header/organisms/Logo/Logo.tsx +++ b/src/components/organisms/Header/organisms/Logo/Logo.tsx @@ -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 = () => { navigate(`${baseprefix}`)}>In-Cloud diff --git a/src/components/organisms/Header/organisms/User/User.tsx b/src/components/organisms/Header/organisms/User/User.tsx index 0793a53..aaffd52 100644 --- a/src/components/organisms/Header/organisms/User/User.tsx +++ b/src/components/organisms/Header/organisms/User/User.tsx @@ -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 ( { - {fullName && fullName.length > 25 ? ( {fullName.slice(25)} diff --git a/src/components/organisms/ListClusters/ListClusters.tsx b/src/components/organisms/ListClusters/ListClusters.tsx index 09340ec..5454920 100644 --- a/src/components/organisms/ListClusters/ListClusters.tsx +++ b/src/components/organisms/ListClusters/ListClusters.tsx @@ -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} /> ) } diff --git a/src/components/organisms/ListProjects/ListProjects.tsx b/src/components/organisms/ListProjects/ListProjects.tsx index 5b5eb10..ec3db36 100644 --- a/src/components/organisms/ListProjects/ListProjects.tsx +++ b/src/components/organisms/ListProjects/ListProjects.tsx @@ -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} /> )} diff --git a/src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx b/src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx index 44affb3..62c4713 100644 --- a/src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx +++ b/src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx @@ -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 = ({ namespace, typeNa setSelectedRowsData(selectedRowsData) }, }} + tableProps={TABLE_PROPS} /> )} diff --git a/src/components/organisms/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx b/src/components/organisms/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx index 43672da..8992c29 100644 --- a/src/components/organisms/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx +++ b/src/components/organisms/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx @@ -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 = ({ setSelectedRowsData(selectedRowsData) }, }} + tableProps={TABLE_PROPS} /> )} diff --git a/src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx b/src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx index 0017b46..5aac300 100644 --- a/src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx +++ b/src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx @@ -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 = ({ namespace, apiGroup setSelectedRowsData(selectedRowsData) }, }} + tableProps={TABLE_PROPS} /> )} diff --git a/src/constants/tableProps.tsx b/src/constants/tableProps.tsx new file mode 100644 index 0000000..57a6947 --- /dev/null +++ b/src/constants/tableProps.tsx @@ -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: , + deleteIcon: , +}