Skip to content

feat: implement CRUD UI for IDP organization sync settings #15503

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.

Sign up for GitHub

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 71 commits into from
Dec 4, 2024
Merged

feat: implement CRUD UI for IDP organization sync settings #15503

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
71 commits
Select commit Hold shift + click to select a range
d0baa8c
feat: initial commit for idp org sync settings
jaaydenh Nov 13, 2024
6463076
feat: add export policy button
jaaydenh Nov 15, 2024
f714986
feat: update badge styles for multiple selector
jaaydenh Nov 17, 2024
072d775
feat: use input component and move export button
jaaydenh Nov 17, 2024
f6e286c
feat: add delete button for org mapping
jaaydenh Nov 17, 2024
acf8cbe
feat: disabled button states
jaaydenh Nov 17, 2024
ad1aa84
feat: update export policy button to shadcn
jaaydenh Nov 17, 2024
b01588d
fix: fix format
jaaydenh Nov 17, 2024
6203d04
feat: display success/error toast on form submission
jaaydenh Nov 20, 2024
bc37998
feat: create story for export policy button
jaaydenh Nov 20, 2024
2c2246d
feat: update pill list component
jaaydenh Nov 21, 2024
6971f91
feat: add down chevron to multiple selector
jaaydenh Nov 21, 2024
6e87130
chore: update conventions for shadcn components
jaaydenh Nov 23, 2024
a1b6e79
feat: use semantic list html for overflow pills
jaaydenh Nov 24, 2024
36c8706
chore: update css variable colors
jaaydenh Nov 24, 2024
a4e66c2
fix: make link style and behavior match existing links
jaaydenh Nov 24, 2024
f7be49f
fix: use display name for org in multi-select component
jaaydenh Nov 24, 2024
90a65fe
chore: cleanup
jaaydenh Nov 25, 2024
c282765
fix: styling for x and chevron buttons
jaaydenh Nov 25, 2024
40155bc
chore: extract fixed filter options to a variable
jaaydenh Nov 25, 2024
a129820
fix: update focus styles
jaaydenh Nov 25, 2024
8edd4b4
fix: multi-select placement fix
jaaydenh Nov 25, 2024
e54e5ca
fix: improve export policy button logic
jaaydenh Nov 25, 2024
bb16bd1
chore: update to use pointer instead of mouse events
jaaydenh Nov 25, 2024
678a91d
fix: extract UUID testing to separate variable
jaaydenh Nov 25, 2024
a13d9b2
fix: update error handling
jaaydenh Nov 25, 2024
1b8efd1
chore: add source comment
jaaydenh Nov 26, 2024
137c25c
chore: remove debounce
jaaydenh Nov 26, 2024
46a4646
fix: format
jaaydenh Nov 26, 2024
85a455c
feat: update form save logic
jaaydenh Nov 26, 2024
a9e06f1
fix: remove popover and muted colors from shadcn
jaaydenh Nov 26, 2024
d921b08
chore: cleanup
jaaydenh Nov 26, 2024
ba665b4
fix: use form instead of sync settings for state
jaaydenh Nov 26, 2024
8a0e789
chore: fix component filename casing
jaaydenh Nov 26, 2024
234c0fb
fix: dont await form.setFieldValue
jaaydenh Nov 26, 2024
7d88a38
feat: add radix visually hidden
jaaydenh Nov 26, 2024
c6c9b16
fix: improve focus styling
jaaydenh Nov 27, 2024
5322a4e
chore: cleanup
jaaydenh Nov 27, 2024
eab8a0d
fix: format
jaaydenh Nov 27, 2024
721d5d4
feat: updates for Badge component
jaaydenh Nov 27, 2024
8986cbd
feat: updates for shadcn button component
jaaydenh Nov 27, 2024
89a7b12
feat: update stories and input component
jaaydenh Nov 27, 2024
148dca7
fix: format
jaaydenh Nov 27, 2024
0c338b0
feat: add stories for switch component
jaaydenh Nov 27, 2024
0cadc8b
feat: setup stories for Label component
jaaydenh Nov 27, 2024
1d7153b
feat: setup stories for shadcn Dialog component
jaaydenh Nov 27, 2024
a914c54
fix: format
jaaydenh Nov 27, 2024
bd307c0
chore: make clasnames multi-line
jaaydenh Nov 27, 2024
95bfd17
fix: use multiline classnames
jaaydenh Nov 27, 2024
82bd850
fix: display blue outline on multiple selector when focused
jaaydenh Nov 27, 2024
6eb6987
fix: format
jaaydenh Nov 27, 2024
3822b2e
feat: add stories for MultiSelectCombobox
jaaydenh Dec 2, 2024
fe17b1c
feat: add tooltip for assign default org switch
jaaydenh Dec 2, 2024
e75e179
feat: add stories for IdpOrgSyncPageview
jaaydenh Dec 2, 2024
c6e07ff
chore: extract UUID regex
jaaydenh Dec 2, 2024
a3b9b27
chore: cleanup
jaaydenh Dec 2, 2024
0601164
feat: add form validation schema
jaaydenh Dec 2, 2024
b01e5d3
fix: cleanup paywall copy
jaaydenh Dec 2, 2024
1c5b6ef
fix: cleanup
jaaydenh Dec 2, 2024
6e2ee08
fix: remove useEffect
jaaydenh Dec 2, 2024
ae30db0
chore: cleanup
jaaydenh Dec 2, 2024
ac74cdc
fix: format
jaaydenh Dec 2, 2024
a99dca5
chore: cleanup for PR review comments
jaaydenh Dec 3, 2024
4c00959
fix: focus rings
jaaydenh Dec 3, 2024
568a5a9
chore: use tailwinds sr-only class
jaaydenh Dec 4, 2024
c313439
fix: fix 2xs fontSize
jaaydenh Dec 4, 2024
506223d
chore: convert UUID regex to a function
jaaydenh Dec 4, 2024
f223ab7
feat: add enabled check
jaaydenh Dec 4, 2024
94ff4ca
chore: cleanup
jaaydenh Dec 4, 2024
9101e0e
fix: fix format
jaaydenh Dec 4, 2024
5ca2c0c
chore: cleanup
jaaydenh Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: remove popover and muted colors from shadcn
  • Loading branch information
@jaaydenh
jaaydenh committed Dec 2, 2024
commit a9e06f15935ef1a35e0931c6c01f0fad49630b02
6 changes: 3 additions & 3 deletions site/src/components/ui/command.tsx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

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

On a similar note to the one about the style exports, are we changing how we're writing out code now? I few things immediately jump out to me:

  • Using a wildcard import for React (which shouldn't matter, since React isn't easy to tree-shake anyway)
  • Consolidated exports at the end of the file
  • Random library-specific HTML attribute (cmdk-input-wrapper)
  • Extensive use of Tailwind's arbitrary variants feature to inject styles for the Cmdk component

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Everything in src/components/ui comes directly from shadcn except for multiple-selector. I don't want to assume any existing patterns in the codebase are what we should definitely use going forward. if there is disagreement with how things are done with shadcn, lets bring them up all so I can make a list of everything that needs to be changed when importing a shadcn component.

Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const Command = forwardRef<
<CommandPrimitive
ref={ref}
className={cn(
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-content-primary",
"flex h-full w-full flex-col overflow-hidden rounded-md bg-surface-primary text-content-primary",
className,
)}
{...props}
Expand All @@ -28,7 +28,7 @@ export const CommandDialog: FC<DialogProps> = ({
return (
<Dialog {...props}>
<DialogContent className="overflow-hidden p-0">
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-content-disabled [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
{children}
</Command>
</DialogContent>
Expand Down Expand Up @@ -132,7 +132,7 @@ export const CommandShortcut = ({
return (
<span
className={cn(
"ml-auto text-xs tracking-widest text-muted-foreground",
"ml-auto text-xs tracking-widest text-content-disabled",
className,
)}
{...props}
Expand Down
4 changes: 2 additions & 2 deletions site/src/components/ui/dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export const DialogContent = forwardRef<
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-surface-secondary data-[state=open]:text-muted-foreground">
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-surface-secondary data-[state=open]:text-content-disabled">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
Expand Down Expand Up @@ -100,7 +100,7 @@ export const DialogDescription = forwardRef<
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
className={cn("text-sm text-content-disabled", className)}
{...props}
/>
));
Expand Down
8 changes: 4 additions & 4 deletions site/src/components/ui/multiple-selector.tsx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

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

Do we want to follow a specific style guide for our file names? Because I'm worried that our adoption of Shad right now is already causing inconsistencies

Copy link
Member

Choose a reason for hiding this comment

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

Could you also add a top-level comment linking to where the bulk of this code came from? That's going to make tracking down bugs a lot easier

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@Parkreiner @aslilac Regarding file names, currently we have a mixture of camel case and pascal case and shadcn uses snake case by default. I personally think capitalizing file names can lead to more mistakes but I am fine with whatever we agree upon.

Original file line number Diff line number Diff line change
Expand Up @@ -474,8 +474,8 @@ const MultipleSelector = React.forwardRef<
<Badge
key={option.value}
className={cn(
"data-[disabled]:bg-muted-foreground data-[disabled]:text-muted data-[disabled]:hover:bg-muted-foreground",
"data-[fixed]:bg-muted-foreground data-[fixed]:text-muted data-[fixed]:hover:bg-surface-secondary",
"data-[disabled]:bg-content-disabled data-[disabled]:text-surface-tertiary data-[disabled]:hover:bg-content-disabled",
"data-[fixed]:bg-content-disabled data-[fixed]:text-surface-tertiary data-[fixed]:hover:bg-surface-secondary",
badgeClassName,
)}
data-fixed={option.fixed}
Expand Down Expand Up @@ -566,7 +566,7 @@ const MultipleSelector = React.forwardRef<
<div className="relative">
{open && (
<CommandList
className="absolute top-1 z-10 w-full rounded-md border border-solid border-border bg-popover text-popover-foreground shadow-md outline-none animate-in"
className="absolute top-1 z-10 w-full rounded-md border border-solid border-border bg-surface-primary text-content-primary shadow-md outline-none animate-in"
onPointerLeave={() => {
setOnScrollbar(false);
}}
Expand Down Expand Up @@ -618,7 +618,7 @@ const MultipleSelector = React.forwardRef<
className={cn(
"cursor-pointer",
option.disable &&
"cursor-default text-muted-foreground",
"cursor-default text-content-disabled",
)}
>
{option.label}
Expand Down
8 changes: 0 additions & 8 deletions site/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,6 @@
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;
Expand Down Expand Up @@ -60,10 +56,6 @@
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
Expand Down
8 changes: 0 additions & 8 deletions site/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,6 @@ module.exports = {
DEFAULT: "hsl(var(--border-default))",
error: "hsl(var(--border-error))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
chart: {
Expand Down