From e8e082aa46007d1e132dee8c534900f4363a55aa Mon Sep 17 00:00:00 2001
From: agatha197 <kimsujin@lablup.com>
Date: Thu, 31 Oct 2024 11:06:20 +0900
Subject: [PATCH] refactor: `MyEnvironmentPage` into two components

---
 react/src/components/CustomizedImageList.tsx | 337 ++++++++++++++++
 react/src/helper/index.tsx                   |   2 +-
 react/src/pages/MyEnvironmentPage.tsx        | 387 ++-----------------
 3 files changed, 373 insertions(+), 353 deletions(-)
 create mode 100644 react/src/components/CustomizedImageList.tsx

diff --git a/react/src/components/CustomizedImageList.tsx b/react/src/components/CustomizedImageList.tsx
new file mode 100644
index 0000000000..f8c287d194
--- /dev/null
+++ b/react/src/components/CustomizedImageList.tsx
@@ -0,0 +1,337 @@
+import Flex from '../components/Flex';
+import {
+  BaseImageTags,
+  BaseVersionTags,
+  ConstraintTags,
+  LangTags,
+} from '../components/ImageTags';
+import TableColumnsSettingModal from '../components/TableColumnsSettingModal';
+import { getImageFullName, localeCompare } from '../helper';
+import {
+  useBackendAIImageMetaData,
+  useSuspendedBackendaiClient,
+  useUpdatableState,
+} from '../hooks';
+import { CustomizedImageListForgetAndUntagMutation } from './__generated__/CustomizedImageListForgetAndUntagMutation.graphql';
+import {
+  CustomizedImageListQuery,
+  CustomizedImageListQuery$data,
+} from './__generated__/CustomizedImageListQuery.graphql';
+import { DeleteOutlined, SettingOutlined } from '@ant-design/icons';
+import { useLocalStorageState } from 'ahooks';
+import { App, Button, Input, Popconfirm, Table, theme, Typography } from 'antd';
+import { AnyObject } from 'antd/es/_util/type';
+import { ColumnsType, ColumnType } from 'antd/es/table';
+import graphql from 'babel-plugin-relay/macro';
+import _ from 'lodash';
+import React, { PropsWithChildren, useState, useTransition } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLazyLoadQuery, useMutation } from 'react-relay';
+
+export type CommittedImage = NonNullable<
+  CustomizedImageListQuery$data['customized_images']
+>[number];
+
+const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
+  const { message } = App.useApp();
+  const baiClient = useSuspendedBackendaiClient();
+  const supportExtendedImageInfo =
+    baiClient?.supports('extended-image-info') ?? false;
+
+  const [isOpenColumnsSetting, setIsOpenColumnsSetting] = useState(false);
+  const [isRefetchPending, startRefetchTransition] = useTransition();
+  const [customizedImageListFetchKey, updateCustomizedImageListFetchKey] =
+    useUpdatableState('initial-fetch');
+  const [inFlightImageId, setInFlightImageId] = useState<string>();
+  const [
+    ,
+    {
+      getNamespace,
+      getImageLang,
+      getBaseVersion,
+      getBaseImage,
+      getConstraints,
+    },
+  ] = useBackendAIImageMetaData();
+
+  const { customized_images } = useLazyLoadQuery<CustomizedImageListQuery>(
+    graphql`
+      query CustomizedImageListQuery {
+        customized_images {
+          id
+          name @deprecatedSince(version: "24.09.1.")
+          humanized_name
+          tag
+          registry
+          architecture
+          digest
+          labels {
+            key
+            value
+          }
+          supported_accelerators
+          namespace @since(version: "24.09.1.")
+        }
+      }
+    `,
+    {},
+    {
+      fetchPolicy:
+        customizedImageListFetchKey === 'initial-fetch'
+          ? 'store-and-network'
+          : 'network-only',
+      fetchKey: customizedImageListFetchKey,
+    },
+  );
+
+  const [commitForgetAndUntag, isInflightForgetAndUntag] =
+    useMutation<CustomizedImageListForgetAndUntagMutation>(graphql`
+      mutation CustomizedImageListForgetAndUntagMutation($id: String!) {
+        untag_image_from_registry(image_id: $id) {
+          ok
+          msg
+        }
+        forget_image_by_id(image_id: $id) {
+          ok
+          msg
+        }
+      }
+    `);
+
+  const columns: ColumnsType<CommittedImage> = [
+    {
+      title: t('environment.Registry'),
+      dataIndex: 'registry',
+      key: 'registry',
+      sorter: (a, b) => localeCompare(a?.registry, b?.registry),
+    },
+    {
+      title: t('environment.Architecture'),
+      dataIndex: 'architecture',
+      key: 'architecture',
+      sorter: (a, b) => localeCompare(a?.architecture, b?.architecture),
+    },
+    ...(supportExtendedImageInfo
+      ? [
+          {
+            title: t('environment.Namespace'),
+            key: 'namespace',
+            dataIndex: 'namespace',
+            sorter: (a: CommittedImage, b: CommittedImage) =>
+              localeCompare(a?.namespace, b?.namespace),
+          },
+        ]
+      : [
+          {
+            title: t('environment.Namespace'),
+            key: 'name',
+            dataIndex: 'name',
+            sorter: (a: CommittedImage, b: CommittedImage) => {
+              const namespaceA = getNamespace(getImageFullName(a) || '');
+              const namespaceB = getNamespace(getImageFullName(b) || '');
+              return namespaceA && namespaceB
+                ? namespaceA.localeCompare(namespaceB)
+                : 0;
+            },
+            render: (text: string, row: CommittedImage) => (
+              <span>{getNamespace(getImageFullName(row) || '')}</span>
+            ),
+          },
+        ]),
+    {
+      title: t('environment.Language'),
+      key: 'lang',
+      sorter: (a, b) => {
+        const langA = getImageLang(getImageFullName(a) || '');
+        const langB = getImageLang(getImageFullName(b) || '');
+        return langA && langB ? langA.localeCompare(langB) : 0;
+      },
+      render: (text, row) => (
+        <LangTags image={getImageFullName(row) || ''} color="green" />
+      ),
+    },
+    {
+      title: t('environment.Version'),
+      key: 'baseversion',
+      sorter: (a, b) => {
+        const baseversionA = getBaseVersion(getImageFullName(a) || '');
+        const baseversionB = getBaseVersion(getImageFullName(b) || '');
+        return baseversionA && baseversionB
+          ? baseversionA.localeCompare(baseversionB)
+          : 0;
+      },
+      render: (text, row) => (
+        <BaseVersionTags image={getImageFullName(row) || ''} color="green" />
+      ),
+    },
+    {
+      title: t('environment.Base'),
+      key: 'baseimage',
+      sorter: (a, b) => {
+        const baseimageA = getBaseImage(getImageFullName(a) || '');
+        const baseimageB = getBaseImage(getImageFullName(b) || '');
+        return baseimageA && baseimageB
+          ? baseimageA.localeCompare(baseimageB)
+          : 0;
+      },
+      render: (text, row) => (
+        <BaseImageTags image={getImageFullName(row) || ''} />
+      ),
+    },
+    {
+      title: t('environment.Constraint'),
+      key: 'constraint',
+      sorter: (a, b) => {
+        const requirementA =
+          a?.tag && b?.labels
+            ? getConstraints(
+                a?.tag,
+                a?.labels as { key: string; value: string }[],
+              )[0] || ''
+            : '';
+        const requirementB =
+          b?.tag && b?.labels
+            ? getConstraints(
+                b?.tag,
+                b?.labels as { key: string; value: string }[],
+              )[0] || ''
+            : '';
+        if (requirementA === '' && requirementB === '') return 0;
+        if (requirementA === '') return -1;
+        if (requirementB === '') return 1;
+        return requirementA.localeCompare(requirementB);
+      },
+      render: (text, row) =>
+        row?.tag ? (
+          <ConstraintTags
+            tag={row.tag}
+            labels={row?.labels as { key: string; value: string }[]}
+          />
+        ) : null,
+    },
+    {
+      title: t('environment.Digest'),
+      dataIndex: 'digest',
+      key: 'digest',
+      sorter: (a, b) =>
+        a?.digest && b?.digest ? a.digest.localeCompare(b.digest) : 0,
+    },
+    {
+      title: t('general.Control'),
+      key: 'control',
+      fixed: 'right',
+      render: (text, row) => (
+        <Flex direction="row" align="stretch" justify="center" gap="xxs">
+          <Typography.Text
+            copyable={{
+              text: getImageFullName(row) || '',
+            }}
+            style={{
+              paddingTop: token.paddingXXS,
+              paddingBottom: token.paddingXXS,
+            }}
+          />
+          <Popconfirm
+            title={t('dialog.ask.DoYouWantToProceed')}
+            description={t('dialog.warning.CannotBeUndone')}
+            okType="danger"
+            okText={t('button.Delete')}
+            onConfirm={() => {
+              if (row?.id) {
+                setInFlightImageId(row.id + customizedImageListFetchKey);
+                commitForgetAndUntag({
+                  variables: {
+                    id: row.id,
+                  },
+                  onCompleted(data, errors) {
+                    if (errors) {
+                      message.error(errors[0]?.message);
+                      return;
+                    }
+                    startRefetchTransition(() => {
+                      updateCustomizedImageListFetchKey();
+                    });
+                    message.success(
+                      t('environment.CustomizedImageSuccessfullyDeleted'),
+                    );
+                  },
+                  onError(err) {
+                    message.error(err?.message);
+                  },
+                });
+              }
+            }}
+          >
+            <Button
+              type="text"
+              icon={<DeleteOutlined />}
+              danger
+              loading={
+                isInflightForgetAndUntag &&
+                inFlightImageId === row?.id + customizedImageListFetchKey
+              }
+              disabled={
+                isInflightForgetAndUntag &&
+                inFlightImageId !== row?.id + customizedImageListFetchKey
+              }
+            />
+          </Popconfirm>
+        </Flex>
+      ),
+    },
+  ];
+
+  const [displayedColumnKeys, setDisplayedColumnKeys] = useLocalStorageState(
+    'backendaiwebui.CustomizedImageList.displayedColumnKeys',
+    {
+      defaultValue: columns.map((column) => _.toString(column.key)),
+    },
+  );
+
+  return (
+    <Flex direction="column" align="stretch" gap={'xs'}>
+      <Flex direction="column" align="stretch">
+        <Table
+          loading={isRefetchPending}
+          columns={
+            columns.filter((column) =>
+              displayedColumnKeys?.includes(_.toString(column.key)),
+            ) as ColumnType<AnyObject>[]
+          }
+          dataSource={customized_images as readonly AnyObject[] | undefined}
+          rowKey="id"
+          scroll={{ x: 'max-content' }}
+          pagination={false}
+        />
+        <Flex
+          justify="end"
+          style={{
+            padding: token.paddingXXS,
+          }}
+        >
+          <Button
+            type="text"
+            icon={<SettingOutlined />}
+            onClick={() => {
+              setIsOpenColumnsSetting(true);
+            }}
+          />
+        </Flex>
+      </Flex>
+      <TableColumnsSettingModal
+        open={isOpenColumnsSetting}
+        onRequestClose={(values) => {
+          values?.selectedColumnKeys &&
+            setDisplayedColumnKeys(values?.selectedColumnKeys);
+          setIsOpenColumnsSetting(!isOpenColumnsSetting);
+        }}
+        columns={columns}
+        displayedColumnKeys={displayedColumnKeys ? displayedColumnKeys : []}
+      />
+    </Flex>
+  );
+};
+
+export default CustomizedImageList;
diff --git a/react/src/helper/index.tsx b/react/src/helper/index.tsx
index 3f10eb499a..c612a95351 100644
--- a/react/src/helper/index.tsx
+++ b/react/src/helper/index.tsx
@@ -1,7 +1,7 @@
+import { CommittedImage } from '../components/CustomizedImageList';
 import { Image } from '../components/ImageEnvironmentSelectFormItems';
 import { EnvironmentImage } from '../components/ImageList';
 import { useSuspendedBackendaiClient } from '../hooks';
-import { CommittedImage } from '../pages/MyEnvironmentPage';
 import { SorterResult } from 'antd/es/table/interface';
 import _ from 'lodash';
 
diff --git a/react/src/pages/MyEnvironmentPage.tsx b/react/src/pages/MyEnvironmentPage.tsx
index 16769ede97..a34ca91e53 100644
--- a/react/src/pages/MyEnvironmentPage.tsx
+++ b/react/src/pages/MyEnvironmentPage.tsx
@@ -1,362 +1,45 @@
-import Flex from '../components/Flex';
+import CustomizedImageList from '../components/CustomizedImageList';
 import FlexActivityIndicator from '../components/FlexActivityIndicator';
-import {
-  BaseImageTags,
-  BaseVersionTags,
-  ConstraintTags,
-  LangTags,
-} from '../components/ImageTags';
-import TableColumnsSettingModal from '../components/TableColumnsSettingModal';
-import { getImageFullName, localeCompare } from '../helper';
-import {
-  useBackendAIImageMetaData,
-  useSuspendedBackendaiClient,
-  useUpdatableState,
-} from '../hooks';
-import { MyEnvironmentPageForgetAndUntagMutation } from './__generated__/MyEnvironmentPageForgetAndUntagMutation.graphql';
-import {
-  MyEnvironmentPageQuery,
-  MyEnvironmentPageQuery$data,
-} from './__generated__/MyEnvironmentPageQuery.graphql';
-import { DeleteOutlined, SettingOutlined } from '@ant-design/icons';
-import { useLocalStorageState } from 'ahooks';
-import { App, Button, Card, Popconfirm, Table, theme, Typography } from 'antd';
-import { AnyObject } from 'antd/es/_util/type';
-import { ColumnsType, ColumnType } from 'antd/es/table';
-import graphql from 'babel-plugin-relay/macro';
-import _ from 'lodash';
-import React, {
-  PropsWithChildren,
-  Suspense,
-  useState,
-  useTransition,
-} from 'react';
+import Card from 'antd/es/card/Card';
+import { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLazyLoadQuery, useMutation } from 'react-relay';
+import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
-type TabKey = 'images';
+const tabParam = withDefault(StringParam, 'image');
 
-export type CommittedImage = NonNullable<
-  MyEnvironmentPageQuery$data['customized_images']
->[number];
-
-const MyEnvironmentPage: React.FC<PropsWithChildren> = ({ children }) => {
+const MyEnvironmentPage = () => {
   const { t } = useTranslation();
-  const { token } = theme.useToken();
-  const { message } = App.useApp();
-  const baiClient = useSuspendedBackendaiClient();
-  const supportExtendedImageInfo =
-    baiClient?.supports('extended-image-info') ?? false;
-
-  const [isOpenColumnsSetting, setIsOpenColumnsSetting] = useState(false);
-  const [selectedTab] = useState<TabKey>('images');
-  const [isRefetchPending, startRefetchTransition] = useTransition();
-  const [myEnvironmentFetchKey, updateMyEnvironmentFetchKey] =
-    useUpdatableState('initial-fetch');
-  const [inFlightImageId, setInFlightImageId] = useState<string>();
-  const [
-    ,
-    {
-      getNamespace,
-      getImageLang,
-      getBaseVersion,
-      getBaseImage,
-      getConstraints,
-    },
-  ] = useBackendAIImageMetaData();
-
-  const { customized_images } = useLazyLoadQuery<MyEnvironmentPageQuery>(
-    graphql`
-      query MyEnvironmentPageQuery {
-        customized_images {
-          id
-          name @deprecatedSince(version: "24.09.1.")
-          humanized_name
-          tag
-          registry
-          architecture
-          digest
-          labels {
-            key
-            value
-          }
-          supported_accelerators
-          namespace @since(version: "24.09.1.")
-        }
-      }
-    `,
-    {},
-    {
-      fetchPolicy:
-        myEnvironmentFetchKey === 'initial-fetch'
-          ? 'store-and-network'
-          : 'network-only',
-      fetchKey: myEnvironmentFetchKey,
-    },
-  );
-
-  const [commitForgetAndUntag, isInflightForgetAndUntag] =
-    useMutation<MyEnvironmentPageForgetAndUntagMutation>(graphql`
-      mutation MyEnvironmentPageForgetAndUntagMutation($id: String!) {
-        untag_image_from_registry(image_id: $id) {
-          ok
-          msg
-        }
-        forget_image_by_id(image_id: $id) {
-          ok
-          msg
-        }
-      }
-    `);
-
-  const columns: ColumnsType<CommittedImage> = [
-    {
-      title: t('environment.Registry'),
-      dataIndex: 'registry',
-      key: 'registry',
-      sorter: (a, b) =>
-        a?.registry && b?.registry ? a.registry.localeCompare(b.registry) : 0,
-    },
-    {
-      title: t('environment.Architecture'),
-      dataIndex: 'architecture',
-      key: 'architecture',
-      sorter: (a, b) =>
-        a?.architecture && b?.architecture
-          ? a.architecture.localeCompare(b.architecture)
-          : 0,
-    },
-    ...(supportExtendedImageInfo
-      ? [
-          {
-            title: t('environment.Namespace'),
-            key: 'namespace',
-            dataIndex: 'namespace',
-            sorter: (a: CommittedImage, b: CommittedImage) =>
-              localeCompare(a?.namespace, b?.namespace),
-          },
-        ]
-      : [
-          {
-            title: t('environment.Namespace'),
-            key: 'name',
-            dataIndex: 'name',
-            sorter: (a: CommittedImage, b: CommittedImage) => {
-              const namespaceA = getNamespace(getImageFullName(a) || '');
-              const namespaceB = getNamespace(getImageFullName(b) || '');
-              return namespaceA && namespaceB
-                ? namespaceA.localeCompare(namespaceB)
-                : 0;
-            },
-            render: (text: string, row: CommittedImage) => (
-              <span>{getNamespace(getImageFullName(row) || '')}</span>
-            ),
-          },
-        ]),
-    {
-      title: t('environment.Language'),
-      key: 'lang',
-      sorter: (a, b) => {
-        const langA = getImageLang(getImageFullName(a) || '');
-        const langB = getImageLang(getImageFullName(b) || '');
-        return langA && langB ? langA.localeCompare(langB) : 0;
-      },
-      render: (text, row) => (
-        <LangTags image={getImageFullName(row) || ''} color="green" />
-      ),
-    },
-    {
-      title: t('environment.Version'),
-      key: 'baseversion',
-      sorter: (a, b) => {
-        const baseversionA = getBaseVersion(getImageFullName(a) || '');
-        const baseversionB = getBaseVersion(getImageFullName(b) || '');
-        return baseversionA && baseversionB
-          ? baseversionA.localeCompare(baseversionB)
-          : 0;
-      },
-      render: (text, row) => (
-        <BaseVersionTags image={getImageFullName(row) || ''} color="green" />
-      ),
-    },
-    {
-      title: t('environment.Base'),
-      key: 'baseimage',
-      sorter: (a, b) => {
-        const baseimageA = getBaseImage(getImageFullName(a) || '');
-        const baseimageB = getBaseImage(getImageFullName(b) || '');
-        return baseimageA && baseimageB
-          ? baseimageA.localeCompare(baseimageB)
-          : 0;
-      },
-      render: (text, row) => (
-        <BaseImageTags image={getImageFullName(row) || ''} />
-      ),
-    },
-    {
-      title: t('environment.Constraint'),
-      key: 'constraint',
-      sorter: (a, b) => {
-        const requirementA =
-          a?.tag && b?.labels
-            ? getConstraints(
-                a?.tag,
-                a?.labels as { key: string; value: string }[],
-              )[0] || ''
-            : '';
-        const requirementB =
-          b?.tag && b?.labels
-            ? getConstraints(
-                b?.tag,
-                b?.labels as { key: string; value: string }[],
-              )[0] || ''
-            : '';
-        if (requirementA === '' && requirementB === '') return 0;
-        if (requirementA === '') return -1;
-        if (requirementB === '') return 1;
-        return requirementA.localeCompare(requirementB);
-      },
-      render: (text, row) =>
-        row?.tag ? (
-          <ConstraintTags
-            tag={row.tag}
-            labels={row?.labels as { key: string; value: string }[]}
-          />
-        ) : null,
-    },
-    {
-      title: t('environment.Digest'),
-      dataIndex: 'digest',
-      key: 'digest',
-      sorter: (a, b) =>
-        a?.digest && b?.digest ? a.digest.localeCompare(b.digest) : 0,
-    },
-    {
-      title: t('general.Control'),
-      key: 'control',
-      fixed: 'right',
-      render: (text, row) => (
-        <Flex direction="row" align="stretch" justify="center" gap="xxs">
-          <Typography.Text
-            copyable={{
-              text: getImageFullName(row) || '',
-            }}
-            style={{
-              paddingTop: token.paddingXXS,
-              paddingBottom: token.paddingXXS,
-            }}
-          />
-          <Popconfirm
-            title={t('dialog.ask.DoYouWantToProceed')}
-            description={t('dialog.warning.CannotBeUndone')}
-            okType="danger"
-            okText={t('button.Delete')}
-            onConfirm={() => {
-              if (row?.id) {
-                setInFlightImageId(row.id + myEnvironmentFetchKey);
-                commitForgetAndUntag({
-                  variables: {
-                    id: row.id,
-                  },
-                  onCompleted(data, errors) {
-                    if (errors) {
-                      message.error(errors[0]?.message);
-                      return;
-                    }
-                    startRefetchTransition(() => {
-                      updateMyEnvironmentFetchKey();
-                    });
-                    message.success(
-                      t('environment.CustomizedImageSuccessfullyDeleted'),
-                    );
-                  },
-                  onError(err) {
-                    message.error(err?.message);
-                  },
-                });
-              }
-            }}
-          >
-            <Button
-              type="text"
-              icon={<DeleteOutlined />}
-              danger
-              loading={
-                isInflightForgetAndUntag &&
-                inFlightImageId === row?.id + myEnvironmentFetchKey
-              }
-              disabled={
-                isInflightForgetAndUntag &&
-                inFlightImageId !== row?.id + myEnvironmentFetchKey
-              }
-            />
-          </Popconfirm>
-        </Flex>
-      ),
-    },
-  ];
-
-  const [displayedColumnKeys, setDisplayedColumnKeys] = useLocalStorageState(
-    'backendaiwebui.MyEnvironmentPage.displayedColumnKeys',
-    {
-      defaultValue: columns.map((column) => _.toString(column.key)),
-    },
-  );
+  const [curTabKey, setCurTabKey] = useQueryParam('tab', tabParam);
 
   return (
-    <Flex direction="column" align="stretch" gap={'xs'}>
-      <Flex direction="column" align="stretch">
-        <Card
-          tabList={[{ key: 'images', label: t('environment.Images') }]}
-          activeTabKey={selectedTab}
-          styles={{
-            body: {
-              padding: 0,
-              paddingTop: 1,
-            },
-          }}
-        >
-          <Suspense fallback={<FlexActivityIndicator />}>
-            <Table
-              loading={isRefetchPending}
-              columns={
-                columns.filter((column) =>
-                  displayedColumnKeys?.includes(_.toString(column.key)),
-                ) as ColumnType<AnyObject>[]
-              }
-              dataSource={customized_images as readonly AnyObject[] | undefined}
-              rowKey="id"
-              scroll={{ x: 'max-content' }}
-              pagination={false}
-            />
-            <Flex
-              justify="end"
-              style={{
-                padding: token.paddingXXS,
-              }}
-            >
-              <Button
-                type="text"
-                icon={<SettingOutlined />}
-                onClick={() => {
-                  setIsOpenColumnsSetting(true);
-                }}
-              />
-            </Flex>
-          </Suspense>
-        </Card>
-      </Flex>
-      <TableColumnsSettingModal
-        open={isOpenColumnsSetting}
-        onRequestClose={(values) => {
-          values?.selectedColumnKeys &&
-            setDisplayedColumnKeys(values?.selectedColumnKeys);
-          setIsOpenColumnsSetting(!isOpenColumnsSetting);
-        }}
-        columns={columns}
-        displayedColumnKeys={displayedColumnKeys ? displayedColumnKeys : []}
-      />
-    </Flex>
+    <Card
+      activeTabKey={curTabKey}
+      onTabChange={setCurTabKey}
+      tabList={[
+        {
+          key: 'image',
+          label: t('environment.Images'),
+        },
+      ]}
+      styles={{
+        body: {
+          padding: 0,
+          paddingTop: 1,
+          overflow: 'hidden',
+        },
+      }}
+    >
+      <Suspense
+        fallback={
+          <FlexActivityIndicator
+            style={{ height: 'calc(100vh - 145px)' }}
+            spinSize="large"
+          />
+        }
+      >
+        {curTabKey === 'image' && <CustomizedImageList />}
+      </Suspense>
+    </Card>
   );
 };