Plugin api improvements (#4935)

* Support hook into App component
* Add hookable PluginSettings component
* Add useSettings to plugin hooks
* Make setting inputs hookable
* Add hooks for performer details panel
* Update docs

Author: WithoutPants

ui/v2.5/src/App.tsx

@@ -50,6 +50,7 @@ import { PluginRoutes } from "./plugins";
 // import plugin_api to run code
 import "./pluginApi";
 import { ConnectionMonitor } from "./ConnectionMonitor";
+import { PatchFunction } from "./patch";
 
 const Performers = lazyComponent(
   () => import("./components/Performers/Performers")
@@ -144,6 +145,13 @@ function sortPlugins(plugins: PluginList) {
   return sorted;
 }
 
+const AppContainer: React.FC<React.PropsWithChildren<{}>> = PatchFunction(
+  "App",
+  (props: React.PropsWithChildren<{}>) => {
+    return <>{props.children}</>;
+  }
+) as React.FC;
+
 export const App: React.FC = () => {
   const config = useConfiguration();
   const [saveUI] = useConfigureUI();
@@ -357,41 +365,43 @@ export const App: React.FC = () => {
   const titleProps = makeTitleProps();
 
   return (
-    <ErrorBoundary>
-      {messages ? (
-        <IntlProvider
-          locale={language}
-          messages={messages}
-          formats={intlFormats}
-        >
-          <ConfigurationProvider
-            configuration={config.data?.configuration}
-            loading={config.loading}
+    <AppContainer>
+      <ErrorBoundary>
+        {messages ? (
+          <IntlProvider
+            locale={language}
+            messages={messages}
+            formats={intlFormats}
           >
-            {maybeRenderReleaseNotes()}
-            <ToastProvider>
-              <ConnectionMonitor />
-              <Suspense fallback={<LoadingIndicator />}>
-                <LightboxProvider>
-                  <ManualProvider>
-                    <InteractiveProvider>
-                      <Helmet {...titleProps} />
-                      {maybeRenderNavbar()}
-                      <div
-                        className={`main container-fluid ${
-                          appleRendering ? "apple" : ""
-                        }`}
-                      >
-                        {renderContent()}
-                      </div>
-                    </InteractiveProvider>
-                  </ManualProvider>
-                </LightboxProvider>
-              </Suspense>
-            </ToastProvider>
-          </ConfigurationProvider>
-        </IntlProvider>
-      ) : null}
-    </ErrorBoundary>
+            <ConfigurationProvider
+              configuration={config.data?.configuration}
+              loading={config.loading}
+            >
+              {maybeRenderReleaseNotes()}
+              <ToastProvider>
+                <ConnectionMonitor />
+                <Suspense fallback={<LoadingIndicator />}>
+                  <LightboxProvider>
+                    <ManualProvider>
+                      <InteractiveProvider>
+                        <Helmet {...titleProps} />
+                        {maybeRenderNavbar()}
+                        <div
+                          className={`main container-fluid ${
+                            appleRendering ? "apple" : ""
+                          }`}
+                        >
+                          {renderContent()}
+                        </div>
+                      </InteractiveProvider>
+                    </ManualProvider>
+                  </LightboxProvider>
+                </Suspense>
+              </ToastProvider>
+            </ConfigurationProvider>
+          </IntlProvider>
+        ) : null}
+      </ErrorBoundary>
+    </AppContainer>
   );
 };