Merge remote-tracking branch 'upstream/dev' into dev

src/components/ErrorBoundary.tsx

@@ -75,10 +75,15 @@ const ErrorBoundary = LazyComponent(() => {
             logger.error(`${this.props.message || "A component threw an Error"}\n`, error, errorInfo.componentStack);
         }
 
+        get isNoop() {
+            if (IS_DEV) return false;
+            return this.props.noop;
+        }
+
         render() {
             if (this.state.error === NO_ERROR) return this.props.children;
 
-            if (this.props.noop) return null;
+            if (this.isNoop) return null;
 
             if (this.props.fallback)
                 return (

src/components/ErrorCard.css

@@ -4,4 +4,8 @@
     border: 1px solid #e78284;
     border-radius: 5px;
     color: var(--text-normal, white);
+
+    & a:hover {
+        text-decoration: underline;
+    }
 }

src/components/Link.tsx

@@ -28,6 +28,9 @@ export function Link(props: React.PropsWithChildren<Props>) {
         props.style.pointerEvents = "none";
         props["aria-disabled"] = true;
     }
+
+    props.rel ??= "noreferrer";
+
     return (
         <a role="link" target="_blank" {...props}>
             {props.children}

src/components/PluginSettings/PluginModal.tsx

@@ -270,7 +270,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                 {!!plugin.settingsAboutComponent && (
                     <div className={classes(Margins.bottom8, "vc-text-selectable")}>
                         <Forms.FormSection>
-                            <ErrorBoundary message="An error occurred while rendering this plugin's custom InfoComponent">
+                            <ErrorBoundary message="An error occurred while rendering this plugin's custom Info Component">
                                 <plugin.settingsAboutComponent tempSettings={tempSettings} />
                             </ErrorBoundary>
                         </Forms.FormSection>