chore: split large files

client/src/pages/databases/CollectionsTab.tsx

@@ -0,0 +1,103 @@
+import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import RouteTabList from '@/components/customTabList/RouteTabList';
+import Partitions from './collections/partitions/Partitions';
+import Schema from './collections/schema/Schema';
+import Data from './collections/data/CollectionData';
+import Segments from './collections/segments/Segments';
+import Properties from './collections/properties/Properties';
+import Search from './collections/search/Search';
+import { authContext } from '@/context';
+import type { SearchParams, QueryState } from './types';
+import type { CollectionObject, CollectionFullObject } from '@server/types';
+import type { ITab } from '@/components/customTabList/Types';
+
+// Collection tab pages
+export const CollectionsTabs = (props: {
+  collectionPage: string; // current collection page
+  collectionName: string; // current collection name
+  tabClass: string; // tab class
+  collections: CollectionObject[]; // collections
+  searchParams: SearchParams; // search params
+  setSearchParams: (params: SearchParams) => void; // set search params
+  queryState: QueryState; // query state
+  setQueryState: (state: QueryState) => void; // set query state
+}) => {
+  // props
+  const {
+    collectionPage,
+    collectionName,
+    tabClass,
+    collections,
+    searchParams,
+    setSearchParams,
+    queryState,
+    setQueryState,
+  } = props;
+
+  // context
+  const { isManaged } = useContext(authContext);
+  // i18n
+  const { t: collectionTrans } = useTranslation('collection');
+
+  const collection = collections.find(
+    i => i.collection_name === collectionName
+  ) as CollectionFullObject;
+
+  // collection tabs
+  const collectionTabs: ITab[] = [
+    {
+      label: collectionTrans('schemaTab'),
+      component: <Schema />,
+      path: `schema`,
+    },
+    {
+      label: collectionTrans('searchTab'),
+      component: (
+        <Search
+          collections={collections}
+          collectionName={collectionName}
+          searchParams={searchParams}
+          setSearchParams={setSearchParams}
+        />
+      ),
+      path: `search`,
+    },
+    {
+      label: collectionTrans('dataTab'),
+      component: <Data queryState={queryState} setQueryState={setQueryState} />,
+      path: `data`,
+    },
+    {
+      label: collectionTrans('partitionTab'),
+      component: <Partitions />,
+      path: `partitions`,
+    },
+  ];
+
+  if (!isManaged) {
+    collectionTabs.push(
+      {
+        label: collectionTrans('segmentsTab'),
+        component: <Segments />,
+        path: `segments`,
+      },
+      {
+        label: collectionTrans('propertiesTab'),
+        component: <Properties type="collection" target={collection} />,
+        path: `properties`,
+      }
+    );
+  }
+
+  // get active collection tab
+  const activeColTab = collectionTabs.findIndex(t => t.path === collectionPage);
+
+  return (
+    <RouteTabList
+      tabs={collectionTabs}
+      wrapperClass={tabClass}
+      activeIndex={activeColTab !== -1 ? activeColTab : 0}
+    />
+  );
+};

client/src/pages/databases/Databases.tsx

@@ -1,26 +1,17 @@
 import { useContext, useEffect, useState, useRef } from 'react';
 import { useParams } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
 import { useNavigationHook } from '@/hooks';
-import RouteTabList from '@/components/customTabList/RouteTabList';
 import DatabaseTree from '@/pages/databases/tree';
-import Partitions from './collections/partitions/Partitions';
-import Schema from './collections/schema/Schema';
-import Data from './collections/data/CollectionData';
-import Segments from './collections/segments/Segments';
-import Properties from './collections/properties/Properties';
-import Search from './collections/search/Search';
-import { dataContext, authContext } from '@/context';
-import Collections from './collections/Collections';
+import { dataContext } from '@/context';
 import StatusIcon from '@/components/status/StatusIcon';
 import { ConsistencyLevelEnum, DYNAMIC_FIELD } from '@/consts';
 import { ALL_ROUTER_TYPES } from '@/router/consts';
 import { makeStyles } from '@mui/styles';
 import { LoadingType } from '@/components/status/StatusIcon';
 import type { Theme } from '@mui/material/styles';
 import type { SearchParams, QueryState } from './types';
-import type { CollectionObject, CollectionFullObject } from '@server/types';
-import type { ITab } from '@/components/customTabList/Types';
+import { DatabasesTab } from './DatabasesTab';
+import { CollectionsTabs } from './CollectionsTab';
 
 const DEFAULT_TREE_WIDTH = 230;
 
@@ -355,7 +346,7 @@ const Databases = () => {
         />
       )}
       {collectionName && (
-        <CollectionTabs
+        <CollectionsTabs
           collectionPage={collectionPage}
           collectionName={collectionName}
           tabClass={classes.tab}
@@ -378,132 +369,4 @@ const Databases = () => {
   );
 };
 
-// Database tab pages
-const DatabasesTab = (props: {
-  databasePage: string; // current database page
-  databaseName: string;
-  tabClass: string; // tab class
-}) => {
-  // context
-  const { isManaged } = useContext(authContext);
-  const { databaseName, tabClass, databasePage } = props;
-  const { t: collectionTrans } = useTranslation('collection');
-
-  const dbTab: ITab[] = [
-    {
-      label: collectionTrans('collections'),
-      component: <Collections />,
-      path: `collections`,
-    },
-  ];
-
-  if (!isManaged) {
-    dbTab.push({
-      label: collectionTrans('properties'),
-      component: <Properties type="database" target={databaseName} />,
-      path: `properties`,
-    });
-  }
-
-  const actionDbTab = dbTab.findIndex(t => t.path === databasePage);
-
-  return (
-    <RouteTabList
-      tabs={dbTab}
-      wrapperClass={tabClass}
-      activeIndex={actionDbTab !== -1 ? actionDbTab : 0}
-    />
-  );
-};
-
-// Collection tab pages
-const CollectionTabs = (props: {
-  collectionPage: string; // current collection page
-  collectionName: string; // current collection name
-  tabClass: string; // tab class
-  collections: CollectionObject[]; // collections
-  searchParams: SearchParams; // search params
-  setSearchParams: (params: SearchParams) => void; // set search params
-  queryState: QueryState; // query state
-  setQueryState: (state: QueryState) => void; // set query state
-}) => {
-  // props
-  const {
-    collectionPage,
-    collectionName,
-    tabClass,
-    collections,
-    searchParams,
-    setSearchParams,
-    queryState,
-    setQueryState,
-  } = props;
-
-  // context
-  const { isManaged } = useContext(authContext);
-  // i18n
-  const { t: collectionTrans } = useTranslation('collection');
-
-  const collection = collections.find(
-    i => i.collection_name === collectionName
-  ) as CollectionFullObject;
-
-  // collection tabs
-  const collectionTabs: ITab[] = [
-    {
-      label: collectionTrans('schemaTab'),
-      component: <Schema />,
-      path: `schema`,
-    },
-    {
-      label: collectionTrans('searchTab'),
-      component: (
-        <Search
-          collections={collections}
-          collectionName={collectionName}
-          searchParams={searchParams}
-          setSearchParams={setSearchParams}
-        />
-      ),
-      path: `search`,
-    },
-    {
-      label: collectionTrans('dataTab'),
-      component: <Data queryState={queryState} setQueryState={setQueryState} />,
-      path: `data`,
-    },
-    {
-      label: collectionTrans('partitionTab'),
-      component: <Partitions />,
-      path: `partitions`,
-    },
-  ];
-
-  if (!isManaged) {
-    collectionTabs.push(
-      {
-        label: collectionTrans('segmentsTab'),
-        component: <Segments />,
-        path: `segments`,
-      },
-      {
-        label: collectionTrans('propertiesTab'),
-        component: <Properties type="collection" target={collection} />,
-        path: `properties`,
-      }
-    );
-  }
-
-  // get active collection tab
-  const activeColTab = collectionTabs.findIndex(t => t.path === collectionPage);
-
-  return (
-    <RouteTabList
-      tabs={collectionTabs}
-      wrapperClass={tabClass}
-      activeIndex={activeColTab !== -1 ? activeColTab : 0}
-    />
-  );
-};
-
 export default Databases;

client/src/pages/databases/DatabasesTab.tsx

@@ -0,0 +1,45 @@
+import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import RouteTabList from '@/components/customTabList/RouteTabList';
+import Properties from './collections/properties/Properties';
+import { authContext } from '@/context';
+import Collections from './collections/Collections';
+import type { ITab } from '@/components/customTabList/Types';
+
+// Database tab pages
+export const DatabasesTab = (props: {
+  databasePage: string; // current database page
+  databaseName: string;
+  tabClass: string; // tab class
+}) => {
+  // context
+  const { isManaged } = useContext(authContext);
+  const { databaseName, tabClass, databasePage } = props;
+  const { t: collectionTrans } = useTranslation('collection');
+
+  const dbTab: ITab[] = [
+    {
+      label: collectionTrans('collections'),
+      component: <Collections />,
+      path: `collections`,
+    },
+  ];
+
+  if (!isManaged) {
+    dbTab.push({
+      label: collectionTrans('properties'),
+      component: <Properties type="database" target={databaseName} />,
+      path: `properties`,
+    });
+  }
+
+  const actionDbTab = dbTab.findIndex(t => t.path === databasePage);
+
+  return (
+    <RouteTabList
+      tabs={dbTab}
+      wrapperClass={tabClass}
+      activeIndex={actionDbTab !== -1 ? actionDbTab : 0}
+    />
+  );
+};