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', () => {
let wrapper
const Wrapper = () => {
const Wrapper = (withBadges = true) => {
return render(BadgesSection, {
localVue,
propsData: {
badges: [badge1, badge2],
badges: withBadges ? [badge1, badge2] : [],
},
mocks: {
$t: jest.fn((t) => t),
},
})
}
beforeEach(() => {
wrapper = Wrapper()
describe('without badges', () => {
beforeEach(() => {
wrapper = Wrapper(false)
})
it('renders', () => {
expect(wrapper.baseElement).toMatchSnapshot()
})
})
it('renders', () => {
expect(wrapper.baseElement).toMatchSnapshot()
})
describe('with badges', () => {
beforeEach(() => {
wrapper = Wrapper(true)
})
it('emits toggleButton', async () => {
const button = screen.getByAltText(badge1.description)
await fireEvent.click(button)
expect(wrapper.emitted().toggleBadge[0][0]).toEqual(badge1)
it('renders', () => {
expect(wrapper.baseElement).toMatchSnapshot()
})
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>
<div class="badge-section">
<h4>{{ title }}</h4>
<div class="badge-container">
<div class="badge-container" v-if="badges.length > 0">
<button
v-for="badge in badges"
:key="badge.id"
@click="toggleBadge(badge)"
:class="{ badge, inactive: !badge.isActive }"
>
<img :src="badge.icon" :alt="badge.description" />
<img :src="badge.icon | proxyApiUrl" :alt="badge.description" />
</button>
</div>
<div v-else>
{{ $t('admin.badges.noBadges') }}
</div>
</div>
</template>

View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Admin/BadgesSection renders 1`] = `
exports[`Admin/BadgesSection with badges renders 1`] = `
<body>
<div>
<div
@ -34,3 +34,23 @@ exports[`Admin/BadgesSection renders 1`] = `
</div>
</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": {
"badges": {
"description": "Stelle die verfügbaren Auszeichnungen für diesen Nutzer ein.",
"noBadges": "Keine Auszeichnungen vorhanden.",
"revokeTrophy": {
"error": "Trophäe konnte nicht widerrufen werden!",
"success": "Trophäe erfolgreich widerrufen"

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -207,15 +207,6 @@ export default {
'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

View File

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

View File

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