Merge pull request #3997 from mathesar-foundation/persist_inspector_s…

…ection_visibility Persist visibility of table inspector sections
mathesar-foundation · Nov 12, 2024 · fd4090a · fd4090a
2 parents b492d82 + 28229a8
commit fd4090a
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 35 deletions.
diff --git a/mathesar_ui/src/stores/localStorage.ts b/mathesar_ui/src/stores/localStorage.ts
@@ -1,8 +1,26 @@
 import LocalStorageStore from './LocalStorageStore';
 
+// prettier-ignore
 export const LOCAL_STORAGE_KEYS = {
   releaseData: 'mathesar-release-data',
+
+  // Table inspector
+  tableInspectorVisible: 'table-inspector-visible',
   tableInspectorWidth: 'table-inspector-width',
+  tableInspectorTablePropertiesVisible: 'table-inspector-table-properties-visible',
+  tableInspectorTablePermissionsVisible: 'table-inspector-table-permissions-visible',
+  tableInspectorTableLinksVisible: 'table-inspector-table-links-visible',
+  tableInspectorTableRecordSummaryVisible: 'table-inspector-table-record-summary-visible',
+  tableInspectorTableActionsVisible: 'table-inspector-table-actions-visible',
+  tableInspectorTableAdvancedVisible: 'table-inspector-table-advanced-visible',
+  tableInspectorColumnPropertiesVisible: 'table-inspector-column-properties-visible',
+  tableInspectorColumnDataTypeVisible: 'table-inspector-column-data-type-visible',
+  tableInspectorColumnDefaultValueVisible: 'table-inspector-column-default-value-visible',
+  tableInspectorColumnFormattingVisible: 'table-inspector-column-formatting-visible',
+  tableInspectorColumnRecordSummaryVisible: 'table-inspector-column-record-summary-visible',
+  tableInspectorColumnActionsVisible: 'table-inspector-column-actions-visible',
+
+  // Data explorer
   dataExplorerLeftSidebarWidth: 'data-explorer-left-sidebar-width',
   dataExplorerRightSidebarWidth: 'data-explorer-right-sidebar-width',
 } as const;
@@ -12,6 +30,71 @@ export const tableInspectorWidth = new LocalStorageStore({
   defaultValue: 350,
 });
 
+export const tableInspectorVisible = new LocalStorageStore({
+  key: LOCAL_STORAGE_KEYS.tableInspectorVisible,
+  defaultValue: true,
+});
+
+export const tableInspectorTablePropertiesVisible = new LocalStorageStore({
+  key: LOCAL_STORAGE_KEYS.tableInspectorTablePropertiesVisible,
+  defaultValue: true,
+});
+
+export const tableInspectorTablePermissionsVisible = new LocalStorageStore({
+  key: LOCAL_STORAGE_KEYS.tableInspectorTablePermissionsVisible,
+  defaultValue: true,
+});
+
+export const tableInspectorTableLinksVisible = new LocalStorageStore({
+  key: LOCAL_STORAGE_KEYS.tableInspectorTableLinksVisible,
+  defaultValue: true,
+});
+
+export const tableInspectorTableRecordSummaryVisible = new LocalStorageStore({
+  key: LOCAL_STORAGE_KEYS.tableInspectorTableRecordSummaryVisible,
+  defaultValue: false,
+});
+
+export const tableInspectorTableActionsVisible = new LocalStorageStore({
+  key: LOCAL_STORAGE_KEYS.tableInspectorTableActionsVisible,
+  defaultValue: true,
+});
+
+export const tableInspectorTableAdvancedVisible = new LocalStorageStore({
+  key: LOCAL_STORAGE_KEYS.tableInspectorTableAdvancedVisible,
+  defaultValue: false,
+});
+
+export const tableInspectorColumnPropertiesVisible = new LocalStorageStore({
+  key: LOCAL_STORAGE_KEYS.tableInspectorColumnPropertiesVisible,
+  defaultValue: true,
+});
+
+export const tableInspectorColumnDataTypeVisible = new LocalStorageStore({
+  key: LOCAL_STORAGE_KEYS.tableInspectorColumnDataTypeVisible,
+  defaultValue: true,
+});
+
+export const tableInspectorColumnDefaultValueVisible = new LocalStorageStore({
+  key: LOCAL_STORAGE_KEYS.tableInspectorColumnDefaultValueVisible,
+  defaultValue: true,
+});
+
+export const tableInspectorColumnFormattingVisible = new LocalStorageStore({
+  key: LOCAL_STORAGE_KEYS.tableInspectorColumnFormattingVisible,
+  defaultValue: true,
+});
+
+export const tableInspectorColumnRecordSummaryVisible = new LocalStorageStore({
+  key: LOCAL_STORAGE_KEYS.tableInspectorColumnRecordSummaryVisible,
+  defaultValue: false,
+});
+
+export const tableInspectorColumnActionsVisible = new LocalStorageStore({
+  key: LOCAL_STORAGE_KEYS.tableInspectorColumnActionsVisible,
+  defaultValue: true,
+});
+
 export const dataExplorerLeftSidebarWidth = new LocalStorageStore({
   key: LOCAL_STORAGE_KEYS.dataExplorerLeftSidebarWidth,
   defaultValue: 400,

diff --git a/mathesar_ui/src/stores/table-data/display.ts b/mathesar_ui/src/stores/table-data/display.ts
@@ -40,8 +40,6 @@ export class Display {
 
   horizontalScrollOffset: Writable<number>;
 
-  isTableInspectorVisible: Writable<boolean>;
-
   /**
    * @deprecated
    * Keys are column ids. Values are column widths in px.
@@ -76,7 +74,6 @@ export class Display {
     this.recordsData = recordsData;
     this.horizontalScrollOffset = writable(0);
     this.scrollOffset = writable(0);
-    this.isTableInspectorVisible = writable(true);
 
     this.customizedColumnWidths = new WritableMap();
 

diff --git a/mathesar_ui/src/systems/table-view/TableView.svelte b/mathesar_ui/src/systems/table-view/TableView.svelte
@@ -8,6 +8,7 @@
   import { SheetClipboardHandler } from '@mathesar/components/sheet/SheetClipboardHandler';
   import { rowHeaderWidthPx } from '@mathesar/geometry';
   import type { Table } from '@mathesar/models/Table';
+  import { tableInspectorVisible } from '@mathesar/stores/localStorage';
   import {
     ID_ADD_NEW_COLUMN,
     ID_ROW_CONTROL_COLUMN,
@@ -49,8 +50,7 @@
     }),
     showToastInfo: toast.info,
   });
-  $: ({ horizontalScrollOffset, scrollOffset, isTableInspectorVisible } =
-    display);
+  $: ({ horizontalScrollOffset, scrollOffset } = display);
   $: columnOrder = table.metadata?.column_order ?? [];
   $: hasNewColumnButton = context !== 'widget' && $currentRoleOwns;
   /**
@@ -74,7 +74,7 @@
     [ID_ROW_CONTROL_COLUMN, rowHeaderWidthPx],
     [ID_ADD_NEW_COLUMN, 32],
   ]);
-  $: showTableInspector = $isTableInspectorVisible && supportsTableInspector;
+  $: showTableInspector = $tableInspectorVisible && supportsTableInspector;
 </script>
 
 <div class="table-view">

diff --git a/mathesar_ui/src/systems/table-view/actions-pane/ActionsPane.svelte b/mathesar_ui/src/systems/table-view/actions-pane/ActionsPane.svelte
@@ -4,6 +4,7 @@
   import EntityPageHeader from '@mathesar/components/EntityPageHeader.svelte';
   import ModificationStatus from '@mathesar/components/ModificationStatus.svelte';
   import { iconInspector, iconTable } from '@mathesar/icons';
+  import { tableInspectorVisible } from '@mathesar/stores/localStorage';
   import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
   import { Button, Icon } from '@mathesar-component-library';
 
@@ -17,17 +18,16 @@
 
   export let context: TableActionsContext = 'page';
 
-  $: ({ table, meta, isLoading, display } = $tabularData);
+  $: ({ table, meta, isLoading } = $tabularData);
   $: ({ currentRolePrivileges } = table.currentAccess);
   $: ({ filtering, sorting, grouping, sheetState } = meta);
-  $: ({ isTableInspectorVisible } = display);
 
   $: isSelectable = $currentRolePrivileges.has('SELECT');
 
   const canViewLinkedEntities = true;
 
   function toggleTableInspector() {
-    isTableInspectorVisible.set(!$isTableInspectorVisible);
+    tableInspectorVisible.update((v) => !v);
   }
 </script>
 
@@ -60,7 +60,7 @@
         size="medium"
         disabled={$isLoading}
         on:click={toggleTableInspector}
-        active={$isTableInspectorVisible}
+        active={$tableInspectorVisible}
         aria-label={$_('inspector')}
       >
         <Icon {...iconInspector} />

diff --git a/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte b/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte
@@ -1,6 +1,14 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
 
+  import {
+    tableInspectorColumnActionsVisible,
+    tableInspectorColumnDataTypeVisible,
+    tableInspectorColumnDefaultValueVisible,
+    tableInspectorColumnFormattingVisible,
+    tableInspectorColumnPropertiesVisible,
+    tableInspectorColumnRecordSummaryVisible,
+  } from '@mathesar/stores/localStorage';
   import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
   import { currentTablesData } from '@mathesar/stores/tables';
   import FkRecordSummaryConfig from '@mathesar/systems/table-view/table-inspector/record-summary/FkRecordSummaryConfig.svelte';
@@ -59,7 +67,10 @@
     {/if}
     {#if column}
       {#key column}
-        <Collapsible isOpen triggerAppearance="inspector">
+        <Collapsible
+          bind:isOpen={$tableInspectorColumnPropertiesVisible}
+          triggerAppearance="inspector"
+        >
           <CollapsibleHeader
             slot="header"
             title={$_('properties')}
@@ -90,7 +101,10 @@
     {/if}
 
     {#if column}
-      <Collapsible isOpen triggerAppearance="inspector">
+      <Collapsible
+        bind:isOpen={$tableInspectorColumnDataTypeVisible}
+        triggerAppearance="inspector"
+      >
         <CollapsibleHeader
           slot="header"
           title={$_('data_type')}
@@ -103,7 +117,10 @@
     {/if}
 
     {#if column && !column.column.default?.is_dynamic}
-      <Collapsible isOpen triggerAppearance="inspector">
+      <Collapsible
+        bind:isOpen={$tableInspectorColumnDefaultValueVisible}
+        triggerAppearance="inspector"
+      >
         <CollapsibleHeader
           slot="header"
           title={$_('default_value')}
@@ -116,7 +133,10 @@
     {/if}
 
     {#if column}
-      <Collapsible isOpen triggerAppearance="inspector">
+      <Collapsible
+        bind:isOpen={$tableInspectorColumnFormattingVisible}
+        triggerAppearance="inspector"
+      >
         <CollapsibleHeader slot="header" title={$_('formatting')} />
         <div slot="content" class="content-container">
           {#key column}
@@ -126,15 +146,17 @@
       </Collapsible>
     {/if}
 
-    <!-- TODO_BETA: Re-enable this once we make the record summary configurable -->
-    <!-- {#if column}
+    {#if column}
       {@const referentTableId = column.linkFk?.referent_table_oid}
       {@const referentTable =
         referentTableId === undefined
           ? undefined
           : $currentTablesData.tablesMap.get(referentTableId)}
       {#if referentTable !== undefined}
-        <Collapsible triggerAppearance="inspector">
+        <Collapsible
+          bind:isOpen={$tableInspectorColumnRecordSummaryVisible}
+          triggerAppearance="inspector"
+        >
           <CollapsibleHeader
             slot="header"
             title={$_('linked_record_summary')}
@@ -144,9 +166,12 @@
           </div>
         </Collapsible>
       {/if}
-    {/if} -->
+    {/if}
 
-    <Collapsible isOpen triggerAppearance="inspector">
+    <Collapsible
+      bind:isOpen={$tableInspectorColumnActionsVisible}
+      triggerAppearance="inspector"
+    >
       <CollapsibleHeader slot="header" title={$_('actions')} />
       <div slot="content" class="content-container">
         <ColumnActions columns={selectedColumns} />

diff --git a/...sar_ui/src/systems/table-view/table-inspector/record-summary/FkRecordSummaryConfig.svelte b/...sar_ui/src/systems/table-view/table-inspector/record-summary/FkRecordSummaryConfig.svelte
@@ -5,14 +5,15 @@
   import RecordSummaryConfig from '@mathesar/systems/table-view/table-inspector/record-summary/RecordSummaryConfig.svelte';
   import Pagination from '@mathesar/utils/Pagination';
 
+  // eslint-disable-next-line svelte/valid-compile
   export let table: Table;
 
-  $: tabularData = new TabularData({
-    database: table.schema.database,
-    table,
-    abstractTypesMap,
-    meta: new Meta({ pagination: new Pagination({ size: 1 }) }),
-  });
+  // $: tabularData = new TabularData({
+  //   database: table.schema.database,
+  //   table,
+  //   meta: new Meta({ pagination: new Pagination({ size: 1 }) }),
+  // });
 </script>
 
-<RecordSummaryConfig {table} {tabularData} />
+<!-- <RecordSummaryConfig {tabularData} /> -->
+TODO
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/table/TableMode.svelte b/mathesar_ui/src/systems/table-view/table-inspector/table/TableMode.svelte
@@ -1,6 +1,14 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
 
+  import {
+    tableInspectorTableActionsVisible,
+    tableInspectorTableAdvancedVisible,
+    tableInspectorTableLinksVisible,
+    tableInspectorTablePermissionsVisible,
+    tableInspectorTablePropertiesVisible,
+    tableInspectorTableRecordSummaryVisible,
+  } from '@mathesar/stores/localStorage';
   import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
   import { Collapsible } from '@mathesar-component-library';
 
@@ -19,7 +27,10 @@
 </script>
 
 <div class="table-mode-container">
-  <Collapsible isOpen triggerAppearance="inspector">
+  <Collapsible
+    bind:isOpen={$tableInspectorTablePropertiesVisible}
+    triggerAppearance="inspector"
+  >
     <CollapsibleHeader
       slot="header"
       title={$_('properties')}
@@ -31,14 +42,20 @@
     </div>
   </Collapsible>
 
-  <Collapsible isOpen triggerAppearance="inspector">
+  <Collapsible
+    bind:isOpen={$tableInspectorTablePermissionsVisible}
+    triggerAppearance="inspector"
+  >
     <CollapsibleHeader slot="header" title={$_('table_permissions')} />
     <div slot="content" class="content-container">
       <TablePermissions />
     </div>
   </Collapsible>
 
-  <Collapsible isOpen triggerAppearance="inspector">
+  <Collapsible
+    bind:isOpen={$tableInspectorTableLinksVisible}
+    triggerAppearance="inspector"
+  >
     <CollapsibleHeader
       slot="header"
       title={$_('links')}
@@ -49,22 +66,30 @@
     </div>
   </Collapsible>
 
-  <!-- TODO_BETA: re-enable this once we make the record summary template configurable -->
-  <!-- <Collapsible triggerAppearance="plain">
+  <Collapsible
+    bind:isOpen={$tableInspectorTableRecordSummaryVisible}
+    triggerAppearance="inspector"
+  >
     <CollapsibleHeader slot="header" title={$_('record_summary')} />
     <div slot="content" class="content-container">
-      <RecordSummaryConfig table={$currentTable} tabularData={$tabularData} />
+      <!-- <RecordSummaryConfig tabularData={$tabularData} /> -->
     </div>
-  </Collapsible> -->
+  </Collapsible>
 
-  <Collapsible isOpen triggerAppearance="inspector">
+  <Collapsible
+    bind:isOpen={$tableInspectorTableActionsVisible}
+    triggerAppearance="inspector"
+  >
     <CollapsibleHeader slot="header" title={$_('actions')} />
     <div slot="content" class="content-container">
       <TableActions />
     </div>
   </Collapsible>
 
-  <Collapsible triggerAppearance="inspector">
+  <Collapsible
+    bind:isOpen={$tableInspectorTableAdvancedVisible}
+    triggerAppearance="inspector"
+  >
     <CollapsibleHeader slot="header" title={$_('advanced')} />
     <div slot="content" class="content-container">
       <AdvancedActions />