Skip to content

feat: orgs IDP sync - add combobox to select claim field value when sync field is set #16335

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Feb 5, 2025

Conversation

jaaydenh
Copy link
Contributor

@jaaydenh jaaydenh commented Jan 29, 2025

contributes to coder/internal#330

For organizations IdP sync:

  1. when the sync field is set, call the claim field values API to see if the sync field is a valid claim field and return an array of claim field values
  2. If there are 1 or more claim field values, replace the input component for entering the IdP organization name with a combobox populated with the claim field values
  3. The user can now select a value from the dropdown or enter a custom value

Tests will be added in a separate PR

The same functionality for Group and Role sync will be handled in a separate PR.

Screenshot 2025-02-04 at 17 45 42 Screenshot 2025-02-04 at 17 45 58 Screenshot 2025-02-04 at 17 46 14 Screenshot 2025-02-04 at 17 52 08

@jaaydenh jaaydenh self-assigned this Jan 29, 2025
@jaaydenh jaaydenh changed the title feat: add dropdown to select claim field value when sync field is set feat: add combobox to select claim field value when sync field is set Feb 4, 2025
@jaaydenh jaaydenh changed the title feat: add combobox to select claim field value when sync field is set feat: Organizations IDP sync - add combobox to select claim field value when sync field is set Feb 4, 2025
@jaaydenh jaaydenh changed the title feat: Organizations IDP sync - add combobox to select claim field value when sync field is set feat: orgs IDP sync - add combobox to select claim field value when sync field is set Feb 4, 2025
@jaaydenh jaaydenh force-pushed the jaaydenh/idp-sync-autocomplete branch from b1af4b9 to e61b2dc Compare February 4, 2025 17:21
@jaaydenh jaaydenh requested a review from chrifro February 4, 2025 17:47
@jaaydenh jaaydenh marked this pull request as ready for review February 4, 2025 20:36
@jaaydenh jaaydenh requested a review from aslilac February 4, 2025 20:36
@@ -65,7 +66,7 @@ export const SelectScrollDownButton = React.forwardRef<
)}
{...props}
>
<ChevronDown className="size-icon-sm" />
<ChevronDown className="size-icon-sm cursor-pointer text-content-secondary hover:text-content-primary" />
Copy link
Member

Choose a reason for hiding this comment

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

lot of duplication between this and the ChevronDown 35 lines up

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thats sort of the way of Tailwind, duplication of styles is ok to a certain extent. It would feel strange to create a separate component just because 2 icons have the same styles.

Copy link
Member

Choose a reason for hiding this comment

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

doesn't need to be a component, it could be a string constant or something

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Extracting classNames into strings is a pattern that I would argue we don't want to go down. I follow the idealogy that it is sometimes ok to have repeated classNames until it makes sense to use some technique like creating a new component to manage the duplication. https://v3.tailwindcss.com/docs/reusing-styles

Copy link

@chrifro chrifro left a comment

Choose a reason for hiding this comment

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

Nice!
Just two thoughts:

  • do the icons have the same size and stroke width? The check seems slightly smaller
Screenshot 2025-02-05 at 09 46 09
  • how come that the bg color of the main drop-down is different for these both cases? (referring to "engineering"). Would suggest to remove the bg color of the second screenshot
Screenshot 2025-02-05 at 09 48 46 Screenshot 2025-02-05 at 09 48 40

@jaaydenh
Copy link
Contributor Author

jaaydenh commented Feb 5, 2025

@chrifro The difference is that IdP organization name is a combobox which means that the top part with the chevron down is actually a button and its not possible to type directly there. The button hover color is being applied because my mouse was hovering the button in the screenshot.

Should I create a special case for this button so it doesn't get highlighted on hover?

The icons are all using the same settings, so far I do not modify stroke width from the default.

@jaaydenh jaaydenh merged commit 7f44189 into main Feb 5, 2025
30 checks passed
@jaaydenh jaaydenh deleted the jaaydenh/idp-sync-autocomplete branch February 5, 2025 13:40
@github-actions github-actions bot locked and limited conversation to collaborators Feb 5, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants