Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit6116776

Browse files
authored
feat: show warning dialog if user switches off assign default org (#15848)
resolvescoder/internal#240Switching off the setting to automatically assign all users to thedefault organization is potentially disruptive. This adds a warningdialog before the change is commited.<img width="1168" alt="Screenshot 2024-12-13 at 11 20 16"src="https://github.com/user-attachments/assets/e6bf8c97-3cad-4501-9f28-073fca118668"/>
1 parentb5ba3e3 commit6116776

File tree

5 files changed

+89
-52
lines changed

5 files changed

+89
-52
lines changed

‎site/e2e/tests/deployment/idpOrgSync.spec.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ test.describe("IdpOrgSyncPage", () => {
7878
).toBeVisible();
7979
});
8080

81-
test("toggle default organization assignment",async({ page})=>{
81+
test("toggleoffdefault organization assignment",async({ page})=>{
8282
requiresLicense();
8383
awaitpage.goto("/deployment/idp-org-sync",{
8484
waitUntil:"domcontentloaded",
@@ -89,6 +89,12 @@ test.describe("IdpOrgSyncPage", () => {
8989
});
9090
awaittoggle.click();
9191

92+
constdialog=page.getByRole("dialog");
93+
awaitexpect(dialog).toBeVisible();
94+
95+
awaitdialog.getByRole("button",{name:"Confirm"}).click();
96+
awaitexpect(dialog).not.toBeVisible();
97+
9298
awaitexpect(
9399
page.getByText("Organization sync settings updated."),
94100
).toBeVisible();

‎site/src/components/Button/Button.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,12 @@ import { type FC, forwardRef } from "react";
88
import{cn}from"utils/cn";
99

1010
exportconstbuttonVariants=cva(
11-
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link disabled:pointer-events-none disabled:text-content-disabled [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 font-semibold border-solid cursor-pointer",
11+
`inline-flex items-center justify-center gap-2 whitespace-nowrap
12+
border-solid rounded-md transition-colors
13+
text-sm font-semibold font-medium cursor-pointer
14+
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
15+
disabled:pointer-events-none disabled:text-content-disabled
16+
[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,
1217
{
1318
variants:{
1419
variant:{

‎site/src/components/Dialog/Dialog.tsx

Lines changed: 10 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
*@see {@link https://ui.shadcn.com/docs/components/dialog}
44
*/
55
import*asDialogPrimitivefrom"@radix-ui/react-dialog";
6-
import{X}from"lucide-react";
76
import{
87
typeComponentPropsWithoutRef,
98
typeElementRef,
@@ -46,29 +45,19 @@ export const DialogContent = forwardRef<
4645
<DialogPrimitive.Content
4746
ref={ref}
4847
className={cn(
49-
`fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg
50-
gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg
51-
translate-x-[-50%] translate-y-[-50%]
52-
data-[state=open]:animate-in data-[state=closed]:animate-out
53-
data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
54-
data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
55-
data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]
56-
data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]`,
48+
`fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg gap-4
49+
border border-solid border-border bg-surface-primary p-8 shadow-lg duration-200 sm:rounded-lg
50+
translate-x-[-50%] translate-y-[-50%]
51+
data-[state=open]:animate-in data-[state=closed]:animate-out
52+
data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
53+
data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
54+
data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]
55+
data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]`,
5756
className,
5857
)}
5958
{...props}
6059
>
6160
{children}
62-
<DialogPrimitive.Close
63-
className={`absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity
64-
hover:opacity-100
65-
focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
66-
disabled:pointer-events-none
67-
data-[state=open]:bg-surface-secondary data-[state=open]:text-content-disabled`}
68-
>
69-
<XclassName="h-4 w-4"/>
70-
<spanclassName="sr-only">Close</span>
71-
</DialogPrimitive.Close>
7261
</DialogPrimitive.Content>
7362
</DialogPortal>
7463
));
@@ -106,7 +95,7 @@ export const DialogTitle = forwardRef<
10695
<DialogPrimitive.Title
10796
ref={ref}
10897
className={cn(
109-
"text-lg font-semibold leading-none tracking-tight",
98+
"text-xl m-0 text-content-primary font-semibold leading-none tracking-tight",
11099
className,
111100
)}
112101
{...props}
@@ -119,7 +108,7 @@ export const DialogDescription = forwardRef<
119108
>(({ className, ...props},ref)=>(
120109
<DialogPrimitive.Description
121110
ref={ref}
122-
className={cn("text-sm text-content-disabled",className)}
111+
className={cn("text-sm text-content-secondary",className)}
123112
{...props}
124113
/>
125114
));

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
importtype{Meta,StoryObj}from"@storybook/react";
2+
import{userEvent,within}from"@storybook/test";
23
import{
34
MockOrganization,
45
MockOrganization2,
@@ -48,3 +49,18 @@ export const MissingGroups: Story = {
4849
organizationSyncSettings:MockOrganizationSyncSettings,
4950
},
5051
};
52+
53+
exportconstAssignDefaultOrgWarningDialog:Story={
54+
args:{
55+
organizationSyncSettings:MockOrganizationSyncSettings,
56+
organizations:[MockOrganization,MockOrganization2],
57+
},
58+
play:async({ canvasElement})=>{
59+
constcanvas=within(canvasElement);
60+
awaituserEvent.click(
61+
canvas.getByRole("switch",{
62+
name:"Assign Default Organization",
63+
}),
64+
);
65+
},
66+
};

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

Lines changed: 50 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
importSkeletonfrom"@mui/material/Skeleton";
21
importTablefrom"@mui/material/Table";
32
importTableBodyfrom"@mui/material/TableBody";
43
importTableCellfrom"@mui/material/TableCell";
@@ -12,6 +11,14 @@ import type {
1211
import{ErrorAlert}from"components/Alert/ErrorAlert";
1312
import{Button}from"components/Button/Button";
1413
import{ChooseOne,Cond}from"components/Conditionals/ChooseOne";
14+
import{
15+
Dialog,
16+
DialogContent,
17+
DialogDescription,
18+
DialogFooter,
19+
DialogHeader,
20+
DialogTitle,
21+
}from"components/Dialog/Dialog";
1522
import{EmptyState}from"components/EmptyState/EmptyState";
1623
import{
1724
HelpTooltip,
@@ -26,10 +33,6 @@ import {
2633
typeOption,
2734
}from"components/MultiSelectCombobox/MultiSelectCombobox";
2835
import{Switch}from"components/Switch/Switch";
29-
import{
30-
TableLoaderSkeleton,
31-
TableRowSkeleton,
32-
}from"components/TableLoader/TableLoader";
3336
import{useFormik}from"formik";
3437
import{Plus,SquareArrowOutUpRight,Trash}from"lucide-react";
3538
import{typeFC,useState}from"react";
@@ -74,6 +77,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
7477
constorganizationMappingCount=form.values.mapping
7578
?Object.entries(form.values.mapping).length
7679
:0;
80+
const[isDialogOpen,setIsDialogOpen]=useState(false);
7781

7882
constgetOrgNames=(orgIds:readonlystring[])=>{
7983
returnorgIds.map(
@@ -136,11 +140,15 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
136140
id={ORGANIZATION_ASSIGN_DEFAULT_ID}
137141
checked={form.values.organization_assign_default}
138142
onCheckedChange={async(checked)=>{
139-
voidform.setFieldValue(
140-
"organization_assign_default",
141-
checked,
142-
);
143-
form.handleSubmit();
143+
if(!checked){
144+
setIsDialogOpen(true);
145+
}else{
146+
voidform.setFieldValue(
147+
"organization_assign_default",
148+
checked,
149+
);
150+
form.handleSubmit();
151+
}
144152
}}
145153
/>
146154
<spanclassName="flex flex-row items-center gap-1">
@@ -234,6 +242,36 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
234242
</div>
235243
</fieldset>
236244
</form>
245+
246+
<Dialogopen={isDialogOpen}onOpenChange={setIsDialogOpen}>
247+
<DialogContentclassName="flex flex-col gap-12 max-w-lg">
248+
<DialogHeaderclassName="flex flex-col gap-4">
249+
<DialogTitle>
250+
Switch off default organization assignment
251+
</DialogTitle>
252+
<DialogDescription>
253+
Warning: This will remove all users from the default organization
254+
unless otherwise specified in an organization mapping defined
255+
below.
256+
</DialogDescription>
257+
</DialogHeader>
258+
<DialogFooterclassName="flex flex-row">
259+
<Buttonvariant="outline"onClick={()=>setIsDialogOpen(false)}>
260+
Cancel
261+
</Button>
262+
<Button
263+
onClick={()=>{
264+
voidform.setFieldValue("organization_assign_default",false);
265+
setIsDialogOpen(false);
266+
form.handleSubmit();
267+
}}
268+
type="submit"
269+
>
270+
Confirm
271+
</Button>
272+
</DialogFooter>
273+
</DialogContent>
274+
</Dialog>
237275
</div>
238276
);
239277
};
@@ -318,31 +356,14 @@ const OrganizationRow: FC<OrganizationRowProps> = ({
318356
);
319357
};
320358

321-
constTableLoader=()=>{
322-
return(
323-
<TableLoaderSkeleton>
324-
<TableRowSkeleton>
325-
<TableCell>
326-
<Skeletonvariant="text"width="25%"/>
327-
</TableCell>
328-
<TableCell>
329-
<Skeletonvariant="text"width="25%"/>
330-
</TableCell>
331-
<TableCell>
332-
<Skeletonvariant="text"width="10%"/>
333-
</TableCell>
334-
</TableRowSkeleton>
335-
</TableLoaderSkeleton>
336-
);
337-
};
338-
339359
exportconstAssignDefaultOrgHelpTooltip:FC=()=>{
340360
return(
341361
<HelpTooltip>
342362
<HelpTooltipTrigger/>
343363
<HelpTooltipContent>
344364
<HelpTooltipText>
345-
Disabling will remove all users from the default organization.
365+
Disabling will remove all users from the default organization if a
366+
mapping for the default organization is not defined.
346367
</HelpTooltipText>
347368
</HelpTooltipContent>
348369
</HelpTooltip>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp