From 47bc910a8482d3d2cc882e28e862ca5ad61063b6 Mon Sep 17 00:00:00 2001 From: Jonas Dellinger Date: Wed, 7 Jun 2023 07:35:05 +0200 Subject: Add functionality to hide plugins from quick access menu (#468) --- .../settings/pages/plugin_list/PluginListLabel.tsx | 34 ++++++++++ .../settings/pages/plugin_list/index.tsx | 74 +++++++++++++--------- 2 files changed, 79 insertions(+), 29 deletions(-) create mode 100644 frontend/src/components/settings/pages/plugin_list/PluginListLabel.tsx (limited to 'frontend/src/components/settings') diff --git a/frontend/src/components/settings/pages/plugin_list/PluginListLabel.tsx b/frontend/src/components/settings/pages/plugin_list/PluginListLabel.tsx new file mode 100644 index 00000000..a49f808f --- /dev/null +++ b/frontend/src/components/settings/pages/plugin_list/PluginListLabel.tsx @@ -0,0 +1,34 @@ +import { FC } from 'react'; +import { useTranslation } from 'react-i18next'; +import { FaEyeSlash } from 'react-icons/fa'; + +interface PluginListLabelProps { + hidden: boolean; + name: string; + version?: string; +} + +const PluginListLabel: FC = ({ name, hidden, version }) => { + const { t } = useTranslation(); + return ( +
+
{version ? `${name} - ${version}` : name}
+ {hidden && ( +
+ + {t('PluginListLabel.hidden')} +
+ )} +
+ ); +}; + +export default PluginListLabel; diff --git a/frontend/src/components/settings/pages/plugin_list/index.tsx b/frontend/src/components/settings/pages/plugin_list/index.tsx index fab8ec2b..09d06d48 100644 --- a/frontend/src/components/settings/pages/plugin_list/index.tsx +++ b/frontend/src/components/settings/pages/plugin_list/index.tsx @@ -22,10 +22,7 @@ import { } from '../../../../store'; import { useSetting } from '../../../../utils/hooks/useSetting'; import { useDeckyState } from '../../../DeckyState'; - -function labelToName(pluginLabel: string, pluginVersion?: string): string { - return pluginVersion ? pluginLabel.substring(0, pluginLabel.indexOf(` - ${pluginVersion}`)) : pluginLabel; -} +import PluginListLabel from './PluginListLabel'; async function reinstallPlugin(pluginName: string, currentVersion?: string) { const serverData = await getPluginList(); @@ -36,10 +33,17 @@ async function reinstallPlugin(pluginName: string, currentVersion?: string) { } } -function PluginInteractables(props: { entry: ReorderableEntry }) { - const data = props.entry.data; +type PluginTableData = PluginData & { name: string; hidden: boolean; onHide(): void; onShow(): void }; + +function PluginInteractables(props: { entry: ReorderableEntry }) { const { t } = useTranslation(); - let pluginName = labelToName(props.entry.label, data?.version); + + // nothing to display without this data... + if (!props.entry.data) { + return null; + } + + const { name, update, version, onHide, onShow, hidden } = props.entry.data; const showCtxMenu = (e: MouseEvent | GamepadEvent) => { showContextMenu( @@ -47,7 +51,7 @@ function PluginInteractables(props: { entry: ReorderableEntry }) { { try { - fetch(`http://127.0.0.1:1337/plugins/${pluginName}/reload`, { + fetch(`http://127.0.0.1:1337/plugins/${name}/reload`, { method: 'POST', credentials: 'include', headers: { @@ -58,7 +62,7 @@ function PluginInteractables(props: { entry: ReorderableEntry }) { console.error('Error Reloading Plugin Backend', err); } - window.DeckyPluginLoader.importPlugin(pluginName, data?.version); + window.DeckyPluginLoader.importPlugin(name, version); }} > {t('PluginListIndex.reload')} @@ -66,15 +70,20 @@ function PluginInteractables(props: { entry: ReorderableEntry }) { window.DeckyPluginLoader.uninstallPlugin( - pluginName, - t('PluginLoader.plugin_uninstall.title', { name: pluginName }), + name, + t('PluginLoader.plugin_uninstall.title', { name }), t('PluginLoader.plugin_uninstall.button'), - t('PluginLoader.plugin_uninstall.desc', { name: pluginName }), + t('PluginLoader.plugin_uninstall.desc', { name }), ) } > {t('PluginListIndex.uninstall')} + {hidden ? ( + {t('PluginListIndex.show')} + ) : ( + {t('PluginListIndex.hide')} + )} , e.currentTarget ?? window, ); @@ -82,22 +91,22 @@ function PluginInteractables(props: { entry: ReorderableEntry }) { return ( <> - {data?.update ? ( + {update ? ( requestPluginInstall(pluginName, data?.update as StorePluginVersion, InstallType.UPDATE)} - onOKButton={() => requestPluginInstall(pluginName, data?.update as StorePluginVersion, InstallType.UPDATE)} + onClick={() => requestPluginInstall(name, update, InstallType.UPDATE)} + onOKButton={() => requestPluginInstall(name, update, InstallType.UPDATE)} >
- {t('PluginListIndex.update_to', { name: data?.update?.name })} + {t('PluginListIndex.update_to', { name: update.name })}
) : ( reinstallPlugin(pluginName, data?.version)} - onOKButton={() => reinstallPlugin(pluginName, data?.version)} + onClick={() => reinstallPlugin(name, version)} + onOKButton={() => reinstallPlugin(name, version)} >
{t('PluginListIndex.reinstall')} @@ -130,7 +139,7 @@ type PluginData = { }; export default function PluginList() { - const { plugins, updates, pluginOrder, setPluginOrder } = useDeckyState(); + const { plugins, updates, pluginOrder, setPluginOrder, hiddenPlugins } = useDeckyState(); const [_, setPluginOrderSetting] = useSetting( 'pluginOrder', plugins.map((plugin) => plugin.name), @@ -141,22 +150,29 @@ export default function PluginList() { window.DeckyPluginLoader.checkPluginUpdates(); }, []); - const [pluginEntries, setPluginEntries] = useState[]>([]); + const [pluginEntries, setPluginEntries] = useState[]>([]); + const hiddenPluginsService = window.DeckyPluginLoader.hiddenPluginsService; useEffect(() => { setPluginEntries( - plugins.map((plugin) => { + plugins.map(({ name, version }) => { + const hidden = hiddenPlugins.includes(name); + return { - label: plugin.version ? `${plugin.name} - ${plugin.version}` : plugin.name, + label: