Support RTL for i18n

[eladkal]

Body

Extracting the adding RTL support from #51038 to a separated task

Some resources:
https://www.chakra-ui.com/guides/overview-rtl-support
https://leancode.co/blog/right-to-left-in-react

The Task:

1. Add RTL support
2. Add boolean flag to indicate if a specific language is RTL that can be part of the supportedLanguages:
   

   airflow/airflow-core/src/airflow/ui/src/i18n/config.ts

   Line 37 in 187ec08

   export const supportedLanguages = [

For example:

export const supportedLanguages = [
  { code: "de", name: "Deutsch" , is_rtl: "No"},
  { code: "en", name: "English", is_rtl: "No" },
  { code: "he", name: "עברית", is_rtl: "Yes" },
  { code: "ko", name: "한국어", is_rtl: "No" },
  { code: "zh_TW", name: "繁體中文", is_rtl: "No" },
] as const;

Committer

• I acknowledge that I am a maintainer/committer of the Apache Airflow project.

[JeonDaehong]

Hello,

I'm interested in becoming a contributor to Apache Airflow, and while browsing the issues, I came across this one.

I'd love to take this on as my first contribution.
Would it be possible to get a bit more detailed explanation or guidance?

Thank you!

[UncoveredBread]

I’m working on this issue. I’ll add the is_rtl flag to supportedLanguages in config.ts as described. I’ve forked the repository to https://github.com/UncoveredBread/airflow and will submit a PR soon.

[vanshb03]

Body

Extracting the adding RTL support from #51038 to a separated task

Some resources: https://www.chakra-ui.com/guides/overview-rtl-support https://leancode.co/blog/right-to-left-in-react

The Task:

1. Add RTL support

2. Add boolean flag to indicate if a specific language is RTL that can be part of the supportedLanguages:

     [airflow/airflow-core/src/airflow/ui/src/i18n/config.ts](https://github.com/apache/airflow/blob/187ec08d27f60d7202026dfaab9e17b793dd0d09/airflow-core/src/airflow/ui/src/i18n/config.ts#L37)
   
   
        Line 37
     in
     [187ec08](/apache/airflow/commit/187ec08d27f60d7202026dfaab9e17b793dd0d09)
   
   
   
   
   
       
         
          export const supportedLanguages = [
   

For example:

export const supportedLanguages = [
  { code: "de", name: "Deutsch" , is_rtl: "No"},
  { code: "en", name: "English", is_rtl: "No" },
  { code: "he", name: "עברית", is_rtl: "Yes" },
  { code: "ko", name: "한국어", is_rtl: "No" },
  { code: "zh_TW", name: "繁體中文", is_rtl: "No" },
] as const;

Committer

• I acknowledge that I am a maintainer/committer of the Apache Airflow project.

Hey @eladkal ,

Wouldn't be better to use boolean values than strings?

export const supportedLanguages = [
  { code: "de", name: "Deutsch" , is_rtl: false},
  { code: "en", name: "English", is_rtl: false },
  { code: "he", name: "עברית", is_rtl: true },
  { code: "ko", name: "한국어", is_rtl:  false },
  { code: "zh_TW", name: "繁體中文", is_rtl: false },
] as const;

[UncoveredBread]

Submitted a PR from https://github.com/UncoveredBread/airflow to add the is_rtl flag to supportedLanguages.

[eladkal]

Wouldn't be better to use boolean values than strings?

Sure.

[eladkal]

Fixed in #51376