Reuse component

packages/builder/src/pages/builder/portal/users/_components/SCIMBanner.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+</script>
+
+<div class="scim-banner">
+  <Icon name="Info" size="S" />
+  Users are synced from your AD
+</div>
+
+<style>
+  .scim-banner {
+    display: flex;
+    gap: var(--spacing-s);
+  }
+</style>

packages/builder/src/pages/builder/portal/users/users/[userId].svelte

@@ -31,6 +31,7 @@
   import GroupNameTableRenderer from "../groups/_components/GroupNameTableRenderer.svelte"
   import AppNameTableRenderer from "./_components/AppNameTableRenderer.svelte"
   import AppRoleTableRenderer from "./_components/AppRoleTableRenderer.svelte"
+  import ScimBanner from "../_components/SCIMBanner.svelte"
 
   export let userId
 
@@ -268,10 +269,7 @@
       <div class="details-title">
         <Heading size="S">Details</Heading>
         {#if scimEnabled}
-          <div class="scim-banner">
+          <ScimBanner />
-            <Icon name="Info" size="S" />
-            Users are synced from your AD
-          </div>
         {/if}
       </div>
       <div class="fields">
@@ -423,8 +421,4 @@
     justify-content: space-between;
     align-items: center;
   }
-  .scim-banner {
-    display: flex;
-    gap: var(--spacing-s);
-  }
 </style>

packages/builder/src/pages/builder/portal/users/users/index.svelte

@@ -11,7 +11,6 @@
     notifications,
     Pagination,
     Divider,
-    Icon,
   } from "@budibase/bbui"
   import AddUserModal from "./_components/AddUserModal.svelte"
   import { users, groups, auth, licensing, organisation } from "stores/portal"
@@ -29,6 +28,7 @@
   import { Constants, Utils, fetchData } from "@budibase/frontend-core"
   import { API } from "api"
   import { OnboardingType } from "../../../../../constants"
+  import ScimBanner from "../_components/SCIMBanner.svelte"
 
   const fetch = fetchData({
     API,
@@ -241,10 +241,7 @@
         </Button>
       </ButtonGroup>
     {:else}
-      <div class="scim-banner">
+      <ScimBanner />
-        <Icon name="Info" size="S" />
-        Users are synced from your AD
-      </div>
     {/if}
     <div class="controls-right">
       <Search bind:value={searchEmail} placeholder="Search" />
@@ -330,9 +327,4 @@
   .controls-right :global(.spectrum-Search) {
     width: 200px;
   }
-
-  .scim-banner {
-    display: flex;
-    gap: var(--spacing-s);
-  }
 </style>