Merge pull request #4047 from mathesar-foundation/inspector_tab_clarity

Improve clarity of table inspector active tab
mathesar-foundation · Dec 9, 2024 · 5493b7e · 5493b7e
2 parents c63c952 + ea2704b
commit 5493b7e
Show file tree

Hide file tree

Showing 13 changed files with 36 additions and 24 deletions.
diff --git a/mathesar_ui/src/component-library/tabs/TabContainer.scss b/mathesar_ui/src/component-library/tabs/TabContainer.scss
@@ -23,10 +23,11 @@
       list-style: none;
       overflow: hidden;
       border-radius: 2px 2px 0px 0px;
-      border-bottom: 2px solid transparent;
+      border-bottom: 0.25em solid transparent;
       margin-bottom: -1px;
       margin-right: var(--Tab_margin-right, 2rem);
       font-size: var(--text-size-large);
+      opacity: 0.75;
 
       > div,
       a {
@@ -42,6 +43,7 @@
 
       &:hover {
         border-bottom-color: var(--slate-300);
+        opacity: 1;
       }
 
       & + li.tab {
@@ -50,6 +52,7 @@
 
       &.active {
         border-bottom-color: var(--brand-500);
+        opacity: 1;
       }
 
       &.focused {

diff --git a/mathesar_ui/src/i18n/languages/en/dict.json b/mathesar_ui/src/i18n/languages/en/dict.json
@@ -74,6 +74,7 @@
   "column": "Column",
   "column_added_number_of_times": "{count, plural, one {This column has been added once.} other {This column has been added {count} times.}}",
   "column_data_types": "Column Data Types",
+  "column_description": "Column Description",
   "column_field_options": "{columnName} Field Options",
   "column_from_table": "[columnName] [fromSlot](from) [tableName]",
   "column_id_references_column_name": "[columnId] references the column [columnName].",
@@ -83,6 +84,7 @@
   "column_name_cannot_be_empty": "Column name cannot be empty.",
   "column_names": "Column Names",
   "column_number_name": "Column {number} Name",
+  "column_properties": "Column Properties",
   "column_references_target_table": "The column in this table which references the target table.",
   "column_will_allow_duplicates": "Column {columnName} will allow duplicates.",
   "column_will_allow_null": "Column {columnName} will allow NULL",
@@ -589,6 +591,7 @@
   "table_access_read_help": "Can read table records",
   "table_access_write_help": "Can read, update, delete, and create table records",
   "table_delete_permanent_warning": "Warning: This action is permanent and once deleted, the table cannot be recovered.",
+  "table_description": "Table Description",
   "table_does_not_link": "This table does not link to any other tables",
   "table_name": "Table Name",
   "table_name_already_exists": "A table with that name already exists.",
@@ -605,6 +608,7 @@
   "table_privilege_trigger_help": "Allow creation of triggers on the table.",
   "table_privilege_truncate_help": "Allow truncation (removal of all records) of the table.",
   "table_privilege_update_help": "Allow updating of records within the table.",
+  "table_properties": "Table Properties",
   "table_with_name_already_exists": "A table with that name already exists.",
   "tables": "Tables",
   "tables_matching_search": "{count, plural, one {{count} table matches [searchValue]} other {{count} tables match [searchValue]}}",

diff --git a/mathesar_ui/src/icons/customIcons.ts b/mathesar_ui/src/icons/customIcons.ts
@@ -133,3 +133,15 @@ export const treeChildNodeArrowIcon: IconProps['data'] = {
     ],
   ],
 };
+
+export const permissionsIcon: IconProps['data'] = {
+  icon: [
+    100,
+    100,
+    [],
+    '',
+    [
+      'M 50 1.14 C 49.12 1.14 48.23 1.33 47.45 1.7 L 11.29 17.03 C 7.07 18.82 3.92 22.98 3.94 28.01 C 4.04 47.04 11.87 81.87 44.93 97.71 C 48.14 99.24 51.86 99.24 55.07 97.71 C 88.13 81.87 95.96 47.04 96.06 28.01 C 96.08 22.98 92.93 18.82 88.71 17.03 L 52.57 1.7 C 51.77 1.33 50.88 1.14 50 1.14 z M 50 28.19 A 15.36 15.36 0 0 1 65.36 43.55 A 15.36 15.36 0 0 1 56.37 57.53 L 56.37 74.35 A 6.36 6.36 0 0 1 50 80.72 A 6.36 6.36 0 0 1 43.63 74.35 L 43.63 57.53 A 15.36 15.36 0 0 1 34.64 43.55 A 15.36 15.36 0 0 1 50 28.19 z',
+    ],
+  ],
+};
diff --git a/mathesar_ui/src/icons/index.ts b/mathesar_ui/src/icons/index.ts
@@ -82,6 +82,7 @@ import {
   createDatabaseIcon,
   explorationIcon,
   outcomeIcon,
+  permissionsIcon,
   tableIcon,
   treeChildNodeArrowIcon,
 } from './customIcons';
@@ -194,6 +195,7 @@ export const iconUrl: IconProps = { data: faLink };
 export const iconText: IconProps = { data: faT };
 export const iconField: IconProps = { data: faDatabase };
 export const iconFieldDelimiter: IconProps = { data: faCaretRight };
+export const iconPermissions: IconProps = { data: permissionsIcon };
 
 // STATUSES
 

diff --git a/mathesar_ui/src/pages/database/DatabasePageWrapper.svelte b/mathesar_ui/src/pages/database/DatabasePageWrapper.svelte
@@ -9,6 +9,7 @@
     iconDatabase,
     iconDeleteMajor,
     iconMoreActions,
+    iconPermissions,
   } from '@mathesar/icons';
   import LayoutWithHeader from '@mathesar/layouts/LayoutWithHeader.svelte';
   import { makeSimplePageTitle } from '@mathesar/pages/pageTitleUtils';
@@ -27,6 +28,7 @@
     Button,
     ButtonMenuItem,
     DropdownMenu,
+    Icon,
     TabContainer,
   } from '@mathesar-component-library';
 
@@ -127,6 +129,7 @@
   >
     <div slot="action">
       <Button appearance="secondary" on:click={() => permissionsModal.open()}>
+        <Icon {...iconPermissions} />
         <span>{$_('database_permissions')}</span>
       </Button>
 

diff --git a/mathesar_ui/src/pages/schema/SchemaPage.svelte b/mathesar_ui/src/pages/schema/SchemaPage.svelte
@@ -2,7 +2,7 @@
   import { _ } from 'svelte-i18n';
 
   import AppSecondaryHeader from '@mathesar/components/AppSecondaryHeader.svelte';
-  import { iconEdit, iconSchema } from '@mathesar/icons';
+  import { iconEdit, iconPermissions, iconSchema } from '@mathesar/icons';
   import LayoutWithHeader from '@mathesar/layouts/LayoutWithHeader.svelte';
   import type { Database } from '@mathesar/models/Database';
   import type { Schema } from '@mathesar/models/Schema';
@@ -111,6 +111,7 @@
         <span>{$_('edit_schema')}</span>
       </Button>
       <Button appearance="secondary" on:click={() => permissionsModal.open()}>
+        <Icon {...iconPermissions} />
         <span>{$_('schema_permissions')}</span>
       </Button>
     </div>

diff --git a/mathesar_ui/src/stores/localStorage.ts b/mathesar_ui/src/stores/localStorage.ts
@@ -8,7 +8,6 @@ export const LOCAL_STORAGE_KEYS = {
   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',
@@ -40,11 +39,6 @@ export const tableInspectorTablePropertiesVisible = new LocalStorageStore({
   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,

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
@@ -76,7 +76,7 @@
         >
           <CollapsibleHeader
             slot="header"
-            title={$_('properties')}
+            title={$_('column_properties')}
             isDbLevelConfiguration
           />
           <div slot="content" class="content-container column-properties">

diff --git a/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnNameAndDescription.svelte b/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnNameAndDescription.svelte
@@ -51,7 +51,7 @@
 </script>
 
 <div class="column-property column-name">
-  <span class="label">{$_('name')}</span>
+  <span class="label">{$_('column_name')}</span>
   <EditableTextWithActions
     initialValue={column.column.name}
     onSubmit={handleColumnNameChange}
@@ -61,7 +61,7 @@
 </div>
 
 <div class="column-property column-description">
-  <span class="label">{$_('description')}</span>
+  <span class="label">{$_('column_description')}</span>
   <EditableTextWithActions
     initialValue={column.column.description ?? ''}
     onSubmit={handleColumnDescriptionChange}

diff --git a/mathesar_ui/src/systems/table-view/table-inspector/table/TableDescription.svelte b/mathesar_ui/src/systems/table-view/table-inspector/table/TableDescription.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <div class="update-table-description-property-container">
-  <span class="label">{$_('description')}</span>
+  <span class="label">{$_('table_description')}</span>
   <EditableTextWithActions
     initialValue={table.description ?? ''}
     onSubmit={handleSave}

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
@@ -5,7 +5,6 @@
     tableInspectorTableActionsVisible,
     tableInspectorTableAdvancedVisible,
     tableInspectorTableLinksVisible,
-    tableInspectorTablePermissionsVisible,
     tableInspectorTablePropertiesVisible,
     tableInspectorTableRecordSummaryVisible,
   } from '@mathesar/stores/localStorage';
@@ -34,21 +33,12 @@
   >
     <CollapsibleHeader
       slot="header"
-      title={$_('properties')}
+      title={$_('table_properties')}
       isDbLevelConfiguration
     />
     <div slot="content" class="content-container">
       <TableName disabled={!$currentRoleOwns} />
       <TableDescription disabled={!$currentRoleOwns} />
-    </div>
-  </Collapsible>
-
-  <Collapsible
-    bind:isOpen={$tableInspectorTablePermissionsVisible}
-    triggerAppearance="inspector"
-  >
-    <CollapsibleHeader slot="header" title={$_('table_permissions')} />
-    <div slot="content" class="content-container">
       <TablePermissions />
     </div>
   </Collapsible>

diff --git a/mathesar_ui/src/systems/table-view/table-inspector/table/TableName.svelte b/mathesar_ui/src/systems/table-view/table-inspector/table/TableName.svelte
@@ -27,7 +27,7 @@
 </script>
 
 <div class="rename-table-property-container">
-  <span class="label">{$_('name')}</span>
+  <span class="label">{$_('table_name')}</span>
   <EditableTextWithActions
     initialValue={table.name}
     onSubmit={handleSubmit}

diff --git a/mathesar_ui/src/systems/table-view/table-inspector/table/TablePermissions.svelte b/mathesar_ui/src/systems/table-view/table-inspector/table/TablePermissions.svelte
@@ -7,7 +7,9 @@
     RawTablePrivilegesForRole,
     TablePrivilege,
   } from '@mathesar/api/rpc/tables';
+  import Icon from '@mathesar/component-library/icon/Icon.svelte';
   import { DatabaseRouteContext } from '@mathesar/contexts/DatabaseRouteContext';
+  import { iconPermissions } from '@mathesar/icons';
   import type { Role } from '@mathesar/models/Role';
   import type { Table } from '@mathesar/models/Table';
   import AsyncRpcApiStore from '@mathesar/stores/AsyncRpcApiStore';
@@ -138,6 +140,7 @@
     on:click={() => controller.open()}
     size="small"
   >
+    <Icon {...iconPermissions} />
     <span>{$_('table_permissions')}</span>
   </Button>
 </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -133,3 +133,15 @@ export const treeChildNodeArrowIcon: IconProps['data'] = { @@
         ],
       ],
     };
+    export const permissionsIcon: IconProps['data'] = {
+      icon: [
+,
+,
+        [],
+        '',
+        [
+          'M 50 1.14 C 49.12 1.14 48.23 1.33 47.45 1.7 L 11.29 17.03 C 7.07 18.82 3.92 22.98 3.94 28.01 C 4.04 47.04 11.87 81.87 44.93 97.71 C 48.14 99.24 51.86 99.24 55.07 97.71 C 88.13 81.87 95.96 47.04 96.06 28.01 C 96.08 22.98 92.93 18.82 88.71 17.03 L 52.57 1.7 C 51.77 1.33 50.88 1.14 50 1.14 z M 50 28.19 A 15.36 15.36 0 0 1 65.36 43.55 A 15.36 15.36 0 0 1 56.37 57.53 L 56.37 74.35 A 6.36 6.36 0 0 1 50 80.72 A 6.36 6.36 0 0 1 43.63 74.35 L 43.63 57.53 A 15.36 15.36 0 0 1 34.64 43.55 A 15.36 15.36 0 0 1 50 28.19 z',
+        ],
+      ],
+    };