Skip to content

Commit

Permalink
Add Manage connections option in breadcrumb dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
pavish committed Nov 29, 2023
1 parent c25e331 commit 690e7ab
Show file tree
Hide file tree
Showing 8 changed files with 65 additions and 40 deletions.
7 changes: 2 additions & 5 deletions mathesar_ui/src/components/breadcrumb/Breadcrumb.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
const items = getBreadcrumbItemsFromContext();
$: showRoot = $items.every((i) => i.type !== 'database');
/**
* When we have lots of items, tell each one that they can simplify
* themselves on narrow viewports.
Expand All @@ -14,11 +13,9 @@
</script>

<div class="breadcrumb">
{#if showRoot}
<LogoAndNameWithLink href="/" />
{/if}
<LogoAndNameWithLink href="/" {hasResponsiveAbridgement} />
{#each $items as item}
<BreadcrumbItem {item} {hasResponsiveAbridgement} />
<BreadcrumbItem {item} />
{/each}
</div>

Expand Down
22 changes: 12 additions & 10 deletions mathesar_ui/src/components/breadcrumb/BreadcrumbItem.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script lang="ts">
import { _ } from 'svelte-i18n';
import DatabaseName from '@mathesar/components/DatabaseName.svelte';
import SchemaName from '@mathesar/components/SchemaName.svelte';
import TableName from '@mathesar/components/TableName.svelte';
Expand All @@ -8,32 +9,33 @@
getExplorationPageUrl,
getRecordPageUrl,
getSchemaPageUrl,
CONNECTIONS_URL,
} from '@mathesar/routes/urls';
import { StringOrComponent } from '@mathesar/component-library';
import { iconExploration, iconRecord } from '@mathesar/icons';
import { iconExploration, iconRecord, iconConnection } from '@mathesar/icons';
import { getLinkForTableItem } from '@mathesar/utils/tables';
import BreadcrumbLink from './BreadcrumbLink.svelte';
import type { BreadcrumbItem } from './breadcrumbTypes';
import DatabaseSelector from './DatabaseSelector.svelte';
import EntitySelector from './EntitySelector.svelte';
import SchemaSelector from './SchemaSelector.svelte';
import LogoAndNameWithLink from './LogoAndNameWithLink.svelte';
import BreadcrumbRecordSelector from './BreadcrumbRecordSelector.svelte';
import BreadcrumbPageSeparator from './BreadcrumbPageSeparator.svelte';
import RecordSummary from '../RecordSummary.svelte';
export let item: BreadcrumbItem;
/** When true, this item will hide some of its UI for narrow viewports */
export let hasResponsiveAbridgement = false;
</script>

{#if item.type === 'database'}
<div class="breadcrumb-item">
<LogoAndNameWithLink
href={getDatabasePageUrl(item.database.nickname)}
{hasResponsiveAbridgement}
/>
{#if item.type === 'connectionList'}
<DatabaseSelector />
<div class="breadcrumb-item truncate">
<BreadcrumbLink href={CONNECTIONS_URL}>
<NameWithIcon icon={iconConnection}>
{$_('connections')}
</NameWithIcon>
</BreadcrumbLink>
</div>
{:else if item.type === 'database'}
<DatabaseSelector />
<div class="breadcrumb-item truncate">
<BreadcrumbLink href={getDatabasePageUrl(item.database.nickname)}>
Expand Down
31 changes: 28 additions & 3 deletions mathesar_ui/src/components/breadcrumb/BreadcrumbSelector.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,15 @@
import { _ } from 'svelte-i18n';
import { RichText } from '@mathesar/components/rich-text';
import BreadcrumbSelectorRow from './BreadcrumbSelectorRow.svelte';
import type { BreadcrumbSelectorData } from './breadcrumbTypes';
import type {
BreadcrumbSelectorData,
BreadcrumbSelectorEntry,
} from './breadcrumbTypes';
import { filterBreadcrumbSelectorData } from './breadcrumbUtils';
export let data: BreadcrumbSelectorData;
export let triggerLabel: string;
export let persistentLinks: BreadcrumbSelectorEntry[] = [];
let triggerElement: HTMLButtonElement;
let isOpen = false;
Expand Down Expand Up @@ -113,6 +117,18 @@
{/if}
{/each}
</div>
{#if persistentLinks.length}
<ul class="actions">
{#each persistentLinks as entry (entry.href)}
<BreadcrumbSelectorRow
{entry}
closeSelector={() => {
isOpen = false;
}}
/>
{/each}
</ul>
{/if}
</div>
</AttachableDropdown>
</div>
Expand All @@ -135,11 +151,20 @@
.section-name {
margin: 0.25rem 0;
}
.items {
.items,
.actions {
list-style: none;
padding-left: 0.5rem;
margin: 0;
}
.items {
padding-left: 0.5rem;
}
.actions {
margin-top: var(--size-super-ultra-small);
padding-left: 0;
padding-top: var(--size-super-ultra-small);
border-top: 1px solid var(--slate-300);
}
.entity-switcher .trigger {
border: 1px solid var(--slate-400);
color: var(--slate-300);
Expand Down
15 changes: 13 additions & 2 deletions mathesar_ui/src/components/breadcrumb/DatabaseSelector.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<script lang="ts">
import { _ } from 'svelte-i18n';
import type { Database } from '@mathesar/AppTypes';
import { iconDatabase } from '@mathesar/icons';
import { getDatabasePageUrl } from '@mathesar/routes/urls';
import { iconDatabase, iconConnection } from '@mathesar/icons';
import { getDatabasePageUrl, CONNECTIONS_URL } from '@mathesar/routes/urls';
import {
currentDBName,
databases as dbStore,
Expand Down Expand Up @@ -29,4 +30,14 @@
<BreadcrumbSelector
data={new Map([['Databases', databases.map(makeBreadcrumbSelectorItem)]])}
triggerLabel="Choose a Database"
persistentLinks={[
{
type: 'simple',
label: $_('manage_connections'),
href: CONNECTIONS_URL,
icon: iconConnection,
// TODO: Handle active states for persistent links
isActive: () => false,
},
]}
/>
5 changes: 5 additions & 0 deletions mathesar_ui/src/components/breadcrumb/breadcrumbTypes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ import type {
IconProps,
} from '@mathesar/component-library/types';

export interface BreadcrumbItemConnectionList {
type: 'connectionList';
}

export interface BreadcrumbItemDatabase {
type: 'database';
database: Database;
Expand Down Expand Up @@ -50,6 +54,7 @@ export interface BreadcrumbItemExploration {
}

export type BreadcrumbItem =
| BreadcrumbItemConnectionList
| BreadcrumbItemDatabase
| BreadcrumbItemSchema
| BreadcrumbItemTable
Expand Down
1 change: 1 addition & 0 deletions mathesar_ui/src/i18n/languages/en/dict.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"join_community_chat": "Join Community Chat",
"large_data_takes_time_warning": "Large data sets can sometimes take several minutes to process. Please do not leave this page or close the browser tab while the import is in progress.",
"linking_table": "Linking Table",
"manage_connections": "Manage Connections",
"many_to_many": "Many to Many",
"many_to_many_link_description": "Multiple [baseTable] and [targetTable] records can link to each other through a new [mappingTable]",
"many_to_many_self_referential_link_description": "Multiple [baseTable] records can link to each other through a new [mapping]",
Expand Down
6 changes: 4 additions & 2 deletions mathesar_ui/src/routes/AuthenticatedRoutes.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@
import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
import { getDatabasePageUrl, CONNECTIONS_URL } from '@mathesar/routes/urls';
import WelcomePage from '@mathesar/pages/WelcomePage.svelte';
import ConnectionsPage from '@mathesar/pages/connections/ConnectionsPage.svelte';
import AppendBreadcrumb from '@mathesar/components/breadcrumb/AppendBreadcrumb.svelte';
import DatabaseRoute from './DatabaseRoute.svelte';
import UserProfileRoute from './UserProfileRoute.svelte';
import AdminRoute from './AdminRoute.svelte';
import ConnectionsRoute from './ConnectionsRoute.svelte';
const userProfileStore = getUserProfileStoreFromContext();
$: userProfile = $userProfileStore;
Expand Down Expand Up @@ -46,5 +47,6 @@
</Route>

<Route path="/connections">
<ConnectionsRoute />
<AppendBreadcrumb item={{ type: 'connectionList' }} />
<ConnectionsPage />
</Route>
18 changes: 0 additions & 18 deletions mathesar_ui/src/routes/ConnectionsRoute.svelte

This file was deleted.

0 comments on commit 690e7ab

Please sign in to comment.