Generator-jhipster: Easy customization for top menu to other layout

[antonioortizpola]

Overview of the feature request

It would be great if you could make the generated app more easy to customize by offering an easy way to change the header menu bar to something else.

The easiest way to do this could be rename the header folder and the inside components to something more generic like nav-bar or menu, this way the end user could change the inside code to handle other kind of menu without worrying about losing the markers or have to misname the component.

Motivation for or Use Case

I have been trying the React generator and it have been great, i have been learning a lot about JS best practices and React in particular (i am primary a back-end developer), however, i wanted to change the default layout for a commercial one with some known components (this is the layout).

This, as many other layouts, it handles a left menu bar, however i am not so sure about how to proceed, since i want to change the header component name, but inside the files, i saw some jhipster-needles that could be handy for when i add some more services, but I am afraid to lose this markers if i change the name of the file.

I saw some posts and the general response was to modify the generated code, since JHipster can not handle all the cases, which i totally agree with (and it is also easy, very clean code), but with something easy like give a generic name to that component by default it could be less confusing to modify the layout since the first time and as a beginner.

Of course I am open to other solutions that i could miss (also, considering that the React info is more new and the is less components).

Related issues or PR

Only a stack overflow answer

and maybe this link with a discussion about.

• [x] Checking this box is mandatory (this is just to show you read everything)
  

[jdubois]

Yes, at the moment if you change the layout too much, at some point you will just totally replace what we provide, and that's fine.

You will lose the needles: those also, at some point, won't be able to work anymore. Note that if you change everything yourself, you probably won't want the needles anyway, as you're just going to code everything manually: this is perfectly normal, and totally expected. We provide a skeleton to help you get started, but if you code a complex application, you will "lose" some parts of JHipster as you will replace them with your own code.

On the Java side, some people handle this using inheritance, but obviously that can't work with HTML templates, so there's no good solution here. And anyway it's impossible to imagine all the modifications that people might want.

From my understanding you want to split the header part, so you can keep some of it. That way, you would keep more code from JHipster: I'm not totally sure about it, could you give some example? For example, you could generate a fresh JHipster project, add your change, and link the diff here, so we could see this in more details.

[antonioortizpola]

I know that is the idea, and I totally agree, Jhipster is the base, you can start from there, I am already changing the validation part of the client to handle some custom components and of course i am not expecting to change the generator to fix my needs.

I do not know if a code example could be more clarifying, i will try to explain me better, but if you think an example is necessary i can upload a project in the night (It is a hobby project and now i am at work, so i can not now)

Only in this particular case, I think is very common and general to handle the _menu bar_ on top or maybe on the left (even some, but less people in the right), I think an option to ask in the generator it is too much, so I started customizing the layout component Header, changing the surrounding html code and styles to be my new left navigation panel, I left the jhipster-needles, so when I add some more entities jhipster can do their magic and insert the code, then i could just modify my custom bits again in the same file.

Since you already did a wonderful job making some components, everything seems to be in place, the folder has the Navigation menu with the menu components... but the name of the folder and the main component is Header, so now I have two options, change the folder and component name and forget about the needles, or just keep using it as Header and create a component TopHeader to be the real header.

So, thinking about the problem i could not avoid to think: _If the name of the component Header was something more Generic like Navigation-Bar or Menu-Panel or anything else, I could do my changes and keep the needles without having to call Header to my left menu component_.

So, I just wanted to share the idea and see the possibility of giving a more generic name to this Header component, so people, specially beginners like me, could start playing with the initial layout without worrying about losing the needles, more important, at the beginning of the project.

On the other hand, I totally understand if you think that is unnecessary since could be handle as an "special case" and the semantics of the position of the component are important to keep in the name, i would just like to hear the reasoning behind

[deepu105]

Can you do a PR with your proposal so that we can understand better

On Wed, 22 Aug 2018, 7:17 pm Antonio Ortiz Pola, [e-mail]
wrote:

I know that is the idea, and I totally agree, Jhipster is the base, you
can start from there, I am already changing the validation part of the
client to handle some custom components and of course i am not expecting to
change the generator to fix my needs.

I do not know if a code example could be more clarifying, i will try to
explain me better, but if you think an example is necessary i can upload a
project in the night (It is a hobby project and now i am at work, so i can
not now)

Only in this particular case, I think is very common and general to handle
the menu bar on top or maybe on the left (even some, but less people in
the right), I think an option to ask in the generator it is too much, so I
started customizing the layout component Header, changing the surrounding
html code and styles to be my new left navigation panel, I left the
jhipster-needles, so when I add some more entities jhipster can do their
magic and insert the code, then i could just modify my custom bits again in
the same file.

Since you already did a wonderful job making some components, everything
seems to be in place, the folder has the Navigation menu with the menu
components... but the name of the folder and the main component is
Header, so now I have two options, change the folder and component name
and forget about the needles, or just keep using it as Header and create a
component TopHeader to be the real header.

So, thinking about the problem i could not avoid to think: If the name
of the component Header was something more Generic like Navigation-Bar or
Menu-Panel or anything else, I could do my changes and keep the needles
without having to call Header to my left menu component.

So, I just wanted to share the idea and see the possibility of giving a
more generic name to this Header component, so people, specially beginners
like me, could start playing with the initial layout without worrying about
losing the needles, more important, at the beginning of the project.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/8142#issuecomment-415109336,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlF4AX49tXBrg0LKNl90uGDmWndRKUks5uTZIngaJpZM4WHBY5
.

[bertwin]

It would be a nice feature to have if instead of generating this:

// shared/layout/header/menus/entities.tsx

  <NavDropdown icon="th-list" name={translate('global.menu.entities.main')} id="entity-menu">
    <DropdownItem tag={Link} to="/entity/label">
      <FontAwesomeIcon icon="asterisk" />&nbsp;<Translate contentKey="global.menu.entities.testRootLabel" />
    </DropdownItem>
  </NavDropdown>

We would generate something like this:

// shared/menus/entities.ts

const entityMenu = {
  icon: "th-list",
  contentKey: 'global.menu.entities.main',
  items: [
    {
      to: "/entity/bank-account-my-suffix",
      icon: "asterisk",
      contentKey: "global.menu.entities.testRootBankAccountMySuffix"
    }
  ]
}

and just map over it in the header menu.

This way you could reuse the same data for a sidebar or a sitemap. And easily change the look of menus.

[deepu105]

Yes thats a better option

Thanks & Regards,
Deepu

On Thu, Aug 23, 2018 at 11:09 AM Bertwin [e-mail] wrote:

It would be a nice feature to have if instead of generating this:

// shared/layout/header/menus/entities.tsx

 

We would generate something like this:

// shared/menus/entities.ts
const entityMenu = {
icon: "th-list",
contentKey: 'global.menu.entities.main',
items: [
{
to: "/entity/bank-account-my-suffix",
icon: "asterisk",
contentKey: "global.menu.entities.testRootBankAccountMySuffix"
}
]
}

and just map over it in the header menu.

This way you could reuse the same data for a sidebar or a sitemap. And
easily change the look of menus.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/8142#issuecomment-415347065,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlF7EzjraP86EpaS7ocjnrRMu9k7Xbks5uTnFRgaJpZM4WHBY5
.

[antonioortizpola]

@bertwin something like that is what i am talking about!, thanks for clarifying in so little code!, and it is great that it seems like a good option

[deepu105]

I'll be happy to merge it if one of you can do a PR with the proposal

On Thu, 23 Aug 2018, 7:41 pm Antonio Ortiz Pola, [e-mail]
wrote:

@bertwin https://github.com/bertwin something like that is what i am
talking about!, thanks for clarifying in so little code!, and it is great
that it seems like a good option

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/8142#issuecomment-415506551,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlF2_lGQjM66sQ2rQJexFGZgi2SyY-ks5uTulVgaJpZM4WHBY5
.

[bertwin]

@antonioortizpola could you do this if you need it fast? I don't have the time right now.

[antonioortizpola]

I do not need it fast, do not worry, sadly I have not checked the generators code, i do not know how complex or easy could be, but this weekend I will make some time (right know i am in my normal job, my jhipster project is personal :/) and check if I can do the modifications, If i have doubts I will let you know, thanks for everything!

[antonioortizpola]

@jdubois, @deepu105, sorry for taking so long, I started playing with the generator to make the changes, i wanted to be more uniform with the react and angular versions, however, i did note that you already are calling navbar in the angular project to the Header (in react) component, is there a reason why in the React generator it is named Header and not also navbar?, i could change the name of the component while I am on it, but i wanted to make sure there is not a reason to not do it?, if there is a problem then i can just change the menu components

[deepu105]

There is no specific reason that I know of so ya go ahead

On Tue, 28 Aug 2018, 2:29 am Antonio Ortiz Pola, [e-mail]
wrote:

@jdubois https://github.com/jdubois, @deepu105
https://github.com/deepu105, sorry for taking so long, I started
playing with the generator to make the changes, i wanted to be more uniform
with the react and angular versions, however, i did note that you
already are calling navbar in the angular project to the Header (in
react) component, is there a reason why in the React generator it is named
Header and not also navbar?, i could change the name of the component
while I am on it, but i wanted to make sure there is not a reason to not do
it?, if there is a problem then i can just change the menu components

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/8142#issuecomment-416411412,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlF4QWtAbQFmFG6t3oQbhO04Wr13DFks5uVI7kgaJpZM4WHBY5
.

[antonioortizpola]

I have moved the menus folder to the layout folder and extracted the NavDropdown component from header-components to menu-components.

I have created this menu-item for the menus:

import React from 'react';
import { DropdownItem } from 'reactstrap';
import { NavLink as Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { translate } from 'react-jhipster';

export interface IMenuItem {
  icon: IconProp;
  to: string;
  contentKey: string;
}

export default class MenuItem extends React.Component<IMenuItem> {

  render() {
    const { to, icon, contentKey } = this.props;

    return (
      <DropdownItem tag={Link} to={to}>
        <FontAwesomeIcon icon={icon} /> {translate(contentKey)}
      </DropdownItem>
    );
  }
}

But i have some doubts, i could use the key like in the example:

<MenuItem icon="road" to="/admin/gateway" contentKey="global.menu.admin.gateway"/>

But i do not know what is the difference between using translate(contentKey) or the full component
<Translate contentKey="global.menu.admin.logs">Logs</Translate>, what is the right option to use?, what is the difference, and what is the purpose of the string inside the Translate component? because with the first option that string would be deleted.
I could make the second one adding the children prop to the component and using like this:

<MenuItem icon="road" to="/admin/gateway">
  <Translate contentKey="global.menu.admin.logs">Logs</Translate>
</MenuItem>

That way the string is not lost, but the menu declaration goes from a nice one liner to a 3 lines, what approach do you recommend?

[deepu105]

@antonioortizpola if you are planning to do a PR please go ahead and we will merge it. I'm closing this ticket as the core team wont be doing this.

[antonioortizpola]

Sorry, i was on vacations and i did not check my account until today.

@deepu105 yes, i really want to make a little contribution to your project, i already modified the necessary files, i only found one problem, well, more like a confusion, about the translate utils and what it is the best way to handle it, if you check my last comment you will see what i am talking about.

I did not wanted to finish the changes because i have to change all the menu calls with one way or another, so, i wanted to be sure i picked the right way to do things, my doubt is simple, i posted here and in the gitter chat, with no luck of getting an answer, if you think the best is to create the pull request with the components as I prefer, just confirm it and I will change the components.

Just let me know:

what is the difference between using translate(contentKey) or the full component
Logs, what is the right option to use?, what is the difference, and what is the purpose of the string inside the Translate component? because with the first option that string would be deleted

[deepu105]

We put the text inside so that we can strip translation when doing no i18n option and also it improves readability. I suggest to use the component mostly and use the method only in placeholders and stuff like that

[antonioortizpola]

Ok, i will finish my changes and make the pull request, just give me two days since i am checking some tasks of my work (returning from vacations). Thanks for the quick response!

[antonioortizpola]

@deepu105, i did my first pull request, i hope is good enough!

[hrqiang]

@anandsudhir with your PR, how to change from top menu to nav bar.
Can you give me example? Thanks.