pixelize-design-library 2.3.1-beta.15 → 2.3.1-beta.16
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/dist/Components/CustomModulesTable/CustomModulesTable.d.ts +4 -0
- package/dist/Components/CustomModulesTable/CustomModulesTable.js +182 -0
- package/dist/Components/CustomModulesTable/CustomModulesTable.test.d.ts +1 -0
- package/dist/Components/CustomModulesTable/CustomModulesTable.test.js +84 -0
- package/dist/Components/CustomModulesTable/CustomModulesTableProps.d.ts +54 -0
- package/dist/Components/CustomModulesTable/CustomModulesTableProps.js +2 -0
- package/dist/Components/CustomModulesTable/DeleteModuleModal.d.ts +4 -0
- package/dist/Components/CustomModulesTable/DeleteModuleModal.js +33 -0
- package/dist/Components/CustomModulesTable/EditModuleModal.d.ts +4 -0
- package/dist/Components/CustomModulesTable/EditModuleModal.js +63 -0
- package/dist/Components/SignInActivityTable/SignInActivityTable.d.ts +4 -0
- package/dist/Components/SignInActivityTable/SignInActivityTable.js +95 -0
- package/dist/Components/SignInActivityTable/SignInActivityTable.test.d.ts +1 -0
- package/dist/Components/SignInActivityTable/SignInActivityTable.test.js +63 -0
- package/dist/Components/SignInActivityTable/SignInActivityTableProps.d.ts +21 -0
- package/dist/Components/SignInActivityTable/SignInActivityTableProps.js +2 -0
- package/dist/index.d.ts +5 -1
- package/dist/index.js +6 -2
- package/package.json +1 -1
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
30
|
+
var ownKeys = function(o) {
|
|
31
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
32
|
+
var ar = [];
|
|
33
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
34
|
+
return ar;
|
|
35
|
+
};
|
|
36
|
+
return ownKeys(o);
|
|
37
|
+
};
|
|
38
|
+
return function (mod) {
|
|
39
|
+
if (mod && mod.__esModule) return mod;
|
|
40
|
+
var result = {};
|
|
41
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
42
|
+
__setModuleDefault(result, mod);
|
|
43
|
+
return result;
|
|
44
|
+
};
|
|
45
|
+
})();
|
|
46
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
47
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
48
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
49
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
50
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
51
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
52
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
56
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
|
|
57
|
+
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
58
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
59
|
+
function step(op) {
|
|
60
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
61
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
62
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
63
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
64
|
+
switch (op[0]) {
|
|
65
|
+
case 0: case 1: t = op; break;
|
|
66
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
67
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
68
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
69
|
+
default:
|
|
70
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
71
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
72
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
73
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
74
|
+
if (t[2]) _.ops.pop();
|
|
75
|
+
_.trys.pop(); continue;
|
|
76
|
+
}
|
|
77
|
+
op = body.call(thisArg, _);
|
|
78
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
79
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
83
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
84
|
+
};
|
|
85
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
86
|
+
var react_1 = __importStar(require("react"));
|
|
87
|
+
var react_2 = require("@chakra-ui/react");
|
|
88
|
+
var lucide_react_1 = require("lucide-react");
|
|
89
|
+
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
90
|
+
var Button_1 = __importDefault(require("../Button/Button"));
|
|
91
|
+
var EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
|
|
92
|
+
var EditModuleModal_1 = __importDefault(require("./EditModuleModal"));
|
|
93
|
+
var DeleteModuleModal_1 = __importDefault(require("./DeleteModuleModal"));
|
|
94
|
+
var DEFAULT_LABELS = {
|
|
95
|
+
title: "Custom Modules",
|
|
96
|
+
moduleName: "Module Name",
|
|
97
|
+
moduleOwner: "Module Owner",
|
|
98
|
+
action: "Action",
|
|
99
|
+
edit: "Edit",
|
|
100
|
+
delete: "Delete",
|
|
101
|
+
noModules: "No custom modules found",
|
|
102
|
+
loading: "Loading...",
|
|
103
|
+
editModuleTitle: "Edit Module Name",
|
|
104
|
+
moduleNamePlaceholder: "Enter module name",
|
|
105
|
+
cancel: "Cancel",
|
|
106
|
+
update: "Update",
|
|
107
|
+
confirmDeletion: "Confirm Deletion",
|
|
108
|
+
deleteConfirmPrefix: "Are you sure you want to delete",
|
|
109
|
+
};
|
|
110
|
+
var CustomModulesTable = function (_a) {
|
|
111
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
112
|
+
var modules = _a.modules, _p = _a.isLoading, isLoading = _p === void 0 ? false : _p, _q = _a.isUpdating, isUpdating = _q === void 0 ? false : _q, _r = _a.isDeleting, isDeleting = _r === void 0 ? false : _r, onUpdateModule = _a.onUpdateModule, onDeleteModule = _a.onDeleteModule, labelOverrides = _a.labels;
|
|
113
|
+
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
114
|
+
var labels = (0, react_1.useMemo)(function () { return (__assign(__assign({}, DEFAULT_LABELS), labelOverrides)); }, [labelOverrides]);
|
|
115
|
+
var _s = (0, react_1.useState)(null), editTarget = _s[0], setEditTarget = _s[1];
|
|
116
|
+
var _t = (0, react_1.useState)(null), deleteTarget = _t[0], setDeleteTarget = _t[1];
|
|
117
|
+
var border = (_e = (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : "#E2E8F0";
|
|
118
|
+
var surface = (_f = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _f !== void 0 ? _f : "#FFFFFF";
|
|
119
|
+
var muted = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#64748B";
|
|
120
|
+
var heading = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : "#1E293B";
|
|
121
|
+
var headBg = (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : "#F8FAFC";
|
|
122
|
+
var thStyle = {
|
|
123
|
+
fontSize: "0.7rem",
|
|
124
|
+
textTransform: "uppercase",
|
|
125
|
+
letterSpacing: "0.04em",
|
|
126
|
+
color: muted,
|
|
127
|
+
borderColor: border,
|
|
128
|
+
py: 3,
|
|
129
|
+
};
|
|
130
|
+
return (react_1.default.createElement(react_2.Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "0 1px 2px rgba(16,24,40,0.05)", overflow: "hidden" },
|
|
131
|
+
react_1.default.createElement(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center" },
|
|
132
|
+
react_1.default.createElement(react_2.Heading, { size: "sm", fontWeight: 600, color: heading }, labels.title)),
|
|
133
|
+
react_1.default.createElement(react_2.Box, { overflowX: "auto" }, isLoading ? (react_1.default.createElement(react_2.VStack, { spacing: 3, p: 4, align: "stretch" }, Array.from({ length: 4 }).map(function (_, idx) { return (react_1.default.createElement(react_2.Skeleton, { key: idx, height: "18px", borderRadius: "md" })); }))) : modules.length === 0 ? (react_1.default.createElement(EmptyState_1.default, { icon: lucide_react_1.Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : (react_1.default.createElement(react_2.Table, { variant: "simple", size: "sm" },
|
|
134
|
+
react_1.default.createElement(react_2.Thead, { bg: headBg },
|
|
135
|
+
react_1.default.createElement(react_2.Tr, null,
|
|
136
|
+
react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.moduleName),
|
|
137
|
+
react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.moduleOwner),
|
|
138
|
+
react_1.default.createElement(react_2.Th, __assign({}, thStyle, { textAlign: "right" }), labels.action))),
|
|
139
|
+
react_1.default.createElement(react_2.Tbody, null, modules.map(function (item) { return (react_1.default.createElement(react_2.Tr, { key: item.module_id, _hover: { bg: headBg }, transition: "background 0.15s ease" },
|
|
140
|
+
react_1.default.createElement(react_2.Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px" },
|
|
141
|
+
react_1.default.createElement(react_2.Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400 },
|
|
142
|
+
react_1.default.createElement(react_2.Text, { noOfLines: 1 }, item.moduleName))),
|
|
143
|
+
react_1.default.createElement(react_2.Td, { borderColor: border, fontSize: "sm", color: muted }, item.ownerLabel || "—"),
|
|
144
|
+
react_1.default.createElement(react_2.Td, { borderColor: border },
|
|
145
|
+
react_1.default.createElement(react_2.HStack, { spacing: 2, justifyContent: "flex-end" },
|
|
146
|
+
react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: react_1.default.createElement(lucide_react_1.Pencil, { size: 13 }), label: labels.edit, onClick: function () { return setEditTarget(item); } }),
|
|
147
|
+
react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: react_1.default.createElement(lucide_react_1.Trash2, { size: 13 }), label: labels.delete, onClick: function () { return setDeleteTarget(item); } }))))); }))))),
|
|
148
|
+
react_1.default.createElement(EditModuleModal_1.default, { isOpen: editTarget !== null, onClose: function () { return setEditTarget(null); }, initialName: (_o = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _o !== void 0 ? _o : "", isLoading: isUpdating, onSubmit: function (name) { return __awaiter(void 0, void 0, void 0, function () {
|
|
149
|
+
return __generator(this, function (_a) {
|
|
150
|
+
switch (_a.label) {
|
|
151
|
+
case 0:
|
|
152
|
+
if (!editTarget) return [3 /*break*/, 2];
|
|
153
|
+
return [4 /*yield*/, (onUpdateModule === null || onUpdateModule === void 0 ? void 0 : onUpdateModule({
|
|
154
|
+
moduleId: editTarget.module_id,
|
|
155
|
+
moduleName: name,
|
|
156
|
+
}))];
|
|
157
|
+
case 1:
|
|
158
|
+
_a.sent();
|
|
159
|
+
_a.label = 2;
|
|
160
|
+
case 2:
|
|
161
|
+
setEditTarget(null);
|
|
162
|
+
return [2 /*return*/];
|
|
163
|
+
}
|
|
164
|
+
});
|
|
165
|
+
}); }, labels: labels }),
|
|
166
|
+
react_1.default.createElement(DeleteModuleModal_1.default, { isOpen: deleteTarget !== null, onClose: function () { return setDeleteTarget(null); }, moduleName: deleteTarget === null || deleteTarget === void 0 ? void 0 : deleteTarget.moduleName, isLoading: isDeleting, onConfirm: function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
167
|
+
return __generator(this, function (_a) {
|
|
168
|
+
switch (_a.label) {
|
|
169
|
+
case 0:
|
|
170
|
+
if (!deleteTarget) return [3 /*break*/, 2];
|
|
171
|
+
return [4 /*yield*/, (onDeleteModule === null || onDeleteModule === void 0 ? void 0 : onDeleteModule(deleteTarget.module_id))];
|
|
172
|
+
case 1:
|
|
173
|
+
_a.sent();
|
|
174
|
+
_a.label = 2;
|
|
175
|
+
case 2:
|
|
176
|
+
setDeleteTarget(null);
|
|
177
|
+
return [2 /*return*/];
|
|
178
|
+
}
|
|
179
|
+
});
|
|
180
|
+
}); }, labels: labels })));
|
|
181
|
+
};
|
|
182
|
+
exports.default = CustomModulesTable;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "@testing-library/jest-dom";
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
var react_1 = __importDefault(require("react"));
|
|
7
|
+
var react_2 = require("@testing-library/react");
|
|
8
|
+
require("@testing-library/jest-dom");
|
|
9
|
+
var react_3 = require("@chakra-ui/react");
|
|
10
|
+
var CustomModulesTable_1 = __importDefault(require("./CustomModulesTable"));
|
|
11
|
+
jest.mock("../../Theme/useCustomTheme", function () { return ({
|
|
12
|
+
useCustomTheme: function () { return ({
|
|
13
|
+
colors: {
|
|
14
|
+
white: "#ffffff",
|
|
15
|
+
gray: {
|
|
16
|
+
50: "#f8fafc",
|
|
17
|
+
100: "#f0f0f0",
|
|
18
|
+
200: "#e2e8f0",
|
|
19
|
+
500: "#64748b",
|
|
20
|
+
600: "#475569",
|
|
21
|
+
800: "#1e293b",
|
|
22
|
+
},
|
|
23
|
+
primary: { 50: "#eef2ff", 500: "#6366f1", 600: "#4f46e5" },
|
|
24
|
+
boxborder: { 200: "#e2e8f0" },
|
|
25
|
+
red: { 50: "#fef2f2", 500: "#ef4444" },
|
|
26
|
+
semantic: { error: { 50: "#fef2f2", 500: "#ef4444" } },
|
|
27
|
+
},
|
|
28
|
+
}); },
|
|
29
|
+
}); });
|
|
30
|
+
beforeAll(function () {
|
|
31
|
+
Object.defineProperty(window, "matchMedia", {
|
|
32
|
+
writable: true,
|
|
33
|
+
configurable: true,
|
|
34
|
+
value: jest.fn().mockImplementation(function (query) { return ({
|
|
35
|
+
matches: false,
|
|
36
|
+
media: query,
|
|
37
|
+
onchange: null,
|
|
38
|
+
addListener: jest.fn(),
|
|
39
|
+
removeListener: jest.fn(),
|
|
40
|
+
addEventListener: jest.fn(),
|
|
41
|
+
removeEventListener: jest.fn(),
|
|
42
|
+
dispatchEvent: jest.fn(),
|
|
43
|
+
}); }),
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
var modules = [
|
|
47
|
+
{ module_id: 1, moduleName: "Projects", ownerLabel: "Aisha Khan" },
|
|
48
|
+
{ module_id: 2, moduleName: "Invoices", ownerLabel: "Marcus Reed" },
|
|
49
|
+
];
|
|
50
|
+
var renderWithChakra = function (ui) {
|
|
51
|
+
return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
|
|
52
|
+
};
|
|
53
|
+
describe("CustomModulesTable", function () {
|
|
54
|
+
it("renders the module rows", function () {
|
|
55
|
+
renderWithChakra(react_1.default.createElement(CustomModulesTable_1.default, { modules: modules }));
|
|
56
|
+
expect(react_2.screen.getByText("Custom Modules")).toBeInTheDocument();
|
|
57
|
+
expect(react_2.screen.getByText("Projects")).toBeInTheDocument();
|
|
58
|
+
expect(react_2.screen.getByText("Invoices")).toBeInTheDocument();
|
|
59
|
+
});
|
|
60
|
+
it("shows an empty state when there are no modules", function () {
|
|
61
|
+
renderWithChakra(react_1.default.createElement(CustomModulesTable_1.default, { modules: [] }));
|
|
62
|
+
expect(react_2.screen.getByText("No custom modules found")).toBeInTheDocument();
|
|
63
|
+
});
|
|
64
|
+
it("opens the edit modal and submits the new name", function () {
|
|
65
|
+
var onUpdateModule = jest.fn();
|
|
66
|
+
renderWithChakra(react_1.default.createElement(CustomModulesTable_1.default, { modules: modules, onUpdateModule: onUpdateModule }));
|
|
67
|
+
react_2.fireEvent.click(react_2.screen.getAllByText("Edit")[0]);
|
|
68
|
+
expect(react_2.screen.getByText("Edit Module Name")).toBeInTheDocument();
|
|
69
|
+
react_2.fireEvent.click(react_2.screen.getByText("Update"));
|
|
70
|
+
expect(onUpdateModule).toHaveBeenCalledWith({
|
|
71
|
+
moduleId: 1,
|
|
72
|
+
moduleName: "Projects",
|
|
73
|
+
});
|
|
74
|
+
});
|
|
75
|
+
it("opens the delete modal and confirms", function () {
|
|
76
|
+
var onDeleteModule = jest.fn();
|
|
77
|
+
renderWithChakra(react_1.default.createElement(CustomModulesTable_1.default, { modules: modules, onDeleteModule: onDeleteModule }));
|
|
78
|
+
react_2.fireEvent.click(react_2.screen.getAllByText("Delete")[0]);
|
|
79
|
+
expect(react_2.screen.getByText("Confirm Deletion")).toBeInTheDocument();
|
|
80
|
+
var dialog = react_2.screen.getByRole("dialog");
|
|
81
|
+
react_2.fireEvent.click((0, react_2.within)(dialog).getByText("Delete"));
|
|
82
|
+
expect(onDeleteModule).toHaveBeenCalledWith(1);
|
|
83
|
+
});
|
|
84
|
+
});
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
export type ModuleItem = {
|
|
2
|
+
module_id: number;
|
|
3
|
+
moduleName: string;
|
|
4
|
+
ownerLabel?: string;
|
|
5
|
+
};
|
|
6
|
+
export type UpdateModulePayload = {
|
|
7
|
+
moduleId: number;
|
|
8
|
+
moduleName: string;
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* All user-facing strings. Provide translated values from the host app; every
|
|
12
|
+
* key has a sensible English default so the component works standalone.
|
|
13
|
+
*/
|
|
14
|
+
export type CustomModulesTableLabels = {
|
|
15
|
+
title?: string;
|
|
16
|
+
moduleName?: string;
|
|
17
|
+
moduleOwner?: string;
|
|
18
|
+
action?: string;
|
|
19
|
+
edit?: string;
|
|
20
|
+
delete?: string;
|
|
21
|
+
noModules?: string;
|
|
22
|
+
loading?: string;
|
|
23
|
+
editModuleTitle?: string;
|
|
24
|
+
moduleNamePlaceholder?: string;
|
|
25
|
+
cancel?: string;
|
|
26
|
+
update?: string;
|
|
27
|
+
confirmDeletion?: string;
|
|
28
|
+
deleteConfirmPrefix?: string;
|
|
29
|
+
};
|
|
30
|
+
export interface CustomModulesTableProps {
|
|
31
|
+
modules: ModuleItem[];
|
|
32
|
+
isLoading?: boolean;
|
|
33
|
+
isUpdating?: boolean;
|
|
34
|
+
isDeleting?: boolean;
|
|
35
|
+
onUpdateModule?: (payload: UpdateModulePayload) => void | Promise<void>;
|
|
36
|
+
onDeleteModule?: (moduleId: number) => void | Promise<void>;
|
|
37
|
+
labels?: CustomModulesTableLabels;
|
|
38
|
+
}
|
|
39
|
+
export interface EditModuleModalProps {
|
|
40
|
+
isOpen: boolean;
|
|
41
|
+
onClose: () => void;
|
|
42
|
+
initialName: string;
|
|
43
|
+
isLoading?: boolean;
|
|
44
|
+
onSubmit: (name: string) => void | Promise<void>;
|
|
45
|
+
labels: Required<Pick<CustomModulesTableLabels, "editModuleTitle" | "moduleNamePlaceholder" | "cancel" | "update">>;
|
|
46
|
+
}
|
|
47
|
+
export interface DeleteModuleModalProps {
|
|
48
|
+
isOpen: boolean;
|
|
49
|
+
onClose: () => void;
|
|
50
|
+
moduleName?: string;
|
|
51
|
+
isLoading?: boolean;
|
|
52
|
+
onConfirm: () => void;
|
|
53
|
+
labels: Required<Pick<CustomModulesTableLabels, "confirmDeletion" | "deleteConfirmPrefix" | "cancel" | "delete">>;
|
|
54
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
var react_1 = __importDefault(require("react"));
|
|
7
|
+
var react_2 = require("@chakra-ui/react");
|
|
8
|
+
var lucide_react_1 = require("lucide-react");
|
|
9
|
+
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
10
|
+
var Button_1 = __importDefault(require("../Button/Button"));
|
|
11
|
+
var DeleteModuleModal = function (_a) {
|
|
12
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
13
|
+
var isOpen = _a.isOpen, onClose = _a.onClose, moduleName = _a.moduleName, isLoading = _a.isLoading, onConfirm = _a.onConfirm, labels = _a.labels;
|
|
14
|
+
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
15
|
+
return (react_1.default.createElement(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true },
|
|
16
|
+
react_1.default.createElement(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }),
|
|
17
|
+
react_1.default.createElement(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden" },
|
|
18
|
+
react_1.default.createElement(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], display: "flex", alignItems: "center", gap: 3 },
|
|
19
|
+
react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_j = (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : (_h = colors === null || colors === void 0 ? void 0 : colors.red) === null || _h === void 0 ? void 0 : _h[50]) !== null && _j !== void 0 ? _j : "#FEF2F2", color: (_p = (_m = (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _k === void 0 ? void 0 : _k.error) === null || _l === void 0 ? void 0 : _l[500]) !== null && _m !== void 0 ? _m : (_o = colors === null || colors === void 0 ? void 0 : colors.red) === null || _o === void 0 ? void 0 : _o[500]) !== null && _p !== void 0 ? _p : "#EF4444" },
|
|
20
|
+
react_1.default.createElement(lucide_react_1.AlertTriangle, { size: 18 })),
|
|
21
|
+
react_1.default.createElement(react_2.Text, { fontSize: "1.05rem", fontWeight: 600 }, labels.confirmDeletion)),
|
|
22
|
+
react_1.default.createElement(react_2.ModalCloseButton, null),
|
|
23
|
+
react_1.default.createElement(react_2.ModalBody, { py: 6 },
|
|
24
|
+
react_1.default.createElement(react_2.Text, { color: (_q = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _q === void 0 ? void 0 : _q[600], fontSize: "sm", mb: 5 },
|
|
25
|
+
labels.deleteConfirmPrefix,
|
|
26
|
+
" ",
|
|
27
|
+
react_1.default.createElement(react_2.Text, { as: "span", fontWeight: 600, color: (_r = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _r === void 0 ? void 0 : _r[800] }, moduleName),
|
|
28
|
+
"?"),
|
|
29
|
+
react_1.default.createElement(react_2.HStack, { justifyContent: "flex-end", spacing: 3 },
|
|
30
|
+
react_1.default.createElement(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }),
|
|
31
|
+
react_1.default.createElement(Button_1.default, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: react_1.default.createElement(lucide_react_1.Trash2, { size: 15 }) }))))));
|
|
32
|
+
};
|
|
33
|
+
exports.default = DeleteModuleModal;
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
+
};
|
|
38
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
+
var react_1 = __importStar(require("react"));
|
|
40
|
+
var react_2 = require("@chakra-ui/react");
|
|
41
|
+
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
42
|
+
var Button_1 = __importDefault(require("../Button/Button"));
|
|
43
|
+
var EditModuleModal = function (_a) {
|
|
44
|
+
var _b, _c, _d, _e, _f, _g;
|
|
45
|
+
var isOpen = _a.isOpen, onClose = _a.onClose, initialName = _a.initialName, isLoading = _a.isLoading, onSubmit = _a.onSubmit, labels = _a.labels;
|
|
46
|
+
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
47
|
+
var _h = (0, react_1.useState)(initialName), name = _h[0], setName = _h[1];
|
|
48
|
+
(0, react_1.useEffect)(function () {
|
|
49
|
+
if (isOpen)
|
|
50
|
+
setName(initialName);
|
|
51
|
+
}, [isOpen, initialName]);
|
|
52
|
+
return (react_1.default.createElement(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true },
|
|
53
|
+
react_1.default.createElement(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }),
|
|
54
|
+
react_1.default.createElement(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden" },
|
|
55
|
+
react_1.default.createElement(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], fontSize: "1.05rem", fontWeight: 600 }, labels.editModuleTitle),
|
|
56
|
+
react_1.default.createElement(react_2.ModalCloseButton, null),
|
|
57
|
+
react_1.default.createElement(react_2.ModalBody, { py: 6 },
|
|
58
|
+
react_1.default.createElement(react_2.Input, { value: name, onChange: function (e) { return setName(e.target.value); }, placeholder: labels.moduleNamePlaceholder, borderColor: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _e === void 0 ? void 0 : _e[200]) !== null && _f !== void 0 ? _f : (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[200], mb: 5 }),
|
|
59
|
+
react_1.default.createElement(react_2.HStack, { justifyContent: "flex-end", spacing: 3 },
|
|
60
|
+
react_1.default.createElement(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }),
|
|
61
|
+
react_1.default.createElement(Button_1.default, { label: labels.update, onClick: function () { return onSubmit(name.trim()); }, colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() }))))));
|
|
62
|
+
};
|
|
63
|
+
exports.default = EditModuleModal;
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
30
|
+
var ownKeys = function(o) {
|
|
31
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
32
|
+
var ar = [];
|
|
33
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
34
|
+
return ar;
|
|
35
|
+
};
|
|
36
|
+
return ownKeys(o);
|
|
37
|
+
};
|
|
38
|
+
return function (mod) {
|
|
39
|
+
if (mod && mod.__esModule) return mod;
|
|
40
|
+
var result = {};
|
|
41
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
42
|
+
__setModuleDefault(result, mod);
|
|
43
|
+
return result;
|
|
44
|
+
};
|
|
45
|
+
})();
|
|
46
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
47
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
48
|
+
};
|
|
49
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
50
|
+
var react_1 = __importStar(require("react"));
|
|
51
|
+
var react_2 = require("@chakra-ui/react");
|
|
52
|
+
var lucide_react_1 = require("lucide-react");
|
|
53
|
+
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
54
|
+
var EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
|
|
55
|
+
var DEFAULT_LABELS = {
|
|
56
|
+
title: "Recent Sign-in Devices",
|
|
57
|
+
browser: "Browser",
|
|
58
|
+
device: "Device",
|
|
59
|
+
recentActivity: "Recent Activity",
|
|
60
|
+
noActivity: "No recent sign-in activity",
|
|
61
|
+
};
|
|
62
|
+
var SignInActivityTable = function (_a) {
|
|
63
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
64
|
+
var devices = _a.devices, _o = _a.isLoading, isLoading = _o === void 0 ? false : _o, labelOverrides = _a.labels;
|
|
65
|
+
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
66
|
+
var labels = (0, react_1.useMemo)(function () { return (__assign(__assign({}, DEFAULT_LABELS), labelOverrides)); }, [labelOverrides]);
|
|
67
|
+
var border = (_e = (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : "#E2E8F0";
|
|
68
|
+
var surface = (_f = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _f !== void 0 ? _f : "#FFFFFF";
|
|
69
|
+
var muted = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#64748B";
|
|
70
|
+
var heading = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : "#1E293B";
|
|
71
|
+
var headBg = (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : "#F8FAFC";
|
|
72
|
+
var thStyle = {
|
|
73
|
+
fontSize: "0.7rem",
|
|
74
|
+
textTransform: "uppercase",
|
|
75
|
+
letterSpacing: "0.04em",
|
|
76
|
+
color: muted,
|
|
77
|
+
borderColor: border,
|
|
78
|
+
py: 3,
|
|
79
|
+
};
|
|
80
|
+
return (react_1.default.createElement(react_2.Box, { mt: 4, backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "0 1px 2px rgba(16,24,40,0.05)", overflow: "hidden" },
|
|
81
|
+
react_1.default.createElement(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center" },
|
|
82
|
+
react_1.default.createElement(react_2.Heading, { size: "sm", fontWeight: 600, color: heading }, labels.title)),
|
|
83
|
+
react_1.default.createElement(react_2.Box, { overflowX: "auto" }, isLoading ? (react_1.default.createElement(react_2.VStack, { spacing: 3, p: 4, align: "stretch" }, Array.from({ length: 4 }).map(function (_, idx) { return (react_1.default.createElement(react_2.Skeleton, { key: idx, height: "18px", borderRadius: "md" })); }))) : devices.length === 0 ? (react_1.default.createElement(EmptyState_1.default, { icon: lucide_react_1.MonitorSmartphone, title: labels.noActivity, size: "sm", minH: "160px" })) : (react_1.default.createElement(react_2.Table, { variant: "simple", size: "sm" },
|
|
84
|
+
react_1.default.createElement(react_2.Thead, { bg: headBg },
|
|
85
|
+
react_1.default.createElement(react_2.Tr, null,
|
|
86
|
+
react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.browser),
|
|
87
|
+
react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.device),
|
|
88
|
+
react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.recentActivity))),
|
|
89
|
+
react_1.default.createElement(react_2.Tbody, null, devices.map(function (device, index) { return (react_1.default.createElement(react_2.Tr, { key: index, _hover: { bg: headBg }, transition: "background 0.15s ease" },
|
|
90
|
+
react_1.default.createElement(react_2.Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading }, device.browser || "—"),
|
|
91
|
+
react_1.default.createElement(react_2.Td, { borderColor: border, fontSize: "sm", color: muted }, device.device),
|
|
92
|
+
react_1.default.createElement(react_2.Td, { borderColor: border, fontSize: "sm", color: muted },
|
|
93
|
+
react_1.default.createElement(react_2.Text, null, device.activity)))); })))))));
|
|
94
|
+
};
|
|
95
|
+
exports.default = SignInActivityTable;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "@testing-library/jest-dom";
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
var react_1 = __importDefault(require("react"));
|
|
7
|
+
var react_2 = require("@testing-library/react");
|
|
8
|
+
require("@testing-library/jest-dom");
|
|
9
|
+
var react_3 = require("@chakra-ui/react");
|
|
10
|
+
var SignInActivityTable_1 = __importDefault(require("./SignInActivityTable"));
|
|
11
|
+
jest.mock("../../Theme/useCustomTheme", function () { return ({
|
|
12
|
+
useCustomTheme: function () { return ({
|
|
13
|
+
colors: {
|
|
14
|
+
white: "#ffffff",
|
|
15
|
+
gray: {
|
|
16
|
+
50: "#f8fafc",
|
|
17
|
+
100: "#f0f0f0",
|
|
18
|
+
200: "#e2e8f0",
|
|
19
|
+
500: "#64748b",
|
|
20
|
+
600: "#475569",
|
|
21
|
+
800: "#1e293b",
|
|
22
|
+
},
|
|
23
|
+
primary: { 50: "#eef2ff", 500: "#6366f1" },
|
|
24
|
+
boxborder: { 200: "#e2e8f0" },
|
|
25
|
+
},
|
|
26
|
+
}); },
|
|
27
|
+
}); });
|
|
28
|
+
beforeAll(function () {
|
|
29
|
+
Object.defineProperty(window, "matchMedia", {
|
|
30
|
+
writable: true,
|
|
31
|
+
configurable: true,
|
|
32
|
+
value: jest.fn().mockImplementation(function (query) { return ({
|
|
33
|
+
matches: false,
|
|
34
|
+
media: query,
|
|
35
|
+
onchange: null,
|
|
36
|
+
addListener: jest.fn(),
|
|
37
|
+
removeListener: jest.fn(),
|
|
38
|
+
addEventListener: jest.fn(),
|
|
39
|
+
removeEventListener: jest.fn(),
|
|
40
|
+
dispatchEvent: jest.fn(),
|
|
41
|
+
}); }),
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
var devices = [
|
|
45
|
+
{ browser: "Chrome", device: "MacBook Pro", activity: "2 minutes ago" },
|
|
46
|
+
{ browser: "Safari", device: "iPhone 15", activity: "Yesterday" },
|
|
47
|
+
];
|
|
48
|
+
var renderWithChakra = function (ui) {
|
|
49
|
+
return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
|
|
50
|
+
};
|
|
51
|
+
describe("SignInActivityTable", function () {
|
|
52
|
+
it("renders the device rows", function () {
|
|
53
|
+
renderWithChakra(react_1.default.createElement(SignInActivityTable_1.default, { devices: devices }));
|
|
54
|
+
expect(react_2.screen.getByText("Recent Sign-in Devices")).toBeInTheDocument();
|
|
55
|
+
expect(react_2.screen.getByText("Chrome")).toBeInTheDocument();
|
|
56
|
+
expect(react_2.screen.getByText("MacBook Pro")).toBeInTheDocument();
|
|
57
|
+
expect(react_2.screen.getByText("2 minutes ago")).toBeInTheDocument();
|
|
58
|
+
});
|
|
59
|
+
it("shows an empty state when there is no activity", function () {
|
|
60
|
+
renderWithChakra(react_1.default.createElement(SignInActivityTable_1.default, { devices: [] }));
|
|
61
|
+
expect(react_2.screen.getByText("No recent sign-in activity")).toBeInTheDocument();
|
|
62
|
+
});
|
|
63
|
+
});
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export type SignInDevice = {
|
|
2
|
+
browser: string;
|
|
3
|
+
device: string;
|
|
4
|
+
activity: string;
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* All user-facing strings. Provide translated values from the host app; every
|
|
8
|
+
* key has a sensible English default so the component works standalone.
|
|
9
|
+
*/
|
|
10
|
+
export type SignInActivityLabels = {
|
|
11
|
+
title?: string;
|
|
12
|
+
browser?: string;
|
|
13
|
+
device?: string;
|
|
14
|
+
recentActivity?: string;
|
|
15
|
+
noActivity?: string;
|
|
16
|
+
};
|
|
17
|
+
export interface SignInActivityTableProps {
|
|
18
|
+
devices: SignInDevice[];
|
|
19
|
+
isLoading?: boolean;
|
|
20
|
+
labels?: SignInActivityLabels;
|
|
21
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -74,7 +74,11 @@ import OrgSwitcher from "./Components/OrgSwitcher/OrgSwitcher";
|
|
|
74
74
|
import UpgradeButton from "./Components/UpgradeButton/UpgradeButton";
|
|
75
75
|
import UserDetails from "./Components/UserDetails/UserDetails";
|
|
76
76
|
import RolesPermission from "./Components/RolesPermission/RolesPermission";
|
|
77
|
-
|
|
77
|
+
import CustomModulesTable from "./Components/CustomModulesTable/CustomModulesTable";
|
|
78
|
+
import SignInActivityTable from "./Components/SignInActivityTable/SignInActivityTable";
|
|
79
|
+
export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, UpgradeButton, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
|
|
78
80
|
export default withTheme;
|
|
79
81
|
export type { UserDetailsProps, UserDetailsLabels, UserListItem, SelectedUserDetail, UserDetailRow, RoleOption, AddUserFormValues, ChangeRoleSubmitPayload, } from "./Components/UserDetails/UserDetailsProps";
|
|
80
82
|
export type { RolesPermissionProps, RolesPermissionLabels, RolesPermissionView, RolesPermissionMode, Permission, PermissionKey, RoleData, } from "./Components/RolesPermission/RolesPermissionProps";
|
|
83
|
+
export type { CustomModulesTableProps, CustomModulesTableLabels, ModuleItem, UpdateModulePayload, } from "./Components/CustomModulesTable/CustomModulesTableProps";
|
|
84
|
+
export type { SignInActivityTableProps, SignInActivityLabels, SignInDevice, } from "./Components/SignInActivityTable/SignInActivityTableProps";
|
package/dist/index.js
CHANGED
|
@@ -37,8 +37,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
37
37
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
38
|
};
|
|
39
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
-
exports.
|
|
41
|
-
exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = void 0;
|
|
40
|
+
exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.SignInActivityTable = exports.CustomModulesTable = exports.RolesPermission = exports.UserDetails = exports.UpgradeButton = exports.OrgSwitcher = exports.StageItem = exports.StageProgress = exports.CopyButton = exports.ScrollToTop = exports.PdfViewer = exports.MoreItems = exports.LazyWrapper = exports.FormWrapper = exports.FilterSidebar = exports.FileUploader = exports.FileUpload = exports.FilePreviewTrigger = exports.FilePreview = exports.FieldSelectModal = exports.EmptyState = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
|
|
41
|
+
exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = void 0;
|
|
42
42
|
var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
|
|
43
43
|
exports.Accordian = Accordion_1.default;
|
|
44
44
|
var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
|
|
@@ -203,4 +203,8 @@ var UserDetails_1 = __importDefault(require("./Components/UserDetails/UserDetail
|
|
|
203
203
|
exports.UserDetails = UserDetails_1.default;
|
|
204
204
|
var RolesPermission_1 = __importDefault(require("./Components/RolesPermission/RolesPermission"));
|
|
205
205
|
exports.RolesPermission = RolesPermission_1.default;
|
|
206
|
+
var CustomModulesTable_1 = __importDefault(require("./Components/CustomModulesTable/CustomModulesTable"));
|
|
207
|
+
exports.CustomModulesTable = CustomModulesTable_1.default;
|
|
208
|
+
var SignInActivityTable_1 = __importDefault(require("./Components/SignInActivityTable/SignInActivityTable"));
|
|
209
|
+
exports.SignInActivityTable = SignInActivityTable_1.default;
|
|
206
210
|
exports.default = withTheme_1.default;
|