[PS-1465] Fix #2806 - The "Import Data", "Premium Membership", "Subscription" and "Edit User" pages contain strings that cannot be translated

[schang1146]

Type of change

- [x] Bug fix
- [ ] New feature development
- [ ] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
- [ ] Build/deploy pipeline (DevOps)
- [ ] Other

Objective

Fix for #2806 where some pages contained strings that weren't being translated.

Code changes

• apps/web/src/app/organizations/manage/user-add-edit.component.html I changed "Manager Permissions" and "Admin Permissions" text to pull from messages.json translations.

• apps/web/src/app/tools/import-export/import.component.html I added a button that calls click() on the now hidden type="file" input so users are still going through the usual upload file workflow but we can now control what the text in the button says. I also added a short description after the button similar to how it was originally which is either the translatable default of "No file chosen" or whatever their file is called. The original input is hidden and has a (change) handler to capture the file in a variable.

• apps/web/src/app/tools/import-export/import.component.ts I added a setSelectedFile to save the selected file in the selectedFile variable for the HTML template to grab and show the user.

• apps/web/src/locales/en/messages.json I added some English defaults for the new translatable text to grab from.

• apps/web/src/locales/fi/messages.json I wasn't sure if I needed to change this file but I added some Finnish translations off of Google Translate to test changing language preferences between English & Finnish.

Screenshots

Tools > Import Data (English)

Tools > Import Data (Finnish)

Organization Settings > Manage > People > Edit User (English)

Organization Settings > Manage > People > Edit User (Finnish)

Before you submit

• Please add unit tests where it makes sense to do so (encouraged but not required)
• If this change requires a documentation update - notify the documentation team
• If this change has particular deployment requirements - notify the DevOps team

[CLAassistant]

All committers have signed the CLA.

[bitwarden-bot]

Thank you for your contribution! We've added this to our internal Community PR board for review. ID: PS-1465

[schang1146]

I reverted my changes to the Finnish messages.json.

I'm down to separate the work for user-add-edit.component.ts and accompanying messages.json from the import file input selector work. Makes more sense in my head to save the work from the latter for the new task(s) you're creating and have them all lumped together.

Would you like me to revert the other changes and update this PR or create a fresh one for just the mergeable content and close this one out?

[djsmith85]

@schang1146 Thank you for reverting the Finnish messages.

I think it would be great to split out the IMHO now mergeable content into a separate and we can see what changes follow with the file-selector.

I'm personally always in favour of keeping PRs small in scope and thus easier to review/merge. Hard to gauge with this one beforehand.

[schang1146]

<3 Keeping PRs small in scope too for the same reasons.

Created #3607 for the mergeable content and closed this out as the file-selector stuff is awaiting review from @bitwarden/dept-design.

[djsmith85]

@schang1146: Re-opening this as it's still in progress.

Could you please update your fork/branch with master, as the changes made on #3607 have been merged.

Design can then have a look at the remaining changes of this PR.

[schang1146]

Ah gotcha, sorry if I misunderstood.

Edit: Updated this fork/branch with master and the description on the PR.

[danielleflinn]

@schang1146 can you send a screenshot of this page in the Dark mode theme for Design?

It would also be helpful to update the PR title since only the file selector edits are included and the content strings were addressed in another PR.

[schang1146]

Yep, I'll update the PR screenshots with an image of the page in Dark mode theme and update the PR title.

[schang1146]

😅 I'm done finagling with the title. Forgot for a sec GitHub tracks all title updates :(

[schang1146]

Sure, I'll take a look at why that might happen. 👍

Edit: Looks like the button was being assumed to be type='submit', specifying the file selector's button type to 'button' seems to have fixed it.

[djsmith85]

Hi @schang1146,

I'm sorry but I had to revert your changes. We had an issue on one of our test environments and missed 2 issues. Luckily we did catch them before the release. Details around the issues can be found on the linked PR

We'd be really grateful if you'd be open to take another look at this. We understand though, that you might not have the time or wish to continue with this. If that is the case, then this will likely be addressed during a future vault refresh work.

Again apologies for the revert.

[schang1146]

Gotcha :+1: , I'd love to take another look and see if I could get those issues resolved.

@djsmith85 Could you fill me in on some details about the test environment? I don't remember seeing 2 buttons come up when I was working on it locally. What browser & browser version was used? Were there specific steps taken in order to get 2 buttons to show up? Might be less applicable but what OS / OS version was used?

I think I know what to do about the CSP issue - finding it super funny how I just went through CSP hell at work and now it's followed me here.

(Let me know if there's a better place to continue discussion on the bug)

[djsmith85]

Hi @schang1146, thank you so much. Highly appreciated.

I'm on Windows 10 and tested it with Chrome 106.0.5249.119. Special to my setup might be, my browser's UI language is set to German. This will translate the Choose file input to Datei auswählen like shown in the screenshots in the linked PR. The same happens also though when I switch the browser's UI language to English. A colleague was also able to repro this on Chrome on Mac but his system and browser UI will be in EN-US.

I have also just tested this on Firefox (106.0.1) and same result (Choose file/Durchsuchen)

Let me know if there's anything else I can support you with.

Those CSP issues can really be pesky and I'm looking forward to see what you come up with.