set app namespace in appcontext

[eperedo]

📌 References

• Issue: Closes https://app.clickup.com/t/8694qwkw6

📝 Implementation

• Update i18n types
• set default namespace in app-context.ts

The Problem

In our applications we have a locales/index.js file that set the namespace for the translations.

const namespace = 'homepage-app';
...
i18n.setDefaultNamespace(namespace);

The problem is that we use libraries like d2-ui-components or feedback-component that also have their own locale/index.js files:

const namespace = 'd2-ui-components';
...
i18n.setDefaultNamespace(namespace);

so eventually the application namespace will be overwritten by one of these libraries.

Fast solution

Force the whole application to use the namespace of the app by doing it in the app-context.ts file

i18n.setDefaultNamespace("homepage-app");

if you get the error: Property 'setDefaultNamespace' does not exist on type 'typeof import("@dhis2/d2-i18n")'
look for the i18n.d.ts file and add the type in there:

declare module "@dhis2/d2-i18n" {
    // ...
    export function setDefaultNamespace(namespace: string);
}

📹 Screenshots/Screen capture

🔥 Testing

For testing purposes I'm only adding a translation for the string Available Home Pages

#8694qwkw6

[ifoche]

Task linked: CU-8694qwkw6 Fix translations conflict between home page and feedback component

[tokland]

All good!

[tokland]

Related: EyeSeeTea/dhis2-app-skeleton@54fcc22