Merge pull request #87 from PRO-Robotech/feature/dev

buttons alignment fix
2026-01-28 10:19:50 +00:00 · 2025-08-05 19:14:46 +03:00
parent 22c2c7d7bc 9f50dee72b
commit 7010afe434
9 changed files with 123 additions and 106 deletions
--- 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.82",
+        "@prorobotech/openapi-k8s-toolkit": "^0.0.1-alpha.83",
        "@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.82",
-      "resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.82.tgz",
-      "integrity": "sha512-x/MSSpud6mYYgCdoiPTNzaRvUvZVTtbecf6212s+QNov32UvaoewBfcVM7blvDSgq0jo59VLmaD3uJ7M8pE8HA==",
+      "version": "0.0.1-alpha.83",
+      "resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.83.tgz",
+      "integrity": "sha512-5FXbKM+1jD30gxgu6xCMcvq00ZBZY2gnZEDjZ086EMepu6vgz4u9lo69uwQa76JndG78NFV0ceiOw+t6unazrQ==",
      "license": "MIT",
      "dependencies": {
        "@monaco-editor/react": "4.6.0",
--- 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.82",
+    "@prorobotech/openapi-k8s-toolkit": "0.0.1-alpha.83",
    "@readme/openapi-parser": "4.0.0",
    "@reduxjs/toolkit": "2.2.5",
    "@tanstack/react-query": "5.62.2",
--- a/src/components/atoms/PaddingContainer/PaddingContainer.ts
+++ b/src/components/atoms/PaddingContainer/PaddingContainer.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+type TPaddingContainerProps = {
+  $padding: string
+}
+
+export const PaddingContainer = styled.div<TPaddingContainerProps>`
+  padding: ${({ $padding }) => $padding};
+`
--- a/src/components/atoms/PaddingContainer/index.ts
+++ b/src/components/atoms/PaddingContainer/index.ts
@@ -0,0 +1 @@
+export * from './PaddingContainer'
--- a/src/components/atoms/index.ts
+++ b/src/components/atoms/index.ts
@@ -14,3 +14,4 @@ export * from './NavigationContainer'
 export * from './EntrySelect'
 export * from './OverflowMaxHeightContainer'
 export * from './MarginTopContainer'
+export * from './PaddingContainer'
--- a/src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx
+++ b/src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx
@@ -12,7 +12,7 @@ import {
  checkIfBuiltInInstanceNamespaceScoped,
  useBuiltinResources,
 } from '@prorobotech/openapi-k8s-toolkit'
-import { FlexGrow, OverflowMaxHeightContainer } from 'components'
+import { FlexGrow, OverflowMaxHeightContainer, PaddingContainer } from 'components'
 import { TABLE_PROPS } from 'constants/tableProps'
 import {
  HEAD_FIRST_ROW,
@@ -193,38 +193,40 @@ export const TableBuiltinInfo: FC<TTableBuiltinInfoProps> = ({ namespace, typeNa
        )} */}
      </OverflowMaxHeightContainer>
      <FlexGrow />
-      <Flex justify="space-between">
-        <Button
-          type="primary"
-          onClick={() =>
-            navigate(
-              `${baseprefix}${inside ? '/inside' : ''}/${cluster}${namespace ? `/${namespace}` : ''}${
-                params.syntheticProject ? `/${params.syntheticProject}` : ''
-              }/forms/builtin/v1/${typeName}?backlink=${baseprefix}${inside ? '/inside' : ''}/${cluster}${
-                namespace ? `/${namespace}` : ''
-              }${params.syntheticProject ? `/${params.syntheticProject}` : ''}/builtin-table/${typeName}`,
-            )
-          }
-          loading={isNamespaced ? false : createPermission.isPending}
-          disabled={isNamespaced ? false : !createPermission.data?.status.allowed}
-        >
-          <PlusOutlined />
-          Add
-        </Button>
+      <PaddingContainer $padding="4px">
+        <Flex justify="space-between">
+          <Button
+            type="primary"
+            onClick={() =>
+              navigate(
+                `${baseprefix}${inside ? '/inside' : ''}/${cluster}${namespace ? `/${namespace}` : ''}${
+                  params.syntheticProject ? `/${params.syntheticProject}` : ''
+                }/forms/builtin/v1/${typeName}?backlink=${baseprefix}${inside ? '/inside' : ''}/${cluster}${
+                  namespace ? `/${namespace}` : ''
+                }${params.syntheticProject ? `/${params.syntheticProject}` : ''}/builtin-table/${typeName}`,
+              )
+            }
+            loading={isNamespaced ? false : createPermission.isPending}
+            disabled={isNamespaced ? false : !createPermission.data?.status.allowed}
+          >
+            <PlusOutlined />
+            Add
+          </Button>

-        {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>
+          {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>
+      </PaddingContainer>
      {isDeleteModalOpen && (
        <DeleteModal
          name={isDeleteModalOpen.name}
--- a/src/components/organisms/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx
+++ b/src/components/organisms/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx
@@ -11,7 +11,7 @@ import {
  TAdditionalPrinterColumns,
  useCrdResources,
 } from '@prorobotech/openapi-k8s-toolkit'
-import { FlexGrow, OverflowMaxHeightContainer } from 'components'
+import { FlexGrow, OverflowMaxHeightContainer, PaddingContainer } from 'components'
 import { TABLE_PROPS } from 'constants/tableProps'
 import {
  HEAD_FIRST_ROW,
@@ -192,39 +192,41 @@ export const ResourceInfo: FC<TResourceInfoProps> = ({
        )} */}
      </OverflowMaxHeightContainer>
      <FlexGrow />
-      <Flex justify="space-between">
-        <Button
-          type="primary"
-          onClick={() =>
-            navigate(
-              `${baseprefix}${inside ? '/inside' : ''}/${cluster}${namespace ? `/${namespace}` : ''}${
-                params.syntheticProject ? `/${params.syntheticProject}` : ''
-              }/forms/crds/${apiGroup}/${apiVersion}/${crdPluralName}?backlink=${baseprefix}${
-                inside ? '/inside' : ''
-              }/${cluster}${namespace ? `/${namespace}` : ''}${
-                params.syntheticProject ? `/${params.syntheticProject}` : ''
-              }/crd-table/${apiGroup}/${apiVersion}/${apiExtensionVersion}/${crdName}`,
-            )
-          }
-          loading={permissions.canCreate === undefined}
-          disabled={permissions.canCreate === false}
-        >
-          <PlusOutlined />
-          Add
-        </Button>
-        {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>
+      <PaddingContainer $padding="4px">
+        <Flex justify="space-between">
+          <Button
+            type="primary"
+            onClick={() =>
+              navigate(
+                `${baseprefix}${inside ? '/inside' : ''}/${cluster}${namespace ? `/${namespace}` : ''}${
+                  params.syntheticProject ? `/${params.syntheticProject}` : ''
+                }/forms/crds/${apiGroup}/${apiVersion}/${crdPluralName}?backlink=${baseprefix}${
+                  inside ? '/inside' : ''
+                }/${cluster}${namespace ? `/${namespace}` : ''}${
+                  params.syntheticProject ? `/${params.syntheticProject}` : ''
+                }/crd-table/${apiGroup}/${apiVersion}/${apiExtensionVersion}/${crdName}`,
+              )
+            }
+            loading={permissions.canCreate === undefined}
+            disabled={permissions.canCreate === false}
+          >
+            <PlusOutlined />
+            Add
+          </Button>
+          {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>
+      </PaddingContainer>
      {isDeleteModalOpen && (
        <DeleteModal
          name={isDeleteModalOpen.name}
--- a/src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx
+++ b/src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx
@@ -13,7 +13,7 @@ import {
  checkIfApiInstanceNamespaceScoped,
  useApiResources,
 } from '@prorobotech/openapi-k8s-toolkit'
-import { FlexGrow, OverflowMaxHeightContainer } from 'components'
+import { FlexGrow, OverflowMaxHeightContainer, PaddingContainer } from 'components'
 import { TABLE_PROPS } from 'constants/tableProps'
 import {
  HEAD_FIRST_ROW,
@@ -207,39 +207,41 @@ export const TableNonCrdInfo: FC<TTableNonCrdInfoProps> = ({
        )} */}
      </OverflowMaxHeightContainer>
      <FlexGrow />
-      <Flex justify="space-between">
-        <Button
-          type="primary"
-          onClick={() =>
-            navigate(
-              `${baseprefix}${inside ? '/inside' : ''}/${cluster}${namespace ? `/${namespace}` : ''}${
-                params.syntheticProject ? `/${params.syntheticProject}` : ''
-              }/forms/apis/${apiGroup}/${apiVersion}/${typeName}?backlink=${baseprefix}${
-                inside ? '/inside' : ''
-              }/${cluster}${namespace ? `/${namespace}` : ''}${
-                params.syntheticProject ? `/${params.syntheticProject}` : ''
-              }/api-table/${apiGroup}/${apiVersion}/${typeName}`,
-            )
-          }
-          loading={isNamespaced ? false : createPermission.isPending}
-          disabled={isNamespaced ? false : !createPermission.data?.status.allowed}
-        >
-          <PlusOutlined />
-          Add
-        </Button>
-        {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>
+      <PaddingContainer $padding="4px">
+        <Flex justify="space-between">
+          <Button
+            type="primary"
+            onClick={() =>
+              navigate(
+                `${baseprefix}${inside ? '/inside' : ''}/${cluster}${namespace ? `/${namespace}` : ''}${
+                  params.syntheticProject ? `/${params.syntheticProject}` : ''
+                }/forms/apis/${apiGroup}/${apiVersion}/${typeName}?backlink=${baseprefix}${
+                  inside ? '/inside' : ''
+                }/${cluster}${namespace ? `/${namespace}` : ''}${
+                  params.syntheticProject ? `/${params.syntheticProject}` : ''
+                }/api-table/${apiGroup}/${apiVersion}/${typeName}`,
+              )
+            }
+            loading={isNamespaced ? false : createPermission.isPending}
+            disabled={isNamespaced ? false : !createPermission.data?.status.allowed}
+          >
+            <PlusOutlined />
+            Add
+          </Button>
+          {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>
+      </PaddingContainer>
      {isDeleteModalOpen && (
        <DeleteModal
          name={isDeleteModalOpen.name}
--- a/src/constants/blocksSizes.ts
+++ b/src/constants/blocksSizes.ts
@@ -11,4 +11,4 @@ export const BREADCRUMBS_HEIGHT = 26
 export const CONTENT_CARD_PADDING = 25
 export const BLACKHOLE_FORM_VIEW_SWITCH_HEIGHT = 42
 export const BLACKHOLE_FORM_SUBMIT_ROW_HEIGHT = 48
-export const TABLE_ADD_BUTTON_HEIGHT = 35
+export const TABLE_ADD_BUTTON_HEIGHT = 35 + 8