Skip to content

[KEYCLOAK-11211] Create a Wrapper for the Dropdown component#6275

Closed
abstractj wants to merge 1 commit intokeycloak:masterfrom
abstractj:KEYCLOAK-11211
Closed

[KEYCLOAK-11211] Create a Wrapper for the Dropdown component#6275
abstractj wants to merge 1 commit intokeycloak:masterfrom
abstractj:KEYCLOAK-11211

Conversation

@abstractj
Copy link
Contributor

No description provided.

@abstractj abstractj requested a review from ssilvert August 27, 2019 19:14
@abstractj
Copy link
Contributor Author

@ssilvert this is what I've been talking for Dropdowns. The context and motivation are here: https://issues.jboss.org/browse/KEYCLOAK-11211

Copy link
Contributor

@ssilvert ssilvert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall, I don't see how this component adds a lot of value over stand-alone Dropdown.

The test is to first use the PF Dropdown by itself. Then if you find yourself repeating the same code in another context and you can factor out the common stuff, you make a new component. If that is what you did then I think it's fine.

import {Msg} from './Msg';

interface DropdownWrapperProps {
dropdownWrapperItems: any[];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should not be any[]. I think it needs to be Array< DropdownItem | DropdownSeperator>

You can look at the type definition for Dropdown to see.

public render(): React.ReactNode {
const { isDropdownOpen } = this.state;
return (
<React.Fragment>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The React.Fragment wrapper is optional here because you already have a single tag to return.

interface DropdownWrapperProps {
dropdownWrapperItems: any[];
dropdownWrapperTitle?: string;
onDropdownSelect: () => void;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs to specify the event param. Otherwise, you don't know what was selected.

@abstractj
Copy link
Contributor Author

Overall, I don't see how this component adds a lot of value over stand-alone Dropdown.

The test is to first use the PF Dropdown by itself. Then if you find yourself repeating the same code in another context and you can factor out the common stuff, you make a new component. If that is what you did then I think it's fine.

@ssilvert that's was exactly the motivation to write this. In the application's screen we have 2 dropdowns, which means as far as I know functions like handleDropdownToggle and handleSelect need to be written twice to handle Dropdown events.

Another alternative is to follow the same approach you did for LocaleSelectors (

class LocaleDropdownComponent extends React.Component<LocaleDropdownComponentProps, LocaleDropdownComponentState> {
) and declare a class inside the same file.

What works best for you?

  1. Widget
  2. Inside the same file like LocaleSelectors
  3. Another solution (which I have no idea)

@ssilvert
Copy link
Contributor

Overall, I don't see how this component adds a lot of value over stand-alone Dropdown.
The test is to first use the PF Dropdown by itself. Then if you find yourself repeating the same code in another context and you can factor out the common stuff, you make a new component. If that is what you did then I think it's fine.

@ssilvert that's was exactly the motivation to write this. In the application's screen we have 2 dropdowns, which means as far as I know functions like handleDropdownToggle and handleSelect need to be written twice to handle Dropdown events.

Another alternative is to follow the same approach you did for LocaleSelectors (

class LocaleDropdownComponent extends React.Component<LocaleDropdownComponentProps, LocaleDropdownComponentState> {

) and declare a class inside the same file.
What works best for you?

  1. Widget
  2. Inside the same file like LocaleSelectors
  3. Another solution (which I have no idea)

I think #2. Just my opinion, but I don't think what you have does enough to be a general purpose component. It limits the available options in Dropdown without giving you much in return.

If later you find that you need it in another context then you can decide to pull it out into its own file or just export it.

@abstractj
Copy link
Contributor Author

I think #2. Just my opinion, but I don't think what you have does enough to be a general purpose component. It limits the available options in Dropdown without giving you much in return.

If later you find that you need it in another context then you can decide to pull it out into its own file or just export it.

What you said to me makes perfect sense, I'm going to stick with #2. Thanks for your time reviewing this.

For now I'm going to close this PR and make the changes necessary inside the ApplicationsPage.

@abstractj abstractj closed this Aug 28, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants