From 0bb2bec2eaf654d0eaac3e02ae5f9ab60237fe5b Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Fri, 25 Feb 2022 16:05:12 +0800 Subject: [PATCH] Fix database tables page delete table confirmation modal --- .../interfaces/Database/Tables/TableList.tsx | 228 ++++++++---------- .../pages/project/[ref]/database/tables.tsx | 55 ++++- 2 files changed, 154 insertions(+), 129 deletions(-) diff --git a/studio/components/interfaces/Database/Tables/TableList.tsx b/studio/components/interfaces/Database/Tables/TableList.tsx index 3876f8b76de..aa4f58c4f3c 100644 --- a/studio/components/interfaces/Database/Tables/TableList.tsx +++ b/studio/components/interfaces/Database/Tables/TableList.tsx @@ -13,7 +13,6 @@ import { import { useStore } from 'hooks' import Table from 'components/to-be-cleaned/Table' -import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal' const Header: FC<{ filterString: string @@ -48,134 +47,109 @@ const Header: FC<{ const TableList: FC<{ onAddTable: () => void onEditTable: (table: any) => void + onDeleteTable: (table: any) => void onOpenTable: (table: any) => void -}> = observer(({ onAddTable = () => {}, onEditTable = () => {}, onOpenTable = () => {} }) => { - const { ui, meta } = useStore() - const [filterString, setFilterString] = useState('') - const tables = - filterString.length === 0 - ? meta.tables.list((table: any) => table.schema === 'public') - : meta.tables.list( - (table: any) => table.schema === 'public' && table.name.includes(filterString) - ) +}> = observer( + ({ + onAddTable = () => {}, + onEditTable = () => {}, + onDeleteTable = () => {}, + onOpenTable = () => {}, + }) => { + const { meta } = useStore() + const [filterString, setFilterString] = useState('') + const tables = + filterString.length === 0 + ? meta.tables.list((table: any) => table.schema === 'public') + : meta.tables.list( + (table: any) => table.schema === 'public' && table.name.includes(filterString) + ) - async function onDelete(table: any) { - confirmAlert({ - title: 'Confirm to delete', - message: `Are you sure you want to delete "${table.name}" table? This action cannot be undone.`, - onAsyncConfirm: async () => { - try { - const response: any = await meta.tables.del(table.id) - if (response.error) { - throw response.error - } else { - ui.setNotification({ - category: 'success', - message: `Successfully removed ${table.name}.`, - }) - } - } catch (error: any) { - ui.setNotification({ - category: 'error', - message: `Failed to delete ${table.name}: ${error.message}`, - }) - } - }, - }) + return ( + <> +
+ {/* @ts-ignore */} +
} onClick={() => onAddTable()}> + New + + } + /> +
+
+ Name, + Schema, + + Description + , + + Rows (Estimated) + , + + Size (Estimated) + , + , + ]} + body={tables.map((x: any, i: any) => ( + + + {x.name} + + + {x.schema} + + + {x.comment} + + + + {x.live_rows_estimate ?? x.live_row_count} + + + + + {x.size} + + + +
+ +
+ + + ))} + /> + + + ) } - - return ( - <> -
- {/* @ts-ignore */} -
} onClick={() => onAddTable()}> - New - - } - /> -
-
-
Name, - Schema, - - Description - , - - Rows (Estimated) - , - - Size (Estimated) - , - , - ]} - body={tables.map((x: any, i: any) => ( - - - {x.name} - - - {x.schema} - - - {x.comment} - - - - {x.live_rows_estimate ?? x.live_row_count} - - - - - {x.size} - - - -
- -
- - - ))} - /> - - - ) -}) +) export default TableList diff --git a/studio/pages/project/[ref]/database/tables.tsx b/studio/pages/project/[ref]/database/tables.tsx index 4d9dbef3137..982c3ba97d1 100644 --- a/studio/pages/project/[ref]/database/tables.tsx +++ b/studio/pages/project/[ref]/database/tables.tsx @@ -3,22 +3,27 @@ import { useState } from 'react' import { observer } from 'mobx-react-lite' import { isUndefined } from 'lodash' import { PostgresColumn, PostgresTable } from '@supabase/postgres-meta' +import { Modal } from '@supabase/ui' import { withAuth, useStore } from 'hooks' import { DatabaseLayout } from 'components/layouts' +import ConfirmationModal from 'components/ui/ConfirmationModal' import { TableList, ColumnList } from 'components/interfaces/Database' import { SidePanelEditor } from 'components/interfaces/TableGridEditor' const DatabaseTables: NextPage = () => { - const { meta } = useStore() - const tables = meta.tables.list() + const { meta, ui } = useStore() + const [isDeleting, setIsDeleting] = useState(false) const [selectedTable, setSelectedTable] = useState() const [sidePanelKey, setSidePanelKey] = useState<'column' | 'table'>() const [selectedColumnToEdit, setSelectedColumnToEdit] = useState() const [selectedTableToEdit, setSelectedTableToEdit] = useState() + const [selectedColumnToDelete, setSelectedColumnToDelete] = useState() + const [selectedTableToDelete, setSelectedTableToDelete] = useState() + const onAddTable = () => { setSidePanelKey('table') setSelectedTableToEdit(undefined) @@ -29,6 +34,11 @@ const DatabaseTables: NextPage = () => { setSelectedTableToEdit(table) } + const onDeleteTable = (table: PostgresTable) => { + setIsDeleting(true) + setSelectedTableToDelete(table) + } + const onAddColumn = () => { setSidePanelKey('column') setSelectedColumnToEdit(undefined) @@ -46,6 +56,30 @@ const DatabaseTables: NextPage = () => { const onClosePanel = () => setSidePanelKey(undefined) + const onConfirmDeleteTable = async () => { + try { + if (isUndefined(selectedTableToDelete)) return + + const response: any = await meta.tables.del(selectedTableToDelete.id) + if (response.error) { + throw response.error + } else { + ui.setNotification({ + category: 'success', + message: `Successfully removed ${selectedTableToDelete.name}.`, + }) + } + } catch (error: any) { + ui.setNotification({ + category: 'error', + message: `Failed to delete ${selectedTableToDelete?.name}: ${error.message}`, + }) + } finally { + setIsDeleting(false) + setSelectedTableToDelete(undefined) + } + } + return (
@@ -53,6 +87,7 @@ const DatabaseTables: NextPage = () => { ) : ( @@ -65,6 +100,22 @@ const DatabaseTables: NextPage = () => { /> )}
+ +

+ Are you sure you want to delete the selected table? This action cannot be undone. +

+ + } + buttonLabel="Delete" + buttonLoadingLabel="Deleting" + onSelectCancel={() => setIsDeleting(false)} + onSelectConfirm={onConfirmDeleteTable} + />