Skip to content

mini-feat: Store page sizes of views in local storage #5830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HenryHengZJ merged 3 commits into from
Mar 31, 2026
Merged

mini-feat: Store page sizes of views in local storage #5830

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0496b43
page sizes for agent execution view, agentflow view, chatflow view an…
Mewyii Feb 24, 2026
db392fd
Merge remote-tracking branch 'origin/main' into feature/storeViewPage…
Mewyii Mar 22, 2026
752d93e
Code improvements.
Mewyii Mar 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 13 additions & 12 deletions packages/ui/src/views/agentexecutions/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,44 +5,44 @@ import 'react-datepicker/dist/react-datepicker.css'
// material-ui
import {
Box,
Stack,
TextField,
MenuItem,
Button,
Grid,
FormControl,
InputLabel,
Select,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
FormControl,
Grid,
IconButton,
InputLabel,
MenuItem,
Select,
Stack,
TextField,
Tooltip,
useTheme
} from '@mui/material'

// project imports
import MainCard from '@/ui-component/cards/MainCard'
import ErrorBoundary from '@/ErrorBoundary'
import ViewHeader from '@/layout/MainLayout/ViewHeader'
import MainCard from '@/ui-component/cards/MainCard'
import { Available } from '@/ui-component/rbac/available'

// API
import useApi from '@/hooks/useApi'
import executionsApi from '@/api/executions'
import useApi from '@/hooks/useApi'
import { useSelector } from 'react-redux'

// icons
import execution_empty from '@/assets/images/executions_empty.svg'
import { IconTrash } from '@tabler/icons-react'

// const
import TablePagination, { DEFAULT_ITEMS_PER_PAGE } from '@/ui-component/pagination/TablePagination'
import { ExecutionsListTable } from '@/ui-component/table/ExecutionsListTable'
import { ExecutionDetails } from './ExecutionDetails'
import { omit } from 'lodash'
import TablePagination, { DEFAULT_ITEMS_PER_PAGE } from '@/ui-component/pagination/TablePagination'
import { ExecutionDetails } from './ExecutionDetails'

// ==============================|| AGENT EXECUTIONS ||============================== //

Expand Down Expand Up @@ -91,11 +91,12 @@ const AgentExecutions = () => {

/* Table Pagination */
const [currentPage, setCurrentPage] = useState(1)
const [pageLimit, setPageLimit] = useState(DEFAULT_ITEMS_PER_PAGE)
const [pageLimit, setPageLimit] = useState(() => Number(localStorage.getItem('executionsPageSize') || DEFAULT_ITEMS_PER_PAGE))
const [total, setTotal] = useState(0)
const onChange = (page, pageLimit) => {
setCurrentPage(page)
setPageLimit(pageLimit)
localStorage.setItem('executionsPageSize', pageLimit)
applyFilters(page, pageLimit)
}
Comment thread
Mewyii marked this conversation as resolved.

Expand Down
27 changes: 14 additions & 13 deletions packages/ui/src/views/agentflows/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'

// material-ui
import { Chip, Box, Stack, ToggleButton, ToggleButtonGroup, IconButton } from '@mui/material'
import { Box, Chip, IconButton, Stack, ToggleButton, ToggleButtonGroup } from '@mui/material'
import { useTheme } from '@mui/material/styles'

// project imports
import MainCard from '@/ui-component/cards/MainCard'
import ItemCard from '@/ui-component/cards/ItemCard'
import { gridSpacing } from '@/store/constant'
import AgentsEmptySVG from '@/assets/images/agents_empty.svg'
import ConfirmDialog from '@/ui-component/dialog/ConfirmDialog'
import { FlowListTable } from '@/ui-component/table/FlowListTable'
import ViewHeader from '@/layout/MainLayout/ViewHeader'
import ErrorBoundary from '@/ErrorBoundary'
import ViewHeader from '@/layout/MainLayout/ViewHeader'
import { gridSpacing } from '@/store/constant'
import { StyledPermissionButton } from '@/ui-component/button/RBACButtons'
import ItemCard from '@/ui-component/cards/ItemCard'
import MainCard from '@/ui-component/cards/MainCard'
import ConfirmDialog from '@/ui-component/dialog/ConfirmDialog'
import TablePagination, { DEFAULT_ITEMS_PER_PAGE } from '@/ui-component/pagination/TablePagination'
import { FlowListTable } from '@/ui-component/table/FlowListTable'

// API
import chatflowsApi from '@/api/chatflows'
Expand All @@ -25,11 +25,11 @@ import chatflowsApi from '@/api/chatflows'
import useApi from '@/hooks/useApi'

// const
import { baseURL, AGENTFLOW_ICONS } from '@/store/constant'
import { AGENTFLOW_ICONS, baseURL } from '@/store/constant'
import { useError } from '@/store/context/ErrorContext'

// icons
import { IconPlus, IconLayoutGrid, IconList, IconX, IconAlertTriangle } from '@tabler/icons-react'
import { IconAlertTriangle, IconLayoutGrid, IconList, IconPlus, IconX } from '@tabler/icons-react'

// ==============================|| AGENTS ||============================== //

Expand All @@ -45,18 +45,19 @@ const Agentflows = () => {
const { error, setError } = useError()

const getAllAgentflows = useApi(chatflowsApi.getAllAgentflows)
const [view, setView] = useState(localStorage.getItem('flowDisplayStyle') || 'card')
const [view, setView] = useState(localStorage.getItem('agentFlowDisplayStyle') || 'card')
const [agentflowVersion, setAgentflowVersion] = useState(localStorage.getItem('agentFlowVersion') || 'v2')
const [showDeprecationNotice, setShowDeprecationNotice] = useState(true)

/* Table Pagination */
const [currentPage, setCurrentPage] = useState(1)
const [pageLimit, setPageLimit] = useState(DEFAULT_ITEMS_PER_PAGE)
const [pageLimit, setPageLimit] = useState(() => Number(localStorage.getItem('agentFlowPageSize') || DEFAULT_ITEMS_PER_PAGE))
const [total, setTotal] = useState(0)

const onChange = (page, pageLimit) => {
setCurrentPage(page)
setPageLimit(pageLimit)
localStorage.setItem('agentFlowPageSize', pageLimit)
refresh(page, pageLimit, agentflowVersion)
}
Comment thread
Mewyii marked this conversation as resolved.

Expand All @@ -70,7 +71,7 @@ const Agentflows = () => {

const handleChange = (event, nextView) => {
if (nextView === null) return
localStorage.setItem('flowDisplayStyle', nextView)
localStorage.setItem('agentFlowDisplayStyle', nextView)
setView(nextView)
}

Expand Down
23 changes: 12 additions & 11 deletions packages/ui/src/views/chatflows/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@ import { Box, Skeleton, Stack, ToggleButton, ToggleButtonGroup } from '@mui/mate
import { useTheme } from '@mui/material/styles'

// project imports
import MainCard from '@/ui-component/cards/MainCard'
import ItemCard from '@/ui-component/cards/ItemCard'
import { gridSpacing } from '@/store/constant'
import WorkflowEmptySVG from '@/assets/images/workflow_empty.svg'
import ConfirmDialog from '@/ui-component/dialog/ConfirmDialog'
import { FlowListTable } from '@/ui-component/table/FlowListTable'
import { StyledPermissionButton } from '@/ui-component/button/RBACButtons'
import ViewHeader from '@/layout/MainLayout/ViewHeader'
import ErrorBoundary from '@/ErrorBoundary'
import ViewHeader from '@/layout/MainLayout/ViewHeader'
import { gridSpacing } from '@/store/constant'
import { StyledPermissionButton } from '@/ui-component/button/RBACButtons'
import ItemCard from '@/ui-component/cards/ItemCard'
import MainCard from '@/ui-component/cards/MainCard'
import ConfirmDialog from '@/ui-component/dialog/ConfirmDialog'
import TablePagination, { DEFAULT_ITEMS_PER_PAGE } from '@/ui-component/pagination/TablePagination'
import { FlowListTable } from '@/ui-component/table/FlowListTable'

// API
import chatflowsApi from '@/api/chatflows'
Expand All @@ -28,7 +28,7 @@ import { baseURL } from '@/store/constant'
import { useError } from '@/store/context/ErrorContext'

// icons
import { IconPlus, IconLayoutGrid, IconList } from '@tabler/icons-react'
import { IconLayoutGrid, IconList, IconPlus } from '@tabler/icons-react'

// ==============================|| CHATFLOWS ||============================== //

Expand All @@ -42,16 +42,17 @@ const Chatflows = () => {
const { error, setError } = useError()

const getAllChatflowsApi = useApi(chatflowsApi.getAllChatflows)
const [view, setView] = useState(localStorage.getItem('flowDisplayStyle') || 'card')
const [view, setView] = useState(localStorage.getItem('chatFlowDisplayStyle') || 'card')

/* Table Pagination */
const [currentPage, setCurrentPage] = useState(1)
const [pageLimit, setPageLimit] = useState(DEFAULT_ITEMS_PER_PAGE)
const [pageLimit, setPageLimit] = useState(() => Number(localStorage.getItem('chatFlowPageSize') || DEFAULT_ITEMS_PER_PAGE))
const [total, setTotal] = useState(0)

const onChange = (page, pageLimit) => {
setCurrentPage(page)
setPageLimit(pageLimit)
localStorage.setItem('chatFlowPageSize', pageLimit)
applyFilters(page, pageLimit)
}
Comment thread
Mewyii marked this conversation as resolved.

Expand All @@ -65,7 +66,7 @@ const Chatflows = () => {

const handleChange = (event, nextView) => {
if (nextView === null) return
localStorage.setItem('flowDisplayStyle', nextView)
localStorage.setItem('chatFlowDisplayStyle', nextView)
setView(nextView)
}

Expand Down
13 changes: 7 additions & 6 deletions packages/ui/src/views/docstore/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,21 @@ import { useTheme } from '@mui/material/styles'

// project imports
import ErrorBoundary from '@/ErrorBoundary'
import ViewHeader from '@/layout/MainLayout/ViewHeader'
import { useError } from '@/store/context/ErrorContext'
import { StyledPermissionButton } from '@/ui-component/button/RBACButtons'
import DocumentStoreCard from '@/ui-component/cards/DocumentStoreCard'
import MainCard from '@/ui-component/cards/MainCard'
import TablePagination, { DEFAULT_ITEMS_PER_PAGE } from '@/ui-component/pagination/TablePagination'
import DocumentStoreCard from '@/ui-component/cards/DocumentStoreCard'
import AddDocStoreDialog from '@/views/docstore/AddDocStoreDialog'
import ViewHeader from '@/layout/MainLayout/ViewHeader'
import { StyledPermissionButton } from '@/ui-component/button/RBACButtons'

// API
import useApi from '@/hooks/useApi'
import documentsApi from '@/api/documentstore'
import useApi from '@/hooks/useApi'

// icons
import { IconPlus, IconLayoutGrid, IconList } from '@tabler/icons-react'
import doc_store_empty from '@/assets/images/doc_store_empty.svg'
import { IconLayoutGrid, IconList, IconPlus } from '@tabler/icons-react'

// const
import { baseURL, gridSpacing } from '@/store/constant'
Expand Down Expand Up @@ -88,11 +88,12 @@ const Documents = () => {

/* Table Pagination */
const [currentPage, setCurrentPage] = useState(1)
const [pageLimit, setPageLimit] = useState(DEFAULT_ITEMS_PER_PAGE)
const [pageLimit, setPageLimit] = useState(() => Number(localStorage.getItem('docStorePageSize') || DEFAULT_ITEMS_PER_PAGE))
const [total, setTotal] = useState(0)
const onChange = (page, pageLimit) => {
setCurrentPage(page)
setPageLimit(pageLimit)
localStorage.setItem('docStorePageSize', pageLimit)
applyFilters(page, pageLimit)
}
Comment thread
Mewyii marked this conversation as resolved.

Expand Down