@authhero/react-admin 0.14.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/package.json +2 -1
- package/src/App.spec.tsx +17 -10
- package/src/components/resource-servers/edit.tsx +131 -28
- package/src/components/roles/edit.tsx +20 -0
- package/src/components/tenants/edit.tsx +8 -0
- package/src/components/users/edit.tsx +69 -44
- package/vite.config.ts +11 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @authhero/react-admin
|
|
2
2
|
|
|
3
|
+
## 0.16.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 17d73eb: Change name of organization flag and add OR support in lucence queries
|
|
8
|
+
- e542773: Fixes for syncing resources servers and global roles
|
|
9
|
+
|
|
10
|
+
## 0.15.0
|
|
11
|
+
|
|
12
|
+
### Minor Changes
|
|
13
|
+
|
|
14
|
+
- aaf0aa0: Fix paging issue for scopes
|
|
15
|
+
|
|
3
16
|
## 0.14.0
|
|
4
17
|
|
|
5
18
|
### Minor Changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@authhero/react-admin",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.16.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
"react-admin": "^5.8.0",
|
|
27
27
|
"react-admin-color-picker": "^1.0.3",
|
|
28
28
|
"react-dom": "^19.1.0",
|
|
29
|
+
"react-hook-form": "^7.69.0",
|
|
29
30
|
"react-router-dom": "^7.6.0",
|
|
30
31
|
"recharts": "^2.15.0"
|
|
31
32
|
},
|
package/src/App.spec.tsx
CHANGED
|
@@ -3,8 +3,8 @@ import { test, vi, expect } from "vitest";
|
|
|
3
3
|
import { App } from "./App";
|
|
4
4
|
|
|
5
5
|
// Mock all the react-admin components and dependencies
|
|
6
|
-
vi.mock(
|
|
7
|
-
const actual = await importOriginal() as any;
|
|
6
|
+
vi.mock("react-admin", async (importOriginal) => {
|
|
7
|
+
const actual = (await importOriginal()) as any;
|
|
8
8
|
return {
|
|
9
9
|
...actual,
|
|
10
10
|
Admin: ({ children }: any) => <div data-testid="admin">{children}</div>,
|
|
@@ -13,24 +13,31 @@ vi.mock('react-admin', async (importOriginal) => {
|
|
|
13
13
|
};
|
|
14
14
|
});
|
|
15
15
|
|
|
16
|
-
vi.mock(
|
|
17
|
-
getDataproviderForTenant: () =>
|
|
16
|
+
vi.mock("./dataProvider", () => ({
|
|
17
|
+
getDataproviderForTenant: () =>
|
|
18
|
+
Promise.resolve(() => Promise.resolve({ data: [] })),
|
|
18
19
|
getDataprovider: () => Promise.resolve(() => Promise.resolve({ data: [] })),
|
|
19
20
|
}));
|
|
20
21
|
|
|
21
|
-
vi.mock(
|
|
22
|
+
vi.mock("./authProvider", () => ({
|
|
22
23
|
getAuthProvider: () => ({}),
|
|
23
24
|
}));
|
|
24
25
|
|
|
25
|
-
vi.mock(
|
|
26
|
-
getSelectedDomainFromStorage: () => ({ url:
|
|
26
|
+
vi.mock("./utils/domainUtils", () => ({
|
|
27
|
+
getSelectedDomainFromStorage: () => ({ url: "test.com", clientId: "test" }),
|
|
27
28
|
getDomainFromStorage: () => [],
|
|
28
29
|
buildUrlWithProtocol: (url: string) => `https://${url}`,
|
|
29
30
|
}));
|
|
30
31
|
|
|
31
|
-
vi.mock(
|
|
32
|
+
vi.mock("react-router-dom", () => ({
|
|
32
33
|
useNavigate: () => vi.fn(),
|
|
33
|
-
useLocation: () => ({ pathname:
|
|
34
|
+
useLocation: () => ({ pathname: "/" }),
|
|
35
|
+
}));
|
|
36
|
+
|
|
37
|
+
// Mock color picker to avoid CSS import issues in tests
|
|
38
|
+
vi.mock("react-admin-color-picker", () => ({
|
|
39
|
+
ColorInput: () => null,
|
|
40
|
+
ColorField: () => null,
|
|
34
41
|
}));
|
|
35
42
|
|
|
36
43
|
test.skip("should pass", async () => {
|
|
@@ -38,5 +45,5 @@ test.skip("should pass", async () => {
|
|
|
38
45
|
render(<App tenantId="test" />);
|
|
39
46
|
|
|
40
47
|
// Just check that something renders
|
|
41
|
-
expect(screen.getByTestId(
|
|
48
|
+
expect(screen.getByTestId("admin")).toBeTruthy();
|
|
42
49
|
}, 10000);
|
|
@@ -2,8 +2,6 @@ import {
|
|
|
2
2
|
Edit,
|
|
3
3
|
TextInput,
|
|
4
4
|
BooleanInput,
|
|
5
|
-
ArrayInput,
|
|
6
|
-
SimpleFormIterator,
|
|
7
5
|
TextField,
|
|
8
6
|
TabbedForm,
|
|
9
7
|
required,
|
|
@@ -11,7 +9,11 @@ import {
|
|
|
11
9
|
FormDataConsumer,
|
|
12
10
|
useRecordContext,
|
|
13
11
|
} from "react-admin";
|
|
14
|
-
import { Stack, Alert } from "@mui/material";
|
|
12
|
+
import { Stack, Alert, Pagination, Box, Typography, Button, IconButton, TextField as MuiTextField } from "@mui/material";
|
|
13
|
+
import DeleteIcon from "@mui/icons-material/Delete";
|
|
14
|
+
import AddIcon from "@mui/icons-material/Add";
|
|
15
|
+
import { useState, useMemo, useCallback } from "react";
|
|
16
|
+
import { useFormContext, useWatch } from "react-hook-form";
|
|
15
17
|
|
|
16
18
|
function SystemEntityAlert() {
|
|
17
19
|
const record = useRecordContext();
|
|
@@ -26,6 +28,131 @@ function SystemEntityAlert() {
|
|
|
26
28
|
);
|
|
27
29
|
}
|
|
28
30
|
|
|
31
|
+
const SCOPES_PER_PAGE = 10;
|
|
32
|
+
|
|
33
|
+
interface Scope {
|
|
34
|
+
value: string;
|
|
35
|
+
description?: string;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function PaginatedScopesInput({ disabled }: { disabled?: boolean }) {
|
|
39
|
+
const { setValue, getValues } = useFormContext();
|
|
40
|
+
const scopes: Scope[] = useWatch({ name: "scopes" }) || [];
|
|
41
|
+
const [page, setPage] = useState(1);
|
|
42
|
+
|
|
43
|
+
const totalPages = Math.max(1, Math.ceil(scopes.length / SCOPES_PER_PAGE));
|
|
44
|
+
|
|
45
|
+
const paginatedScopes = useMemo(() => {
|
|
46
|
+
const start = (page - 1) * SCOPES_PER_PAGE;
|
|
47
|
+
const end = start + SCOPES_PER_PAGE;
|
|
48
|
+
return scopes.slice(start, end).map((scope, index) => ({
|
|
49
|
+
...scope,
|
|
50
|
+
actualIndex: start + index,
|
|
51
|
+
}));
|
|
52
|
+
}, [scopes, page]);
|
|
53
|
+
|
|
54
|
+
const handlePageChange = (_event: React.ChangeEvent<unknown>, value: number) => {
|
|
55
|
+
setPage(value);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
const handleAdd = useCallback(() => {
|
|
59
|
+
const currentScopes = getValues("scopes") || [];
|
|
60
|
+
setValue("scopes", [...currentScopes, { value: "", description: "" }], { shouldDirty: true });
|
|
61
|
+
// Navigate to the last page where the new item will be
|
|
62
|
+
const newTotalPages = Math.ceil((currentScopes.length + 1) / SCOPES_PER_PAGE);
|
|
63
|
+
setPage(newTotalPages);
|
|
64
|
+
}, [getValues, setValue]);
|
|
65
|
+
|
|
66
|
+
const handleRemove = useCallback((actualIndex: number) => {
|
|
67
|
+
const currentScopes = getValues("scopes") || [];
|
|
68
|
+
const newScopes = currentScopes.filter((_: Scope, i: number) => i !== actualIndex);
|
|
69
|
+
setValue("scopes", newScopes, { shouldDirty: true });
|
|
70
|
+
// Adjust page if we removed the last item on current page
|
|
71
|
+
const newTotalPages = Math.ceil(newScopes.length / SCOPES_PER_PAGE);
|
|
72
|
+
if (page > newTotalPages && newTotalPages > 0) {
|
|
73
|
+
setPage(newTotalPages);
|
|
74
|
+
}
|
|
75
|
+
}, [getValues, setValue, page]);
|
|
76
|
+
|
|
77
|
+
const handleScopeChange = useCallback((actualIndex: number, field: "value" | "description", newValue: string) => {
|
|
78
|
+
const currentScopes = getValues("scopes") || [];
|
|
79
|
+
const newScopes = [...currentScopes];
|
|
80
|
+
newScopes[actualIndex] = { ...newScopes[actualIndex], [field]: newValue };
|
|
81
|
+
setValue("scopes", newScopes, { shouldDirty: true });
|
|
82
|
+
}, [getValues, setValue]);
|
|
83
|
+
|
|
84
|
+
return (
|
|
85
|
+
<Box>
|
|
86
|
+
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }}>
|
|
87
|
+
<Typography variant="body2" color="text.secondary">
|
|
88
|
+
{scopes.length} scope{scopes.length !== 1 ? "s" : ""} total
|
|
89
|
+
</Typography>
|
|
90
|
+
{!disabled && (
|
|
91
|
+
<Button
|
|
92
|
+
startIcon={<AddIcon />}
|
|
93
|
+
onClick={handleAdd}
|
|
94
|
+
size="small"
|
|
95
|
+
variant="outlined"
|
|
96
|
+
>
|
|
97
|
+
Add Scope
|
|
98
|
+
</Button>
|
|
99
|
+
)}
|
|
100
|
+
</Box>
|
|
101
|
+
|
|
102
|
+
{paginatedScopes.map((scope) => (
|
|
103
|
+
<Stack
|
|
104
|
+
key={scope.actualIndex}
|
|
105
|
+
spacing={2}
|
|
106
|
+
direction="row"
|
|
107
|
+
sx={{ width: "100%", alignItems: "flex-start", mb: 2 }}
|
|
108
|
+
>
|
|
109
|
+
<MuiTextField
|
|
110
|
+
value={scope.value || ""}
|
|
111
|
+
onChange={(e) => handleScopeChange(scope.actualIndex, "value", e.target.value)}
|
|
112
|
+
label="Scope Name"
|
|
113
|
+
helperText="e.g., read:users, write:posts"
|
|
114
|
+
sx={{ flex: 1 }}
|
|
115
|
+
disabled={disabled}
|
|
116
|
+
size="small"
|
|
117
|
+
required
|
|
118
|
+
/>
|
|
119
|
+
<MuiTextField
|
|
120
|
+
value={scope.description || ""}
|
|
121
|
+
onChange={(e) => handleScopeChange(scope.actualIndex, "description", e.target.value)}
|
|
122
|
+
label="Description"
|
|
123
|
+
helperText="What this scope allows"
|
|
124
|
+
sx={{ flex: 2 }}
|
|
125
|
+
disabled={disabled}
|
|
126
|
+
size="small"
|
|
127
|
+
/>
|
|
128
|
+
{!disabled && (
|
|
129
|
+
<IconButton
|
|
130
|
+
onClick={() => handleRemove(scope.actualIndex)}
|
|
131
|
+
color="error"
|
|
132
|
+
sx={{ mt: 1 }}
|
|
133
|
+
>
|
|
134
|
+
<DeleteIcon />
|
|
135
|
+
</IconButton>
|
|
136
|
+
)}
|
|
137
|
+
</Stack>
|
|
138
|
+
))}
|
|
139
|
+
|
|
140
|
+
{totalPages > 1 && (
|
|
141
|
+
<Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
|
|
142
|
+
<Pagination
|
|
143
|
+
count={totalPages}
|
|
144
|
+
page={page}
|
|
145
|
+
onChange={handlePageChange}
|
|
146
|
+
color="primary"
|
|
147
|
+
showFirstButton
|
|
148
|
+
showLastButton
|
|
149
|
+
/>
|
|
150
|
+
</Box>
|
|
151
|
+
)}
|
|
152
|
+
</Box>
|
|
153
|
+
);
|
|
154
|
+
}
|
|
155
|
+
|
|
29
156
|
function ResourceServerForm() {
|
|
30
157
|
const record = useRecordContext();
|
|
31
158
|
const isSystem = record?.is_system;
|
|
@@ -115,31 +242,7 @@ function ResourceServerForm() {
|
|
|
115
242
|
</TabbedForm.Tab>
|
|
116
243
|
|
|
117
244
|
<TabbedForm.Tab label="Scopes">
|
|
118
|
-
<
|
|
119
|
-
<SimpleFormIterator disableAdd={isSystem} disableRemove={isSystem} disableReordering={isSystem}>
|
|
120
|
-
<Stack
|
|
121
|
-
spacing={2}
|
|
122
|
-
direction="row"
|
|
123
|
-
sx={{ width: "100%", alignItems: "flex-start" }}
|
|
124
|
-
>
|
|
125
|
-
<TextInput
|
|
126
|
-
source="value"
|
|
127
|
-
validate={[required()]}
|
|
128
|
-
label="Scope Name"
|
|
129
|
-
helperText="e.g., read:users, write:posts"
|
|
130
|
-
sx={{ flex: 1 }}
|
|
131
|
-
disabled={isSystem}
|
|
132
|
-
/>
|
|
133
|
-
<TextInput
|
|
134
|
-
source="description"
|
|
135
|
-
label="Description"
|
|
136
|
-
helperText="What this scope allows"
|
|
137
|
-
sx={{ flex: 2 }}
|
|
138
|
-
disabled={isSystem}
|
|
139
|
-
/>
|
|
140
|
-
</Stack>
|
|
141
|
-
</SimpleFormIterator>
|
|
142
|
-
</ArrayInput>
|
|
245
|
+
<PaginatedScopesInput disabled={isSystem} />
|
|
143
246
|
</TabbedForm.Tab>
|
|
144
247
|
</TabbedForm>
|
|
145
248
|
);
|
|
@@ -268,6 +268,26 @@ const AddRolePermissionButton = () => {
|
|
|
268
268
|
</li>
|
|
269
269
|
)}
|
|
270
270
|
/>
|
|
271
|
+
{!loadingPermissions && availablePermissions.length > 0 && (
|
|
272
|
+
<Box sx={{ mt: 1, display: "flex", gap: 1 }}>
|
|
273
|
+
<Button
|
|
274
|
+
size="small"
|
|
275
|
+
variant="outlined"
|
|
276
|
+
onClick={() => setSelectedPermissions([...availablePermissions])}
|
|
277
|
+
disabled={selectedPermissions.length === availablePermissions.length}
|
|
278
|
+
>
|
|
279
|
+
Select All ({availablePermissions.length})
|
|
280
|
+
</Button>
|
|
281
|
+
<Button
|
|
282
|
+
size="small"
|
|
283
|
+
variant="outlined"
|
|
284
|
+
onClick={() => setSelectedPermissions([])}
|
|
285
|
+
disabled={selectedPermissions.length === 0}
|
|
286
|
+
>
|
|
287
|
+
Clear Selection
|
|
288
|
+
</Button>
|
|
289
|
+
</Box>
|
|
290
|
+
)}
|
|
271
291
|
</Box>
|
|
272
292
|
|
|
273
293
|
{!loadingPermissions && availablePermissions.length === 0 && (
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import {
|
|
2
|
+
BooleanInput,
|
|
2
3
|
DateField,
|
|
3
4
|
Edit,
|
|
4
5
|
FieldTitle,
|
|
@@ -48,6 +49,13 @@ export function TenantsEdit() {
|
|
|
48
49
|
<ColorInput source="secondary_color" label="Secondary Color" />
|
|
49
50
|
<TextInput source="logo" label="Logo" />
|
|
50
51
|
</TabbedForm.Tab>
|
|
52
|
+
<TabbedForm.Tab label="Settings">
|
|
53
|
+
<BooleanInput
|
|
54
|
+
source="flags.inherit_global_permissions_in_organizations"
|
|
55
|
+
label="Inherit Tenant Permissions in Organizations"
|
|
56
|
+
helperText="When enabled, tenant-level permissions will be inherited when users request organization-scoped tokens"
|
|
57
|
+
/>
|
|
58
|
+
</TabbedForm.Tab>
|
|
51
59
|
</TabbedForm>
|
|
52
60
|
</Edit>
|
|
53
61
|
);
|
|
@@ -988,85 +988,105 @@ const UserRolesTable = ({
|
|
|
988
988
|
|
|
989
989
|
return (
|
|
990
990
|
<Box sx={{ mt: 2 }}>
|
|
991
|
-
<table
|
|
992
|
-
<thead>
|
|
993
|
-
<tr
|
|
994
|
-
<
|
|
995
|
-
|
|
991
|
+
<Box component="table" sx={{ width: "100%", borderCollapse: "collapse" }}>
|
|
992
|
+
<Box component="thead" sx={{ bgcolor: "action.hover" }}>
|
|
993
|
+
<tr>
|
|
994
|
+
<Box
|
|
995
|
+
component="th"
|
|
996
|
+
sx={{
|
|
996
997
|
padding: "12px",
|
|
997
998
|
textAlign: "left",
|
|
998
|
-
borderBottom:
|
|
999
|
+
borderBottom: 1,
|
|
1000
|
+
borderColor: "divider",
|
|
999
1001
|
}}
|
|
1000
1002
|
>
|
|
1001
1003
|
Role
|
|
1002
|
-
</
|
|
1003
|
-
<
|
|
1004
|
-
|
|
1004
|
+
</Box>
|
|
1005
|
+
<Box
|
|
1006
|
+
component="th"
|
|
1007
|
+
sx={{
|
|
1005
1008
|
padding: "12px",
|
|
1006
1009
|
textAlign: "left",
|
|
1007
|
-
borderBottom:
|
|
1010
|
+
borderBottom: 1,
|
|
1011
|
+
borderColor: "divider",
|
|
1008
1012
|
}}
|
|
1009
1013
|
>
|
|
1010
1014
|
Description
|
|
1011
|
-
</
|
|
1012
|
-
<
|
|
1013
|
-
|
|
1015
|
+
</Box>
|
|
1016
|
+
<Box
|
|
1017
|
+
component="th"
|
|
1018
|
+
sx={{
|
|
1014
1019
|
padding: "12px",
|
|
1015
1020
|
textAlign: "left",
|
|
1016
|
-
borderBottom:
|
|
1021
|
+
borderBottom: 1,
|
|
1022
|
+
borderColor: "divider",
|
|
1017
1023
|
}}
|
|
1018
1024
|
>
|
|
1019
1025
|
Organization
|
|
1020
|
-
</
|
|
1021
|
-
<
|
|
1022
|
-
|
|
1026
|
+
</Box>
|
|
1027
|
+
<Box
|
|
1028
|
+
component="th"
|
|
1029
|
+
sx={{
|
|
1023
1030
|
padding: "12px",
|
|
1024
1031
|
textAlign: "left",
|
|
1025
|
-
borderBottom:
|
|
1032
|
+
borderBottom: 1,
|
|
1033
|
+
borderColor: "divider",
|
|
1026
1034
|
}}
|
|
1027
1035
|
>
|
|
1028
1036
|
ID
|
|
1029
|
-
</
|
|
1030
|
-
<
|
|
1031
|
-
|
|
1037
|
+
</Box>
|
|
1038
|
+
<Box
|
|
1039
|
+
component="th"
|
|
1040
|
+
sx={{
|
|
1032
1041
|
padding: "12px",
|
|
1033
1042
|
textAlign: "left",
|
|
1034
|
-
borderBottom:
|
|
1043
|
+
borderBottom: 1,
|
|
1044
|
+
borderColor: "divider",
|
|
1035
1045
|
}}
|
|
1036
1046
|
>
|
|
1037
1047
|
Actions
|
|
1038
|
-
</
|
|
1048
|
+
</Box>
|
|
1039
1049
|
</tr>
|
|
1040
|
-
</
|
|
1050
|
+
</Box>
|
|
1041
1051
|
<tbody>
|
|
1042
1052
|
{roles.map((role) => (
|
|
1043
|
-
<
|
|
1053
|
+
<Box
|
|
1054
|
+
component="tr"
|
|
1044
1055
|
key={`${role.id}-${role.organization_id || "global"}`}
|
|
1045
|
-
|
|
1056
|
+
sx={{ borderBottom: 1, borderColor: "divider" }}
|
|
1046
1057
|
>
|
|
1047
|
-
<td
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1058
|
+
<Box component="td" sx={{ padding: "12px" }}>
|
|
1059
|
+
{role.name}
|
|
1060
|
+
</Box>
|
|
1061
|
+
<Box component="td" sx={{ padding: "12px" }}>
|
|
1062
|
+
{role.description || "-"}
|
|
1063
|
+
</Box>
|
|
1064
|
+
<Box component="td" sx={{ padding: "12px" }}>
|
|
1065
|
+
<Box
|
|
1066
|
+
component="span"
|
|
1067
|
+
sx={{
|
|
1068
|
+
color:
|
|
1069
|
+
role.role_context === "global"
|
|
1070
|
+
? "text.secondary"
|
|
1071
|
+
: "primary.main",
|
|
1053
1072
|
fontStyle:
|
|
1054
1073
|
role.role_context === "global" ? "italic" : "normal",
|
|
1055
1074
|
}}
|
|
1056
1075
|
>
|
|
1057
1076
|
{role.organization_name}
|
|
1058
|
-
</
|
|
1059
|
-
</
|
|
1060
|
-
<
|
|
1061
|
-
|
|
1077
|
+
</Box>
|
|
1078
|
+
</Box>
|
|
1079
|
+
<Box
|
|
1080
|
+
component="td"
|
|
1081
|
+
sx={{
|
|
1062
1082
|
padding: "12px",
|
|
1063
1083
|
fontFamily: "monospace",
|
|
1064
1084
|
fontSize: "0.9em",
|
|
1065
1085
|
}}
|
|
1066
1086
|
>
|
|
1067
1087
|
{role.id}
|
|
1068
|
-
</
|
|
1069
|
-
<td
|
|
1088
|
+
</Box>
|
|
1089
|
+
<Box component="td" sx={{ padding: "12px" }}>
|
|
1070
1090
|
<IconButton
|
|
1071
1091
|
onClick={() => handleRemoveRole(role)}
|
|
1072
1092
|
color="error"
|
|
@@ -1075,21 +1095,26 @@ const UserRolesTable = ({
|
|
|
1075
1095
|
>
|
|
1076
1096
|
<DeleteIcon />
|
|
1077
1097
|
</IconButton>
|
|
1078
|
-
</
|
|
1079
|
-
</
|
|
1098
|
+
</Box>
|
|
1099
|
+
</Box>
|
|
1080
1100
|
))}
|
|
1081
1101
|
{roles.length === 0 && (
|
|
1082
1102
|
<tr>
|
|
1083
|
-
<
|
|
1103
|
+
<Box
|
|
1104
|
+
component="td"
|
|
1084
1105
|
colSpan={5}
|
|
1085
|
-
|
|
1106
|
+
sx={{
|
|
1107
|
+
padding: "24px",
|
|
1108
|
+
textAlign: "center",
|
|
1109
|
+
color: "text.secondary",
|
|
1110
|
+
}}
|
|
1086
1111
|
>
|
|
1087
1112
|
No roles assigned
|
|
1088
|
-
</
|
|
1113
|
+
</Box>
|
|
1089
1114
|
</tr>
|
|
1090
1115
|
)}
|
|
1091
1116
|
</tbody>
|
|
1092
|
-
</
|
|
1117
|
+
</Box>
|
|
1093
1118
|
</Box>
|
|
1094
1119
|
);
|
|
1095
1120
|
};
|
package/vite.config.ts
CHANGED
|
@@ -12,10 +12,11 @@ export default defineConfig({
|
|
|
12
12
|
host: true,
|
|
13
13
|
},
|
|
14
14
|
base: "./",
|
|
15
|
-
//
|
|
15
|
+
// @ts-expect-error
|
|
16
16
|
test: {
|
|
17
17
|
environment: "jsdom", // Set JSDOM as the default test environment
|
|
18
18
|
globals: true, // Make test globals available
|
|
19
|
+
css: true, // Enable CSS processing for tests
|
|
19
20
|
env: {
|
|
20
21
|
VITE_AUTH0_API_URL: "http://localhost:3000",
|
|
21
22
|
VITE_AUTH0_DOMAIN: "test.auth0.com",
|
|
@@ -23,7 +24,15 @@ export default defineConfig({
|
|
|
23
24
|
server: {
|
|
24
25
|
deps: {
|
|
25
26
|
// Workaround for React Admin ES module issues
|
|
26
|
-
inline: [
|
|
27
|
+
inline: [
|
|
28
|
+
"ra-ui-materialui",
|
|
29
|
+
"ra-core",
|
|
30
|
+
"react-admin",
|
|
31
|
+
"@mui/material",
|
|
32
|
+
"@mui/icons-material",
|
|
33
|
+
"react-admin-color-picker",
|
|
34
|
+
"react-color",
|
|
35
|
+
],
|
|
27
36
|
},
|
|
28
37
|
},
|
|
29
38
|
},
|