@syngrisi/syngrisi
Version:
Syngrisi - Visual Testing Tool
1,420 lines (1,419 loc) • 939 kB
JavaScript
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => {
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
return value;
};
import { r as react, X as queryString, b as jsx, j as jsxs, P as Paper, g as Title, Y as Stack, T as Text, G as Group, h as Button, Z as Epe, k as ky, a as config, u as useQuery, d as useMantineTheme, q as TextInput, V as ActionIcon, n as lAe, _ as Pj, c as createStyles, y as useLocalStorage, e as Container, $ as Dge, a0 as Fragment, a1 as useQueryClient, l as log, a2 as Tooltip, a3 as CK, a4 as Loader, a5 as React, a6 as Transition, a7 as Xfe, a8 as rze, f as useDocumentTitle, A as Anchor, a9 as zV, aa as ea, ab as Ol, ac as ua, ad as RX, ae as rWe, af as UZ, s as Checkbox, ag as getAugmentedNamespace, D as useHotkeys, ah as lDe, ai as dDe, aj as Pbe, ak as Cbe, al as pi, am as Lbe, an as zb, ao as IMe, ap as DMe, aq as qF, L as LoadingOverlay, ar as LHe, B as Box, o as useSearchParams, as as Y, Q as QueryClient, at as useNavigate, t as GCe, v as Nie, E as QueryClientProvider, F as ColorSchemeProvider, M as MantineProvider, au as Routes, av as Route, H as createRoot, I as BrowserRouter } from "./use-form.2c921e76.js";
import { _ as _inheritsLoose, C as CopyButton, u as useQueryParams, S as StringParam, J as JsonParam, G as GenericService, e as errorMsg, a as useDisclosure, b as useClickOutside, c as escapeRegExp, P as Popover, d as ScrollArea, f as Chip, D as Divider, l as links, H as Header$1, g as HeaderLogo, h as SafeSelect, o as openSpotlight, K as Kbd, i as useOs, U as UserMenu, B as Breadcrumbs, j as useMutation, s as successMsg, M as Modal, R as RingProgress, L as List, k as Skeleton, m as useInView, F as FocusTrap, n as getNavigationItem, p as useToggle, q as useInfinityScroll, N as Navbar, r as Badge, A as Affix, t as ActionPopoverIcon, v as UserHooks, T as ThemeIcon, w as getStatusMessage, x as encodeQueryParams, I as Image$1, y as Card, z as Collapse, E as Burger, O as useInfiniteQuery, Q as SegmentedControl, V as Table, W as useInputState, X as RelativeDrawer, Y as LogicalGroup, Z as uuid, $ as useNavProgressFetchEffect, a0 as AppShell, a1 as ReactQueryDevtools, a2 as useColorScheme, a3 as navigationData, a4 as SpotlightProvider, a5 as NotificationsProvider, a6 as NavigationProgress, a7 as QueryParamProvider, a8 as ReactRouter6Adapter } from "./LogicalGroup.0c7b572b.js";
function useDebouncedValue(value, wait, options = { leading: false }) {
const [_value, setValue] = react.exports.useState(value);
const mountedRef = react.exports.useRef(false);
const timeoutRef = react.exports.useRef(null);
const cooldownRef = react.exports.useRef(false);
const cancel = () => window.clearTimeout(timeoutRef.current);
react.exports.useEffect(() => {
if (mountedRef.current) {
if (!cooldownRef.current && options.leading) {
cooldownRef.current = true;
setValue(value);
} else {
cancel();
timeoutRef.current = window.setTimeout(() => {
cooldownRef.current = false;
setValue(value);
}, wait);
}
}
}, [value, options.leading, wait]);
react.exports.useEffect(() => {
mountedRef.current = true;
return cancel;
}, []);
return [_value, cancel];
}
const getSearchParamsObject = (params) => queryString.parse(params.toString());
const SearchParams = {
changeSorting: (searchParams, setParams, sortItemName, sortDirection) => {
const currentObj = getSearchParamsObject(searchParams);
setParams(queryString.stringify({ ...currentObj, sortBy: `${sortItemName}:${sortDirection}` }));
},
changeFiltering: (searchParams, setParams, filter) => {
const currentObj = getSearchParamsObject(searchParams);
const newParamsObj = { ...currentObj, filter };
setParams(queryString.stringify(newParamsObj));
}
};
var changedArray = function changedArray2(a3, b2) {
if (a3 === void 0) {
a3 = [];
}
if (b2 === void 0) {
b2 = [];
}
return a3.length !== b2.length || a3.some(function(item, index) {
return !Object.is(item, b2[index]);
});
};
var initialState = {
error: null
};
var ErrorBoundary = /* @__PURE__ */ function(_React$Component) {
_inheritsLoose(ErrorBoundary2, _React$Component);
function ErrorBoundary2() {
var _this;
for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
_args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
_this.state = initialState;
_this.resetErrorBoundary = function() {
var _this$props;
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
_this.props.onReset == null ? void 0 : (_this$props = _this.props).onReset.apply(_this$props, args);
_this.reset();
};
return _this;
}
ErrorBoundary2.getDerivedStateFromError = function getDerivedStateFromError(error) {
return {
error
};
};
var _proto = ErrorBoundary2.prototype;
_proto.reset = function reset() {
this.setState(initialState);
};
_proto.componentDidCatch = function componentDidCatch(error, info) {
var _this$props$onError, _this$props2;
(_this$props$onError = (_this$props2 = this.props).onError) == null ? void 0 : _this$props$onError.call(_this$props2, error, info);
};
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
var error = this.state.error;
var resetKeys = this.props.resetKeys;
if (error !== null && prevState.error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
var _this$props$onResetKe, _this$props3;
(_this$props$onResetKe = (_this$props3 = this.props).onResetKeysChange) == null ? void 0 : _this$props$onResetKe.call(_this$props3, prevProps.resetKeys, resetKeys);
this.reset();
}
};
_proto.render = function render() {
var error = this.state.error;
var _this$props4 = this.props, fallbackRender = _this$props4.fallbackRender, FallbackComponent = _this$props4.FallbackComponent, fallback = _this$props4.fallback;
if (error !== null) {
var _props = {
error,
resetErrorBoundary: this.resetErrorBoundary
};
if (/* @__PURE__ */ react.exports.isValidElement(fallback)) {
return fallback;
} else if (typeof fallbackRender === "function") {
return fallbackRender(_props);
} else if (FallbackComponent) {
return /* @__PURE__ */ jsx(FallbackComponent, {
..._props
});
} else {
throw new Error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");
}
}
return this.props.children;
};
return ErrorBoundary2;
}(react.exports.Component);
function ErrorFallback({
error,
resetErrorBoundary
}) {
const [errorDetails] = react.exports.useState(`Url: ${window.location.href}
Message: ${error.message}
Stacktrace: ${error.stack}
`);
return /* @__PURE__ */ jsxs(Paper, {
role: "alert",
children: [/* @__PURE__ */ jsx(Title, {
children: "Something went wrong"
}), /* @__PURE__ */ jsxs(Stack, {
align: "center",
spacing: 8,
children: [/* @__PURE__ */ jsx(Text, {
size: "lg",
align: "center",
children: "Try to:"
}), /* @__PURE__ */ jsxs(Group, {
position: "center",
children: [/* @__PURE__ */ jsx(Button, {
leftIcon: /* @__PURE__ */ jsx(Epe, {}),
variant: "outline",
size: "md",
onClick: () => {
resetErrorBoundary();
window.navigation.reload();
},
children: "Refresh"
}), /* @__PURE__ */ jsx(Text, {
size: "lg",
align: "center",
children: "or"
}), /* @__PURE__ */ jsx(Button, {
variant: "outline",
size: "md",
onClick: () => {
resetErrorBoundary();
document.location = "/";
},
children: "Go to main page"
})]
}), /* @__PURE__ */ jsx(Group, {
position: "left",
pt: 30,
children: /* @__PURE__ */ jsx(Text, {
children: "Error Details:"
})
}), /* @__PURE__ */ jsx("pre", {
style: {
backgroundColor: "black",
color: "white",
padding: "10px"
},
children: errorDetails
})]
}), /* @__PURE__ */ jsx(Group, {
position: "center",
children: /* @__PURE__ */ jsx(CopyButton, {
value: errorDetails,
children: ({
copied,
copy
}) => /* @__PURE__ */ jsx(Button, {
color: copied ? "teal" : "blue",
onClick: copy,
children: copied ? "Copied" : "Copy Error Details"
})
})
})]
});
}
const ChecksService = {
async acceptCheck({ check, newBaselineId }) {
try {
const resp = await ky(`${config.baseUri}/v1/checks/accept/${check._id}`, {
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
baselineId: newBaselineId
}),
method: "PUT"
});
if (resp.ok) {
return resp.json();
}
} catch (e2) {
throw new Error(`cannot accept check: '${JSON.stringify(check, null, "/t")}',
baseline: '${newBaselineId}', error: '${e2}'}`);
}
},
async removeCheck({ id }) {
try {
const resp = await ky(`${config.baseUri}/v1/checks/${id}`, {
headers: { "Content-Type": "application/json" },
method: "DELETE"
});
if (resp.ok) {
return resp.json();
}
} catch (e2) {
throw new Error(`Cannot remove check: '${id}', error: '${e2}'`);
}
}
};
const RunsService = {
async remove({ id }) {
try {
const resp = await ky(`${config.baseUri}/v1/runs/${id}`, {
headers: { "Content-Type": "application/json" },
method: "DELETE"
});
if (resp.ok) {
return resp.json();
}
} catch (e2) {
throw new Error(`Cannot remove run: '${id}', error: '${e2}'`);
}
}
};
const SuitesService = {
async remove({ id }) {
try {
const resp = await ky(`${config.baseUri}/v1/suites/${id}`, {
headers: { "Content-Type": "application/json" },
method: "DELETE"
});
if (resp.ok) {
return resp.json();
}
} catch (e2) {
throw new Error(`Cannot remove suite: '${id}', error: '${e2}'`);
}
}
};
const TestsService = {
async removeTest({ id }) {
try {
const resp = await ky(`${config.baseUri}/v1/tests/${id}`, {
headers: { "Content-Type": "application/json" },
method: "DELETE"
});
if (resp.ok) {
return resp.json();
}
} catch (e2) {
throw new Error(`Cannot remove test: '${id}', error: '${e2}'`);
}
},
async acceptTest({ id }) {
try {
const resp = await ky(`${config.baseUri}/v1/tests/accept/${id}`, {
headers: { "Content-Type": "application/json" },
method: "PUT"
});
if (resp.ok) {
return {
response: resp.json(),
id
};
}
} catch (e2) {
throw new Error(`Cannot accept test: '${id}', error: '${e2}'`);
}
}
};
function useParams() {
const queryConfig = {
groupBy: StringParam,
sortBy: StringParam,
sortByNavbar: StringParam,
app: StringParam,
filter: JsonParam,
base_filter: JsonParam,
checkId: StringParam,
quick_filter: JsonParam,
modalIsOpen: StringParam
};
const [query, setQuery] = useQueryParams(queryConfig);
const updateQueryJsonParam = (section, key, value) => {
const current = query[section];
const newParam = {
...current,
[key]: value
};
setQuery({
[section]: newParam
});
};
return {
query,
setQuery,
updateQueryJsonParam,
queryConfig
};
}
function useDistinctQuery({
resource,
keys = [],
onSuccess,
onError = (e2) => errorMsg({
error: e2
})
}) {
return useQuery([resource, "distinct", ...keys], () => GenericService.get(resource, {}, {
limit: "0"
}), {
enabled: true,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
onSuccess,
onError
});
}
const chipStyles = {
label: {
maxWidth: "9em",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
}
};
function QuickFilter() {
const theme = useMantineTheme();
const {
setQuery
} = useParams();
const [opened, {
toggle,
close
}] = useDisclosure(false);
const ref = useClickOutside(() => close());
const [quickFilter, setQuickFilter] = react.exports.useState("");
const [debouncedQuickFilter] = useDebouncedValue(quickFilter, 400);
const [browserChipsData, setBrowserChipsData] = react.exports.useState([]);
const [viewportChipsData, setViewportChipsData] = react.exports.useState([]);
const [platformChipsData, setPlatformChipsData] = react.exports.useState([]);
const [statusesChipsData, setStatusesChipsData] = react.exports.useState([]);
const [acceptedStatusChipsData, setAcceptedStatusChipsData] = react.exports.useState([]);
const [branchChipsData, setBranchChipsData] = react.exports.useState([]);
const browsersData = useDistinctQuery({
resource: "test-distinct/browserName"
}).data;
const viewportData = useDistinctQuery({
resource: "test-distinct/viewport"
}).data;
const platformData = useDistinctQuery({
resource: "test-distinct/os"
}).data;
const statusesData = useDistinctQuery({
resource: "test-distinct/status"
}).data;
const acceptStatusesData = useDistinctQuery({
resource: "test-distinct/markedAs"
}).data;
const getDistinctItems = (data) => {
var _a, _b;
return ((_a = data == null ? void 0 : data.results) == null ? void 0 : _a.length) > 0 ? (_b = data == null ? void 0 : data.results) == null ? void 0 : _b.map((x2) => x2.name) : [];
};
const browsers = react.exports.useMemo(() => getDistinctItems(browsersData), [browsersData == null ? void 0 : browsersData.results.length]);
const viewports = react.exports.useMemo(() => getDistinctItems(viewportData), [viewportData == null ? void 0 : viewportData.results.length]);
const platforms = react.exports.useMemo(() => getDistinctItems(platformData), [platformData == null ? void 0 : platformData.results.length]);
const statuses = react.exports.useMemo(() => getDistinctItems(statusesData), [statusesData == null ? void 0 : statusesData.results.length]);
const acceptStatuses = react.exports.useMemo(() => getDistinctItems(acceptStatusesData), [acceptStatusesData == null ? void 0 : acceptStatusesData.results.length]);
const quickFilterObject = react.exports.useMemo(() => {
const arr = [];
if (debouncedQuickFilter) {
arr.push({
name: {
$regex: escapeRegExp(debouncedQuickFilter),
$options: "im"
}
});
}
if (browserChipsData.length > 0)
arr.push({
browserName: {
$in: browserChipsData
}
});
if (platformChipsData.length > 0)
arr.push({
os: {
$in: platformChipsData
}
});
if (viewportChipsData.length > 0)
arr.push({
viewport: {
$in: viewportChipsData
}
});
if (statusesChipsData.length > 0)
arr.push({
status: {
$in: statusesChipsData
}
});
if (acceptedStatusChipsData.length > 0)
arr.push({
markedAs: {
$in: acceptedStatusChipsData
}
});
if (arr.length < 1)
return {};
return {
$and: arr
};
}, [debouncedQuickFilter, browserChipsData.length, viewportChipsData.length, platformChipsData.length, statusesChipsData.length, acceptedStatusChipsData.length]);
react.exports.useEffect(function setQuickFilterQuery() {
setQuery({
quick_filter: quickFilterObject
});
}, [JSON.stringify(quickFilterObject)]);
const resetQuickFilter = () => {
setQuickFilter("");
setBrowserChipsData([]);
setViewportChipsData([]);
setPlatformChipsData([]);
setStatusesChipsData([]);
setAcceptedStatusChipsData([]);
setBranchChipsData([]);
};
const useStyles2 = createStyles(() => ({
quickFilter: {
"@media (max-width: 1024px)": {
display: "none"
}
}
}));
const {
classes
} = useStyles2();
return /* @__PURE__ */ jsxs(Group, {
className: classes.quickFilter,
children: [/* @__PURE__ */ jsx(Text, {
size: 14,
children: "Quick Filter: "
}), /* @__PURE__ */ jsx(TextInput, {
value: quickFilter,
"data-test": "table-quick-filter",
onChange: (event) => setQuickFilter(event.currentTarget.value),
size: "xs",
radius: "xs",
placeholder: "Enter test name",
rightSection: /* @__PURE__ */ jsx(ActionIcon, {
title: "clear filter",
onClick: () => {
resetQuickFilter();
},
children: /* @__PURE__ */ jsx(lAe, {
stroke: 1,
color: theme.colors.gray[5]
})
}),
styles: {
input: {
width: "300px"
}
}
}), /* @__PURE__ */ jsx("div", {
ref,
children: /* @__PURE__ */ jsxs(Popover, {
width: 330,
position: "bottom",
withArrow: true,
shadow: "md",
opened,
children: [/* @__PURE__ */ jsx(Popover.Target, {
children: /* @__PURE__ */ jsx(Group, {
spacing: 0,
position: "center",
children: /* @__PURE__ */ jsx(ActionIcon, {
ml: -14,
onClick: toggle,
children: /* @__PURE__ */ jsx(Pj, {
size: 16
})
})
})
}), /* @__PURE__ */ jsxs(Popover.Dropdown, {
p: "md",
children: [/* @__PURE__ */ jsx(ScrollArea, {
style: {
height: "45vh"
},
children: /* @__PURE__ */ jsxs(Stack, {
spacing: 8,
justify: "flex-start",
children: [/* @__PURE__ */ jsx(Text, {
size: 10,
color: "gray.6",
weight: 600,
transform: "uppercase",
children: "Browsers:"
}), /* @__PURE__ */ jsx(Chip.Group, {
spacing: 4,
multiple: true,
value: browserChipsData,
onChange: setBrowserChipsData,
children: browsers.map((item) => /* @__PURE__ */ jsx(Chip, {
value: item,
styles: chipStyles,
children: item
}, item))
}), /* @__PURE__ */ jsx(Text, {
size: 10,
color: "gray.6",
weight: 600,
transform: "uppercase",
children: "Platforms:"
}), /* @__PURE__ */ jsx(Chip.Group, {
spacing: 4,
multiple: true,
value: platformChipsData,
onChange: setPlatformChipsData,
children: platforms.map((item) => /* @__PURE__ */ jsx(Chip, {
value: item,
styles: chipStyles,
children: item
}, item))
}), /* @__PURE__ */ jsx(Text, {
size: 10,
color: "gray.6",
weight: 600,
transform: "uppercase",
children: "Viewports:"
}), /* @__PURE__ */ jsx(Chip.Group, {
value: viewportChipsData,
onChange: setViewportChipsData,
spacing: 4,
multiple: true,
children: viewports.map((item) => /* @__PURE__ */ jsx(Chip, {
value: item,
styles: chipStyles,
children: item
}, item))
}), /* @__PURE__ */ jsx(Text, {
size: 10,
color: "gray.6",
weight: 600,
transform: "uppercase",
children: "Status:"
}), /* @__PURE__ */ jsx(Chip.Group, {
value: statusesChipsData,
onChange: setStatusesChipsData,
spacing: 4,
multiple: true,
children: statuses.map((item) => /* @__PURE__ */ jsx(Chip, {
value: item,
styles: chipStyles,
children: item
}, item))
}), /* @__PURE__ */ jsx(Text, {
size: 10,
color: "gray.6",
weight: 600,
transform: "uppercase",
children: "Accepted:"
}), /* @__PURE__ */ jsx(Chip.Group, {
value: acceptedStatusChipsData,
onChange: setAcceptedStatusChipsData,
spacing: 4,
multiple: true,
children: acceptStatuses.map((item) => /* @__PURE__ */ jsx(Chip, {
value: item,
styles: chipStyles,
children: item
}, item))
})]
})
}), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsxs(Group, {
position: "center",
pt: 16,
children: [/* @__PURE__ */ jsx(Button, {
onClick: resetQuickFilter,
children: "Reset"
}), /* @__PURE__ */ jsx(Button, {
onClick: close,
children: "Close"
})]
})]
})]
})
})]
});
}
const useStyles$6 = createStyles((theme) => ({
quickFilter: {
"@media (max-width: 1024px)": {
display: "none"
}
},
header: {
paddingLeft: 0,
paddingRight: 0,
marginBottom: 120
},
inner: {
height: 56,
display: "flex",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2]
},
links: {
[theme.fn.smallerThan("md")]: {
display: "none"
}
},
search: {
[theme.fn.smallerThan("xs")]: {
display: "none"
}
},
link: {
display: "block",
lineHeight: 1,
padding: "8px 12px",
borderRadius: theme.radius.sm,
textDecoration: "none",
color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7],
fontSize: theme.fontSizes.sm,
fontWeight: 500,
"&:hover": {
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0]
}
},
subheader: {
height: 42,
display: "flex",
justifyContent: "space-between",
alignItems: "center"
},
spotLight: {
minWidth: 200,
display: "flex",
paddingLeft: 12,
paddingRight: 8,
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
"&:hover": {
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0]
}
}
}));
function HeaderIndex({
breadCrumbs,
toolbar
}) {
var _a;
const theme = useMantineTheme();
const {
classes
} = useStyles$6();
links.map((link) => /* @__PURE__ */ jsx("a", {
href: link.link,
className: classes.link,
children: link.label
}, link.label));
const [currentProjectLS, setCurrentProjectLS] = useLocalStorage({
key: "currentProject",
defaultValue: ""
});
const projectsQuery = useQuery(["projects"], () => GenericService.get("app", {}, {
limit: "0"
}), {
enabled: true,
staleTime: Infinity,
refetchOnWindowFocus: false,
onError: (e2) => {
errorMsg({
error: e2
});
}
});
let projectSelectData = [];
if (projectsQuery.data) {
projectSelectData = (_a = projectsQuery.data) == null ? void 0 : _a.results.map((item) => ({
value: item._id,
label: item.name
}));
}
const projectSelectHandler = (value) => {
setCurrentProjectLS(() => value);
};
const {
setQuery
} = useParams();
react.exports.useEffect(() => {
setQuery({
app: currentProjectLS
});
}, [currentProjectLS]);
return /* @__PURE__ */ jsxs(Header$1, {
height: 100,
className: classes.header,
children: [/* @__PURE__ */ jsxs(Container, {
className: classes.inner,
fluid: true,
children: [/* @__PURE__ */ jsx(Group, {
children: /* @__PURE__ */ jsx(Group, {
children: /* @__PURE__ */ jsx(HeaderLogo, {})
})
}), /* @__PURE__ */ jsxs(Group, {
children: [/* @__PURE__ */ jsxs(Group, {
spacing: "sm",
children: [/* @__PURE__ */ jsx(Text, {
size: "sm",
children: "Project:"
}), /* @__PURE__ */ jsx(SafeSelect, {
searchable: true,
clearable: true,
placeholder: "Enter Project Name",
variant: "unstyled",
"data-test": "current-project",
sx: {
minWidth: "150px",
borderWidth: "0px 0 1px 0",
borderStyle: "solid",
borderColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4]
},
styles: {
input: {
paddingRight: "20px"
}
},
value: currentProjectLS || "",
onChange: projectSelectHandler,
optionsData: projectSelectData
})]
}), /* @__PURE__ */ jsx(Button, {
onClick: () => openSpotlight(),
variant: "default",
className: classes.spotLight,
"data-test": "spotlight-button",
children: /* @__PURE__ */ jsxs(Group, {
position: "apart",
sx: {
minWidth: 200
},
children: [/* @__PURE__ */ jsxs(Group, {
children: [/* @__PURE__ */ jsx(Dge, {
size: 16,
stroke: 1
}), /* @__PURE__ */ jsx(Text, {
color: "dimmed",
weight: 400,
children: "Search"
})]
}), /* @__PURE__ */ jsx(Kbd, {
sx: {
fontSize: 11,
borderBottomWidth: 1
},
children: useOs() === "macos" ? /* @__PURE__ */ jsx(Fragment, {
children: "\u2318 + K"
}) : /* @__PURE__ */ jsx(Fragment, {
children: "Ctrl + K"
})
})]
})
}), /* @__PURE__ */ jsx(Group, {
spacing: 7,
children: /* @__PURE__ */ jsx(UserMenu, {})
})]
})]
}), /* @__PURE__ */ jsx(Paper, {
shadow: "",
children: /* @__PURE__ */ jsxs(Container, {
className: classes.subheader,
fluid: true,
children: [/* @__PURE__ */ jsxs(Group, {
children: [/* @__PURE__ */ jsx(Group, {
sx: {
paddingLeft: 16,
width: 350
},
children: /* @__PURE__ */ jsx(Breadcrumbs, {
"data-test": "bread-crumbs",
children: breadCrumbs
})
}), /* @__PURE__ */ jsx(Group, {
children: /* @__PURE__ */ jsx(QuickFilter, {})
})]
}), /* @__PURE__ */ jsx(Group, {
spacing: 4,
mr: "md",
position: "right",
noWrap: true,
children: toolbar
})]
})
})]
});
}
function toInteger(dirtyNumber) {
if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
return NaN;
}
var number = Number(dirtyNumber);
if (isNaN(number)) {
return number;
}
return number < 0 ? Math.ceil(number) : Math.floor(number);
}
function requiredArgs(required, args) {
if (args.length < required) {
throw new TypeError(required + " argument" + (required > 1 ? "s" : "") + " required, but only " + args.length + " present");
}
}
function _typeof$1(obj) {
"@babel/helpers - typeof";
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof$1 = function _typeof2(obj2) {
return typeof obj2;
};
} else {
_typeof$1 = function _typeof2(obj2) {
return obj2 && typeof Symbol === "function" && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
};
}
return _typeof$1(obj);
}
function toDate(argument) {
requiredArgs(1, arguments);
var argStr = Object.prototype.toString.call(argument);
if (argument instanceof Date || _typeof$1(argument) === "object" && argStr === "[object Date]") {
return new Date(argument.getTime());
} else if (typeof argument === "number" || argStr === "[object Number]") {
return new Date(argument);
} else {
if ((typeof argument === "string" || argStr === "[object String]") && typeof console !== "undefined") {
console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments");
console.warn(new Error().stack);
}
return new Date(NaN);
}
}
function addMilliseconds(dirtyDate, dirtyAmount) {
requiredArgs(2, arguments);
var timestamp = toDate(dirtyDate).getTime();
var amount = toInteger(dirtyAmount);
return new Date(timestamp + amount);
}
var defaultOptions = {};
function getDefaultOptions() {
return defaultOptions;
}
function getTimezoneOffsetInMilliseconds(date) {
var utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
utcDate.setUTCFullYear(date.getFullYear());
return date.getTime() - utcDate.getTime();
}
function compareAsc(dirtyDateLeft, dirtyDateRight) {
requiredArgs(2, arguments);
var dateLeft = toDate(dirtyDateLeft);
var dateRight = toDate(dirtyDateRight);
var diff = dateLeft.getTime() - dateRight.getTime();
if (diff < 0) {
return -1;
} else if (diff > 0) {
return 1;
} else {
return diff;
}
}
var millisecondsInMinute = 6e4;
var millisecondsInHour = 36e5;
function _typeof(obj) {
"@babel/helpers - typeof";
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function _typeof2(obj2) {
return typeof obj2;
};
} else {
_typeof = function _typeof2(obj2) {
return obj2 && typeof Symbol === "function" && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
};
}
return _typeof(obj);
}
function isDate(value) {
requiredArgs(1, arguments);
return value instanceof Date || _typeof(value) === "object" && Object.prototype.toString.call(value) === "[object Date]";
}
function isValid(dirtyDate) {
requiredArgs(1, arguments);
if (!isDate(dirtyDate) && typeof dirtyDate !== "number") {
return false;
}
var date = toDate(dirtyDate);
return !isNaN(Number(date));
}
function differenceInCalendarMonths(dirtyDateLeft, dirtyDateRight) {
requiredArgs(2, arguments);
var dateLeft = toDate(dirtyDateLeft);
var dateRight = toDate(dirtyDateRight);
var yearDiff = dateLeft.getFullYear() - dateRight.getFullYear();
var monthDiff = dateLeft.getMonth() - dateRight.getMonth();
return yearDiff * 12 + monthDiff;
}
function differenceInMilliseconds(dateLeft, dateRight) {
requiredArgs(2, arguments);
return toDate(dateLeft).getTime() - toDate(dateRight).getTime();
}
var roundingMap = {
ceil: Math.ceil,
round: Math.round,
floor: Math.floor,
trunc: function trunc(value) {
return value < 0 ? Math.ceil(value) : Math.floor(value);
}
};
var defaultRoundingMethod = "trunc";
function getRoundingMethod(method) {
return method ? roundingMap[method] : roundingMap[defaultRoundingMethod];
}
function endOfDay(dirtyDate) {
requiredArgs(1, arguments);
var date = toDate(dirtyDate);
date.setHours(23, 59, 59, 999);
return date;
}
function endOfMonth(dirtyDate) {
requiredArgs(1, arguments);
var date = toDate(dirtyDate);
var month = date.getMonth();
date.setFullYear(date.getFullYear(), month + 1, 0);
date.setHours(23, 59, 59, 999);
return date;
}
function isLastDayOfMonth(dirtyDate) {
requiredArgs(1, arguments);
var date = toDate(dirtyDate);
return endOfDay(date).getTime() === endOfMonth(date).getTime();
}
function differenceInMonths(dirtyDateLeft, dirtyDateRight) {
requiredArgs(2, arguments);
var dateLeft = toDate(dirtyDateLeft);
var dateRight = toDate(dirtyDateRight);
var sign = compareAsc(dateLeft, dateRight);
var difference = Math.abs(differenceInCalendarMonths(dateLeft, dateRight));
var result;
if (difference < 1) {
result = 0;
} else {
if (dateLeft.getMonth() === 1 && dateLeft.getDate() > 27) {
dateLeft.setDate(30);
}
dateLeft.setMonth(dateLeft.getMonth() - sign * difference);
var isLastMonthNotFull = compareAsc(dateLeft, dateRight) === -sign;
if (isLastDayOfMonth(toDate(dirtyDateLeft)) && difference === 1 && compareAsc(dirtyDateLeft, dateRight) === 1) {
isLastMonthNotFull = false;
}
result = sign * (difference - Number(isLastMonthNotFull));
}
return result === 0 ? 0 : result;
}
function differenceInSeconds(dateLeft, dateRight, options) {
requiredArgs(2, arguments);
var diff = differenceInMilliseconds(dateLeft, dateRight) / 1e3;
return getRoundingMethod(options === null || options === void 0 ? void 0 : options.roundingMethod)(diff);
}
function subMilliseconds(dirtyDate, dirtyAmount) {
requiredArgs(2, arguments);
var amount = toInteger(dirtyAmount);
return addMilliseconds(dirtyDate, -amount);
}
var MILLISECONDS_IN_DAY = 864e5;
function getUTCDayOfYear(dirtyDate) {
requiredArgs(1, arguments);
var date = toDate(dirtyDate);
var timestamp = date.getTime();
date.setUTCMonth(0, 1);
date.setUTCHours(0, 0, 0, 0);
var startOfYearTimestamp = date.getTime();
var difference = timestamp - startOfYearTimestamp;
return Math.floor(difference / MILLISECONDS_IN_DAY) + 1;
}
function startOfUTCISOWeek(dirtyDate) {
requiredArgs(1, arguments);
var weekStartsOn = 1;
var date = toDate(dirtyDate);
var day = date.getUTCDay();
var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
date.setUTCDate(date.getUTCDate() - diff);
date.setUTCHours(0, 0, 0, 0);
return date;
}
function getUTCISOWeekYear(dirtyDate) {
requiredArgs(1, arguments);
var date = toDate(dirtyDate);
var year = date.getUTCFullYear();
var fourthOfJanuaryOfNextYear = new Date(0);
fourthOfJanuaryOfNextYear.setUTCFullYear(year + 1, 0, 4);
fourthOfJanuaryOfNextYear.setUTCHours(0, 0, 0, 0);
var startOfNextYear = startOfUTCISOWeek(fourthOfJanuaryOfNextYear);
var fourthOfJanuaryOfThisYear = new Date(0);
fourthOfJanuaryOfThisYear.setUTCFullYear(year, 0, 4);
fourthOfJanuaryOfThisYear.setUTCHours(0, 0, 0, 0);
var startOfThisYear = startOfUTCISOWeek(fourthOfJanuaryOfThisYear);
if (date.getTime() >= startOfNextYear.getTime()) {
return year + 1;
} else if (date.getTime() >= startOfThisYear.getTime()) {
return year;
} else {
return year - 1;
}
}
function startOfUTCISOWeekYear(dirtyDate) {
requiredArgs(1, arguments);
var year = getUTCISOWeekYear(dirtyDate);
var fourthOfJanuary = new Date(0);
fourthOfJanuary.setUTCFullYear(year, 0, 4);
fourthOfJanuary.setUTCHours(0, 0, 0, 0);
var date = startOfUTCISOWeek(fourthOfJanuary);
return date;
}
var MILLISECONDS_IN_WEEK$1 = 6048e5;
function getUTCISOWeek(dirtyDate) {
requiredArgs(1, arguments);
var date = toDate(dirtyDate);
var diff = startOfUTCISOWeek(date).getTime() - startOfUTCISOWeekYear(date).getTime();
return Math.round(diff / MILLISECONDS_IN_WEEK$1) + 1;
}
function startOfUTCWeek(dirtyDate, options) {
var _ref, _ref2, _ref3, _options$weekStartsOn, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2;
requiredArgs(1, arguments);
var defaultOptions2 = getDefaultOptions();
var weekStartsOn = toInteger((_ref = (_ref2 = (_ref3 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions2.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions2.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref !== void 0 ? _ref : 0);
if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
throw new RangeError("weekStartsOn must be between 0 and 6 inclusively");
}
var date = toDate(dirtyDate);
var day = date.getUTCDay();
var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
date.setUTCDate(date.getUTCDate() - diff);
date.setUTCHours(0, 0, 0, 0);
return date;
}
function getUTCWeekYear(dirtyDate, options) {
var _ref, _ref2, _ref3, _options$firstWeekCon, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2;
requiredArgs(1, arguments);
var date = toDate(dirtyDate);
var year = date.getUTCFullYear();
var defaultOptions2 = getDefaultOptions();
var firstWeekContainsDate = toInteger((_ref = (_ref2 = (_ref3 = (_options$firstWeekCon = options === null || options === void 0 ? void 0 : options.firstWeekContainsDate) !== null && _options$firstWeekCon !== void 0 ? _options$firstWeekCon : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.firstWeekContainsDate) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions2.firstWeekContainsDate) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions2.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.firstWeekContainsDate) !== null && _ref !== void 0 ? _ref : 1);
if (!(firstWeekContainsDate >= 1 && firstWeekContainsDate <= 7)) {
throw new RangeError("firstWeekContainsDate must be between 1 and 7 inclusively");
}
var firstWeekOfNextYear = new Date(0);
firstWeekOfNextYear.setUTCFullYear(year + 1, 0, firstWeekContainsDate);
firstWeekOfNextYear.setUTCHours(0, 0, 0, 0);
var startOfNextYear = startOfUTCWeek(firstWeekOfNextYear, options);
var firstWeekOfThisYear = new Date(0);
firstWeekOfThisYear.setUTCFullYear(year, 0, firstWeekContainsDate);
firstWeekOfThisYear.setUTCHours(0, 0, 0, 0);
var startOfThisYear = startOfUTCWeek(firstWeekOfThisYear, options);
if (date.getTime() >= startOfNextYear.getTime()) {
return year + 1;
} else if (date.getTime() >= startOfThisYear.getTime()) {
return year;
} else {
return year - 1;
}
}
function startOfUTCWeekYear(dirtyDate, options) {
var _ref, _ref2, _ref3, _options$firstWeekCon, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2;
requiredArgs(1, arguments);
var defaultOptions2 = getDefaultOptions();
var firstWeekContainsDate = toInteger((_ref = (_ref2 = (_ref3 = (_options$firstWeekCon = options === null || options === void 0 ? void 0 : options.firstWeekContainsDate) !== null && _options$firstWeekCon !== void 0 ? _options$firstWeekCon : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.firstWeekContainsDate) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions2.firstWeekContainsDate) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions2.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.firstWeekContainsDate) !== null && _ref !== void 0 ? _ref : 1);
var year = getUTCWeekYear(dirtyDate, options);
var firstWeek = new Date(0);
firstWeek.setUTCFullYear(year, 0, firstWeekContainsDate);
firstWeek.setUTCHours(0, 0, 0, 0);
var date = startOfUTCWeek(firstWeek, options);
return date;
}
var MILLISECONDS_IN_WEEK = 6048e5;
function getUTCWeek(dirtyDate, options) {
requiredArgs(1, arguments);
var date = toDate(dirtyDate);
var diff = startOfUTCWeek(date, options).getTime() - startOfUTCWeekYear(date, options).getTime();
return Math.round(diff / MILLISECONDS_IN_WEEK) + 1;
}
function addLeadingZeros(number, targetLength) {
var sign = number < 0 ? "-" : "";
var output = Math.abs(number).toString();
while (output.length < targetLength) {
output = "0" + output;
}
return sign + output;
}
var formatters$2 = {
y: function y(date, token) {
var signedYear = date.getUTCFullYear();
var year = signedYear > 0 ? signedYear : 1 - signedYear;
return addLeadingZeros(token === "yy" ? year % 100 : year, token.length);
},
M: function M(date, token) {
var month = date.getUTCMonth();
return token === "M" ? String(month + 1) : addLeadingZeros(month + 1, 2);
},
d: function d(date, token) {
return addLeadingZeros(date.getUTCDate(), token.length);
},
a: function a(date, token) {
var dayPeriodEnumValue = date.getUTCHours() / 12 >= 1 ? "pm" : "am";
switch (token) {
case "a":
case "aa":
return dayPeriodEnumValue.toUpperCase();
case "aaa":
return dayPeriodEnumValue;
case "aaaaa":
return dayPeriodEnumValue[0];
case "aaaa":
default:
return dayPeriodEnumValue === "am" ? "a.m." : "p.m.";
}
},
h: function h(date, token) {
return addLeadingZeros(date.getUTCHours() % 12 || 12, token.length);
},
H: function H(date, token) {
return addLeadingZeros(date.getUTCHours(), token.length);
},
m: function m(date, token) {
return addLeadingZeros(date.getUTCMinutes(), token.length);
},
s: function s(date, token) {
return addLeadingZeros(date.getUTCSeconds(), token.length);
},
S: function S(date, token) {
var numberOfDigits = token.length;
var milliseconds = date.getUTCMilliseconds();
var fractionalSeconds = Math.floor(milliseconds * Math.pow(10, numberOfDigits - 3));
return addLeadingZeros(fractionalSeconds, token.length);
}
};
const formatters$3 = formatters$2;
var dayPeriodEnum = {
am: "am",
pm: "pm",
midnight: "midnight",
noon: "noon",
morning: "morning",
afternoon: "afternoon",
evening: "evening",
night: "night"
};
var formatters = {
G: function G(date, token, localize2) {
var era = date.getUTCFullYear() > 0 ? 1 : 0;
switch (token) {
case "G":
case "GG":
case "GGG":
return localize2.era(era, {
width: "abbreviated"
});
case "GGGGG":
return localize2.era(era, {
width: "narrow"
});
case "GGGG":
default:
return localize2.era(era, {
width: "wide"
});
}
},
y: function y2(date, token, localize2) {
if (token === "yo") {
var signedYear = date.getUTCFullYear();
var year = signedYear > 0 ? signedYear : 1 - signedYear;
return localize2.ordinalNumber(year, {
unit: "year"
});
}
return formatters$3.y(date, token);
},
Y: function Y2(date, token, localize2, options) {
var signedWeekYear = getUTCWeekYear(date, options);
var weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear;
if (token === "YY") {
var twoDigitYear = weekYear % 100;
return addLeadingZeros(twoDigitYear, 2);
}
if (token === "Yo") {
return localize2.ordinalNumber(weekYear, {
unit: "year"
});
}
return addLeadingZeros(weekYear, token.length);
},
R: function R(date, token) {
var isoWeekYear = getUTCISOWeekYear(date);
return addLeadingZeros(isoWeekYear, token.length);
},
u: function u(date, token) {
var year = date.getUTCFullYear();
return addLeadingZeros(year, token.length);
},
Q: function Q(date, token, localize2) {
var quarter = Math.ceil((date.getUTCMonth() + 1) / 3);
switch (token) {
case "Q":
return String(quarter);
case "QQ":
return addLeadingZeros(quarter, 2);
case "Qo":
return localize2.ordinalNumber(quarter, {
unit: "quarter"
});
case "QQQ":
return localize2.quarter(quarter, {
width: "abbreviated",
context: "formatting"
});
case "QQQQQ":
return localize2.quarter(quarter, {
width: "narrow",
context: "formatting"
});
case "QQQQ":
default:
return localize2.quarter(quarter, {
width: "wide",
context: "formatting"
});
}
},
q: function q(date, token, localize2) {
var quarter = Math.ceil((date.getUTCMonth() + 1) / 3);
switch (token) {
case "q":
return String(quarter);
case "qq":
return addLeadingZeros(quarter, 2);
case "qo":
return localize2.ordinalNumber(quarter, {
unit: "quarter"
});
case "qqq":
return localize2.quarter(quarter, {
width: "abbreviated",
context: "standalone"
});
case "qqqqq":
return localize2.quarter(quarter, {
width: "narrow",
context: "standalone"
});
case "qqqq":
default:
return localize2.quarter(quarter, {
width: "wide",
context: "standalone"
});
}
},
M: function M2(date, token, localize2) {
var month = date.getUTCMonth();
switch (token) {
case "M":
case "MM":
return formatters$3.M(date, token);
case "Mo":
return localize2.ordinalNumber(month + 1, {
unit: "month"
});
case "MMM":
return localize2.month(month, {
width: "abbreviated",
context: "formatting"
});
case "MMMMM":
return localize2.month(month, {
width: "narrow",
context: "formatting"
});
case "MMMM":
default:
return localize2.month(month, {
width: "wide",
context: "formatting"
});
}
},
L: function L(date, token, localize2) {
var month = date.getUTCMonth();
switch (token) {
case "L":
return String(month + 1);
case "LL":
return addLeadingZeros(month + 1, 2);
case "Lo":
return localize2.ordinalNumber(month + 1, {
unit: "month"
});
case "LLL":
return localize2.month(month, {
width: "abbreviated",
context: "standalone"
});
case "LLLLL":
return localize2.month(month, {
width: "narrow",
context: "standalone"
});
case "LLLL":
default:
return localize2.month(month, {
width: "wide",
context: "standalone"
});
}
},
w: function w(date, token, localize2, options) {
var week = getUTCWeek(date, options);
if (token === "wo") {
return localize2.ordinalNumber(week, {
unit: "week"
});
}
return addLeadingZeros(week, token.length);
},
I: function I(date, token, localize2) {
var isoWeek = getUTCISOWeek(date);
if (token === "Io") {
return localize2.ordinalNumber(isoWeek, {
unit: "week"
});
}
return addLeadingZeros(isoWeek, token.length);
},
d: function d2(date, token, localize2) {
if (token === "do") {
return localize2.ordinalNumber(date.getUTCDate(), {
unit: "date"
});
}
return formatters$3.d(date, token);
},
D: function D(date, token, localize2) {
var dayOfYear = getUTCDayOfYear(date);
if (token === "Do") {
return localize2.ordinalNumber(dayOfYear, {
unit: "dayOfYear"
});
}
return addLeadingZeros(dayOfYear, token.length);
},
E: function E(date, token, localize2) {
var dayOfWeek = date.getUTCDay();
switch (token) {
case "E":
case "EE":
case "EEE":
return localize2.day(dayOfWeek, {
width: "abbreviated",
context: "formatting"
});
case "EEEEE":
return localize2.day(dayOfWeek, {
width: "narrow",
context: "formatting"
});
case "EEEEEE":
return localize2.day(dayOfWeek, {
width: "short",
context: "formatting"
});
case "EEEE":
default:
return localize2.day(dayOfWeek, {
width: "wide",
context: "formatting"
});
}
},
e: function e(date, token, localize2, options) {
var dayOfWeek = date.getUTCDay();
var localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7;
switch (token) {
case "e":
return String(localDayOfWeek);
case "ee":
return addLeadingZeros(localDayOfWeek, 2);
case "eo":
return localize2.ordinalNumber(localDayOfWeek, {
unit: "day"