show language code

[yangfei4913438]

What does it do?

When editing or adding languages, the display name and language code should not be displayed as the same text.

Why is it needed?

The language code and the language display name, both of which are shown as the language display name, do not make sense.

How to test it?

When you edit a language or add a new language

example:

Now it is all displayed as language names

I want to see the language code and the language name

[codecov]

Codecov Report

Merging #13994 (0562304) into main (f4c6a95) will decrease coverage by 0.01%.
The diff coverage is 0.00%.

❗ Current head 0562304 differs from pull request most recent head 096595a. Consider uploading reports for the commit 096595a to get more accurate results

@@            Coverage Diff             @@
##             main   #13994      +/-   ##
==========================================
- Coverage   55.58%   55.57%   -0.02%     
==========================================
  Files        1275     1275              
  Lines       31833    31839       +6     
  Branches     5734     5738       +4     
==========================================
  Hits        17695    17695              
- Misses      12324    12329       +5     
- Partials     1814     1815       +1     

Flag	Coverage Δ
front	58.12% <0.00%> (-0.02%)	⬇️
unit	49.38% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...ns/i18n/admin/src/components/ModalEdit/BaseForm.js	0.00% <0.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[ronronscelestes]

hi @yangfei4913438 thank you for taking the time creating this PR.
I agree that displaying the display name in the Select component feels strange, even though the Select is disabled in edit mode and doesn't allow modifying the value.

still, I don't think showing the iso code only would be a good solution if the idea is to have a consistent behavior with the data shown in the create modal (e.g. Chinese (Simplified) (zh-Hans)).
I would suggest instead to use defaultLocales data:

const { defaultLocales, isLoading } = useDefaultLocales();
const localeDetails =
    !isLoading && defaultLocales.find(defaultLocale => defaultLocale.code === locale.code);

...

<Option value={localeDetails.code}>{localeDetails.name}</Option>

result:

I think it needs to be discussed internally before though, do you have an opinion on that solution @gu-stav ?

[yangfei4913438]

hi @yangfei4913438 thank you for taking the time creating this PR. I agree that displaying the display name in the Select component feels strange, even though the Select is disabled in edit mode and doesn't allow modifying the value.

still, I don't think showing the iso code only would be a good solution if the idea is to have a consistent behavior with the data shown in the create modal (e.g. Chinese (Simplified) (zh-Hans)). I would suggest instead to use defaultLocales data:

const { defaultLocales, isLoading } = useDefaultLocales();
const localeDetails =
    !isLoading && defaultLocales.find(defaultLocale => defaultLocale.code === locale.code);

...

<Option value={localeDetails.code}>{localeDetails.name}</Option>

result:

I think it needs to be discussed internally before though, do you have an opinion on that solution @gu-stav ?

@ronronscelestes done

[ronronscelestes]

Hi @yangfei4913438! It seems that tests are failing, could you have a look into it? 🙏

[yangfei4913438]

Hi @yangfei4913438! It seems that tests are failing, could you have a look into it? 🙏

defaultLocale feels like a reserved keyword, and after I replaced it with a common word, it didn't prompt any more errors.

[ronronscelestes]

LGTM, thank you for this improvement @yangfei4913438!