Add new-item-highlighting in perms modal

mathesar-foundation · Dec 17, 2024 · ce19d53 · ce19d53
1 parent 9398a90
commit ce19d53
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 28 deletions.
diff --git a/mathesar_ui/src/App.svelte b/mathesar_ui/src/App.svelte
@@ -35,6 +35,7 @@
 -->
 <style global lang="scss">
   @import 'component-library/styles.scss';
+  @import 'packages/new-item-highlighter/highlightNewItems.scss';
 
   :root {
     /** BASE COLORS **/
@@ -137,7 +138,8 @@
     --modal-z-index: 1;
     --dropdown-z-index: 1;
     --cell-errors-z-index: 1;
-    --toast-z-index: 2;
+    --new-item-highlighter-z-index: 2;
+    --toast-z-index: 3;
     --app-header-z-index: 1;
 
     overflow: hidden;

diff --git a/mathesar_ui/src/i18n/languages/en/dict.json b/mathesar_ui/src/i18n/languages/en/dict.json
@@ -447,6 +447,7 @@
   "primary_key_column_cannot_be_moved": "The primary key column cannot be moved.",
   "primary_key_help": "A primary key constraint uniquely identifies each record in a table.",
   "primary_keys": "Primary Keys",
+  "privileges_new_items_scroll_hint": "Scroll or click here to see the role.",
   "processing_data": "Processing Data",
   "prompt_new_password_next_login": "Resetting the password will prompt the user to change their password on their next login.",
   "properties": "Properties",

diff --git a/mathesar_ui/src/systems/permissions/overview/AccessControl.svelte b/mathesar_ui/src/systems/permissions/overview/AccessControl.svelte
@@ -9,6 +9,7 @@
   import WarningBox from '@mathesar/components/message-boxes/WarningBox.svelte';
   import { iconAddNew } from '@mathesar/icons';
   import type { Role } from '@mathesar/models/Role';
+  import { highlightNewItems } from '@mathesar/packages/new-item-highlighter';
   import {
     ButtonMenuItem,
     DropdownMenu,
@@ -144,25 +145,33 @@
     {/if}
   </svelte:fragment>
 
-  {#each [...$roleAccessField.values()] as roleAccess (roleAccess.roleOid)}
-    <div class="access-control-row">
-      <AccessControlRow
-        rolesMap={roles}
-        {permissionsMetaData}
-        {accessLevelsInfoMap}
-        {privilegeInfoMap}
-        {roleAccess}
-        {setAccess}
-        {removeAccess}
-      />
-    </div>
-  {:else}
-    <div class="no-access">
-      <WarningBox>
-        {$_('access_not_granted_for_any_role')}
-      </WarningBox>
-    </div>
-  {/each}
+  <div
+    class="access-control-rows"
+    class:empty={$roleAccessField.size === 0}
+    use:highlightNewItems={{
+      scrollHint: $_('privileges_new_items_scroll_hint'),
+    }}
+  >
+    {#each [...$roleAccessField.values()] as roleAccess (roleAccess.roleOid)}
+      <div class="access-control-row">
+        <AccessControlRow
+          rolesMap={roles}
+          {permissionsMetaData}
+          {accessLevelsInfoMap}
+          {privilegeInfoMap}
+          {roleAccess}
+          {setAccess}
+          {removeAccess}
+        />
+      </div>
+    {:else}
+      <div class="no-access">
+        <WarningBox>
+          {$_('access_not_granted_for_any_role')}
+        </WarningBox>
+      </div>
+    {/each}
+  </div>
 </OverviewSection>
 
 {#if $currentRoleOwns}
@@ -182,17 +191,13 @@
 {/if}
 
 <style lang="scss">
+  .access-control-rows:not(.empty) {
+    margin-block: calc(-1 * var(--size-base));
+  }
+
   .access-control-row {
     padding: var(--size-base) 0;
 
-    &:first-child {
-      padding-top: 0;
-    }
-
-    &:last-child {
-      padding-bottom: 0;
-    }
-
     & + .access-control-row {
       border-top: 1px solid var(--slate-100);
     }