fix(portal): fix deployment history/api mappings table is not full he…

…ight (#240)

kraken-app/kraken-app-portal/src/__test__/pages/Deployment/DeploymentHistory.test.tsx

@@ -22,7 +22,7 @@ describe("Deployment > Deployment history tests", () => {
       })
     );
 
-    const { getByText } = render(<DeployHistory />);
+    const { getByText } = render(<DeployHistory scrollHeight={1000} />);
 
     // Table headings assertions
     expect(getByText("Version")).toBeInTheDocument();
@@ -75,7 +75,7 @@ describe("Deployment > Deployment history tests", () => {
       isFetched: true,
     } as any)
 
-    const { getByText } = render(<DeployHistory selectedEnv={{ id: 'abc', name: 'stage' } as any} />)
+    const { getByText } = render(<DeployHistory scrollHeight={1000} selectedEnv={{ id: 'abc', name: 'stage' } as any} />)
     expect(getByText('API mapping')).toBeInTheDocument()
   })
 });

kraken-app/kraken-app-portal/src/__test__/pages/EnvironmentOverview/index.test.tsx

@@ -1,5 +1,6 @@
 import EnvironmentOverview from "@/pages/EnvironmentOverview";
 import * as productHooks from "@/hooks/product";
+import * as sizeHooks from '@/hooks/useContainerHeight'
 import { fireEvent, render, waitFor } from "@/__test__/utils";
 
 const ResizeObserverMock = vi.fn(() => ({
@@ -62,6 +63,8 @@ describe(" Environment Overview component list", () => {
   });
 
   it("running components list", async () => {
+    vi.spyOn(sizeHooks, 'useContainerHeight').mockReturnValue([1000])
+
     const { getByText, getAllByRole } = render(
       <EnvironmentOverview />
     );

kraken-app/kraken-app-portal/src/__test__/pages/NewAPIMapping/tabComponent.test.tsx

@@ -11,7 +11,7 @@ describe("tab", () => {
     const { container } = render(
       <BrowserRouter>
         <QueryClientProvider client={queryClient}>
-          <DeployHistory />
+          <DeployHistory scrollHeight={1000} />
         </QueryClientProvider>
       </BrowserRouter>
     );

kraken-app/kraken-app-portal/src/hooks/useContainerHeight.ts

@@ -0,0 +1,25 @@
+import { debounce } from "lodash";
+import { useEffect, useState } from "react";
+
+export function useContainerHeight(containerRef: React.MutableRefObject<HTMLDivElement | null>) {
+  const [scrollHeight, setScrollHeight] = useState(0)
+
+  const debounced = debounce((value: number) => setScrollHeight(value), 500)
+
+  useEffect(() => {
+    const onResized = () => {
+      const { height = 0 } = containerRef.current?.getBoundingClientRect() ?? {}
+      debounced(height)
+    }
+
+    window.addEventListener('resize', onResized)
+
+    setTimeout(() => window.dispatchEvent(new Event('resize')), 1000)
+
+    return () => {
+      window.removeEventListener('resize', onResized)
+    }
+  }, [])
+
+  return [scrollHeight]
+}

kraken-app/kraken-app-portal/src/pages/EnvironmentOverview/components/RunningAPIMapping/index.tsx

@@ -4,32 +4,24 @@ import { useGetRunningAPIList } from "@/hooks/product";
 import { useAppStore } from "@/stores/app.store";
 import { IEnv, IRunningMapping } from "@/utils/types/env.type";
 import { Flex, Table, Tag, Typography } from "antd";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { ColumnsType } from "antd/es/table";
 import { toDateTime } from "@/libs/dayjs";
 import styles from './index.module.scss'
 
 type Props = {
-  scrollHeight?: number;
+  scrollHeight: number;
   env?: IEnv;
 };
 
-
-const defaultPage = {
-  size: 20,
-  page: 0,
-};
-
 type GroupedMapping = IRunningMapping & { mappingCount: number }
 
 const RunningAPIMapping = ({ scrollHeight, env }: Props) => {
   const { currentProduct } = useAppStore();
-  const [pageInfo] = useState(defaultPage);
   const { data, isLoading } = useGetRunningAPIList(currentProduct, {
     envId: env?.id,
     orderBy: "createdAt",
     direction: "DESC",
-    ...pageInfo,
   });
 
   const mappings = useMemo(() => {
@@ -97,20 +89,16 @@ const RunningAPIMapping = ({ scrollHeight, env }: Props) => {
     },
   ];
 
-  const scroll = scrollHeight
-    ? { y: scrollHeight - 144, x: 800 }
-    : { x: 800, y: 400 } as any;
-
   return (
     <Table
-      scroll={scroll}
+      scroll={{ y: scrollHeight, x: 800 }}
       columns={columns}
       loading={isLoading}
       dataSource={mappings}
       tableLayout="fixed"
-      pagination={false}
       rowClassName={styles.mappingRow}
       rowKey={(item) => JSON.stringify(item)}
+      pagination={false}
     />
   );
 };

kraken-app/kraken-app-portal/src/pages/EnvironmentOverview/index.tsx

@@ -29,6 +29,7 @@ import ModalNewDeployment from "./components/ModalNewDeployment";
 import { showModalShowNew } from "./components/ModalShowAPIKey";
 import NoAPIKey from "./components/NoAPIKey";
 import styles from "./index.module.scss";
+import { useContainerHeight } from "@/hooks/useContainerHeight";
 
 const RunningAPIMapping = lazy(() => import("./components/RunningAPIMapping"));
 const DeployHistory = lazy(
@@ -43,6 +44,8 @@ const initPaginationParams = {
 const EnvironmentOverview = () => {
   const [searchParams] = useSearchParams();
   const { currentProduct } = useAppStore();
+  const contentRef = useRef<HTMLDivElement>(null)
+  const [scrollHeight] = useContainerHeight(contentRef)
 
   const envId = searchParams.get("envId") || "";
 
@@ -238,15 +241,17 @@ const EnvironmentOverview = () => {
               </Radio.Group>
             </Flex>
 
-            <main className={styles.pageContent}>
-              <Suspense fallback={<Spin spinning />}>
-                {activeTab === "running_api" && selectedEnv && (
-                  <RunningAPIMapping env={selectedEnv} />
-                )}
-                {activeTab === "deployment_history" && (
-                  <DeployHistory selectedEnv={selectedEnv} />
-                )}
-              </Suspense>
+            <main className={styles.pageContent} ref={contentRef}>
+              {scrollHeight > 0 && (
+                <Suspense fallback={<Spin spinning />}>
+                  {activeTab === "running_api" && selectedEnv && (
+                    <RunningAPIMapping env={selectedEnv} scrollHeight={scrollHeight ?? 800} />
+                  )}
+                  {activeTab === "deployment_history" && (
+                    <DeployHistory selectedEnv={selectedEnv} scrollHeight={scrollHeight ?? 800} />
+                  )}
+                </Suspense>
+              )}
             </main>
           </Flex>
         )}

kraken-app/kraken-app-portal/src/pages/NewAPIMapping/components/DeployHistory/index.tsx

@@ -36,7 +36,7 @@ const DeployHistory = ({
   selectedEnv,
   targetMapperKey,
 }: {
-  scrollHeight?: number;
+  scrollHeight: number;
   selectedEnv?: IEnv;
   targetMapperKey?: string;
 }) => {
@@ -223,14 +223,10 @@ const DeployHistory = ({
     });
   }, []);
 
-  const scroll = scrollHeight
-    ? { y: scrollHeight - 215, x: 800 }
-    : { y: 400, x: 800 };
-
   return (
     <div className={styles.root} id="deploy-history">
       <Table
-        scroll={scroll}
+        scroll={{ y: scrollHeight - 144, x: 800 }}
         loading={isLoading || isFetching || isLoadingVerify}
         locale={{
           emptyText: (

kraken-app/kraken-app-portal/vite.config.ts

@@ -26,4 +26,7 @@ export default defineConfig({
       },
     },
   },
+  optimizeDeps: {
+    exclude: ['node_modules/*']
+  }
 });