Create Guardian UI terminology 'dictionary'

[anvabr]

Problem description

There've been numerous occasions where Guardian UI displayed misspelled words/terms etc. Guardian product team always makes effort to ensure accuracy of the terminology used in the UI and system in general (including the codebase), however owing to the size of the project it has proved to be challenging without some automated tool to assist with this.

Requirements

• Refactor Guardian UI to as much as possible 'externalise' words/phrases/text into a separate file or module which we can then automatically run through a syntax checker.
• Design this in such a way that it would be possible in the future to introduce 'language' choice feature and display translated text from this file/module in the UI. (note: the actual implementation of this functionality is not required for this ticket, this to ensure that its design is compatible with this vision).
• Introduce an automated syntax checker running on every build or merge (whatever is easier)

Definition of done

• UI 'strings' from Guardian UI are stored in a separate file/module
• Automates system is created to spell-check it

Acceptance criteria

Occurrences of misspellings in the Guardian UI are eliminated owing to the automated syntax checking of the UI 'strings' at build/packaging time.

[aouatefm]

👋 Hi @prernaadev01 ,

For the implementation of the UI terminology dictionary mentioned in this issue, I’d like to confirm the preferred approach before proceeding.

We have two possible options:

Use @ngx-translate – the standard Angular i18n library that loads text from /assets/i18n/en.json and supports future multi-language translation.

Use a custom TypeScript dictionary module – a lighter solution where all UI text is stored in a central .ts file, which can easily be checked by our automated spell/syntax tools.

Could you please confirm which direction you’d prefer we take for this task?

Thanks! 🙏