Application language support #8483

ZuperNova · 2022-05-06T14:36:49Z

Application language support

Added support for changing the language in the application.

Description

This pull request contains an implementation that makes it possible to fetch the supported languages in an application.

Altinn-studio

Added a new model for application language.

Thoughts:
The TextResources-model is using the same attribute as the new model ApplicationLanguage. The attribute language should be renamed to languageCode so that it is a more descriptive name. This also enables the oppertunity to rename the attribute languageDescription to language in ApplicationLanguage. Doing this requires renaming throughout the project.

app-frontend-react

Expanded the NavBar.tsx to contain the DropdownComponent.

The dropdown used in this pull request is a the same component used within the application (DropdownComponent). This component is made reusable.

The attribute showLanguageDropdown in settings.json is used to determin if the dropdown menu should be visible or not.

The chosen language is stored in the local storage.

The urlAppHelper contains the new exposed enpoint for fetching the supported languages for an application.

There has been created a new saga for application language.

Both of the sagas for options and textResouce has gotten some changes so that it uses the language from the dropdown.

Tests have been added and updated.

app-template-dotnet

A new controller is added specifically for the application language. There is now one endpoint that exposes the supported languages of the specific application. The functionality behind this is introduced in the AppResorucesSI. Here it has been added a new function that traversers through every file in the text resource directory. While traversing it is looking for three attributes in the resource file, "language", "languageDescription" and "dropdownLabel". These are mapped over to the new model created in the Altinn-Studio Repo, ApplicationLanguage and added to the list. The function returns a list of ApplicationLanguages when done executing. There is also added validation that when fails returns an empty list.

Example:

resource.nb.json

{
    "language": "nb",
    "languageDescription": "Norsk bokmål",
    "dropdownLabel": "Språk",
    "resources": [...]
    ...
}

resource.en.json

{
    "language": "en",
    "languageDescription": "English",
    "dropdownLabel": "Language",
    "resources": [...]
    ...
}

The function will then return:

new List<ApplicationLanguage>() {
    new ApplicationLanguage() {
        Language = "nb",
        LanguageDescription = "Norsk bokmål",
        DropdownLabel = "Språk"
    },
    new ApplicationLanguage() {
        Language = "en",
        LanguageDescription = "English",
        DropdownLabel = "Language"
    }
}

Altinn-cdn

Added schema-description for showLanguageDropdown and also added the missing schema-description for hideCloseButton.

Altinn-studio-docs

Added documentation for the application translator.

Known bugs/missing elements

~~Error handling is not present at the moment in the frontend.~~

~~When refreshing the page the dropdown dissapears.~~

The PR is created even though we are awear of the issues mentioned above to give you a look and to comment on it.

Linked PRs

Altinn-studio-docs: Altinn/altinn-studio-docs#516

app-frontend-react: Altinn/app-frontend-react#83

Altinn-cdn: Altinn/altinn-cdn#96

app-template-dotnet: Altinn/app-template-dotnet#85

Fixes

Language changes should be possible to set in an app app-frontend-react#164

Verification

Your code builds clean without any errors or warnings
Manual testing done (required)
Relevant automated test added (if you find this hard, leave it and we'll help out)
All tests run green

Documentation

User documentation is updated with a separate linked PR in altinn-studio-docs. (if applicable)
Changelog is updated with a separate linked PR
- nuget-packages - (if applicable)

RonnyB71 · 2022-05-10T06:31:52Z

Thx:) We'll process this PR, and related PR's, as soon as possible.

tjololo · 2022-05-11T06:57:34Z

Once again, thank you so much for contributing an entire epic!
To ease the usage, keep the feel consistent and reduce the chances of later breaking changes we have som thoughts about the architecture for this component

Change the schema-description from showLanguageDropdown to showLanguageSelector. Just in case we don’t use a dropdown in the future
Remove languageDescription and dropdownLabel from resources.xx.json and ApplicationLanguage.cs. We would like to serve the defaults for these fields from the template, you find the relevant default served texts here . The app developer should be able to override these defaults with text resources. This can be accomplished by using the getTextFromAppOrDefault util. Suggested keys: language.full_name and language.selector.label

We will as soon as possible get back to you with more local review on the related pull requests.
If you need some more information please dont hesitate to reach out here or on slack, we will be more than happy to see this pull request safely into main :)

src/Altinn.Platform/Altinn.Platform.Storage/Storage.Interface/Models/ApplicationLanguage.cs

…onLanguage + bumpet versjon av storage interface

....Platform/Altinn.Platform.Storage/Storage.Interface/Altinn.Platform.Storage.Interface.csproj

RonnyB71 · 2022-05-30T10:23:11Z

@ZuperNova I've started some preliminary testing of this feature. What I've done so far is:

Created a test application with one dropdown component and the navigation bar componet
Running the test application locally using the latest backend including the code merged into 5.2.0-alpha.1 and serving the frontend based on your branch
Updated settings.json to include "showLanguageSelector": true

Anything else I need to do to get this up and running? Currently I don't see the language selector, nor do I see any language requests from the frontend so I've probably missed something.

ZuperNova · 2022-05-30T10:41:27Z

@ZuperNova I've started some preliminary testing of this feature. What I've done so far is:

Created a test application with one dropdown component and the navigation bar componet

Running the test application locally using the latest backend including the code merged into 5.2.0-alpha.1 and serving the frontend based on your branch

Updated settings.json to include "showLanguageSelector": true

Anything else I need to do to get this up and running? Currently I don't see the language selector, nor do I see any language requests from the frontend so I've probably missed something.

You also need to include some text resources (nb.json, en.json). Without this the frontend won't render the selector.

RonnyB71 · 2022-05-30T12:14:21Z

You also need to include some text resources (nb.json, en.json). Without this the frontend won't render the selector.

Sorry, forgot to mention that but I created text resources in the above setup already. So I have resource.en.json, resource.nb.json and resource.nn.json - all with appName and one additional label translated.

I see that your service work as expected because I created a dynamic options passing in the IApplicationLanguage interface and used that to create options for a dropdown list. Which is then populated with en, nb and nn.

ZuperNova · 2022-05-30T12:46:25Z

You also need to include some text resources (nb.json, en.json). Without this the frontend won't render the selector.

Sorry, forgot to mention that but I created text resources in the above setup already. So I have resource.en.json, resource.nb.json and resource.nn.json - all with appName and one additional label translated.

I see that your service work as expected because I created a dynamic options passing in the IApplicationLanguage interface and used that to create options for a dropdown list. Which is then populated with en, nb and nn.

Okay, I understand. Have you also included the different attributes in the text resources that the selector use?

resource.nb.json

{
    "id": "language.selector.label",
    "value": "Språk"
},
{
    "id": "language.full_name.nb",
    "value": "Norsk bokmål"
},
{
    "id": "language.full_name.en",
    "value": "Engelsk"
}

resource.en.json

{
    "id": "language.selector.label",
    "value": "Language"
},
{
    "id": "language.full_name.en",
    "value": "English"
},
{
    "id": "language.full_name.nb",
    "value": "Norwegian bokmål"
}

RonnyB71 · 2022-06-02T08:45:10Z

Okay, I understand. Have you also included the different attributes in the text resources that the selector use?
Nope, I missed that one. Added it now, but still no language selector showing up.

I'm suspecting that it's not triggering as I see no requests from the frontend to the new api. My settings.json looks like this:

{
  "$schema": "https://altinncdn.no/schemas/json/layout/layoutSettings.schema.v1.json",
  "pages": {
    "order": [
      "FormLayout",
      "Side2"
    ]
  },
  "showLanguageSelector": true
}

Anything else I've missed?

ZuperNova · 2022-06-02T08:50:26Z

Okay, I understand. Have you also included the different attributes in the text resources that the selector use?
Nope, I missed that one. Added it now, but still no language selector showing up.

I'm suspecting that it's not triggering as I see no requests from the frontend to the new api. My settings.json looks like this:
{
  "$schema": "https://altinncdn.no/schemas/json/layout/layoutSettings.schema.v1.json",
  "pages": {
    "order": [
      "FormLayout",
      "Side2"
    ]
  },
  "showLanguageSelector": true
}
Anything else I've missed?

The showLanguageSelector needs to be inside of pages

{
  "$schema": "https://altinncdn.no/schemas/json/layout/layoutSettings.schema.v1.json",
  "pages": {
    "order": [
      "FormLayout",
      "Side2"
    ],
    "showLanguageSelector": true
  }
}

RonnyB71 · 2022-06-02T09:09:25Z

The showLanguageSelector needs to be inside of pages

Sigh, seem like I need to brush up my reading skills. Thx for your patience:) Up and running now.

ZuperNova · 2022-06-02T11:49:59Z

Sigh, seem like I need to brush up my reading skills. Thx for your patience:) Up and running now.

Hehe, no worries! Glad it worked out 😄

github-actions bot added area/data-storage solution/platform Issues related to Altinn Platform solutions. labels May 6, 2022

This was referenced May 6, 2022

Application language support doc Altinn/altinn-studio-docs#516

Merged

Application language support Altinn/app-frontend-react#83

Merged

Application language support Altinn/altinn-cdn#96

Closed

Application language support Altinn/app-template-dotnet#85

Merged

tjololo added the external-contribution-❤️ Pull request from a developer outside the Altinn teams. label May 9, 2022

RonnyB71 reviewed May 18, 2022

View reviewed changes

src/Altinn.Platform/Altinn.Platform.Storage/Storage.Interface/Models/ApplicationLanguage.cs Outdated Show resolved Hide resolved

Truls Gunnerød and others added 3 commits May 23, 2022 10:12

La inn ny modell for appliksjonsspråk

0409942

Rullet tilbake languageCode ti language og renamet felter i Applicati…

9a2d242

…onLanguage + bumpet versjon av storage interface

Removed unnecessary attributes

260b4b7

ZuperNova force-pushed the application-language-support branch from 1e0ce33 to d9e7dd9 Compare May 23, 2022 08:13

ZuperNova force-pushed the application-language-support branch from d9e7dd9 to 260b4b7 Compare May 23, 2022 08:35

Moved the ApplicationLanguage and placed it in the template project

ece2f03

RonnyB71 reviewed May 23, 2022

View reviewed changes

....Platform/Altinn.Platform.Storage/Storage.Interface/Altinn.Platform.Storage.Interface.csproj Outdated Show resolved Hide resolved

Reverted the Altinn.Platform.Storage.Interface-version

1fb7435

pckofstad mentioned this pull request May 30, 2022

Udir will use Altinn as a survey-engine for 450 000 school kids Altinn/app-frontend-react#181

Closed

45 tasks

RonnyB71 closed this Jun 3, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Application language support #8483

Application language support #8483

ZuperNova commented May 6, 2022 •

edited

Loading

RonnyB71 commented May 10, 2022

tjololo commented May 11, 2022

RonnyB71 commented May 30, 2022

ZuperNova commented May 30, 2022

RonnyB71 commented May 30, 2022

ZuperNova commented May 30, 2022 •

edited

Loading

RonnyB71 commented Jun 2, 2022

ZuperNova commented Jun 2, 2022

RonnyB71 commented Jun 2, 2022 •

edited

Loading

ZuperNova commented Jun 2, 2022

Application language support #8483

Application language support #8483

Conversation

ZuperNova commented May 6, 2022 • edited Loading

Application language support

Description

Altinn-studio

app-frontend-react

app-template-dotnet

Altinn-cdn

Altinn-studio-docs

Known bugs/missing elements

Linked PRs

Fixes

Verification

Documentation

RonnyB71 commented May 10, 2022

tjololo commented May 11, 2022

RonnyB71 commented May 30, 2022

ZuperNova commented May 30, 2022

RonnyB71 commented May 30, 2022

ZuperNova commented May 30, 2022 • edited Loading

RonnyB71 commented Jun 2, 2022

ZuperNova commented Jun 2, 2022

RonnyB71 commented Jun 2, 2022 • edited Loading

ZuperNova commented Jun 2, 2022

ZuperNova commented May 6, 2022 •

edited

Loading

ZuperNova commented May 30, 2022 •

edited

Loading

RonnyB71 commented Jun 2, 2022 •

edited

Loading