fix(openchallenges): create pipe to map enum values of challenge properties to labels

[rrchai]

• fixes [Bug] Fix MLCube casing typo #2580

Changelog

• Create a pipe in util lib to convert the enum value of a challenge property into a label name based on the mapping file located in the challenge-search component stored locally.

[rrchai]

I realize the challenge card has incentive information. To avoid calling the function hundreds of times to get incentive label for each challenge card, I will change to create a separate mapping file for label-value.

[rrchai]

When I was trying to update the incentive in the challenge card component, all pages displayed blank with an error indicating that loading the footer failed. Here is the error message.

statistics-viewer.component.ts:13 Uncaught TypeError: Cannot read properties of undefined (reading 'FooterComponent')
    at Module.FooterComponent (statistics-viewer.component.ts:13:72)
    at 72716 (challenge-search.component.ts:83:5)
    at __webpack_require__ (bootstrap:19:1)
    at 17844 (challenge-search.component.ts:87:34)
    at __webpack_require__ (bootstrap:19:1)
    at 15392 (variables.ts:9:2)
    at __webpack_require__ (bootstrap:19:1)
    at 71604 (mock-avatars.ts:14:2)
    at __webpack_require__ (bootstrap:19:1)
    at 65488 (statistics-viewer.component.ts:13:72)

I noticed this issue when I shared the mapping file in the challenge-search library via index.ts. However, the error disappears if I share it in the ui library. I'm not sure if it's related to a recurring module loading issue.

[rrchai]

I noticed this issue when I shared the mapping file in the challenge-search library via index.ts. However, the error disappears if I share it in the ui library. I'm not sure if it's related to a recurring module loading issue.

Potential circular dependency, if creating a new mapping file stored in challenge-search/challenge:

• challenge-search/challenge depends on ui (which includes challenge-card).
• challenge-card depends on challenge-search/challenge for mappings.

The new mapping file cannot be in the challenge/challenge-search lib to avoid the error.

Potential circular dependency, If using a function to retrieve the labels from an existing mapping file in challenge-search:

• the reusable function depends on challenge-search for mappings.
• challenge-search depends on ui (which includes challenge-card).
• challenge-card depends on the reusable function for mappings.

This approach is not doable, as the reusable function needs to be isolated from challenge-search to avoid the error, unless creating/moving a mapping file. Or directly import the mapping file from challenge-search, see this comment.

---

I am creating a pipe directly importing the existing mapping file from challenge-search.

[tschaffter]

This fix works as expected, thanks! I like how developer-friendly using Angular pipes to convert constant to human-readable text is.

There are two improvements I can see for the future:

• use the constant from the API client as keys in a dictionary and set the localization strings as the values. This approach has the benefit of defining the content of the dictionary once and they have one "implementation" for each languages.
• extract the localization code from the util library and place it into a "localization" library.

[sonarcloud]

Quality Gate passed for 'openchallenges-app'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
No data about Duplication

See analysis details on SonarCloud