CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-01 01:28:51 +13: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 AccessTab from "../_components/AccessTab.svelte"
import { API } from "api" import { API } from "api"
import { store } from "builderStore" import { store } from "builderStore"
import { apps, auth } from "stores/portal" import { apps, auth, groups } from "stores/portal"
import analytics, { Events, EventSource } from "analytics" import analytics, { Events, EventSource } from "analytics"
import { AppStatus } from "constants" import { AppStatus } from "constants"
import AppLockModal from "components/common/AppLockModal.svelte" import AppLockModal from "components/common/AppLockModal.svelte"
@ -192,6 +192,7 @@
try { try {
await API.syncApp(application) await API.syncApp(application)
deployments = await fetchDeployments() deployments = await fetchDeployments()
await groups.actions.init()
if (!apps.length) { if (!apps.length) {
await apps.load() await apps.load()
} }

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

@ -78,8 +78,6 @@
onMount(async () => { onMount(async () => {
try { try {
await groups.actions.init()
await apps.load()
await roles.fetch() await roles.fetch()
} catch (error) { } catch (error) {
notifications.error(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 { store } from "builderStore"
import clientPackage from "@budibase/client/package.json" import clientPackage from "@budibase/client/package.json"
import { processStringSync } from "@budibase/string-templates" 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 { createEventDispatcher } from "svelte"
import { fetchData } from "@budibase/frontend-core" import { fetchData } from "@budibase/frontend-core"
import { API } from "api" import { API } from "api"
import GroupIcon from "../../manage/groups/_components/GroupIcon.svelte"
export let app export let app
export let deployments export let deployments
@ -40,6 +41,13 @@
appId: apps.getProdAppID(app.devId), 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 = () => { const unpublishApp = () => {
dispatch("unpublish", app) dispatch("unpublish", app)
@ -156,30 +164,45 @@
}} }}
dataCy={"access"} dataCy={"access"}
> >
<div class="last-edited-content"> {#if appUsers.length || appGroups.length}
{#if appUsers.length} <Layout noPadding gap="S">
<Layout noPadding gap="S"> <div class="access-tab-content">
<div class="users-tab"> {#if appUsers.length}
{#each appUsers.slice(0, 4) as user} <div class="users">
<Avatar size="M" initials={getInitials(user)} /> <div class="list">
{/each} {#each appUsers.slice(0, 4) as user}
</div> <Avatar size="M" initials={getInitials(user)} />
{/each}
<div class="users-text"> </div>
{appUsers.length} <div class="text">
{appUsers.length > 1 ? `users have` : `user has`} access to this {appUsers.length}
app {appUsers.length > 1 ? "users" : "user"} assigned
</div> </div>
</Layout> </div>
{:else} {/if}
<Layout noPadding gap="S"> {#if appGroups.length}
<Body>No users</Body> <div class="groups">
<div class="users-text"> <div class="list">
No users have been assigned to this app {#each appGroups.slice(0, 4) as group}
</div> <GroupIcon {group} />
</Layout> {/each}
{/if} </div>
</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> </DashCard>
{/if} {/if}
</div> </div>
@ -236,14 +259,26 @@
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
} }
.users-tab { .access-tab-content {
display: flex; 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, .overview-tab .bottom,
.automation-metrics { .automation-metrics {
display: grid; display: grid;