Generator-jhipster: RTL lang in react home page is incorrect

[manisi]

Overview of the issue

If you select right-to-left in the desired language settings form, the home screen and menus do not change right to left correctly.

JHipster Version(s)

[email protected] /Users/developer/Desktop/sportAppServer
└── [email protected] 

##### **JHipster configuration, a `.yo-rc.json` file generated in the root folder**

.yo-rc.json file

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "sport.mobile.app",
      "nativeLanguage": "en"
    },
    "jhipsterVersion": "6.2.0",
    "applicationType": "monolith",
    "baseName": "sportAppServer",
    "packageName": "sport.mobile.app",
    "packageFolder": "sport/mobile/app",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "mssql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSwaggerCodegen": false,
    "jwtSecretKey": "bXktc2VjcmV0LXRva2VuLXRvLWNoYW5nZS1pbi1wcm9kdWN0aW9uLWFuZC10by1rZWVwLWluLWEtc2VjdXJlLXBsYWNl",
    "useSass": true,
    "clientPackageManager": "npm",
    "clientFramework": "react",
    "clientTheme": "none",
    "clientThemeVariant": "",
    "testFrameworks": [
      "gatling"
    ],
    "jhiPrefix": "jhi",
    "entitySuffix": "",
    "dtoSuffix": "DTO",
    "otherModules": [],
    "enableTranslation": true,
    "nativeLanguage": "en",
    "languages": [
      "en",
      "fa"
    ],
    "blueprints": []
  }
}

JDL for the Entity configuration(s) entityName.json files generated in the .jhipster directory

JDL entity definitions

entity Foo {
  name String
}
dto Foo with mapstruct
paginate Foo with pagination
service Foo with serviceClass
filter Foo

Environment and Tools

java version "1.8.0_60"
Java(TM) SE Runtime Environment (build 1.8.0_60-b27)
Java HotSpot(TM) 64-Bit Server VM (build 25.60-b23, mixed mode)

git version 2.20.1

node: v10.16.0

npm: 6.9.0

yeoman: 3.1.0

yarn: 1.16.0

Docker version 18.06.0-ce, build 0ffa825

docker-compose version 1.25.0-rc2, build 661ac20e

[chrisdns]

Hi

I tried to reproduce it with your .yo-rc but it seems to work fine, what do you mean by "do not change right to left correctly"

[manisi]

Hi

I tried to reproduce it with your .yo-rc but it seems to work fine, what do you mean by "do not change right to left correctly"

Hi @chrisdns
please see this picture

page align not set to RTL

but correct is:

[vishal423]

@manisi, it seems you have understanding about changes to be done. Can you contribute?

[manisi]

Yes
but how can i start?
Thanks

[SudharakaP]

@manisi : We have a pretty detailed guide about how to contribute; https://github.com/jhipster/generator-jhipster/blob/master/CONTRIBUTING.md

Let us know if you have any specific questions or issues. :smile:

[pascalgrimaud]

@manisi : I didn't manage to reproduce.
I used your config and I got the 2nd screen, the one you mentioned as "correct"

Are you sure it's not a problem from your cache or something like that ?

Better, if you can push a project on Github, or use https://start.jhipster.tech
it will help us to reproduce

[pascalgrimaud]

See my screenshot:

For now, I'm closing this. I can reopen if you provide more information to reproduce or a project on GitHub, like suggested

[manisi]

@pascalgrimaud
Hi
Thanking and appreciating your efforts.
If you change the language menu( from navbar menu) everything is OK.
But this problem arises when you change the language settings from(accunt->setting) the menu.
All page alignment not RTL and incorrect.
Thanks

[pascalgrimaud]

reopening this
I'll have a look later with your steps

[pascalgrimaud]

I confirm the issue, when changing the language in account > settings
@manisi : feel free to propose a PR for that, if you know how to fix it

[Hawkurane]

Hello, I've found the culprit:
In Angular, when submitting the form, this is the code that is executed:

https://github.com/jhipster/generator-jhipster/blob/7c44af17f2b488b07f1b3b69ae4637b93057308b/generators/client/templates/angular/src/main/webapp/app/account/settings/settings.component.ts.ejs#L67-L86

While in React, when using the form to change settings, this is what happens:
We have an API call:

https://github.com/jhipster/generator-jhipster/blob/7c44af17f2b488b07f1b3b69ae4637b93057308b/generators/client/templates/react/src/main/webapp/app/modules/account/settings/settings.reducer.ts.ejs#L75-L89

The Back End part:

    /**
     * {@code POST  /account} : update the current user information.
     *
     * @param userDTO the current user information.
     * @throws EmailAlreadyUsedException {@code 400 (Bad Request)} if the email is already used.
     * @throws RuntimeException {@code 500 (Internal Server Error)} if the user login wasn't found.
     */
    @PostMapping("/account")
    public void saveAccount(@Valid @RequestBody UserDTO userDTO) {
        String userLogin = SecurityUtils.getCurrentUserLogin().orElseThrow(() -> new AccountResourceException("Current user login not found"));
        Optional<User> existingUser = userRepository.findOneByEmailIgnoreCase(userDTO.getEmail());
        if (existingUser.isPresent() && (!existingUser.get().getLogin().equalsIgnoreCase(userLogin))) {
            throw new EmailAlreadyUsedException();
        }
        Optional<User> user = userRepository.findOneByLogin(userLogin);
        if (!user.isPresent()) {
            throw new AccountResourceException("User could not be found");
        }
        userService.updateUser(userDTO.getFirstName(), userDTO.getLastName(), userDTO.getEmail(),
            userDTO.getLangKey(), userDTO.getImageUrl());
    }

By the way, for information, in React's side, this is what is happening when changing the language without going through Account's settings

https://github.com/jhipster/generator-jhipster/blob/7c44af17f2b488b07f1b3b69ae4637b93057308b/generators/client/templates/react/src/main/webapp/app/shared/layout/header/header.tsx.ejs#L61-L70

I think these informations can help in making a PR (if there isn't any yet) :)

[pascalgrimaud]

@Hawkurane : it looks like you know how to fix this.
Do you have the bandwidth to do it plz ?

[Hawkurane]

Sure I can take a look at this tomorrow

[Hawkurane]

The Pull Request fixes your specific issue but after changing account settings, opening a private navigtation page and relogging again, the language is still in the wrong order (LTR instead of RTL)