Skip to content

Commit e18cd4c

Browse files
dawsontothdawsontoth
committed
chore: Rename database components for slightly more clarity
https://harperdb.atlassian.net/browse/STUDIO-451
1 parent 6c4060f commit e18cd4c

File tree

4 files changed

+54
-57
lines changed

4 files changed

+54
-57
lines changed

src/features/instance/databases/components/BrowseDataTableView.tsx renamed to src/features/instance/databases/DatabaseTableView.tsx

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ConfirmDeletionModal } from '@/components/ConfirmDeletionModal';
22
import { Button } from '@/components/ui/button';
33
import { useInstanceClientIdParams } from '@/config/useInstanceClient';
4-
import { BrowseDataTable } from '@/features/instance/databases/components/BrowseDataTable';
4+
import { TableView } from '@/features/instance/databases/components/TableView';
55
import { formatBrowseDataTableHeader } from '@/features/instance/databases/functions/formatBrowseDataTableHeader';
66
import { AddTableRowModal } from '@/features/instance/databases/modals/AddTableRowModal';
77
import { EditTableRowModal } from '@/features/instance/databases/modals/EditTableRowModal';
@@ -24,7 +24,7 @@ import { useCallback, useEffect, useState } from 'react';
2424
import { toast } from 'sonner';
2525
import { ImportCSVModal } from '@/features/instance/databases/modals/ImportCSVModal';
2626

27-
export function BrowseDataTableView() {
27+
export function DatabaseTableView() {
2828
const allParams: {
2929
clusterId?: string;
3030
instanceId?: string;
@@ -226,7 +226,50 @@ export function BrowseDataTableView() {
226226

227227
return (
228228
<>
229-
<BrowseDataTable<Record<string, unknown>, unknown>
229+
<div className="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-3 pt-15 pb-4">
230+
<div className="flex space-x-2">
231+
{canAddRecords && (
232+
<Button
233+
variant="positiveOutline"
234+
onClick={onAddClicked}
235+
disabled={isAddModalOpen || isAddTableRecordsPending}
236+
accessKey="n"
237+
>
238+
<PlusIcon />
239+
<span>
240+
Add <u>N</u>ew Record(s)
241+
</span>
242+
</Button>
243+
)}
244+
{canAddRecords && (
245+
<Button
246+
variant="positiveOutline"
247+
onClick={onImportCSVClicked}
248+
disabled={isImportCSVModalOpen || isAddTableRecordsPending}
249+
accessKey="c"
250+
>
251+
<ImportIcon />
252+
<span>
253+
Import <u>C</u>SV
254+
</span>
255+
</Button>
256+
)}
257+
<Button variant="defaultOutline" onClick={onRefreshClick} disabled={tableDataFetching}>
258+
<RefreshCwIcon />
259+
</Button>
260+
</div>
261+
262+
<div>
263+
{canManageBrowseInstance && (
264+
<Button variant="destructiveOutline" onClick={() => setIsDeleteModalOpen(true)}>
265+
<Trash className="inline-block " />
266+
Drop Table
267+
</Button>
268+
)}
269+
</div>
270+
</div>
271+
272+
<TableView<Record<string, unknown>, unknown>
230273
data={tableData?.data || []}
231274
isFetching={tableDataFetching}
232275
columns={dataTableColumns}
@@ -238,50 +281,7 @@ export function BrowseDataTableView() {
238281
pageSize={pageSize}
239282
setPageIndex={setPageIndex}
240283
setPageSize={setPageSize}
241-
>
242-
<div className="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-3 pt-15 pb-4">
243-
<div className="flex space-x-2">
244-
{canAddRecords && (
245-
<Button
246-
variant="positiveOutline"
247-
onClick={onAddClicked}
248-
disabled={isAddModalOpen || isAddTableRecordsPending}
249-
accessKey="n"
250-
>
251-
<PlusIcon />
252-
<span>
253-
Add <u>N</u>ew Record(s)
254-
</span>
255-
</Button>
256-
)}
257-
{canAddRecords && (
258-
<Button
259-
variant="positiveOutline"
260-
onClick={onImportCSVClicked}
261-
disabled={isImportCSVModalOpen || isAddTableRecordsPending}
262-
accessKey="c"
263-
>
264-
<ImportIcon />
265-
<span>
266-
Import <u>C</u>SV
267-
</span>
268-
</Button>
269-
)}
270-
<Button variant="defaultOutline" onClick={onRefreshClick} disabled={tableDataFetching}>
271-
<RefreshCwIcon />
272-
</Button>
273-
</div>
274-
275-
<div>
276-
{canManageBrowseInstance && (
277-
<Button variant="destructiveOutline" onClick={() => setIsDeleteModalOpen(true)}>
278-
<Trash className="inline-block " />
279-
Drop Table
280-
</Button>
281-
)}
282-
</div>
283-
</div>
284-
</BrowseDataTable>
284+
/>
285285
{canAddRecords && (
286286
<AddTableRowModal
287287
instanceTable={describeTableData}

src/features/instance/databases/components/BrowseDataTable.tsx renamed to src/features/instance/databases/components/TableView.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
useReactTable,
1616
} from '@tanstack/react-table';
1717
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';
18-
import React, { Dispatch, SetStateAction, useCallback } from 'react';
18+
import { Dispatch, SetStateAction, useCallback } from 'react';
1919

2020
interface BrowseDataTableProps<TData, TValue> {
2121
columns: ColumnDef<TData, TValue>[];
@@ -29,10 +29,9 @@ interface BrowseDataTableProps<TData, TValue> {
2929
pageSize: number;
3030
setPageIndex: Dispatch<SetStateAction<number>>;
3131
setPageSize: Dispatch<SetStateAction<number>>;
32-
children: React.ReactNode;
3332
}
3433

35-
export function BrowseDataTable<TData, TValue>({
34+
export function TableView<TData, TValue>({
3635
columns,
3736
data,
3837
isFetching,
@@ -44,7 +43,6 @@ export function BrowseDataTable<TData, TValue>({
4443
setPageIndex,
4544
pageSize,
4645
setPageSize,
47-
children,
4846
}: BrowseDataTableProps<TData, TValue>) {
4947
const table = useReactTable({
5048
data,
@@ -64,7 +62,6 @@ export function BrowseDataTable<TData, TValue>({
6462
}, [pageIndex, setPageIndex]);
6563

6664
return (<>
67-
{children}
6865
<Table containerClassName="rounded-md bg-black-dark grow max-h-[calc(100vh-128px-16px-112px-80px)]">
6966
<TableHeader>
7067
{table.getHeaderGroups().map((headerGroup) => (<TableRow key={headerGroup.id} className="border-none">

‎src/features/instance/databases/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { DatabasesSidebar } from '@/features/instance/databases/components/Datab
33
import { Outlet } from '@tanstack/react-router';
44
import { Suspense } from 'react';
55

6-
export function Databases() {
6+
export function DatabasesLayout() {
77
return (
88
<main className="grid grid-cols-1 gap-4 md:grid-cols-12 min-h-[calc(100vh-theme(spacing.36))]">
99
<section className="col-span-1 text-white md:col-span-4 lg:col-span-3">

‎src/features/instance/databases/routes.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { createRoute } from '@tanstack/react-router';
2-
import { Databases } from '@/features/instance/databases/index';
3-
import { BrowseDataTableView } from '@/features/instance/databases/components/BrowseDataTableView';
2+
import { DatabasesLayout } from '@/features/instance/databases/index';
3+
import { DatabaseTableView } from '@/features/instance/databases/DatabaseTableView';
44
import { createInstanceLayoutRoute } from '@/features/instance/instanceLayoutRoute';
55
import { loadInstanceBrowseData } from '@/features/instance/databases/route.load';
66

77
export function createBrowseRouteTree(instanceLayoutRoute: ReturnType<typeof createInstanceLayoutRoute>) {
88
const instanceBrowseRoute = createRoute({
99
getParentRoute: () => instanceLayoutRoute,
1010
path: '/databases',
11-
component: Databases,
1211
loader: ({ context, params, preload }) => loadInstanceBrowseData(context.queryClient, params, preload),
12+
component: DatabasesLayout,
1313
});
1414
const browseDatabaseRoute = createRoute({
1515
getParentRoute: () => instanceBrowseRoute,
@@ -19,8 +19,8 @@ export function createBrowseRouteTree(instanceLayoutRoute: ReturnType<typeof cre
1919
const browseTableRoute = createRoute({
2020
getParentRoute: () => instanceBrowseRoute,
2121
path: '$databaseName/$tableName',
22-
component: BrowseDataTableView,
2322
loader: ({ context, params, preload }) => loadInstanceBrowseData(context.queryClient, params, preload),
23+
component: DatabaseTableView,
2424
});
2525

2626
return instanceBrowseRoute.addChildren([

0 commit comments

Comments
 (0)