8000 feat: implement CRUD UI for IDP organization sync settings by jaaydenh · Pull Request #15503 · coder/coder · GitHub
[go: up one dir, main page]
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
feat: display success/error toast on form submission
  • Loading branch information
@jaaydenh
jaaydenh committed Dec 2, 2024
commit 6203d048e59b7e0afc071d0e3d6a2e04b83b920a
4 changes: 3 additions & 1 deletion site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
import type { OrganizationSyncSettings } from "api/typesGenerated";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import { displayError } from "components/GlobalSnackbar/utils";
import { displaySuccess } from "components/GlobalSnackbar/utils";
import { Loader } from "components/Loader/Loader";
import { Paywall } from "components/Paywall/Paywall";
import { SquareArrowOutUpRight } from "lucide-react";
Expand Down Expand Up @@ -77,11 +78,12 @@ export const IdpOrgSyncPage: FC = () => {
onSubmit={async (data: OrganizationSyncSettings) => {
try {
await patchOrganizationSyncSettingsMutation.mutateAsync(data);
displaySuccess("Organization sync settings updated.");
} catch (error) {
displayError(
getErrorMessage(
error,
"Failed to organization IdP sync settings",
"Failed to update organization IdP sync settings",
),
);
}
Expand Down
222 changes: 114 additions & 108 deletions site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
},
// validationSchema,
onSubmit,
enableReinitialize: true,
});
const [coderOrgs, setCoderOrgs] = useState<Option[]>([]);
const [idpOrgName, setIdpOrgName] = useState("");
Expand Down Expand Up @@ -108,130 +109,135 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
<>
<Stack spacing={2}>
<form onSubmit={form.handleSubmit}>
<div className="flex flex-row">
<div className="grid items-center gap-1">
<Label className="text-sm" htmlFor="sync-field">
Organization sync field
</Label>
<div className="flex flex-row items-center gap-4">
<Input
id="sync-field"
value={syncSettings.field}
className="w-72"
onChange={async (
event: React.ChangeEvent<HTMLInputElement>,
) => {
setSyncSettings({
...(syncSettings as OrganizationSyncSettings),
field: event.target.value,
});
await form.setFieldValue("field", event.target.value);
}}
/>
<div className="flex flex-row items-center gap-3">
<Switch
id="organization-assign-default"
checked={syncSettings.organization_assign_default}
onCheckedChange={async (checked) => {
<fieldset disabled={form.isSubmitting}>
<div className="flex flex-row">
<div className="grid items-center gap-1">
<Label className="text-sm" htmlFor="sync-field">
Organization sync field 8000
</Label>
<div className="flex flex-row items-center gap-4">
<Input
id="sync-field"
value={syncSettings.field}
className="w-72"
Copy link
Member

Choose a reason for hiding this comment

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

When do we want to start using Tailwind's percentage-/proportion-based width values? Do they make sense here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The current design lays out the UI elements very specifically. I think when we start to consider mobile and other screen sizes we could start considering this.

onChange={async (
event: React.ChangeEvent<HTMLInputElement>,
) => {
setSyncSettings({
...(syncSettings as OrganizationSyncSettings),
organization_assign_default: checked,
field: event.target.value,
});
await form.setFieldValue(
"organization_assign_default",
checked,
);
await form.setFieldValue("field", event.target.value);
}}
/>
<Label htmlFor="organization-assign-default">
Assign Default Organization
</Label>
<div className="flex flex-row items-center gap-3">
<Switch
id="organization-assign-default"
checked={syncSettings.organization_assign_default}
onCheckedChange={async (checked) => {
setSyncSettings({
...(syncSettings as OrganizationSyncSettings),
organization_assign_default: checked,
});
await form.setFieldValue(
"organization_assign_default",
checked,
);
}}
/>
<Label htmlFor="organization-assign-default">
Assign Default Organization
</Label>
</div>
</div>
<p className="text-content-secondary text-2xs m-0">
If empty, organization sync is deactivated
</p>
</div>
<p className="text-content-secondary text-2xs m-0">
If empty, organization sync is deactivated
</p>
</div>
</div>

<div className="flex flex-col gap-4">
<div className="flex flex-row pt-8 gap-2 justify-between">
<div className="grid items-center gap-1">
<Label className="text-sm" htmlFor="idp-organization-name">
IdP organization name
</Label>
<Input
id="idp-organization-name"
value={idpOrgName}
className="min-w-72 w-72"
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setIdpOrgName(event.target.value);
<div className="flex flex-col gap-4">
<div className="flex flex-row pt-8 gap-2 justify-between">
<div className="grid items-center gap-1">
<Label className="text-sm" htmlFor="idp-organization-name">
IdP organization name
</Label>
<Input
id="idp-organization-name"
value={idpOrgName}
className="min-w-72 w-72"
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setIdpOrgName(event.target.value);
}}
/>
</div>
<div className="grid items-center gap-1 flex-1">
<Label className="text-sm" htmlFor="idp-organization-name">
Coder organization
</Label>
<MultipleSelector
className="min-w-96 max-w-3xl"
value={coderOrgs}
onChange={setCoderOrgs}
defaultOptions={OPTIONS}
hidePlaceholderWhenSelected
placeholder="Select organization"
emptyIndicator={
<p className="text-center text-lg leading-10 text-content-primary">
no results found.
</p>
}
/>
</div>
<Button
className="mb-px self-end"
disabled={!idpOrgName || coderOrgs.length === 0}
onClick={async () => {
const newSyncSettings = {
...(syncSettings as OrganizationSyncSettings),
mapping: {
...syncSettings?.mapping,
[idpOrgName]: coderOrgs.map((org) => org.value),
},
};
setSyncSettings(newSyncSettings);
await form.setFieldValue(
"mapping",
newSyncSettings.mapping,
);
setIdpOrgName("");
setCoderOrgs([]);
}}
/>
</div>
<div className="grid items-center gap-1 flex-1">
<Label className="text-sm" htmlFor="idp-organization-name">
Coder organization
</Label>
<MultipleSelector
className="min-w-96 max-w-3xl"
value={coderOrgs}
onChange={setCoderOrgs}
defaultOptions={OPTIONS}
hidePlaceholderWhenSelected
placeholder="Select organization"
emptyIndicator={
<p className="text-center text-lg leading-10 text-content-primary">
no results found.
</p>
}
/>
>
<Plus size={14} />
Add IdP organization
</Button>
</div>
<IdpMappingTable isEmpty={organizationMappingCount === 0}>
{syncSettings?.mapping &&
Object.entries(syncSettings.mapping)
.sort()
Copy link
Member

Choose a reason for hiding this comment

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

I don't think there's ever a risk of this breaking, but could you add a comment saying that using the default behavior of stringifying the entries and comparing them that way is intentional?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Maybe the lines of code reference changed, but where are you referring to comparing that is happening here?

.map(([idpOrg, organizations]) => (
<OrganizationRow
key={idpOrg}
idpOrg={idpOrg}
coderOrgs={getOrgNames(organizations)}
onDelete={handleDelete}
/>
))}
</IdpMappingTable>
<Button
className="mb-px self-end"
disabled={!idpOrgName || coderOrgs.length === 0}
onClick={async () => {
const newSyncSettings = {
...(syncSettings as OrganizationSyncSettings),
mapping: {
...syncSettings?.mapping,
[idpOrgName]: coderOrgs.map((org) => org.value),
},
};
setSyncSettings(newSyncSettings);
await form.setFieldValue("mapping", newSyncSettings.mapping);
setIdpOrgName("");
setCoderOrgs([]);
className="w-20"
disabled={form.isSubmitting || !form.dirty}
onClick={(event) => {
event.preventDefault();
form.handleSubmit();
}}
>
<Plus size={14} />
Add IdP organization
Save
</Button>
</div>
<IdpMappingTable isEmpty={organizationMappingCount === 0}>
{syncSettings?.mapping &&
Object.entries(syncSettings.mapping)
.sort()
.map(([idpOrg, organizations]) => (
<OrganizationRow
key={idpOrg}
idpOrg={idpOrg}
coderOrgs={getOrgNames(organizations)}
onDelete={handleDelete}
/>
))}
</IdpMappingTable>
<Button
className="w-20"
disabled={form.isSubmitting || !form.dirty}
onClick={(event) => {
event.preventDefault();
form.handleSubmit();
}}
>
Save
</Button>
</div>
</fieldset>
</form>
</Stack>
</>
Expand Down
0