97 lines
4.4 KiB
JavaScript
97 lines
4.4 KiB
JavaScript
import React from "@modules/react";
|
|
import Strings from "@modules/strings";
|
|
import WebpackModules from "@modules/webpackmodules";
|
|
|
|
import Text from "@ui/base/text";
|
|
import Button from "@ui/base/button";
|
|
import Flex from "@ui/base/flex";
|
|
|
|
import Extension from "@ui/icons/extension";
|
|
import ThemeIcon from "@ui/icons/theme";
|
|
|
|
import Divider from "@ui/divider";
|
|
|
|
import Header from "./header";
|
|
import Content from "./content";
|
|
import ModalRoot from "./root";
|
|
import Footer from "./footer";
|
|
|
|
const Parser = Object(WebpackModules.getByProps("defaultRules", "parse")).defaultRules;
|
|
const {useState, useCallback, useMemo} = React;
|
|
|
|
const joinClassNames = (...classNames) => classNames.filter(e => e).join(" ");
|
|
|
|
|
|
function AddonError({err, index}) {
|
|
const [expanded, setExpanded] = useState(false);
|
|
const toggle = useCallback(() => setExpanded(!expanded), [expanded]);
|
|
|
|
function renderErrorBody() {
|
|
const stack = err?.error?.stack ?? err.stack;
|
|
if (!expanded || !stack) return null;
|
|
return <div className="bd-addon-error-body">
|
|
<Divider />
|
|
<div className="bd-addon-error-stack">
|
|
{Parser ? Parser.codeBlock.react({content: stack, lang: "js"}, null, {}) : stack}
|
|
</div>
|
|
</div>;
|
|
}
|
|
|
|
return <div key={`${err.type}-${index}`} className={joinClassNames("bd-addon-error", (expanded) ? "expanded" : "collapsed")}>
|
|
<div className="bd-addon-error-header" onClick={toggle} >
|
|
<div className="bd-addon-error-icon">
|
|
{err.type == "plugin" ? <Extension /> : <ThemeIcon />}
|
|
</div>
|
|
<div className="bd-addon-error-header-inner">
|
|
<Text tag="h3" size={Text.Sizes.SIZE_16} color={Text.Colors.HEADER_PRIMARY} strong={true}>{err.name}</Text>
|
|
<div className="bd-addon-error-details">
|
|
<svg className="bd-addon-error-details-icon" aria-hidden="false" width="16" height="16" viewBox="0 0 12 12">
|
|
<path fill="currentColor" d="M6 1C3.243 1 1 3.244 1 6c0 2.758 2.243 5 5 5s5-2.242 5-5c0-2.756-2.243-5-5-5zm0 2.376a.625.625 0 110 1.25.625.625 0 010-1.25zM7.5 8.5h-3v-1h1V6H5V5h1a.5.5 0 01.5.5v2h1v1z"></path>
|
|
</svg>
|
|
<Text color={Text.Colors.HEADER_SECONDARY} size={Text.Sizes.SIZE_12}>{err.message}</Text>
|
|
</div>
|
|
</div>
|
|
<svg className="bd-addon-error-expander" width="24" height="24" viewBox="0 0 24 24">
|
|
<path fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" d="M7 10L12 15 17 10" aria-hidden="true"></path>
|
|
</svg>
|
|
</div>
|
|
{renderErrorBody(err)}
|
|
</div>;
|
|
}
|
|
|
|
|
|
function generateTab(id, errors) {
|
|
return {id, errors, name: Strings.Panels[id]};
|
|
}
|
|
|
|
export default function AddonErrorModal({transitionState, onClose, pluginErrors, themeErrors}) {
|
|
const tabs = useMemo(() => {
|
|
return [
|
|
pluginErrors.length && generateTab("plugins", pluginErrors),
|
|
themeErrors.length && generateTab("themes", themeErrors)
|
|
].filter(e => e);
|
|
}, [pluginErrors, themeErrors]);
|
|
|
|
const [tabId, setTab] = useState(tabs[0].id);
|
|
const switchToTab = useCallback((id) => setTab(id), []);
|
|
const selectedTab = tabs.find(e => e.id === tabId);
|
|
|
|
return <ModalRoot transitionState={transitionState} className="bd-error-modal" size={ModalRoot.Sizes.MEDIUM}>
|
|
<Header className="bd-error-modal-header">
|
|
<Flex direction={Flex.Direction.VERTICAL}>
|
|
<Text tag="h1" size={Text.Sizes.SIZE_14} color={Text.Colors.HEADER_PRIMARY} strong={true} style={{"text-transform": "uppercase", "margin-bottom": "8px"}}>{Strings.Modals.addonErrors}</Text>
|
|
<div className="bd-tab-bar">
|
|
{tabs.map(tab => <div onClick={() => {switchToTab(tab.id);}} className={joinClassNames("bd-tab-item", tab.id === selectedTab.id && "selected")}>{tab.name}</div>)}
|
|
</div>
|
|
</Flex>
|
|
</Header>
|
|
<Content className="bd-error-modal-content">
|
|
<div className="bd-addon-errors">
|
|
{selectedTab.errors.map((error, index) => <AddonError index={index} err={error} />)}
|
|
</div>
|
|
</Content>
|
|
<Footer className="bd-error-modal-footer">
|
|
<Button onClick={onClose}>{Strings.Modals.okay}</Button>
|
|
</Footer>
|
|
</ModalRoot>;
|
|
} |