Skip to content

Commit 28e8b58

Browse files
hkdemanhkdeman
committed
fix(frotnend): table left side hidden bug, console warnings, cache issue in explore storage unit
1 parent ac9582d commit 28e8b58

File tree

9 files changed

+64
-54
lines changed

9 files changed

+64
-54
lines changed

‎frontend/src/components/breadcrumbs.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const Breadcrumb: FC<IBreadcrumbProps> = ({ routes, active }) => {
1818
<ol className="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
1919
{
2020
routes.map((route, i) => (
21-
<li>
21+
<li key={route.name}>
2222
<div className="flex items-center transition-all gap-2 hover:gap-3 group/breadcrumb dark:text-neutral-300">
2323
{i > 0 && Icons.RightChevron}
2424
<div onClick={() => handleNavigate(route.path)} className={classNames("cursor-pointer text-sm font-medium text-gray-700 hover:text-teal-500 flex items-center gap-2 hover:gap-3 transition-all dark:text-neutral-300", {

‎frontend/src/components/dropdown.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const Dropdown: FC<IDropdownProps> = (props) => {
4444
}, []);
4545

4646
return (
47-
<button className={classNames("relative", props.className)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
47+
<div className={classNames("relative", props.className)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
4848
{props.loading ? <Loading hideText={true} /> :
4949
<> <div className="flex justify-between items-center border border-gray-200 rounded-lg w-full p-1 h-[34px] px-2 dark:bg-white/10 dark:border-white/20">
5050
<div className="flex gap-1 text-gray-700 text-sm truncate items-center dark:text-neutral-300">
@@ -94,7 +94,7 @@ export const Dropdown: FC<IDropdownProps> = (props) => {
9494
</ul>
9595
</div>
9696
</>}
97-
</button>
97+
</div>
9898
)
9999
}
100100

‎frontend/src/components/icons.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const Icons = {
22
Hide: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
3-
<path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
3+
<path strokeLinecap="round" strokeLinejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
44
</svg>,
55
Show: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
66
<path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />

‎frontend/src/components/notifications.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const Notifications: FC<INotificationsProps> = () => {
5656
<motion.li
5757
key={notification.id}
5858
layout
59-
className={classNames("bg-white dark:bg-white/20 dark:backdrop-blur-lg box-border overflow-hidden w-[40ch] sm:width-full shadow-lg rounded-xl border border-gray-200 dark:border-white/5 pointer-events-auto border-r-8", {
59+
className={classNames("bg-white dark:bg-white/15 dark:backdrop-blur-lg box-border overflow-hidden w-[40ch] sm:width-full shadow-lg rounded-xl border border-gray-200 dark:border-white/5 pointer-events-auto border-r-8", {
6060
"border-r-gray-400 dark:border-r-gray-200": notification.intent === "default",
6161
"border-r-red-400 dark:border-r-red-200": notification.intent === "error",
6262
"border-r-orange-400 dark:border-r-orange-200": notification.intent === "warning",

‎frontend/src/components/sidebar/sidebar.tsx

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -328,43 +328,41 @@ export const Sidebar: FC = () => {
328328
loading
329329
? <Loading />
330330
: <div className="flex flex-col justify-center mt-[10vh] grow">
331-
<AnimatePresence mode="wait">
332-
<div className="flex flex-col">
333-
<div className="flex flex-col mb-[10vh] gap-4 ml-4">
334-
<div className={classNames("flex gap-2 items-center", {
335-
"hidden": collapsed,
336-
})}>
337-
<div className="text-sm text-gray-600 dark:text-neutral-300 mr-2.5">Profile:</div>
338-
{
339-
current != null &&
340-
<Dropdown className="w-[140px]" items={loginItems} value={currentProfile} onChange={handleProfileChange}
341-
defaultItem={{
342-
label: "Add another profile",
343-
icon: cloneElement(Icons.Add, {
344-
className: "w-6 h-6 stroke-green-800 dark:stroke-green-400",
345-
}),
346-
}} defaultItemClassName="text-green-800" onDefaultItemClick={handleNavigateToLogin}
347-
action={<AnimatedButton icon={Icons.Logout} label="Logout" onClick={handleMenuLogout} /> }/>
348-
}
349-
</div>
331+
<div className="flex flex-col">
332+
<div className="flex flex-col mb-[10vh] gap-4 ml-4">
333+
<div className={classNames("flex gap-2 items-center", {
334+
"hidden": collapsed,
335+
})}>
336+
<div className="text-sm text-gray-600 dark:text-neutral-300 mr-2.5">Profile:</div>
350337
{
351-
data != null &&
352-
<div className={classNames("flex gap-2 items-center w-full", {
353-
"hidden": pathname === InternalRoutes.RawExecute.path || collapsed || DATABASES_THAT_DONT_SUPPORT_SCHEMA.includes(current?.Type as DatabaseType),
354-
})}>
355-
<div className="text-sm text-gray-600 dark:text-neutral-300">Schema:</div>
356-
<Dropdown className="w-[140px]" value={{ id: schema, label: schema }} items={data.Schema.map(schema => ({ id: schema, label: schema }))} onChange={handleSchemaChange}
357-
noItemsLabel="No schema found"/>
358-
</div>
338+
current != null &&
339+
<Dropdown className="w-[140px]" items={loginItems} value={currentProfile} onChange={handleProfileChange}
340+
defaultItem={{
341+
label: "Add another profile",
342+
icon: cloneElement(Icons.Add, {
343+
className: "w-6 h-6 stroke-green-800 dark:stroke-green-400",
344+
}),
345+
}} defaultItemClassName="text-green-800" onDefaultItemClick={handleNavigateToLogin}
346+
action={<AnimatedButton icon={Icons.Logout} label="Logout" onClick={handleMenuLogout} /> }/>
359347
}
360348
</div>
361-
{routes}
362-
</div>
363-
<div className="grow" />
364-
<div className="flex flex-col gap-8">
365-
<SideMenu collapse={collapsed} title="Logout" icon={Icons.Logout} path={InternalRoutes.Logout.path} />
349+
{
350+
data != null &&
351+
<div className={classNames("flex gap-2 items-center w-full", {
352+
"hidden": pathname === InternalRoutes.RawExecute.path || collapsed || DATABASES_THAT_DONT_SUPPORT_SCHEMA.includes(current?.Type as DatabaseType),
353+
})}>
354+
<div className="text-sm text-gray-600 dark:text-neutral-300">Schema:</div>
355+
<Dropdown className="w-[140px]" value={{ id: schema, label: schema }} items={data.Schema.map(schema => ({ id: schema, label: schema }))} onChange={handleSchemaChange}
356+
noItemsLabel="No schema found"/>
357+
</div>
358+
}
366359
</div>
367-
</AnimatePresence>
360+
{routes}
361+
</div>
362+
<div className="grow" />
363+
<div className="flex flex-col gap-8">
364+
<SideMenu collapse={collapsed} title="Logout" icon={Icons.Logout} path={InternalRoutes.Logout.path} />
365+
</div>
368366
</div>
369367
}
370368
</div>

‎frontend/src/components/table.tsx

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,11 @@ const TData: FC<ITDataProps> = ({ cell, onCellUpdate, disableEdit }) => {
174174
setEditedData(cell.value);
175175
}, [cell.value]);
176176

177-
return <div ref={cellRef} {...cell.getCellProps()}
177+
const props = useMemo(() => {
178+
return cell.getCellProps();
179+
}, [cell]);
180+
181+
return <div ref={cellRef} {...props} key={props.key}
178182
className={classNames("relative group/data cursor-pointer transition-all text-xs table-cell border-t border-l last:border-r group-last/row:border-b group-last/row:first:rounded-bl-lg group-last/row:last:rounded-br-lg border-gray-200 dark:border-white/5 p-0", {
179183
"bg-gray-200 dark:bg-white/10 blur-[2px]": editable || preview,
180184
})}
@@ -293,8 +297,12 @@ const TableRow: FC<ITableRow> = ({ row, style, onRowUpdate, disableEdit }) => {
293297
return onRowUpdate?.(updatedRow);
294298
}, [onRowUpdate, row.cells]);
295299

300+
const props = useMemo(() => {
301+
return row.getRowProps({ style });
302+
}, [row, style]);
303+
296304
return (
297-
<div className="table-row-group text-xs group/row" {...row.getRowProps({ style })}>
305+
<div className="table-row-group text-xs group/row" {...props} key={props.key}>
298306
{
299307
row.cells.map((cell) => (
300308
<TData key={cell.getCellProps().key} cell={cell} onCellUpdate={handleCellUpdate} disableEdit={disableEdit} />
@@ -329,10 +337,8 @@ export const Table: FC<ITableProps> = ({ className, columns: actualColumns, rows
329337
const [data, setData] = useState<Record<string, string>[]>([]);
330338

331339
const columns = useMemo(() => {
332-
let colWidth = 150;
333-
if (actualColumns.length === 1) {
334-
colWidth = width - 50;
335-
}
340+
const indexWidth = 50;
341+
const colWidth = Math.max(((width - indexWidth)/actualColumns.length), 150);
336342
const cols = actualColumns.map(col => ({
337343
id: col,
338344
Header: col,
@@ -343,7 +349,7 @@ export const Table: FC<ITableProps> = ({ className, columns: actualColumns, rows
343349
id: "#",
344350
Header: "#",
345351
accessor: "#",
346-
width: 50,
352+
width: indexWidth,
347353
});
348354
return cols;
349355
}, [actualColumns, width]);
@@ -511,15 +517,15 @@ export const Table: FC<ITableProps> = ({ className, columns: actualColumns, rows
511517
<AnimatedButton icon={Icons.Download} label="Export" type="lg" onClick={exportToCSV} />
512518
</div>
513519
</div>
514-
<div className={twMerge(classNames("flex flex-col items-center gap-4 overflow-x-auto h-full", className))} style={{
520+
<div className={twMerge(classNames("flex overflow-x-auto h-full", className))} style={{
515521
width,
516522
}}>
517-
<div className="table border-separate border-spacing-0 h-fit" ref={tableRef} {...getTableProps()}>
523+
<div className="border-separate border-spacing-0 h-fit" ref={tableRef} {...getTableProps()}>
518524
<div>
519525
{headerGroups.map(headerGroup => (
520-
<div {...headerGroup.getHeaderGroupProps()} className="table-header-group">
526+
<div {...headerGroup.getHeaderGroupProps()} key={headerGroup.getHeaderGroupProps().key}>
521527
{headerGroup.headers.map((column, i) => (
522-
<div {...column.getHeaderProps()} className="text-xs border-t border-l last:border-r border-gray-200 dark:border-white/5 p-2 text-left bg-gray-500 dark:bg-white/20 text-white first:rounded-tl-lg last:rounded-tr-lg relative group/header cursor-pointer select-none"
528+
<div {...column.getHeaderProps()} key={column.getHeaderProps().key} className="text-xs border-t border-l last:border-r border-gray-200 dark:border-white/5 p-2 text-left bg-gray-500 dark:bg-white/20 text-white first:rounded-tl-lg last:rounded-tr-lg relative group/header cursor-pointer select-none"
523529
onClick={() => handleSort(column.id)}>
524530
{column.render('Header')} {i > 0 && columnTags?.[i-1] != null && columnTags?.[i-1].length > 0 && <span className="text-[11px]">[{columnTags?.[i-1]}]</span>}
525531
<div className={twMerge(classNames("transition-all absolute top-2 right-2 opacity-0", {

‎frontend/src/pages/storage-unit/explore-storage-unit.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export const ExploreStorageUnit: FC = () => {
3939
onCompleted() {
4040
setPageSize(bufferPageSize);
4141
},
42+
fetchPolicy: "no-cache",
4243
});
4344
}, [getStorageUnitRows, current?.Type, schema, unit.Name, whereCondition, bufferPageSize, currentPage]);
4445

‎frontend/src/pages/storage-unit/storage-unit.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const StorageUnitCard: FC<{ unit: StorageUnit }> = ({ unit }) => {
4343
<div className="text-md font-semibold mb-2 break-words dark:text-neutral-100">{unit.Name}</div>
4444
{
4545
introAttributes.slice(0,2).map(attribute => (
46-
<div className="text-sm dark:text-neutral-300">{attribute.Key}: {attribute.Value}</div>
46+
<div key={attribute.Key} className="text-sm dark:text-neutral-300">{attribute.Key}: {attribute.Value}</div>
4747
))
4848
}
4949
</div>
@@ -58,14 +58,14 @@ const StorageUnitCard: FC<{ unit: StorageUnit }> = ({ unit }) => {
5858
<div className="text-md font-semibold mb-2 dark:text-neutral-100">{unit.Name}</div>
5959
{
6060
introAttributes.map(attribute => (
61-
<div className="text-xs dark:text-neutral-300"><span className="font-semibold">{attribute.Key}:</span> {attribute.Value}</div>
61+
<div key={attribute.Key} className="text-xs dark:text-neutral-300"><span className="font-semibold">{attribute.Key}:</span> {attribute.Value}</div>
6262
))
6363
}
6464
</div>
6565
<div className="flex flex-col grow mt-6">
6666
{
6767
expandedAttributes.map(attribute => (
68-
<div className="text-xs dark:text-neutral-300"><span className="font-semibold">{attribute.Key}:</span> {attribute.Value}</div>
68+
<div key={attribute.Key} className="text-xs dark:text-neutral-300"><span className="font-semibold">{attribute.Key}:</span> {attribute.Value}</div>
6969
))
7070
}
7171
</div>
@@ -114,7 +114,7 @@ export const StorageUnitPage: FC = () => {
114114
data.StorageUnit.length === 0
115115
? <EmptyMessage icon={Icons.SadSmile} label={`No ${getDatabaseStorageUnitLabel(current?.Type)} found`} />
116116
: data.StorageUnit.map(unit => (
117-
<StorageUnitCard unit={unit} />
117+
<StorageUnitCard key={unit.Name} unit={unit} />
118118
))
119119
)
120120
}
@@ -153,7 +153,7 @@ export const StorageUnitGraphCard: FC<IGraphCardProps<StorageUnit>> = ({ data })
153153
<div className="text-md font-semibold mb-2 break-words dark:text-neutral-300">{data.Name}</div>
154154
{
155155
data.Attributes.slice(0, 5).map(attribute => (
156-
<div className="text-xs dark:text-neutral-300"><span className="font-semibold">{attribute.Key}:</span> {attribute.Value}</div>
156+
<div key={attribute.Key} className="text-xs dark:text-neutral-300"><span className="font-semibold">{attribute.Key}:</span> {attribute.Value}</div>
157157
))
158158
}
159159
</div>

‎frontend/src/store/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ const persistedReducer = combineReducers({
1515

1616
export const reduxStore = configureStore({
1717
reducer: persistedReducer,
18+
middleware: (getDefaultMiddleware) => {
19+
return getDefaultMiddleware({
20+
serializableCheck: false,
21+
});
22+
},
1823
});
1924

2025
export const reduxStorePersistor = persistStore(reduxStore);

0 commit comments

Comments
 (0)