Navigate to linked table via cell context menu

mathesar_ui/src/i18n/languages/en/dict.json

@@ -361,6 +361,8 @@
   "one_to_many_link_desc": "One [baseTable] record can be linked from multiple [targetTable] records.",
   "open": "Open",
   "open_data_explorer": "Open Data Explorer",
+  "open_named_record": "Open [recordName]",
+  "open_named_table": "Open [tableName] table",
   "open_record": "Open Record",
   "open_table_in_data_explorer": "Open this table in Data Explorer to query and analyze your data.",
   "open_table_record": "Open a Record from [tableName]",

mathesar_ui/src/systems/table-view/header/header-cell/ColumnHeaderContextMenu.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
-  import { ButtonMenuItem } from '@mathesar-component-library';
+
+  import { ButtonMenuItem, LinkMenuItem } from '@mathesar-component-library';
+  import Identifier from '@mathesar/components/Identifier.svelte';
+  import { RichText } from '@mathesar/components/rich-text';
   import {
     getSortingLabelForColumn,
     type SortDirection,
@@ -11,15 +14,18 @@
     iconRemoveFilter,
     iconSortAscending,
     iconSortDescending,
+    iconTable,
   } from '@mathesar/icons';
   import { getImperativeFilterControllerFromContext } from '@mathesar/pages/table/ImperativeFilterController';
-  import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
+  import { currentDatabase } from '@mathesar/stores/databases';
+  import { currentSchema } from '@mathesar/stores/schemas';
+  import { storeToGetTablePageUrl } from '@mathesar/stores/storeBasedUrls';
   import {
     getTabularDataStoreFromContext,
     type ProcessedColumn,
   } from '@mathesar/stores/table-data';
-  import { currentDatabase } from '@mathesar/stores/databases';
-  import { currentSchema } from '@mathesar/stores/schemas';
+  import { tables } from '@mathesar/stores/tables';
+  import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
 
   const userProfile = getUserProfileStoreFromContext();
 
@@ -53,6 +59,12 @@
 
   $: hasGrouping = $grouping.hasColumn(columnId);
 
+  $: ({ linkFk } = processedColumn);
+  $: linkedTable = linkFk ? $tables.data.get(linkFk.referent_table) : undefined;
+  $: linkedTableHref = linkedTable
+    ? $storeToGetTablePageUrl({ tableId: linkedTable.id })
+    : undefined;
+
   function addFilter() {
     void imperativeFilterController?.beginAddingNewFilteringEntry(columnId);
   }
@@ -83,6 +95,15 @@
   }
 </script>
 
+{#if linkedTable && linkedTableHref}
+  <LinkMenuItem icon={iconTable} href={linkedTableHref}>
+    <RichText text={$_('open_named_table')} let:slotName>
+      {#if slotName === 'tableName'}
+        <Identifier>{linkedTable.name}</Identifier>
+      {/if}
+    </RichText>
+  </LinkMenuItem>
+{/if}
 {#if columnAllowsFiltering}
   <ButtonMenuItem icon={iconAddFilter} on:click={addFilter}>
     {#if filterCount > 0}

mathesar_ui/src/systems/table-view/row/RowCell.svelte

@@ -1,27 +1,30 @@
 <script lang="ts">
   import { tick } from 'svelte';
   import { _ } from 'svelte-i18n';
+
   import {
     ButtonMenuItem,
     ContextMenu,
     LinkMenuItem,
-    WritableMap,
     MenuDivider,
     MenuHeading,
+    WritableMap,
   } from '@mathesar-component-library';
   import type { RequestStatus } from '@mathesar/api/utils/requestUtils';
   import { States } from '@mathesar/api/utils/requestUtils';
-  import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
   import CellBackground from '@mathesar/components/CellBackground.svelte';
+  import Identifier from '@mathesar/components/Identifier.svelte';
   import Null from '@mathesar/components/Null.svelte';
   import RowCellBackgrounds from '@mathesar/components/RowCellBackgrounds.svelte';
+  import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
+  import { RichText } from '@mathesar/components/rich-text';
   import {
+    SheetCell,
     isCellActive,
     isCellSelected,
     scrollBasedOnActiveCell,
-    SheetCell,
   } from '@mathesar/components/sheet';
-  import { iconLinkToRecordPage, iconSetToNull } from '@mathesar/icons';
+  import { iconRecord, iconSetToNull } from '@mathesar/icons';
   import { currentDatabase } from '@mathesar/stores/databases';
   import { currentSchema } from '@mathesar/stores/schemas';
   import { storeToGetRecordPageUrl } from '@mathesar/stores/storeBasedUrls';
@@ -34,8 +37,8 @@
     type TabularDataSelection,
   } from '@mathesar/stores/table-data';
   import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
-  import CellErrors from './CellErrors.svelte';
   import ColumnHeaderContextMenu from '../header/header-cell/ColumnHeaderContextMenu.svelte';
+  import CellErrors from './CellErrors.svelte';
   import RowContextOptions from './RowContextOptions.svelte';
 
   export let recordsData: RecordsData;
@@ -101,6 +104,9 @@
     ? getRecordPageUrl({ tableId: linkFk.referent_table, recordId: value })
     : undefined;
   $: showLinkedRecordHyperLink = linkedRecordHref && canViewLinkedEntities;
+  $: recordSummary = $recordSummaries
+    .get(String(column.id))
+    ?.get(String(value));
 
   async function checkTypeAndScroll(type?: string) {
     if (type === 'moved') {
@@ -167,14 +173,12 @@
       {value}
       {isProcessing}
       {canViewLinkedEntities}
-      recordSummary={$recordSummaries
-        .get(String(column.id))
-        ?.get(String(value))}
-      setRecordSummary={(recordId, recordSummary) =>
+      {recordSummary}
+      setRecordSummary={(recordId, rs) =>
         recordSummaries.addBespokeRecordSummary({
           columnId: String(columnId),
           recordId,
-          recordSummary,
+          recordSummary: rs,
         })}
       showAsSkeleton={$recordsDataState === States.Loading}
       disabled={!isEditable}
@@ -207,8 +211,12 @@
           </ButtonMenuItem>
         {/if}
         {#if showLinkedRecordHyperLink && linkedRecordHref}
-          <LinkMenuItem icon={iconLinkToRecordPage} href={linkedRecordHref}>
-            {$_('go_to_linked_record')}
+          <LinkMenuItem icon={iconRecord} href={linkedRecordHref}>
+            <RichText text={$_('open_named_record')} let:slotName>
+              {#if slotName === 'recordName'}
+                <Identifier>{recordSummary}</Identifier>
+              {/if}
+            </RichText>
           </LinkMenuItem>
         {/if}
         <MenuDivider />