Skip to content

bugfix(web-runtime): [OCISDEV-267] fix progress bar not being translated when user changes language #13108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mzner wants to merge 1 commit into from
Closed

bugfix(web-runtime): [OCISDEV-267] fix progress bar not being translated when user changes language #13108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions changelog/unreleased/bugfix-translate-progress-bar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
Bugfix: Show translation of progress bar without refresh

We've added a fix to ensure that the progress bar translations are displayed correctly without needing to refresh the page.

https://kiteworks.atlassian.net/browse/OCISDEV-267
https://github.com/owncloud/web/pull/13108
56 changes: 36 additions & 20 deletions packages/web-runtime/src/layouts/Application.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,28 +203,44 @@ export default defineComponent({

const progressBarExtensionId = 'com.github.owncloud.web.runtime.default-progress-bar'
const progressBarExtensionPointId = 'app.runtime.global-progress-bar'
const defaultProgressBarExtension: CustomComponentExtension = {
id: progressBarExtensionId,
type: 'customComponent',
extensionPointIds: [progressBarExtensionPointId],
content: LoadingIndicator,
userPreference: {
optionLabel: $gettext('Default progress bar')

function registerProgressBarExtension() {
const defaultProgressBarExtension: CustomComponentExtension = {
id: progressBarExtensionId,
type: 'customComponent',
extensionPointIds: [progressBarExtensionPointId],
content: LoadingIndicator,
userPreference: {
optionLabel: $gettext('Default progress bar')
}
}
}
extensionRegistry.registerExtensions(toRef([defaultProgressBarExtension] satisfies Extension[]))
const progressBarExtensionPoint: ExtensionPoint<CustomComponentExtension> = {
id: progressBarExtensionPointId,
extensionType: 'customComponent',
multiple: false,
defaultExtensionId: defaultProgressBarExtension.id,
userPreference: {
label: $gettext('Global progress bar'),
description: $gettext('Customize your progress bar')
extensionRegistry.registerExtensions(
toRef([defaultProgressBarExtension] satisfies Extension[])
)
const progressBarExtensionPoint: ExtensionPoint<CustomComponentExtension> = {
id: progressBarExtensionPointId,
extensionType: 'customComponent',
multiple: false,
defaultExtensionId: defaultProgressBarExtension.id,
userPreference: {
label: $gettext('Global progress bar'),
description: $gettext('Customize your progress bar')
}
}
extensionRegistry.registerExtensionPoints(toRef([progressBarExtensionPoint]))
Copy link
Collaborator

@LukasHirt LukasHirt Sep 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm quite worried what re-registering extension point will do. If there are any other progress bar extensions, are they persisted or are they lost due to this?

Copy link
Contributor Author

@mzner mzner Sep 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good points. I have to check..I'm not sure. Do you have any other ideas in general? I couldn't come up with anything better. 🙈

Copy link
Collaborator

@LukasHirt LukasHirt Sep 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the computed prop did not work, I have no other idea from top of my head. I would need to dig deeper.

Copy link
Contributor Author

@mzner mzner Sep 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the computed prop did not work, I have no other idea from top of my head. I would need to dig deeper.

Nope, it didn't work either. Already tried that. I will try to find something else and we can talk tomorrow. 👍🏻

return progressBarExtensionPoint
}
const extensionPoints = computed<ExtensionPoint<Extension>[]>(() => [progressBarExtensionPoint])
extensionRegistry.registerExtensionPoints(extensionPoints)

const progressBarExtensionPoint = ref(registerProgressBarExtension())

watch(
() => $gettext('Global progress bar'),
Copy link
Collaborator

@LukasHirt LukasHirt Sep 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it's needed to depend on the locale, wouldn't it be nicer to use current from the useGettext composable?

Copy link
Contributor Author

@mzner mzner Sep 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

current is just a string, so it doesn't trigger reactivity when it changes. I thought the same, but didn't work, unfortunately. :(

() => {
extensionRegistry.unregisterExtensions([progressBarExtensionId])
extensionRegistry.unregisterExtensionPoints([progressBarExtensionPoint.value.id])
Copy link
Collaborator

@LukasHirt LukasHirt Sep 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same worry as in the register function... I do not think other progress bars will survive this.

progressBarExtensionPoint.value = registerProgressBarExtension()
}
)

onMounted(async () => {
await nextTick()
Expand All @@ -236,7 +252,7 @@ export default defineComponent({
window.removeEventListener('resize', onResize)

extensionRegistry.unregisterExtensions([progressBarExtensionId])
extensionRegistry.unregisterExtensionPoints(unref(extensionPoints).flatMap((e) => e.id))
extensionRegistry.unregisterExtensionPoints([progressBarExtensionPoint.value.id])
})

return {
Expand Down