From 40de9a3da0b9fef704f4a115085cfd4e8a9758b2 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Tue, 29 Nov 2022 17:33:46 +0800 Subject: [PATCH] Shift views to store and improve tce decsription --- .../ColumnEditor/ColumnEditor.tsx | 2 +- .../SidePanelEditor/SidePanelEditor.tsx | 4 ++ .../TableEditorLayout/TableEditorMenu.tsx | 41 ++++++++----------- studio/pages/project/[ref]/editor/[id].tsx | 24 ++++++++--- studio/stores/common/PostgresMetaInterface.ts | 6 +-- studio/stores/pgmeta/SchemaStore.ts | 21 ++++++++-- 6 files changed, 63 insertions(+), 35 deletions(-) diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx index 7326d4816d2..85ee11730b8 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx @@ -322,7 +322,7 @@ const ColumnEditor: FC = ({ onUpdateField({ isEncrypted: !columnFields.isEncrypted })} /> diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx index b5b3bdd782e..a59466a4f18 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx @@ -149,6 +149,10 @@ const SidePanelEditor: FC = ({ closePanel() } + if (configuration.isEncrypted) { + await meta.schemas.loadViews(selectedTable?.schema ?? '') + } + resolve() } diff --git a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx index 23ef339fd5c..471fc4322a8 100644 --- a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx +++ b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx @@ -2,9 +2,8 @@ import { FC, useEffect, useState } from 'react' import { useRouter } from 'next/router' import Link from 'next/link' import { partition } from 'lodash' -// import { Button } from 'ui' +import { observer } from 'mobx-react-lite' import { - Alert, Button, Dropdown, IconChevronDown, @@ -60,7 +59,6 @@ const TableEditorMenu: FC = ({ const canCreateTables = checkPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'tables') const [searchText, setSearchText] = useState('') - const [schemaViews, setSchemaViews] = useState([]) const [isRefreshing, setIsRefreshing] = useState(false) // We may need to shift this to the schema store and do something like meta.schema.loadViews() @@ -68,12 +66,10 @@ const TableEditorMenu: FC = ({ useEffect(() => { let cancel = false const fetchViews = async (selectedSchema: string) => { - const views: SchemaView[] = await meta.schemas.getViews(selectedSchema) - if (!cancel) setSchemaViews(views) - } - if (selectedSchema) { - fetchViews(selectedSchema) + await meta.schemas.loadViews(selectedSchema) } + if (selectedSchema) fetchViews(selectedSchema) + return () => { cancel = true } @@ -93,8 +89,8 @@ const TableEditorMenu: FC = ({ const filteredSchemaViews = searchText.length === 0 - ? schemaViews - : schemaViews.filter((view) => view.name.includes(searchText)) + ? meta.schemas.views + : meta.schemas.views.filter((view) => view.name.includes(searchText)) const [protectedSchemas, openSchemas] = partition(schemas, (schema) => meta.excludedSchemas.includes(schema?.name ?? '') @@ -117,7 +113,6 @@ const TableEditorMenu: FC = ({ // @ts-ignore onChange={(name: string) => { setSearchText('') - setSchemaViews([]) onSelectSchema(name) }} > @@ -296,24 +291,24 @@ const TableEditorMenu: FC = ({ -
- All views -
- +
+ All views +
} /> - {schemaViews.map((view: SchemaView) => { + {meta.schemas.views.map((view: SchemaView) => { const viewId = Base64.encode(JSON.stringify(view)) const isActive = id === viewId return ( - -
-

{view.name}

-
- + + +
+

{view.name}

+
+ + ) })} @@ -339,4 +334,4 @@ const TableEditorMenu: FC = ({ ) } -export default TableEditorMenu +export default observer(TableEditorMenu) diff --git a/studio/pages/project/[ref]/editor/[id].tsx b/studio/pages/project/[ref]/editor/[id].tsx index 6dc45feb8fb..583f37b20f6 100644 --- a/studio/pages/project/[ref]/editor/[id].tsx +++ b/studio/pages/project/[ref]/editor/[id].tsx @@ -3,7 +3,7 @@ import { NextPage } from 'next' import { useRouter } from 'next/router' import { observer } from 'mobx-react-lite' import { isUndefined, isNaN } from 'lodash' -import { Modal } from 'ui' +import { Checkbox, Modal } from 'ui' import { PostgresTable, PostgresColumn } from '@supabase/postgres-meta' import Base64 from 'lib/base64' @@ -24,6 +24,8 @@ const TableEditorPage: NextPage = () => { const [isDeleting, setIsDeleting] = useState(false) const [isDuplicating, setIsDuplicating] = useState(false) + const [isDeleteWithCascade, setIsDeleteWithCascade] = useState(false) + const [selectedColumnToDelete, setSelectedColumnToDelete] = useState() const [selectedTableToDelete, setSelectedTableToDelete] = useState() @@ -70,6 +72,7 @@ const TableEditorPage: NextPage = () => { const onDeleteColumn = (column: PostgresColumn) => { setIsDeleting(true) setSelectedColumnToDelete(column) + setIsDeleteWithCascade(false) } const onAddTable = () => { @@ -87,6 +90,7 @@ const TableEditorPage: NextPage = () => { const onDeleteTable = (table: PostgresTable) => { setIsDeleting(true) setSelectedTableToDelete(table) + setIsDeleteWithCascade(false) } const onDuplicateTable = (table: PostgresTable) => { @@ -141,7 +145,9 @@ const TableEditorPage: NextPage = () => { try { if (isUndefined(selectedTableToDelete)) return - const response: any = await meta.tables.del(selectedTableToDelete.id) + const response: any = await meta.tables.del(selectedTableToDelete.id, { + cascade: isDeleteWithCascade, + }) if (response.error) throw response.error const tables = meta.tables.list((table: PostgresTable) => table.schema === selectedSchema) @@ -217,9 +223,17 @@ const TableEditorPage: NextPage = () => { } children={ -

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

+
+

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

+ setIsDeleteWithCascade(!isDeleteWithCascade)} + /> +
} buttonLabel="Delete" diff --git a/studio/stores/common/PostgresMetaInterface.ts b/studio/stores/common/PostgresMetaInterface.ts index 674946802e1..49be83afc72 100644 --- a/studio/stores/common/PostgresMetaInterface.ts +++ b/studio/stores/common/PostgresMetaInterface.ts @@ -17,7 +17,7 @@ export interface IPostgresMetaInterface { load: () => void create: (payload: any) => Promise update: (id: number | string, updates: any) => Promise - del: (id: number | string) => Promise + del: (id: number | string, payload?: any) => Promise list: (filter?: any) => T[] find: (filter?: any) => T | undefined byId: (id: number | string) => T | undefined @@ -187,11 +187,11 @@ export default class PostgresMetaInterface implements IPostgresMetaInterface< } } - async del(id: number | string) { + async del(id: number | string, payload: any = {}) { try { const headers = { 'Content-Type': 'application/json', ...this.headers } const url = `${this.url}?id=${id}` - const response = await delete_(url, {}, { headers }) + const response = await delete_(url, payload, { headers }) if (response.error) throw response.error delete this.data[id] diff --git a/studio/stores/pgmeta/SchemaStore.ts b/studio/stores/pgmeta/SchemaStore.ts index b8762efec64..a105aa87bb8 100644 --- a/studio/stores/pgmeta/SchemaStore.ts +++ b/studio/stores/pgmeta/SchemaStore.ts @@ -1,13 +1,22 @@ +import { observable, makeObservable } from 'mobx' import { PostgresSchema } from '@supabase/postgres-meta' import PostgresMetaInterface, { IPostgresMetaInterface } from '../common/PostgresMetaInterface' import { IRootStore } from '../RootStore' import { ResponseError } from 'types' +interface SchemaView { + schema: string + name: string +} + export interface ISchemaStore extends IPostgresMetaInterface { - getViews: (schema: string) => Promise + views: SchemaView[] + loadViews: (schema: string) => Promise } export default class SchemaStore extends PostgresMetaInterface { + views: SchemaView[] + constructor( rootStore: IRootStore, dataUrl: string, @@ -17,14 +26,20 @@ export default class SchemaStore extends PostgresMetaInterface { options?: { identifier: string } ) { super(rootStore, dataUrl, headers, options) + makeObservable(this, { + views: observable, + }) + this.views = [] } - async getViews(schema: string) { + async loadViews(schema: string) { const query = ` select schemaname as schema, viewname as name from pg_catalog.pg_views where schemaname = '${schema}' order by schemaname, viewname; ` - return await this.rootStore.meta.query(query) + const views = await this.rootStore.meta.query(query) + this.views = views + return views } }