Generator-jhipster: ng-jhipster

[kaidohallik]

This is follow up to https://groups.google.com/g/jhipster-dev/c/zrigrN1Ji_o where I proposed to move away from ng-jhipster.

I looked at ng-jhipster to see what code is used or unused in generator-jhipster.

Unused

• directives: max.directive, maxbytes.directive, min.directive, minbytes.directive, number-of-bytes
• pipes: capitalize.pipe, truncate-characters.pipe, truncate-words.pipe
• services: base64.service, date-util.service, pagination-util.service, resolve-paging-params.service

Used

All is used under components:

• metrics - metrics.component
• jhi-boolean.component - user-management-detail.component
• jhi-item-count.component - user-management.component, entity-management.component

Used in directives:

• sort-by.directive, sort.directive - configuration.component, logs.component, user-management.component, entity-management.component

All is used under language:

• JhiMissingTranslationHandler, jhiTranslate, JhiLanguageService - everywhere

Used pipes:

• filter.pipe, pure-filter.pipe, order-by.pipe - logs.component - unused after #12924
• keys.pipe - configuration.component, gateway.component, health.component, health-modal.component - unused after #12913

Used services:

• alert.service (JhiAlertService) - notification.interceptor, alert-error.component, alert.component
• data-util.service (JhiDataUtils) - entity-management.component, entity-management-update.component, entity-management-detail.component
• event-manager.service (JhiEventManager), event-with-content.model - many places
• parse-links.service (JhiParseLinks) - entity-management.component (if using infinite scroll)

All root files are used: JhiConfigService, JhiModuleConfig, NgJhipsterModule

Dependencies in ng-jhipster

• @angular - everywhere
• @ngx-translate - language, alert.service, metrics (jhiTranslate), jhi-item-count.component (jhiTranslate)
• @fortawesome - sort-by.directive, sort.directive
• @ng-bootstrap - metrics
• rxjs - jhiTranslate, JhiDataUtils, JhiEventManager

---

Changing functionality in ng-jhipster is three step action:

• make changes in ng-jhipster
• someone from team leads should release a new version
• new version should be used in generator-jhipster

And basically 2 time testing: while making changes in ng-jhipster and after using new version in generator-jhipster.

The same change in generator-jhipster is one step:

• just change it and test once

---

Starting from Angular 9, Quick Development guide in https://github.com/jhipster/ng-jhipster#quick-development is no more working. So if we stay on ng-jhipster then this guide and/or ng-jhipster configuration needs to be changed.
And if we stay on ng-jhipster then I would like to remove code that is no more used by generator-jhipster.

If we will move away from ng-jhipster then we can do this step by step, for example if some issue is related to ng-jhipster then as part of fixing, code is moved to generator-jhipster and removed from ng-jhipster.
Currently 2 ng-jhipster related issues opened: #12868 and #12778

WDYT about that?

[mshima]

The proposition is to move away or cleanup?
I am in favor of moving away:

• it's hard to develop and test it.
• there are to many peer dependencies, npm 7 makes maintaining ng-jhipster harder.
• loose burden on @pascalgrimaud.

If moving away, just copy the relevant files (try to keep git history) to generator-jhipster, don't need a new release.

[DanielFran]

+1 to migrate to the generator

[kaidohallik]

Seems that everybody agrees with moving away from ng-jhipster.

So the next step is to agree migration technical details.

@mshima suggested to keep git history, so I made first test. I used instructions from https://medium.com/@ayushya/move-directory-from-one-repository-to-another-preserving-git-history-d210fa049d4b to filter git commits.

Steps done:

git clone https://github.com/jhipster/ng-jhipster.git
cd ng-jhipster
git filter-branch --subdirectory-filter src/directive -- --all
removed remaining tags
git reset --hard
git gc --aggressive
git prune
git clean -fd
create folder generators/client/templates/angular/src/main/webapp/app/shared/sort
git mv sort.directive.ts generators/client/templates/angular/src/main/webapp/app/shared/sort/sort.directive.ts.ejs
git mv sort-by.directive.ts generators/client/templates/angular/src/main/webapp/app/shared/sort/sort-by.directive.ts.ejs
delete remaining files
commit all changes to git
go to generator-jhipster folder
git remote add ng-jhipster <ng-jhipster-migration-folder>
git checkout -b sort-directive-migration main
git pull ng-jhipster main --allow-unrelated-histories
git remote rm ng-jhipster

After that in the next commit I fixed #12868

I pushed this to https://github.com/jhipster/generator-jhipster/compare/main...kaidohallik:sort-directive-migration

Is this branch with filtered history suitable for PR?

If making PR then questions are:

• does GitHub recognize authors of commits from ng-jhipster (in the link above seems that recognizes)
• if GitHub recognizes then should they first sign CLA or can we skip this step
• there are 3 more folders to migrate (component, language, service), if some commit is covering many folders then this commit is split into many commits, each folder gets it's own commit, is this ok

One alternative approach can be big bang migration: migrate full commit history, copy necessary files to their final location, delete unnecessary files and make those all work in one PR.

[mshima]

IMO:

• move every necessary files to their final location.
• remove everything else with https://github.com/newren/git-filter-repo/#simple-example-with-comparisons.
  should be something like git filter-repo --path generators/
• merge unrelated.

[kaidohallik]

Edit 07.11.2020: added tests to migration scripts

I made the following steps:

git clone https://github.com/jhipster/ng-jhipster.git
cd ng-jhipster

JhiLanguageService is just wrapper around TranslateService. We don't need this wrapping and JhiLanguageService is not migrated and we are using TranslateService directly.

git filter-repo --path src/directive/sort.directive.ts --path src/directive/sort-by.directive.ts --path src/component/jhi-boolean.component.ts --path src/component/jhi-item-count.component.ts --path src/component/metrics/jhi-jvm-memory.component.ts --path src/component/metrics/jhi-jvm-threads.component.ts --path src/component/metrics/jhi-metrics-cache.component.ts --path src/component/metrics/jhi-metrics-datasource.component.ts --path src/component/metrics/jhi-metrics-endpoints-requests.ts --path src/component/metrics/jhi-metrics-garbagecollector.component.ts --path src/component/metrics/jhi-metrics-modal-threads.component.ts --path src/component/metrics/jhi-metrics-request.component.ts --path src/component/metrics/jhi-metrics-system.component.ts --path src/language/jhi-translate.directive.ts --path src/language/jhi-missing-translation.config.ts --path src/service/data-util.service.ts --path src/service/alert.service.ts --path src/service/event-manager.service.ts --path src/service/event-with-content.model.ts --path src/service/parse-links.service.ts --path tests/component/jhi-boolean.spec.ts --path tests/component/jhi-item-count.component.spec.ts --path tests/directive/jhi-translate.directive.spec.ts --path tests/directive/sort.directive.spec.ts --path tests/directive/sort-by.directive.spec.ts --path tests/service/alert.service.spec.ts --path tests/service/data-util.service.spec.ts --path tests/service/event-manager.service.spec.ts --path tests/service/parse-links.service.spec.ts
git tag | xargs git tag -d

create folder generators/client/templates/angular/src/main/webapp/app/shared/sort
create folder generators/client/templates/angular/src/main/webapp/app/admin/metrics/components
create folder generators/client/templates/angular/src/main/webapp/app/core/config
create folder generators/client/templates/angular/src/main/webapp/app/core/event-manager
create folder generators/client/templates/angular/src/main/webapp/app/core/http

git mv src/directive/sort.directive.ts generators/client/templates/angular/src/main/webapp/app/shared/sort/sort.directive.ts.ejs
git mv src/directive/sort-by.directive.ts generators/client/templates/angular/src/main/webapp/app/shared/sort/sort-by.directive.ts.ejs
git mv src/component/jhi-boolean.component.ts generators/client/templates/angular/src/main/webapp/app/shared/boolean.component.ts.ejs
git mv src/component/jhi-item-count.component.ts generators/client/templates/angular/src/main/webapp/app/shared/item-count.component.ts.ejs
git mv src/component/metrics/jhi-jvm-memory.component.ts generators/client/templates/angular/src/main/webapp/app/admin/metrics/components/jvm-memory.component.ts.ejs
git mv src/component/metrics/jhi-jvm-threads.component.ts generators/client/templates/angular/src/main/webapp/app/admin/metrics/components/jvm-threads.component.ts.ejs
git mv src/component/metrics/jhi-metrics-cache.component.ts generators/client/templates/angular/src/main/webapp/app/admin/metrics/components/metrics-cache.component.ts.ejs
git mv src/component/metrics/jhi-metrics-datasource.component.ts generators/client/templates/angular/src/main/webapp/app/admin/metrics/components/metrics-datasource.component.ts.ejs
git mv src/component/metrics/jhi-metrics-endpoints-requests.ts generators/client/templates/angular/src/main/webapp/app/admin/metrics/components/metrics-endpoints-requests.ts.ejs
git mv src/component/metrics/jhi-metrics-garbagecollector.component.ts generators/client/templates/angular/src/main/webapp/app/admin/metrics/components/metrics-garbagecollector.component.ts.ejs
git mv src/component/metrics/jhi-metrics-modal-threads.component.ts generators/client/templates/angular/src/main/webapp/app/admin/metrics/components/metrics-modal-threads.component.ts.ejs
git mv src/component/metrics/jhi-metrics-request.component.ts generators/client/templates/angular/src/main/webapp/app/admin/metrics/components/metrics-request.component.ts.ejs
git mv src/component/metrics/jhi-metrics-system.component.ts generators/client/templates/angular/src/main/webapp/app/admin/metrics/components/metrics-system.component.ts.ejs
git mv src/language/jhi-translate.directive.ts generators/client/templates/angular/src/main/webapp/app/shared/translate.directive.ts.ejs
git mv src/language/jhi-missing-translation.config.ts generators/client/templates/angular/src/main/webapp/app/core/config/missing-translation.config.ts.ejs
git mv src/service/data-util.service.ts generators/client/templates/angular/src/main/webapp/app/core/data-util.service.ts.ejs
git mv src/service/alert.service.ts generators/client/templates/angular/src/main/webapp/app/core/alert.service.ts.ejs
git mv src/service/event-manager.service.ts generators/client/templates/angular/src/main/webapp/app/core/event-manager/event-manager.service.ts.ejs
git mv src/service/event-with-content.model.ts generators/client/templates/angular/src/main/webapp/app/core/event-manager/event-with-content.model.ts.ejs
git mv src/service/parse-links.service.ts generators/client/templates/angular/src/main/webapp/app/core/http/parse-links.service.ts.ejs

create folder generators/client/templates/angular/src/test/javascript/spec/app/shared/sort
create folder generators/client/templates/angular/src/test/javascript/spec/app/core/event-manager
create folder generators/client/templates/angular/src/test/javascript/spec/app/core/http

git mv tests/component/jhi-boolean.spec.ts generators/client/templates/angular/src/test/javascript/spec/app/shared/boolean.component.spec.ts.ejs
git mv tests/component/jhi-item-count.component.spec.ts generators/client/templates/angular/src/test/javascript/spec/app/shared/item-count.component.spec.ts.ejs
git mv tests/directive/jhi-translate.directive.spec.ts generators/client/templates/angular/src/test/javascript/spec/app/shared/translate.directive.spec.ts.ejs
git mv tests/directive/sort.directive.spec.ts generators/client/templates/angular/src/test/javascript/spec/app/shared/sort/sort.directive.spec.ts.ejs
git mv tests/directive/sort-by.directive.spec.ts generators/client/templates/angular/src/test/javascript/spec/app/shared/sort/sort-by.directive.spec.ts.ejs
git mv tests/service/alert.service.spec.ts generators/client/templates/angular/src/test/javascript/spec/app/core/alert.service.spec.ts.ejs
git mv tests/service/data-util.service.spec.ts generators/client/templates/angular/src/test/javascript/spec/app/core/data-util.service.spec.ts.ejs
git mv tests/service/event-manager.service.spec.ts generators/client/templates/angular/src/test/javascript/spec/app/core/event-manager/event-manager.service.spec.ts.ejs
git mv tests/service/parse-links.service.spec.ts generators/client/templates/angular/src/test/javascript/spec/app/core/http/parse-links.service.spec.ts.ejs

commit changes to git
go to generator-jhipster folder

git remote add ng-jhipster <ng-jhipster-migration-folder>
git checkout -b ng-jhipster-migration main
git pull ng-jhipster main --allow-unrelated-histories
git remote rm ng-jhipster

Branch is pushed to https://github.com/jhipster/generator-jhipster/compare/main...kaidohallik:ng-jhipster-migration

Will continue work on this branch.

[kaidohallik]

Totally forgot tests, will repeat steps with tests included.

[pascalgrimaud]

I removed the need discussion, as we're doing this
Starting with a 1st bounty, which can be increased, depending of the amount of work

[kaidohallik]

@gmarziou I see your comments only in emails. Any idea why are those comments hidden to me in web?

Regarding to .ts vs .ts.ejs - currently all plain TypeScript files are with .ejs extension and license headers are in EJS comments. I would rather follow the same style.

My common workflow is: get things working in generated project, put those into templates and see that regeneration generates similar files. Visual Studio EJS extension is able to highlight EJS constructs which helps a lot. TypeScript is not highlighted inside EJS, I haven't tried to get it working.

[gmarziou]

It's because I deleted them after few minutes because I thought they did not make much sense after few minutes.
I disabled email notifications a while ago and so forgot they are sent immediately, I will think longer before posting or just keep them :)

Anyway, thanks for your reply and I agree with you.