CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-30 03:50:37 +12:00
Code Issues Projects Releases Wiki Activity

Add group icons to access tile and reduce API calls

Browse source
This commit is contained in:
Andrew Kingston 2022-09-23 15:13:02 +01:00
parent d30353326b
commit 3479176021
3 changed files with 67 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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()
}

2
packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte
View file

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

95
packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
View file

@ -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"}
>
<div class="last-edited-content">
{#if appUsers.length}
<Layout noPadding gap="S">
<div class="users-tab">
{#each appUsers.slice(0, 4) as user}
<Avatar size="M" initials={getInitials(user)} />
{/each}
</div>
<div class="users-text">
{appUsers.length}
{appUsers.length > 1 ? `users have` : `user has`} access to this
app
</div>
</Layout>
{:else}
<Layout noPadding gap="S">
<Body>No users</Body>
<div class="users-text">
No users have been assigned to this app
</div>
</Layout>
{/if}
</div>
{#if appUsers.length || appGroups.length}
<Layout noPadding gap="S">
<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="text">
{appUsers.length}
{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}
<Layout noPadding gap="S">
<Body>No users</Body>
<div class="users-text">
No users have been assigned to this app
</div>
</Layout>
{/if}
</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;