From c4e43dfd43a6ca41ca17ffa62894529de2e26f6a Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Thu, 19 Dec 2024 10:42:52 -0500
Subject: [PATCH] Highlight newly-added child roles

---
 mathesar_ui/src/i18n/languages/en/dict.json               | 1 +
 .../database/settings/roles/ModifyRoleMembers.svelte      | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/mathesar_ui/src/i18n/languages/en/dict.json b/mathesar_ui/src/i18n/languages/en/dict.json
index ce0b9fd47c..c0a45ee47a 100644
--- 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
index 1b02217d59..baa7f4f699 100644
--- 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">