UI Improvements (#1935)

* Update styles for dashboard page * Fix grid in chatflows and marketplaces pages * Update styles for main routes * Create ViewHeader component and use it in chatflows and marketplace * Use viewheader in all main routes views and make the styles consistent * Update table styles for chatflow and marketplace views * Update table and grid styles in all main routes views * Make backgrounds, borders, and colors everywhere * Apply text ellipsis for titles in cards and tables * Update credentials list dialog styles * Update tools dialog styles * Update styles for inputs and dialogs * Show skeleton loaders for main routes * Apply text ellipsis to chatflow title in canvas page * Update icons for load and export buttons in tools and assistants * Fix issue where table header is shown when number of elements is zero * Add error boundary component to main routes * Capture errors from all requests in main routes * Fix id for add api key and add variable buttons * Fix missing th tag in variables table body
2026-06-28 15:00:57 +03:00 · 2024-04-08 11:15:42 +05:30
parent 19e14c4798
commit 19bb23440a
32 changed files with 2267 additions and 1662 deletions
@@ -0,0 +1,83 @@
+import PropTypes from 'prop-types'
+
+// material-ui
+import { Box, OutlinedInput, Toolbar, Typography } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+
+// icons
+import { IconSearch } from '@tabler/icons'
+
+const ViewHeader = ({ children, filters = null, onSearchChange, search, searchPlaceholder = 'Search', title }) => {
+    const theme = useTheme()
+
+    return (
+        <Box sx={{ flexGrow: 1, py: 1.25, width: '100%' }}>
+            <Toolbar
+                disableGutters={true}
+                sx={{
+                    p: 0,
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    width: '100%'
+                }}
+            >
+                <Typography
+                    sx={{
+                        fontSize: '2rem',
+                        fontWeight: 600
+                    }}
+                    variant='h1'
+                >
+                    {title}
+                </Typography>
+                <Box sx={{ height: 40, display: 'flex', alignItems: 'center', gap: 1 }}>
+                    {search && (
+                        <OutlinedInput
+                            size='small'
+                            sx={{
+                                width: '280px',
+                                height: '100%',
+                                display: { xs: 'none', sm: 'flex' },
+                                borderRadius: 2,
+
+                                '& .MuiOutlinedInput-notchedOutline': {
+                                    borderRadius: 2
+                                }
+                            }}
+                            variant='outlined'
+                            placeholder={searchPlaceholder}
+                            onChange={onSearchChange}
+                            startAdornment={
+                                <Box
+                                    sx={{
+                                        color: theme.palette.grey[400],
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        mr: 1
+                                    }}
+                                >
+                                    <IconSearch style={{ color: 'inherit', width: 16, height: 16 }} />
+                                </Box>
+                            }
+                            type='search'
+                        />
+                    )}
+                    {filters}
+                    {children}
+                </Box>
+            </Toolbar>
+        </Box>
+    )
+}
+
+ViewHeader.propTypes = {
+    children: PropTypes.node,
+    filters: PropTypes.node,
+    onSearchChange: PropTypes.func,
+    search: PropTypes.bool,
+    searchPlaceholder: PropTypes.string,
+    title: PropTypes.string
+}
+
+export default ViewHeader