fix(webapp): fix admin badges settings (#8438)

* Remove proxy from nuxt.config, instead add proxy filter

* Show message when there are no badges
This commit is contained in:
Max 2025-04-26 19:25:27 +02:00 committed by GitHub
parent 3c853d5737
commit ba0cc147e7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 70 additions and 24 deletions

View File

@ -21,26 +21,41 @@ const badge2 = {
describe('Admin/BadgesSection', () => { describe('Admin/BadgesSection', () => {
let wrapper let wrapper
const Wrapper = () => { const Wrapper = (withBadges = true) => {
return render(BadgesSection, { return render(BadgesSection, {
localVue, localVue,
propsData: { propsData: {
badges: [badge1, badge2], badges: withBadges ? [badge1, badge2] : [],
},
mocks: {
$t: jest.fn((t) => t),
}, },
}) })
} }
beforeEach(() => { describe('without badges', () => {
wrapper = Wrapper() beforeEach(() => {
wrapper = Wrapper(false)
})
it('renders', () => {
expect(wrapper.baseElement).toMatchSnapshot()
})
}) })
it('renders', () => { describe('with badges', () => {
expect(wrapper.baseElement).toMatchSnapshot() beforeEach(() => {
}) wrapper = Wrapper(true)
})
it('emits toggleButton', async () => { it('renders', () => {
const button = screen.getByAltText(badge1.description) expect(wrapper.baseElement).toMatchSnapshot()
await fireEvent.click(button) })
expect(wrapper.emitted().toggleBadge[0][0]).toEqual(badge1)
it('emits toggleButton', async () => {
const button = screen.getByAltText(badge1.description)
await fireEvent.click(button)
expect(wrapper.emitted().toggleBadge[0][0]).toEqual(badge1)
})
}) })
}) })

View File

@ -1,16 +1,19 @@
<template> <template>
<div class="badge-section"> <div class="badge-section">
<h4>{{ title }}</h4> <h4>{{ title }}</h4>
<div class="badge-container"> <div class="badge-container" v-if="badges.length > 0">
<button <button
v-for="badge in badges" v-for="badge in badges"
:key="badge.id" :key="badge.id"
@click="toggleBadge(badge)" @click="toggleBadge(badge)"
:class="{ badge, inactive: !badge.isActive }" :class="{ badge, inactive: !badge.isActive }"
> >
<img :src="badge.icon" :alt="badge.description" /> <img :src="badge.icon | proxyApiUrl" :alt="badge.description" />
</button> </button>
</div> </div>
<div v-else>
{{ $t('admin.badges.noBadges') }}
</div>
</div> </div>
</template> </template>

View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Admin/BadgesSection renders 1`] = ` exports[`Admin/BadgesSection with badges renders 1`] = `
<body> <body>
<div> <div>
<div <div
@ -34,3 +34,23 @@ exports[`Admin/BadgesSection renders 1`] = `
</div> </div>
</body> </body>
`; `;
exports[`Admin/BadgesSection without badges renders 1`] = `
<body>
<div>
<div
class="badge-section"
>
<h4>
</h4>
<div>
admin.badges.noBadges
</div>
</div>
</div>
</body>
`;

View File

@ -12,6 +12,7 @@
"admin": { "admin": {
"badges": { "badges": {
"description": "Stelle die verfügbaren Auszeichnungen für diesen Nutzer ein.", "description": "Stelle die verfügbaren Auszeichnungen für diesen Nutzer ein.",
"noBadges": "Keine Auszeichnungen vorhanden.",
"revokeTrophy": { "revokeTrophy": {
"error": "Trophäe konnte nicht widerrufen werden!", "error": "Trophäe konnte nicht widerrufen werden!",
"success": "Trophäe erfolgreich widerrufen" "success": "Trophäe erfolgreich widerrufen"

View File

@ -12,6 +12,7 @@
"admin": { "admin": {
"badges": { "badges": {
"description": "Configure the available badges for this user", "description": "Configure the available badges for this user",
"noBadges": "There are no badges available",
"revokeTrophy": { "revokeTrophy": {
"error": "Trophy could not be revoked!", "error": "Trophy could not be revoked!",
"success": "Trophy successfully revoked!" "success": "Trophy successfully revoked!"

View File

@ -12,6 +12,7 @@
"admin": { "admin": {
"badges": { "badges": {
"description": null, "description": null,
"noBadges": null,
"revokeTrophy": { "revokeTrophy": {
"error": null, "error": null,
"success": null "success": null

View File

@ -12,6 +12,7 @@
"admin": { "admin": {
"badges": { "badges": {
"description": null, "description": null,
"noBadges": null,
"revokeTrophy": { "revokeTrophy": {
"error": null, "error": null,
"success": null "success": null

View File

@ -12,6 +12,7 @@
"admin": { "admin": {
"badges": { "badges": {
"description": null, "description": null,
"noBadges": null,
"revokeTrophy": { "revokeTrophy": {
"error": null, "error": null,
"success": null "success": null

View File

@ -12,6 +12,7 @@
"admin": { "admin": {
"badges": { "badges": {
"description": null, "description": null,
"noBadges": null,
"revokeTrophy": { "revokeTrophy": {
"error": null, "error": null,
"success": null "success": null

View File

@ -12,6 +12,7 @@
"admin": { "admin": {
"badges": { "badges": {
"description": null, "description": null,
"noBadges": null,
"revokeTrophy": { "revokeTrophy": {
"error": null, "error": null,
"success": null "success": null

View File

@ -12,6 +12,7 @@
"admin": { "admin": {
"badges": { "badges": {
"description": null, "description": null,
"noBadges": null,
"revokeTrophy": { "revokeTrophy": {
"error": null, "error": null,
"success": null "success": null

View File

@ -12,6 +12,7 @@
"admin": { "admin": {
"badges": { "badges": {
"description": null, "description": null,
"noBadges": null,
"revokeTrophy": { "revokeTrophy": {
"error": null, "error": null,
"success": null "success": null

View File

@ -207,15 +207,6 @@ export default {
'X-API-TOKEN': CONFIG.BACKEND_TOKEN, 'X-API-TOKEN': CONFIG.BACKEND_TOKEN,
}, },
}, },
'/img': {
// make this configurable (nuxt-dotenv)
target: CONFIG.GRAPHQL_URI,
toProxy: true, // cloudflare needs that
headers: {
'X-UI-Request': true,
'X-API-TOKEN': CONFIG.BACKEND_TOKEN,
},
},
}, },
// Give apollo module options // Give apollo module options

View File

@ -58,6 +58,11 @@ describe('.vue', () => {
query: jest.fn(), query: jest.fn(),
}, },
mutate: jest.fn(), mutate: jest.fn(),
queries: {
Badge: {
loading: false,
},
},
}, },
$toast: { $toast: {
success: jest.fn(), success: jest.fn(),

View File

@ -8,7 +8,7 @@
</ds-heading> </ds-heading>
<ds-text>{{ $t('admin.badges.description') }}</ds-text> <ds-text>{{ $t('admin.badges.description') }}</ds-text>
</ds-space> </ds-space>
<base-card> <base-card v-if="!isLoadingBadges">
<badges-section <badges-section
:title="$t('admin.badges.verificationBadges')" :title="$t('admin.badges.verificationBadges')"
:badges="verificationBadges" :badges="verificationBadges"
@ -87,6 +87,9 @@ export default {
isActive: this.user.badgeTrophies.some((userBadge) => userBadge.id === badge.id), isActive: this.user.badgeTrophies.some((userBadge) => userBadge.id === badge.id),
})) }))
}, },
isLoadingBadges() {
return this.$apollo.queries.Badge.loading
},
}, },
methods: { methods: {
toggleBadge(badge) { toggleBadge(badge) {