Skip to content

Commit b632f87

Browse files
jaaydenhjaaydenh
committed
feat: use input component and move export button
1 parent 39d4654 commit b632f87

File tree

4 files changed

+177
-158
lines changed

4 files changed

+177
-158
lines changed

‎site/src/components/ui/input.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import * as React from "react";
2+
3+
import { cn } from "utils/cn";
4+
5+
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
6+
({ className, type, ...props }, ref) => {
7+
return (
8+
<input
9+
type={type}
10+
className={cn(
11+
"flex h-9 w-full rounded-md border border-border border-solid bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-content-primary placeholder:text-content-secondary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12+
className,
13+
)}
14+
ref={ref}
15+
{...props}
16+
/>
17+
);
18+
},
19+
);
20+
Input.displayName = "Input";
21+
22+
export { Input };

‎site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/ExportPolicyButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const ExportPolicyButton: FC<ExportPolicyButtonProps> = ({
2121
? JSON.stringify(syncSettings, null, 2)
2222
: null;
2323
}, [syncSettings]);
24-
console.log({ syncSettings });
24+
2525
return (
2626
<Button
2727
startIcon={<DownloadOutlined />}

‎site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx

Lines changed: 60 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,96 @@
1-
import LaunchOutlined from "@mui/icons-material/LaunchOutlined";
2-
import Button from "@mui/material/Button";
31
import { getErrorMessage } from "api/errors";
42
import {
53
organizationIdpSyncSettings,
64
patchOrganizationSyncSettings,
75
} from "api/queries/idpsync";
86
import type { OrganizationSyncSettings } from "api/typesGenerated";
97
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
10-
import { EmptyState } from "components/EmptyState/EmptyState";
118
import { displayError } from "components/GlobalSnackbar/utils";
9+
import { Loader } from "components/Loader/Loader";
1210
import { Paywall } from "components/Paywall/Paywall";
13-
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
14-
import { Stack } from "components/Stack/Stack";
11+
import { SquareArrowOutUpRight } from "lucide-react";
1512
import { useDashboard } from "modules/dashboard/useDashboard";
1613
import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
1714
import type { FC } from "react";
1815
import { Helmet } from "react-helmet-async";
1916
import { useMutation, useQuery, useQueryClient } from "react-query";
2017
import { docs } from "utils/docs";
2118
import { pageTitle } from "utils/page";
19+
import { ExportPolicyButton } from "./ExportPolicyButton";
2220
import IdpOrgSyncPageView from "./IdpOrgSyncPageView";
2321

2422
export const IdpOrgSyncPage: FC = () => {
2523
const queryClient = useQueryClient();
2624
// IdP sync does not have its own entitlement and is based on templace_rbac
2725
const { template_rbac: isIdpSyncEnabled } = useFeatureVisibility();
2826
const { organizations } = useDashboard();
29-
const organizationIdpSyncSettingsQuery = useQuery(
30-
organizationIdpSyncSettings(),
31-
);
27+
const {
28+
data: orgSyncSettingsData,
29+
isLoading,
30+
error,
31+
} = useQuery(organizationIdpSyncSettings());
32+
3233
const patchOrganizationSyncSettingsMutation = useMutation(
3334
patchOrganizationSyncSettings(queryClient),
3435
);
3536

36-
const error = organizationIdpSyncSettingsQuery.error;
37-
console.log({ organizationIdpSyncSettingsQuery });
37+
if (isLoading) {
38+
return <Loader />;
39+
}
40+
3841
return (
3942
<>
4043
<Helmet>
4144
<title>{pageTitle("Organization IdP Sync")}</title>
4245
</Helmet>
4346

44-
<Stack
45-
alignItems="baseline"
46-
direction="row"
47-
justifyContent="space-between"
48-
>
49-
<SettingsHeader
50-
title="Organization IdP Sync"
51-
description="Automatically assign users to an organization based on their IDP claims."
52-
/>
53-
<Button
54-
startIcon={<LaunchOutlined />}
55-
component="a"
56-
href={docs("/admin/users/idp-sync")}
57-
target="_blank"
58-
>
59-
Setup IdP Sync
60-
</Button>
61-
</Stack>
62-
<ChooseOne>
63-
<Cond condition={!isIdpSyncEnabled}>
64-
<Paywall
65-
message="IdP Sync"
66-
description="Configure group and role mappings to manage permissions outside of Coder. You need an Premium license to use this feature."
67-
documentationLink={docs("/admin/users/idp-sync")}
68-
/>
69-
</Cond>
70-
<Cond>
71-
<IdpOrgSyncPageView
72-
organizationSyncSettings={organizationIdpSyncSettingsQuery.data}
73-
organizations={organizations}
74-
onSubmit={async (data: OrganizationSyncSettings) => {
75-
try {
76-
// await patchOrganizationSyncSettingsMutation.mutateAsync(data);
77-
console.log("submit form", data);
78-
} catch (error) {
79-
displayError(
80-
getErrorMessage(
81-
error,
82-
"Failed to organization IdP sync settings",
83-
),
84-
);
85-
}
86-
}}
87-
error={error || patchOrganizationSyncSettingsMutation.error}
88-
// isLoading={patchOrganizationSyncSettingsMutation.isLoading}
89-
/>
90-
</Cond>
91-
</ChooseOne>
47+
<div className="flex flex-col gap-12">
48+
<header className="flex flex-row items-baseline justify-between">
49+
<div className="flex flex-col gap-2">
50+
<h1 className="text-3xl m-0">Organization IdP Sync</h1>
51+
<p className="flex flex-row gap-1 text-sm text-content-secondary font-medium m-0">
52+
Automatically assign users to an organization based on their IdP
53+
claims.
54+
<a
55+
href={docs("/admin/users/idp-sync")}
56+
className="flex flex-row items-center gap-1 no-underline"
57+
>
58+
View docs
59+
<SquareArrowOutUpRight size={14} />
60+
</a>
61+
</p>
62+
</div>
63+
<ExportPolicyButton syncSettings={orgSyncSettingsData} />
64+
</header>
65+
<ChooseOne>
66+
<Cond condition={!isIdpSyncEnabled}>
67+
<Paywall
68+
message="IdP Sync"
69+
description="Configure group and role mappings to manage permissions outside of Coder. You need an Premium license to use this feature."
70+
documentationLink={docs("/admin/users/idp-sync")}
71+
/>
72+
</Cond>
73+
<Cond>
74+
<IdpOrgSyncPageView
75+
organizationSyncSettings={orgSyncSettingsData}
76+
organizations={organizations}
77+
onSubmit={async (data: OrganizationSyncSettings) => {
78+
try {
79+
await patchOrganizationSyncSettingsMutation.mutateAsync(data);
80+
} catch (error) {
81+
displayError(
82+
getErrorMessage(
83+
error,
84+
"Failed to organization IdP sync settings",
85+
),
86+
);
87+
}
88+
}}
89+
error={error || patchOrganizationSyncSettingsMutation.error}
90+
/>
91+
</Cond>
92+
</ChooseOne>
93+
</div>
9294
</>
9395
);
9496
};

0 commit comments

Comments
 (0)