From 60cb59e9848b56a2d109807057338ce7c9c2af35 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 23 Sep 2022 15:13:02 +0100 Subject: [PATCH] Add group icons to access tile and reduce API calls --- .../overview/[application]/index.svelte | 3 +- .../overview/_components/AccessTab.svelte | 2 - .../overview/_components/OverviewTab.svelte | 95 +++++++++++++------ 3 files changed, 67 insertions(+), 33 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte b/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte index a6c33c50b3..fe0e2443a2 100644 --- a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte +++ b/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() } diff --git a/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte b/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte index a0719441d0..c1a3a707b6 100644 --- a/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte +++ b/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) diff --git a/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte b/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte index 695f48a9e2..854fb3cce6 100644 --- a/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte +++ b/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,30 +164,45 @@ }} dataCy={"access"} > -
- {#if appUsers.length} - -
- {#each appUsers.slice(0, 4) as user} - - {/each} -
- -
- {appUsers.length} - {appUsers.length > 1 ? `users have` : `user has`} access to this - app -
- - {:else} - - No users -
- No users have been assigned to this app -
- - {/if} -
+ {#if appUsers.length || appGroups.length} + +
+ {#if appUsers.length} +
+
+ {#each appUsers.slice(0, 4) as user} + + {/each} +
+
+ {appUsers.length} + {appUsers.length > 1 ? "users" : "user"} assigned +
+
+ {/if} + {#if appGroups.length} +
+
+ {#each appGroups.slice(0, 4) as group} + + {/each} +
+
+ {appGroups.length} user + {appGroups.length > 1 ? "groups" : "group"} assigned +
+
+ {/if} +
+ + {:else} + + No users +
+ No users have been assigned to this app +
+ + {/if} {/if} @@ -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;