|
1 | | -importLaunchOutlinedfrom"@mui/icons-material/LaunchOutlined"; |
2 | | -importButtonfrom"@mui/material/Button"; |
3 | 1 | import{getErrorMessage}from"api/errors"; |
4 | 2 | import{ |
5 | 3 | organizationIdpSyncSettings, |
6 | 4 | patchOrganizationSyncSettings, |
7 | 5 | }from"api/queries/idpsync"; |
8 | 6 | importtype{OrganizationSyncSettings}from"api/typesGenerated"; |
9 | 7 | import{ChooseOne,Cond}from"components/Conditionals/ChooseOne"; |
10 | | -import{EmptyState}from"components/EmptyState/EmptyState"; |
11 | 8 | import{displayError}from"components/GlobalSnackbar/utils"; |
| 9 | +import{Loader}from"components/Loader/Loader"; |
12 | 10 | 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"; |
15 | 12 | import{useDashboard}from"modules/dashboard/useDashboard"; |
16 | 13 | import{useFeatureVisibility}from"modules/dashboard/useFeatureVisibility"; |
17 | 14 | importtype{FC}from"react"; |
18 | 15 | import{Helmet}from"react-helmet-async"; |
19 | 16 | import{useMutation,useQuery,useQueryClient}from"react-query"; |
20 | 17 | import{docs}from"utils/docs"; |
21 | 18 | import{pageTitle}from"utils/page"; |
| 19 | +import{ExportPolicyButton}from"./ExportPolicyButton"; |
22 | 20 | importIdpOrgSyncPageViewfrom"./IdpOrgSyncPageView"; |
23 | 21 |
|
24 | 22 | exportconstIdpOrgSyncPage:FC=()=>{ |
25 | 23 | constqueryClient=useQueryClient(); |
26 | 24 | // IdP sync does not have its own entitlement and is based on templace_rbac |
27 | 25 | const{template_rbac:isIdpSyncEnabled}=useFeatureVisibility(); |
28 | 26 | const{ organizations}=useDashboard(); |
29 | | -constorganizationIdpSyncSettingsQuery=useQuery( |
30 | | -organizationIdpSyncSettings(), |
31 | | -); |
| 27 | +const{ |
| 28 | +data:orgSyncSettingsData, |
| 29 | +isLoading, |
| 30 | +error, |
| 31 | +}=useQuery(organizationIdpSyncSettings()); |
| 32 | + |
32 | 33 | constpatchOrganizationSyncSettingsMutation=useMutation( |
33 | 34 | patchOrganizationSyncSettings(queryClient), |
34 | 35 | ); |
35 | 36 |
|
36 | | -consterror=organizationIdpSyncSettingsQuery.error; |
37 | | -console.log({ organizationIdpSyncSettingsQuery}); |
| 37 | +if(isLoading){ |
| 38 | +return<Loader/>; |
| 39 | +} |
| 40 | + |
38 | 41 | return( |
39 | 42 | <> |
40 | 43 | <Helmet> |
41 | 44 | <title>{pageTitle("Organization IdP Sync")}</title> |
42 | 45 | </Helmet> |
43 | 46 |
|
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 | | -<Condcondition={!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 | +<divclassName="flex flex-col gap-12"> |
| 48 | +<headerclassName="flex flex-row items-baseline justify-between"> |
| 49 | +<divclassName="flex flex-col gap-2"> |
| 50 | +<h1className="text-3xl m-0">Organization IdP Sync</h1> |
| 51 | +<pclassName="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 | +<SquareArrowOutUpRightsize={14}/> |
| 60 | +</a> |
| 61 | +</p> |
| 62 | +</div> |
| 63 | +<ExportPolicyButtonsyncSettings={orgSyncSettingsData}/> |
| 64 | +</header> |
| 65 | +<ChooseOne> |
| 66 | +<Condcondition={!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 | +awaitpatchOrganizationSyncSettingsMutation.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> |
92 | 94 | </> |
93 | 95 | ); |
94 | 96 | }; |
|