Feat: new pagination (#11170)

web/app/components/app/log/index.tsx

@@ -2,17 +2,15 @@
 import type { FC, SVGProps } from 'react'
 import React, { useState } from 'react'
 import useSWR from 'swr'
+import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { Pagination } from 'react-headless-pagination'
 import { useDebounce } from 'ahooks'
 import { omit } from 'lodash-es'
 import dayjs from 'dayjs'
-import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline'
 import { Trans, useTranslation } from 'react-i18next'
-import Link from 'next/link'
 import List from './list'
 import Filter, { TIME_PERIOD_MAPPING } from './filter'
-import s from './style.module.css'
+import Pagination from '@/app/components/base/pagination'
 import Loading from '@/app/components/base/loading'
 import { fetchChatConversations, fetchCompletionConversations } from '@/service/log'
 import { APP_PAGE_LIMIT } from '@/config'
@@ -60,6 +58,7 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
     sort_by: '-created_at',
   })
   const [currPage, setCurrPage] = React.useState<number>(0)
+  const [limit, setLimit] = React.useState<number>(APP_PAGE_LIMIT)
   const debouncedQueryParams = useDebounce(queryParams, { wait: 500 })
 
   // Get the app type first
@@ -67,7 +66,7 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
 
   const query = {
     page: currPage + 1,
-    limit: APP_PAGE_LIMIT,
+    limit,
     ...((debouncedQueryParams.period !== '9')
       ? {
         start: dayjs().subtract(TIME_PERIOD_MAPPING[debouncedQueryParams.period].value, 'day').startOf('day').format('YYYY-MM-DD HH:mm'),
@@ -102,9 +101,9 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
   const total = isChatMode ? chatConversations?.total : completionConversations?.total
 
   return (
-    <div className='flex flex-col h-full'>
-      <p className='text-text-tertiary system-sm-regular'>{t('appLog.description')}</p>
-      <div className='flex flex-col py-4 flex-1'>
+    <div className='grow flex flex-col h-full'>
+      <p className='shrink-0 text-text-tertiary system-sm-regular'>{t('appLog.description')}</p>
+      <div className='grow max-h-[calc(100%-16px)] flex flex-col py-4 flex-1'>
         <Filter isChatMode={isChatMode} appId={appDetail.id} queryParams={queryParams} setQueryParams={setQueryParams} />
         {total === undefined
           ? <Loading type='app' />
@@ -115,35 +114,12 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
         {/* Show Pagination only if the total is more than the limit */}
         {(total && total > APP_PAGE_LIMIT)
           ? <Pagination
-            className="flex items-center w-full h-10 text-sm select-none mt-8"
-            currentPage={currPage}
-            edgePageCount={2}
-            middlePagesSiblingCount={1}
-            setCurrentPage={setCurrPage}
-            totalPages={Math.ceil(total / APP_PAGE_LIMIT)}
-            truncableClassName="w-8 px-0.5 text-center"
-            truncableText="..."
-          >
-            <Pagination.PrevButton
-              disabled={currPage === 0}
-              className={`flex items-center mr-2 text-gray-500  focus:outline-none ${currPage === 0 ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:text-gray-600 dark:hover:text-gray-200'}`} >
-              <ArrowLeftIcon className="mr-3 h-3 w-3" />
-              {t('appLog.table.pagination.previous')}
-            </Pagination.PrevButton>
-            <div className={`flex items-center justify-center flex-grow ${s.pagination}`}>
-              <Pagination.PageButton
-                activeClassName="bg-primary-50 dark:bg-opacity-0 text-primary-600 dark:text-white"
-                className="flex items-center justify-center h-8 w-8 rounded-full cursor-pointer"
-                inactiveClassName="text-gray-500"
-              />
-            </div>
-            <Pagination.NextButton
-              disabled={currPage === Math.ceil(total / APP_PAGE_LIMIT) - 1}
-              className={`flex items-center mr-2 text-gray-500 focus:outline-none ${currPage === Math.ceil(total / APP_PAGE_LIMIT) - 1 ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:text-gray-600 dark:hover:text-gray-200'}`} >
-              {t('appLog.table.pagination.next')}
-              <ArrowRightIcon className="ml-3 h-3 w-3" />
-            </Pagination.NextButton>
-          </Pagination>
+            current={currPage}
+            onChange={setCurrPage}
+            total={total}
+            limit={limit}
+            onLimitChange={setLimit}
+          />
           : null}
       </div>
     </div>

web/app/components/app/log/style.module.css

@@ -1,3 +0,0 @@
-.pagination li {
-  list-style: none;
-}