Added Table Permission Modal in Table Card Menu

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

@@ -437,6 +437,9 @@
   "passwords_do_not_match": "Passwords do not match",
   "paste_data_import": "Paste the data you want to import",
   "permission": "Permission",
+  "permissions_for_named_database": "Permissions for [databaseName] database",
+  "permissions_for_named_schema": "Permissions for [schemaName] schema",
+  "permissions_for_named_table": "Permissions for [tableName] table",
   "pick": "Pick",
   "pick_best_data_type_column": "Pick the best data type for each column",
   "pick_record": "Pick a record",

mathesar_ui/src/pages/database/permissions/DatabasePermissionsModal.svelte

@@ -6,6 +6,8 @@
     DatabasePrivilege,
     RawDatabasePrivilegesForRole,
   } from '@mathesar/api/rpc/databases';
+  import Identifier from '@mathesar/components/Identifier.svelte';
+  import { RichText } from '@mathesar/components/rich-text';
   import { DatabaseRouteContext } from '@mathesar/contexts/DatabaseRouteContext';
   import type { Role } from '@mathesar/models/Role';
   import AsyncRpcApiStore from '@mathesar/stores/AsyncRpcApiStore';
@@ -106,7 +108,11 @@
   onClose={() => databasePrivileges.reset()}
 >
   <span slot="title">
-    {$_('database_permissions')}
+    <RichText text={$_('permissions_for_named_database')} let:slotName>
+      {#if slotName === 'databaseName'}
+        <Identifier>{database.name}</Identifier>
+      {/if}
+    </RichText>
   </span>
   <PermissionsOverview
     slot="share"

mathesar_ui/src/pages/schema/SchemaPermissionsModal.svelte

@@ -7,6 +7,8 @@
     RawSchemaPrivilegesForRole,
     SchemaPrivilege,
   } from '@mathesar/api/rpc/schemas';
+  import Identifier from '@mathesar/components/Identifier.svelte';
+  import { RichText } from '@mathesar/components/rich-text';
   import { DatabaseRouteContext } from '@mathesar/contexts/DatabaseRouteContext';
   import type { Role } from '@mathesar/models/Role';
   import type { Schema } from '@mathesar/models/Schema';
@@ -28,6 +30,7 @@
   export let schema: Schema;
 
   $: schemaPrivileges = schema.constructSchemaPrivilegesStore();
+  $: schemaName = schema.name;
 
   const databaseContext = DatabaseRouteContext.get();
   $: ({ roles, currentRole } = $databaseContext);
@@ -118,7 +121,11 @@
   onClose={() => schemaPrivileges.reset()}
 >
   <span slot="title">
-    {$_('schema_permissions')}
+    <RichText text={$_('permissions_for_named_schema')} let:slotName>
+      {#if slotName === 'schemaName'}
+        <Identifier>{$schemaName}</Identifier>
+      {/if}
+    </RichText>
   </span>
   <PermissionsOverview
     slot="share"

mathesar_ui/src/pages/schema/TableCard.svelte

@@ -8,6 +8,7 @@
     iconEdit,
     iconExploration,
     iconMoreActions,
+    iconPermissions,
     iconSelectRecord,
   } from '@mathesar/icons';
   import type { Database } from '@mathesar/models/Database';
@@ -36,6 +37,7 @@
   export let database: Database;
   export let schema: Schema;
   export let openEditTableModal: (_table: Table) => void;
+  export let openTablePermissionsModal: (_table: Table) => void;
 
   $: ({ currentRoleOwns, currentRolePrivileges } = table.currentAccess);
 
@@ -148,6 +150,12 @@
         >
           {$_('edit_table')}
         </ButtonMenuItem>
+        <ButtonMenuItem
+          on:click={() => openTablePermissionsModal(table)}
+          icon={iconPermissions}
+        >
+          {$_('table_permissions')}
+        </ButtonMenuItem>
       {/if}
       <ButtonMenuItem
         on:click={handleDeleteTable}

mathesar_ui/src/pages/schema/TablesList.svelte

@@ -7,23 +7,31 @@
   import type { Table } from '@mathesar/models/Table';
   import { highlightNewItems } from '@mathesar/packages/new-item-highlighter';
   import { modal } from '@mathesar/stores/modal';
+  import TablePermissionsModal from '@mathesar/systems/table-view/table-inspector/table/TablePermissionsModal.svelte';
 
   import EditTableModal from './EditTableModal.svelte';
   import EmptyEntity from './EmptyEntity.svelte';
   import TableCard from './TableCard.svelte';
 
   const editTableModal = modal.spawnModalController();
+  const tablePermissionsModal = modal.spawnModalController();
 
   export let tables: Table[];
   export let database: Database;
   export let schema: Schema;
 
-  let selectedTable: Table | undefined;
+  let tableForEditing: Table | undefined;
+  let tableForPermissions: Table | undefined;
 
   function openEditTableModal(table: Table) {
-    selectedTable = table;
+    tableForEditing = table;
     editTableModal.open();
   }
+
+  function openTablePermissionsModal(table: Table) {
+    tableForPermissions = table;
+    tablePermissionsModal.open();
+  }
 </script>
 
 <div class="tables-list">
@@ -33,7 +41,13 @@
       use:highlightNewItems={{ scrollHint: $_('table_new_items_scroll_hint') }}
     >
       {#each tables as table (table.oid)}
-        <TableCard {table} {database} {schema} {openEditTableModal} />
+        <TableCard
+          {table}
+          {database}
+          {schema}
+          {openEditTableModal}
+          {openTablePermissionsModal}
+        />
       {/each}
     </div>
   {:else}
@@ -43,8 +57,15 @@
   {/if}
 </div>
 
-{#if selectedTable}
-  <EditTableModal controller={editTableModal} table={selectedTable} />
+{#if tableForEditing}
+  <EditTableModal controller={editTableModal} table={tableForEditing} />
+{/if}
+
+{#if tableForPermissions}
+  <TablePermissionsModal
+    controller={tablePermissionsModal}
+    table={tableForPermissions}
+  />
 {/if}
 
 <style lang="scss">

mathesar_ui/src/systems/table-view/table-inspector/table/TableMode.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
 
+  import { iconPermissions } from '@mathesar/icons';
   import {
     tableInspectorTableActionsVisible,
     tableInspectorTableAdvancedVisible,
     tableInspectorTableLinksVisible,
     tableInspectorTablePropertiesVisible,
     tableInspectorTableRecordSummaryVisible,
   } from '@mathesar/stores/localStorage';
+  import { modal } from '@mathesar/stores/modal';
   import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
-  import { Collapsible } from '@mathesar-component-library';
+  import { Button, Collapsible, Icon } from '@mathesar-component-library';
 
   import CollapsibleHeader from '../CollapsibleHeader.svelte';
   import TableRecordSummaryConfig from '../record-summary/TableRecordSummaryConfig.svelte';
@@ -19,9 +21,10 @@
   import TableActions from './TableActions.svelte';
   import TableDescription from './TableDescription.svelte';
   import TableName from './TableName.svelte';
-  import TablePermissions from './TablePermissions.svelte';
+  import TablePermissionsModal from './TablePermissionsModal.svelte';
 
   const tabularData = getTabularDataStoreFromContext();
+  const permissionModal = modal.spawnModalController();
   $: ({ table } = $tabularData);
   $: ({ currentRoleOwns } = table.currentAccess);
 </script>
@@ -39,7 +42,17 @@
     <div slot="content" class="content-container">
       <TableName disabled={!$currentRoleOwns} />
       <TableDescription disabled={!$currentRoleOwns} />
-      <TablePermissions />
+      <div>
+        <Button
+          appearance="secondary"
+          on:click={() => permissionModal.open()}
+          size="small"
+          class="permissions-button"
+        >
+          <Icon {...iconPermissions} />
+          <span>{$_('table_permissions')}</span>
+        </Button>
+      </div>
     </div>
   </Collapsible>
 
@@ -88,6 +101,8 @@
   </Collapsible>
 </div>
 
+<TablePermissionsModal {table} controller={permissionModal} />
+
 <style lang="scss">
   .table-mode-container {
     padding-bottom: var(--size-small);

mathesar_ui/src/systems/table-view/table-inspector/table/TablePermissions.svelte → mathesar_ui/src/systems/table-view/table-inspector/table/TablePermissionsModal.svelte

@@ -7,30 +7,28 @@
     RawTablePrivilegesForRole,
     TablePrivilege,
   } from '@mathesar/api/rpc/tables';
-  import Icon from '@mathesar/component-library/icon/Icon.svelte';
+  import Identifier from '@mathesar/components/Identifier.svelte';
+  import { RichText } from '@mathesar/components/rich-text';
   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';
   import { AsyncStoreValue } from '@mathesar/stores/AsyncStore';
-  import { modal } from '@mathesar/stores/modal';
-  import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
   import { toast } from '@mathesar/stores/toast';
   import {
     type AccessControlConfig,
     PermissionsModal,
     PermissionsOverview,
     TransferOwnership,
   } from '@mathesar/systems/permissions';
-  import { Button, ImmutableMap } from '@mathesar-component-library';
-
-  const controller = modal.spawnModalController();
-  const tabularData = getTabularDataStoreFromContext();
+  import {
+    ImmutableMap,
+    type ModalController,
+  } from '@mathesar-component-library';
 
-  $: table = $tabularData.table;
+  export let controller: ModalController;
+  export let table: Table;
   $: tablePrivileges = table.constructTablePrivilegesStore();
-
   const databaseContext = DatabaseRouteContext.get();
   $: ({ roles, currentRole } = $databaseContext);
 
@@ -134,24 +132,17 @@
   }
 </script>
 
-<div>
-  <Button
-    appearance="secondary"
-    on:click={() => controller.open()}
-    size="small"
-  >
-    <Icon {...iconPermissions} />
-    <span>{$_('table_permissions')}</span>
-  </Button>
-</div>
-
 <PermissionsModal
   {controller}
   getAsyncStores={getAsyncStoresForPermissions}
   onClose={() => tablePrivileges.reset()}
 >
   <span slot="title">
-    {$_('table_permissions')}
+    <RichText text={$_('permissions_for_named_table')} let:slotName>
+      {#if slotName === 'tableName'}
+        <Identifier>{table.name}</Identifier>
+      {/if}
+    </RichText>
   </span>
   <PermissionsOverview
     slot="share"