Add support for disabling plugins (#4141)

* Move timestamp to own file
* Backend changes
* UI changes

ui/v2.5/src/components/Settings/SettingsPluginsPanel.tsx

@@ -2,7 +2,11 @@ import React, { useMemo } from "react";
 import { Button } from "react-bootstrap";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
-import { mutateReloadPlugins, usePlugins } from "src/core/StashService";
+import {
+  mutateReloadPlugins,
+  mutateSetPluginsEnabled,
+  usePlugins,
+} from "src/core/StashService";
 import { useToast } from "src/hooks/Toast";
 import TextUtils from "src/utils/text";
 import { CollapseButton } from "../Shared/CollapseButton";
@@ -16,7 +20,11 @@ export const SettingsPluginsPanel: React.FC = () => {
   const Toast = useToast();
   const intl = useIntl();
 
-  const { data, loading } = usePlugins();
+  const [changedPluginID, setChangedPluginID] = React.useState<
+    string | undefined
+  >();
+
+  const { data, loading, refetch } = usePlugins();
 
   async function onReloadPlugins() {
     await mutateReloadPlugins().catch((e) => Toast.error(e));
@@ -40,6 +48,39 @@ export const SettingsPluginsPanel: React.FC = () => {
       }
     }
 
+    function renderEnableButton(pluginID: string, enabled: boolean) {
+      async function onClick() {
+        await mutateSetPluginsEnabled({ [pluginID]: !enabled }).catch((e) =>
+          Toast.error(e)
+        );
+
+        setChangedPluginID(pluginID);
+        refetch();
+      }
+
+      return (
+        <Button size="sm" onClick={onClick}>
+          <FormattedMessage
+            id={enabled ? "actions.disable" : "actions.enable"}
+          />
+        </Button>
+      );
+    }
+
+    function onReloadUI() {
+      window.location.reload();
+    }
+
+    function maybeRenderReloadUI(pluginID: string) {
+      if (pluginID === changedPluginID) {
+        return (
+          <Button size="sm" onClick={() => onReloadUI()}>
+            Reload UI
+          </Button>
+        );
+      }
+    }
+
     function renderPlugins() {
       const elements = (data?.plugins ?? []).map((plugin) => (
         <SettingGroup
@@ -48,9 +89,16 @@ export const SettingsPluginsPanel: React.FC = () => {
             heading: `${plugin.name} ${
               plugin.version ? `(${plugin.version})` : undefined
             }`,
+            className: !plugin.enabled ? "disabled" : undefined,
             subHeading: plugin.description,
           }}
-          topLevel={renderLink(plugin.url ?? undefined)}
+          topLevel={
+            <>
+              {renderLink(plugin.url ?? undefined)}
+              {maybeRenderReloadUI(plugin.id)}
+              {renderEnableButton(plugin.id, plugin.enabled)}
+            </>
+          }
         >
           {renderPluginHooks(plugin.hooks ?? undefined)}
         </SettingGroup>
@@ -98,7 +146,7 @@ export const SettingsPluginsPanel: React.FC = () => {
     }
 
     return renderPlugins();
-  }, [data?.plugins, intl]);
+  }, [data?.plugins, intl, Toast, changedPluginID, refetch]);
 
   if (loading) return <LoadingIndicator />;