Add group icons to access tile and reduce API calls

packages/builder/src/pages/builder/portal/overview/[application]/index.svelte

@@ -23,7 +23,7 @@
   import AccessTab from "../_components/AccessTab.svelte"
   import { API } from "api"
   import { store } from "builderStore"
-  import { apps, auth } from "stores/portal"
+  import { apps, auth, groups } from "stores/portal"
   import analytics, { Events, EventSource } from "analytics"
   import { AppStatus } from "constants"
   import AppLockModal from "components/common/AppLockModal.svelte"
@@ -192,6 +192,7 @@
     try {
       await API.syncApp(application)
       deployments = await fetchDeployments()
+      await groups.actions.init()
       if (!apps.length) {
         await apps.load()
       }

packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte

@@ -78,8 +78,6 @@
 
   onMount(async () => {
     try {
-      await groups.actions.init()
-      await apps.load()
       await roles.fetch()
     } catch (error) {
       notifications.error(error)

packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte

@@ -5,10 +5,11 @@
   import { store } from "builderStore"
   import clientPackage from "@budibase/client/package.json"
   import { processStringSync } from "@budibase/string-templates"
-  import { users, auth, apps } from "stores/portal"
+  import { users, auth, apps, groups } from "stores/portal"
   import { createEventDispatcher } from "svelte"
   import { fetchData } from "@budibase/frontend-core"
   import { API } from "api"
+  import GroupIcon from "../../manage/groups/_components/GroupIcon.svelte"
 
   export let app
   export let deployments
@@ -40,6 +41,13 @@
       appId: apps.getProdAppID(app.devId),
     },
   })
+  $: prodAppId = apps.getProdAppID(app.devId)
+  $: appGroups = $groups.filter(group => {
+    if (!group.roles) {
+      return false
+    }
+    return groups.actions.getGroupAppIds(group).includes(prodAppId)
+  })
 
   const unpublishApp = () => {
     dispatch("unpublish", app)
@@ -156,19 +164,35 @@
           }}
           dataCy={"access"}
         >
-          <div class="last-edited-content">
-            {#if appUsers.length}
+          {#if appUsers.length || appGroups.length}
             <Layout noPadding gap="S">
-                <div class="users-tab">
+              <div class="access-tab-content">
+                {#if appUsers.length}
+                  <div class="users">
+                    <div class="list">
                       {#each appUsers.slice(0, 4) as user}
                         <Avatar size="M" initials={getInitials(user)} />
                       {/each}
                     </div>
-
-                <div class="users-text">
+                    <div class="text">
                       {appUsers.length}
-                  {appUsers.length > 1 ? `users have` : `user has`} access to this
-                  app
+                      {appUsers.length > 1 ? "users" : "user"} assigned
+                    </div>
+                  </div>
+                {/if}
+                {#if appGroups.length}
+                  <div class="groups">
+                    <div class="list">
+                      {#each appGroups.slice(0, 4) as group}
+                        <GroupIcon {group} />
+                      {/each}
+                    </div>
+                    <div class="text">
+                      {appGroups.length} user
+                      {appGroups.length > 1 ? "groups" : "group"} assigned
+                    </div>
+                  </div>
+                {/if}
               </div>
             </Layout>
           {:else}
@@ -179,7 +203,6 @@
               </div>
             </Layout>
           {/if}
-          </div>
         </DashCard>
       {/if}
     </div>
@@ -236,14 +259,26 @@
     grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
   }
 
-  .users-tab {
+  .access-tab-content {
     display: flex;
-    gap: var(--spacing-s);
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: var(--spacing-xl);
+    flex-wrap: wrap;
+  }
+  .access-tab-content > * {
+    flex: 1 1 0;
+  }
+  .access-tab-content .list {
+    display: flex;
+    gap: 4px;
+  }
+  .access-tab-content .text {
+    color: var(--spectrum-global-color-gray-600);
+    margin-top: var(--spacing-s);
   }
 
-  .users-text {
-    color: var(--spectrum-global-color-gray-600);
-  }
   .overview-tab .bottom,
   .automation-metrics {
     display: grid;