diff --git a/frontend/src/lib/components/DBManager.svelte b/frontend/src/lib/components/DBManager.svelte index 4bb47cf115..a3ae95f1ce 100644 --- a/frontend/src/lib/components/DBManager.svelte +++ b/frontend/src/lib/components/DBManager.svelte @@ -7,7 +7,6 @@ EditIcon, Loader2, Plus, - Network, Table2, Database as DatabaseIcon, Folder as FolderIcon, @@ -45,11 +44,8 @@ import { ADMIN_DATATABLE_ROLE, datatableNameTakesRole, type DatatableRowAction } from './dbTypes' import TextInput from './text_input/TextInput.svelte' import Checkbox from './common/checkbox/Checkbox.svelte' - import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte' - import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte' import DbSchemaDiagram from './dbdiagram/DbSchemaDiagram.svelte' import type { DbRelation } from './dbRelations' - import { logFeatureUsage } from '$lib/utils/featureUsage' /** Represents a selected table with its schema */ export interface SelectedTable { @@ -77,6 +73,11 @@ export type DbManagerViewMode = 'data' | 'diagram' type Props = { + /** Which of the two views the right pane shows. Owned by whoever renders the + * control that switches it; ignored for a database with no diagram. */ + requestedViewMode?: DbManagerViewMode + /** Asked for from inside, e.g. opening a table from the diagram. */ + onViewMode?: (mode: DbManagerViewMode) => void /** Identifies the database this is connected to, stable across reloads of * it. A string rather than one of the objects read from it: those are * replaced as the manager re-reads, which says nothing about the database @@ -129,6 +130,8 @@ onImport?: (mode: 'schema_and_data' | 'schema_only') => void } let { + requestedViewMode = 'data', + onViewMode, databaseKey, dbType, dbSchema, @@ -164,16 +167,14 @@ // cannot be renamed. const SCHEMA_RENAME_DB_TYPES: DbType[] = ['postgresql', 'snowflake'] - let requestedViewMode = $state('data') - // PostgreSQL is the only database whose foreign keys can be read for the whole // database in one query; the others would need one job per table. A caller // already using the tree's checkboxes to collect tables keeps them. let supportsDiagram = $derived(dbType === 'postgresql' && !multiSelectMode) - // The manager is not always remounted when the database under it changes, so a - // move away from PostgreSQL would otherwise leave the diagram on screen with no - // toggle left to leave it by. + // The mode is asked for from outside, where the control that sets it lives, so + // a database this manager cannot draw has to be clamped here rather than left + // showing a diagram with no control in reach to leave it by. let viewMode = $derived(supportsDiagram ? requestedViewMode : 'data') // Everything the diagram remembers, against the database it is about. The @@ -875,18 +876,6 @@
- {#if supportsDiagram} - logFeatureUsage('db_manager', 'view_mode', { key: v })} - > - {#snippet children({ item })} - - - {/snippet} - - {/if}
@@ -1177,7 +1166,7 @@ loading={relations.loading} error={relationsError} onOpenTable={({ schema, table }) => { - requestedViewMode = 'data' + onViewMode?.('data') selectTable(currentDatatable, schema, table) }} /> diff --git a/frontend/src/lib/components/DBManagerContent.svelte b/frontend/src/lib/components/DBManagerContent.svelte index 8b4a36e34b..eefd7b9627 100644 --- a/frontend/src/lib/components/DBManagerContent.svelte +++ b/frontend/src/lib/components/DBManagerContent.svelte @@ -27,7 +27,7 @@ import { schemaCacheKey } from './dbSchemaCache' import { getDbSchemas, loadAllTablesMetaData } from './apps/components/display/dbtable/metadata' - import type { PendingRowAction, SelectedTable } from './DBManager.svelte' + import type { DbManagerViewMode, PendingRowAction, SelectedTable } from './DBManager.svelte' import { getDbFeatures } from './apps/components/display/dbtable/dbFeatures' import { resource } from 'runed' import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte' @@ -64,6 +64,9 @@ /** Worker tag every job of this manager runs on, overriding the database * language's native tag. Bound so the hints below can offer to set it. */ workerTag?: string + /** Which view the right pane shows, set by the control the caller renders. */ + requestedViewMode?: DbManagerViewMode + onViewMode?: (mode: DbManagerViewMode) => void } let { @@ -84,7 +87,9 @@ disabledTables = [], onImport, workspace = undefined, - workerTag = $bindable() + workerTag = $bindable(), + requestedViewMode, + onViewMode }: Props = $props() let ws = $derived(workspace ?? $workspaceStore) @@ -302,6 +307,8 @@ {/if}
('data') + // Only PostgreSQL has a diagram; the manager clamps the mode itself, and this + // keeps the control off the header for a database that cannot show one. + let diagramSupported = $derived( + !!uriState.effectiveInput && getDbType(uriState.effectiveInput) === 'postgresql' + ) + // Export/Import state let exportDrawerOpen = $state(false) let exportResult = $state('') @@ -311,6 +335,8 @@ {#key `${selectedDatatable}~${selectedRole ?? ''}`} (requestedViewMode = mode)} input={contentInput} workspace={uriState.workspace} datatableTree={uriState.isDatatableInput ? datatables.current : undefined} @@ -352,6 +378,18 @@ Import {/if} + {#if diagramSupported} + logFeatureUsage('db_manager', 'view_mode', { key: v })} + > + {#snippet children({ item })} + + + {/snippet} + + {/if} {#if uriState.effectiveInput && ws} workerTag.tag, (v) => (workerTag.tag = v)}