WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Commit 7026e56

Browse files
perkinsjrperkinsjr
authored
fix: unfuck modals (#4448)
1 parent edd710a commit 7026e56

File tree

9 files changed

+546
-380
lines changed

9 files changed

+546
-380
lines changed

‎apps/dashboard/app/(app)/[workspaceSlug]/settings/root-keys/components/root-key/components/permission-sheet.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const PermissionSheet = ({
4848
});
4949

5050
return (
51-
<Sheet modal={true}>
51+
<Sheet modal={false}>
5252
<SheetTrigger asChild>{children}</SheetTrigger>
5353
<SheetContent
5454
disableClose={false}

‎apps/dashboard/app/(app)/[workspaceSlug]/settings/root-keys/components/root-key/root-key-dialog.tsx‎

Lines changed: 96 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
import { Label } from "@/components/ui/label";
44
import { ScrollArea } from "@/components/ui/scroll-area";
55
import type { UnkeyPermission } from "@unkey/rbac";
6-
import { Button, FormInput } from "@unkey/ui";
6+
import { Button } from "@unkey/ui";
7+
import { FormInput } from "@unkey/ui";
78
import dynamic from "next/dynamic";
89
import { PermissionBadgeList } from "./components/permission-badge-list";
910
import { PermissionSheet } from "./components/permission-sheet";
@@ -72,101 +73,110 @@ export const RootKeyDialog = ({
7273
const removePermission = (permission: UnkeyPermission) =>
7374
handlePermissionChange(selectedPermissions.filter((p) => p !== permission));
7475

75-
return (
76+
const dialogContent = (
7677
<>
77-
<DynamicDialogContainer
78-
isOpen={isOpen}
79-
onOpenChange={onOpenChange}
80-
title={title}
81-
contentClassName="p-0 mb-0 gap-0"
82-
className="max-w-[460px]"
83-
subTitle={subTitle}
84-
footer={
85-
<div className="w-full flex flex-col gap-2 items-center justify-center">
78+
<div className="flex flex-col p-6 gap-4">
79+
<div className="flex flex-col">
80+
<FormInput
81+
name="name"
82+
label={ROOT_KEY_MESSAGES.DESCRIPTIONS.KEY_NAME_LABEL}
83+
description={ROOT_KEY_MESSAGES.DESCRIPTIONS.KEY_NAME_DESCRIPTION}
84+
placeholder={ROOT_KEY_MESSAGES.PLACEHOLDERS.KEY_NAME}
85+
value={name}
86+
onChange={(e) => setName(e.target.value)}
87+
/>
88+
</div>
89+
<div className="flex flex-col gap-2 mr-0">
90+
<Label className="text-[13px] font-regular text-gray-10">
91+
{ROOT_KEY_MESSAGES.DESCRIPTIONS.PERMISSIONS}
92+
</Label>
93+
<PermissionSheet
94+
selectedPermissions={selectedPermissions}
95+
apis={allApis}
96+
onChange={handlePermissionChange}
97+
loadMore={fetchMoreApis}
98+
hasNextPage={hasNextPage}
99+
isFetchingNextPage={isFetchingNextPage}
100+
editMode={editMode}
101+
>
86102
<Button
87-
variant="primary"
88-
size="xlg"
89-
className="w-full rounded-lg"
90-
disabled={!hasChanges || isMutating || !selectedPermissions.length}
91-
onClick={handleCreateKey}
92-
loading={isBusy}
103+
type="button"
104+
variant="outline"
105+
size="lg"
106+
className="rounded-lg font-light text-grayA-8 text-[13px] border border-gray-5 hover:border-gray-8 bg-gray-2 dark:bg-black focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-5 focus-visible:ring-offset-0"
107+
disabled={isBusy}
93108
>
94-
{editMode
95-
? ROOT_KEY_MESSAGES.UI.UPDATE_ROOT_KEY
96-
: ROOT_KEY_MESSAGES.UI.CREATE_ROOT_KEY}
109+
{isBusy
110+
? ROOT_KEY_MESSAGES.UI.LOADING
111+
: editMode
112+
? ROOT_KEY_MESSAGES.UI.EDIT_PERMISSIONS
113+
: ROOT_KEY_MESSAGES.UI.SELECT_PERMISSIONS}
97114
</Button>
98-
<div className="text-gray-9 text-xs">
99-
{editMode
100-
? ROOT_KEY_MESSAGES.DESCRIPTIONS.IMMEDIATE_UPDATE
101-
: ROOT_KEY_MESSAGES.DESCRIPTIONS.IMMEDIATE_CREATE}
102-
</div>
103-
</div>
104-
}
105-
>
106-
<div className="flex flex-col p-6 gap-4">
107-
<div className="flex flex-col">
108-
<FormInput
109-
name="name"
110-
label={ROOT_KEY_MESSAGES.DESCRIPTIONS.KEY_NAME_LABEL}
111-
description={ROOT_KEY_MESSAGES.DESCRIPTIONS.KEY_NAME_DESCRIPTION}
112-
placeholder={ROOT_KEY_MESSAGES.PLACEHOLDERS.KEY_NAME}
113-
value={name}
114-
onChange={(e) => setName(e.target.value)}
115-
/>
116-
</div>
117-
<div className="flex flex-col gap-2 mr-0">
118-
<Label className="text-[13px] font-regular text-gray-10">
119-
{ROOT_KEY_MESSAGES.DESCRIPTIONS.PERMISSIONS}
120-
</Label>
121-
<PermissionSheet
122-
selectedPermissions={selectedPermissions}
123-
apis={allApis}
124-
onChange={handlePermissionChange}
125-
loadMore={fetchMoreApis}
126-
hasNextPage={hasNextPage}
127-
isFetchingNextPage={isFetchingNextPage}
128-
editMode={editMode}
129-
>
130-
<Button
131-
type="button"
132-
variant="outline"
133-
size="lg"
134-
className="rounded-lg font-light text-grayA-8 text-[13px] border border-gray-5 hover:border-gray-8 bg-gray-2 dark:bg-black focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-5 focus-visible:ring-offset-0"
135-
disabled={isBusy}
136-
>
137-
{isBusy
138-
? ROOT_KEY_MESSAGES.UI.LOADING
139-
: editMode
140-
? ROOT_KEY_MESSAGES.UI.EDIT_PERMISSIONS
141-
: ROOT_KEY_MESSAGES.UI.SELECT_PERMISSIONS}
142-
</Button>
143-
</PermissionSheet>
144-
</div>
115+
</PermissionSheet>
145116
</div>
146-
<ScrollArea className="w-full overflow-y-auto pt-0 mb-4">
147-
<div className="flex flex-col px-6 py-0 gap-3">
117+
</div>
118+
<ScrollArea className="w-full overflow-y-auto pt-0 mb-4">
119+
<div className="flex flex-col px-6 py-0 gap-3">
120+
<PermissionBadgeList
121+
selectedPermissions={selectedPermissions}
122+
apiId={ROOT_KEY_CONSTANTS.WORKSPACE}
123+
title="Selected from"
124+
name="Workspace"
125+
expandCount={ROOT_KEY_CONSTANTS.EXPAND_COUNT}
126+
removePermission={removePermission}
127+
/>
128+
{allApis.map((api) => (
148129
<PermissionBadgeList
130+
key={api.id}
149131
selectedPermissions={selectedPermissions}
150-
apiId={ROOT_KEY_CONSTANTS.WORKSPACE}
151-
title="Selected from"
152-
name="Workspace"
132+
apiId={api.id}
133+
title="from"
134+
name={api.name}
153135
expandCount={ROOT_KEY_CONSTANTS.EXPAND_COUNT}
154136
removePermission={removePermission}
155137
/>
156-
{allApis.map((api) => (
157-
<PermissionBadgeList
158-
key={api.id}
159-
selectedPermissions={selectedPermissions}
160-
apiId={api.id}
161-
title="from"
162-
name={api.name}
163-
expandCount={ROOT_KEY_CONSTANTS.EXPAND_COUNT}
164-
removePermission={removePermission}
165-
/>
166-
))}
167-
</div>
168-
</ScrollArea>
169-
</DynamicDialogContainer>
138+
))}
139+
</div>
140+
</ScrollArea>
141+
</>
142+
);
143+
144+
const footerContent = (
145+
<div className="w-full flex flex-col gap-2 items-center justify-center">
146+
<Button
147+
variant="primary"
148+
size="xlg"
149+
className="w-full rounded-lg"
150+
disabled={!hasChanges || isMutating || !selectedPermissions.length}
151+
onClick={handleCreateKey}
152+
loading={isBusy}
153+
>
154+
{editMode ? ROOT_KEY_MESSAGES.UI.UPDATE_ROOT_KEY : ROOT_KEY_MESSAGES.UI.CREATE_ROOT_KEY}
155+
</Button>
156+
<div className="text-gray-9 text-xs">
157+
{editMode
158+
? ROOT_KEY_MESSAGES.DESCRIPTIONS.IMMEDIATE_UPDATE
159+
: ROOT_KEY_MESSAGES.DESCRIPTIONS.IMMEDIATE_CREATE}
160+
</div>
161+
</div>
162+
);
163+
164+
return (
165+
<>
166+
{/* Only show creation dialog if no key has been created yet */}
167+
{!key.data?.key && (
168+
<DynamicDialogContainer
169+
isOpen={isOpen}
170+
onOpenChange={onOpenChange}
171+
title={title}
172+
contentClassName="p-0 mb-0 gap-0"
173+
className="max-w-[460px]"
174+
subTitle={subTitle}
175+
footer={footerContent}
176+
>
177+
{dialogContent}
178+
</DynamicDialogContainer>
179+
)}
170180
<RootKeySuccess keyValue={key.data?.key} onClose={handleClose} />
171181
</>
172182
);

‎apps/dashboard/app/(app)/[workspaceSlug]/settings/root-keys/components/root-key/root-key-success.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
import { SecretKey } from "@/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/secret-key";
44
import { ConfirmPopover } from "@/components/confirmation-popover";
5+
import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog";
56
import { Check, CircleInfo, Key2 } from "@unkey/icons";
6-
import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@unkey/ui";
77
import { ROOT_KEY_MESSAGES } from "./constants";
88
import { useRootKeySuccess } from "./hooks/use-root-key-success";
99

‎apps/dashboard/components/ui/popover.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const PopoverContent = React.forwardRef<
1717
align={align}
1818
sideOffset={sideOffset}
1919
className={cn(
20-
"z-50 w-72 overflow-hidden rounded-lg border border-grayA-4 bg-gray-2 p-4 text-gray-12 shadow-md outline-none",
20+
"z-[150] w-72 overflow-hidden rounded-lg border border-grayA-4 bg-gray-2 p-4 text-gray-12 shadow-md outline-none",
2121
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
2222
"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
2323
className,

‎apps/dashboard/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"@radix-ui/react-dialog": "1.0.5",
2727
"@radix-ui/react-dropdown-menu": "2.1.1",
2828
"@radix-ui/react-label": "2.0.2",
29-
"@radix-ui/react-popover": "1.0.7",
29+
"@radix-ui/react-popover": "1.1.15",
3030
"@radix-ui/react-primitive": "2.0.2",
3131
"@radix-ui/react-progress": "1.0.3",
3232
"@radix-ui/react-scroll-area": "1.0.5",

‎internal/ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"dependencies": {
2121
"@radix-ui/colors": "3.0.0",
2222
"@radix-ui/react-checkbox": "1.0.4",
23-
"@radix-ui/react-dialog": "1.0.5",
23+
"@radix-ui/react-dialog": "1.1.15",
2424
"@radix-ui/react-select": "2.0.0",
2525
"@radix-ui/react-separator": "1.0.3",
2626
"@radix-ui/react-slot": "1.1.0",

‎internal/ui/src/components/dialog/dialog-container.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ type DialogContainerProps = PropsWithChildren<{
2121
subTitle?: string;
2222
showCloseWarning?: boolean;
2323
onAttemptClose?: () => void;
24+
modal?: boolean;
2425
}>;
2526

2627
const DialogContainer = ({
@@ -35,18 +36,17 @@ const DialogContainer = ({
3536
preventAutoFocus = true,
3637
showCloseWarning = false,
3738
onAttemptClose,
39+
modal = false,
3840
}: DialogContainerProps) => {
3941
return (
40-
<Dialog open={isOpen} onOpenChange={onOpenChange} modal={false}>
42+
<Dialog open={isOpen} onOpenChange={onOpenChange} modal={modal}>
4143
<DialogContent
42-
modal={false}
44+
modal={modal}
4345
className={cn(
4446
"drop-shadow-2xl transform-gpu border-gray-4 max-h-[90vh] overflow-hidden !rounded-2xl p-0 gap-0 flex flex-col flex-grow",
4547
"w-[90%] md:w-[70%] lg:w-[70%] xl:w-[50%] 2xl:w-[45%] max-w-[600px] max-h-[90vh] sm:max-h-[90vh] md:max-h-[70vh] lg:max-h-[90vh] xl:max-h-[80vh]",
4648
className,
4749
)}
48-
// Otherwise our shortcuts hijacks dialog inputs
49-
onKeyDown={(e) => e.stopPropagation()}
5050
onOpenAutoFocus={(e) => {
5151
if (preventAutoFocus) {
5252
e.preventDefault();

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@
4040
"@opentelemetry/sdk-trace-base": "1.13.0",
4141
"@opentelemetry/sdk-trace-node": "1.13.0",
4242
"@opentelemetry/semantic-conventions": "1.13.0",
43+
"@radix-ui/react-dialog": "1.1.15",
44+
"@radix-ui/react-popover": "1.1.15",
4345
"zod": "3.23.8"
4446
}
4547
},

0 commit comments

Comments
 (0)