Highlight newly-added child roles

mathesar-foundation · Dec 19, 2024 · c4e43df · c4e43df
1 parent 7322484
commit c4e43df
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/mathesar_ui/src/i18n/languages/en/dict.json b/mathesar_ui/src/i18n/languages/en/dict.json
@@ -55,6 +55,7 @@
   "cell": "Cell",
   "change_password": "Change Password",
   "check_for_updates": "Check for Updates",
+  "child_role_new_items_scroll_hint": "Scroll or click here to see the child role.",
   "child_roles": "Child Roles",
   "child_roles_count": "{count, plural, one {{count} child role} other {{count} child roles}}",
   "child_roles_saved_successfully": "The Child Roles have been successfully saved.",

diff --git a/mathesar_ui/src/pages/database/settings/roles/ModifyRoleMembers.svelte b/mathesar_ui/src/pages/database/settings/roles/ModifyRoleMembers.svelte
@@ -10,6 +10,7 @@
   import WarningBox from '@mathesar/components/message-boxes/WarningBox.svelte';
   import { iconDeleteMajor } from '@mathesar/icons';
   import type { Role } from '@mathesar/models/Role';
+  import { highlightNewItems } from '@mathesar/packages/new-item-highlighter';
   import { toast } from '@mathesar/stores/toast';
   import {
     Button,
@@ -87,7 +88,12 @@
         </div>
       {/if}
     </div>
-    <div class="member-list">
+    <div
+      class="member-list"
+      use:highlightNewItems={{
+        scrollHint: $_('child_role_new_items_scroll_hint'),
+      }}
+    >
       {#if $memberOids.size > 0}
         {#each [...$memberOids] as memberOid (memberOid)}
           <div class="member">