fix(ui): resolve docstore conflicts and keep dark-theme action button styling

Author: sahil2448

packages/ui/src/ui-component/table/DocumentStoreTable.jsx

@@ -19,6 +19,7 @@ import {
 } from '@mui/material'
 import { tableCellClasses } from '@mui/material/TableCell'
 import DocumentStoreStatus from '@/views/docstore/DocumentStoreStatus'
+import { getDocStoreActionButtonSx } from '@/views/docstore/actionButtonStyles'
 import { IconDotsVertical } from '@tabler/icons-react'
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
@@ -159,12 +160,12 @@ export const DocumentStoreTable = ({ data, isLoading, onRowClick, images, showAc
                             </>
                         ) : (
                             <>
-                                {sortedData.map((row, index) => {
+                                {sortedData.map((row) => {
                                     return (
                                         <StyledTableRow
                                             onClick={() => onRowClick(row)}
                                             hover
-                                            key={index}
+                                            key={row.id}
                                             sx={{ cursor: 'pointer', '&:last-child td, &:last-child th': { border: 0 } }}
                                         >
                                             <StyledTableCell>
@@ -255,19 +256,7 @@ export const DocumentStoreTable = ({ data, isLoading, onRowClick, images, showAc
                                                     <IconButton
                                                         size='small'
                                                         aria-label='Document store options'
-                                                        sx={{
-                                                            p: 0.5,
-                                                            color: theme.palette.text.primary,
-                                                            backgroundColor:
-                                                                theme.palette.mode === 'dark'
-                                                                    ? theme.palette.background.default
-                                                                    : theme.palette.background.paper,
-                                                            border: `1px solid ${theme.palette.divider}`,
-                                                            '&:hover': {
-                                                                backgroundColor: theme.palette.action.hover,
-                                                                borderColor: theme.palette.text.secondary
-                                                            }
-                                                        }}
+                                                        sx={getDocStoreActionButtonSx(theme)}
                                                         onClick={(event) => {
                                                             event.stopPropagation()
                                                             onActionMenuClick(event, row)

packages/ui/src/views/docstore/actionButtonStyles.js

@@ -0,0 +1,10 @@
+export const getDocStoreActionButtonSx = (theme) => ({
+    p: 0.5,
+    color: theme.palette.text.primary,
+    backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.background.paper,
+    border: `1px solid ${theme.palette.divider}`,
+    '&:hover': {
+        backgroundColor: theme.palette.action.hover,
+        borderColor: theme.palette.text.secondary
+    }
+})

packages/ui/src/views/docstore/index.jsx

@@ -15,6 +15,7 @@ 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 AddDocStoreDialog from '@/views/docstore/AddDocStoreDialog'
+import { getDocStoreActionButtonSx } from '@/views/docstore/actionButtonStyles'
 import DeleteDocStoreDialog from '@/views/docstore/DeleteDocStoreDialog'
 
 // API
@@ -88,14 +89,9 @@ const Documents = () => {
             return responseData
         }
 
-        if (responseData && typeof responseData === 'object') {
-            if (typeof responseData.message === 'string' && responseData.message.trim()) {
-                return responseData.message
-            }
-
-            if (typeof responseData.error === 'string' && responseData.error.trim()) {
-                return responseData.error
-            }
+        const responseMessage = responseData && typeof responseData === 'object' ? responseData.message || responseData.error : undefined
+        if (typeof responseMessage === 'string' && responseMessage.trim()) {
+            return responseMessage
         }
 
         if (typeof error?.message === 'string' && error.message.trim()) {
@@ -387,8 +383,8 @@ const Documents = () => {
                         <React.Fragment>
                             {!view || view === 'card' ? (
                                 <Box display='grid' gridTemplateColumns='repeat(3, 1fr)' gap={gridSpacing}>
-                                    {docStores?.filter(filterDocStores).map((data, index) => (
-                                        <Box key={index} sx={{ position: 'relative' }}>
+                                    {docStores?.filter(filterDocStores).map((data) => (
+                                        <Box key={data.id} sx={{ position: 'relative' }}>
                                             <DocumentStoreCard
                                                 images={images[data.id]}
                                                 data={data}
@@ -406,17 +402,7 @@ const Documents = () => {
                                                         zIndex: 2,
                                                         width: 30,
                                                         height: 30,
-                                                        p: 0.5,
-                                                        color: theme.palette.text.primary,
-                                                        backgroundColor:
-                                                            theme.palette.mode === 'dark'
-                                                                ? theme.palette.background.default
-                                                                : theme.palette.background.paper,
-                                                        border: `1px solid ${theme.palette.divider}`,
-                                                        '&:hover': {
-                                                            backgroundColor: theme.palette.action.hover,
-                                                            borderColor: theme.palette.text.secondary
-                                                        },
+                                                        ...getDocStoreActionButtonSx(theme),
                                                         [theme.breakpoints.down('sm')]: {
                                                             top: 8,
                                                             right: 8,