Redesign add plugins page

package.json

@@ -11,6 +11,7 @@
     "@babel/plugin-transform-modules-umd": "7.24.7",
     "@babel/preset-env": "7.24.7",
     "@babel/preset-react": "7.24.7",
+    "@types/dompurify": "3.0.5",
     "@types/escape-html": "1.0.4",
     "@types/loadable__component": "5.13.9",
     "@types/lodash-es": "4.17.12",

src/apps/dashboard/components/drawer/sections/AdvancedDrawerSection.tsx

@@ -17,18 +17,14 @@ import { useLocation } from 'react-router-dom';
 import ListItemLink from 'components/ListItemLink';
 import globalize from 'scripts/globalize';
 
-const PLUGIN_PATHS = [
-    '/dashboard/plugins',
-    '/dashboard/plugins/catalog',
-    '/dashboard/plugins/repositories',
-    '/dashboard/plugins/add',
-    '/configurationpage'
-];
+const isPluginPath = (path: string) => (
+    path.startsWith('/dashboard/plugins')
+    || path === '/configurationpage'
+);
 
 const AdvancedDrawerSection = () => {
     const location = useLocation();
-
-    const isPluginSectionOpen = PLUGIN_PATHS.includes(location.pathname);
+    const isPluginSectionOpen = isPluginPath(location.pathname);
 
     return (
         <List

src/apps/dashboard/features/plugins/api/configurationPage.ts

@@ -0,0 +1,21 @@
+import type { ConfigurationPageInfo } from '@jellyfin/sdk/lib/generated-client/models/configuration-page-info';
+
+export const findBestConfigurationPage = (
+    configurationPages: ConfigurationPageInfo[],
+    pluginId: string
+) => {
+    // Find candidates matching the plugin id
+    const candidates = configurationPages.filter(c => c.PluginId === pluginId);
+
+    // If none are found, return undefined
+    if (candidates.length === 0) return;
+    // If only one is found, return it
+    if (candidates.length === 1) return candidates[0];
+
+    // Prefer the first candidate with the EnableInMainMenu flag for consistency
+    const menuCandidate = candidates.find(c => !!c.EnableInMainMenu);
+    if (menuCandidate) return menuCandidate;
+
+    // Fallback to the first match
+    return candidates[0];
+};

src/apps/dashboard/features/plugins/api/pluginInfo.ts

@@ -0,0 +1,25 @@
+import type { PluginInfo } from '@jellyfin/sdk/lib/generated-client/models/plugin-info';
+import { PluginStatus } from '@jellyfin/sdk/lib/generated-client/models/plugin-status';
+
+/**
+ * HACK: The Plugins API is returning garbage data in some cases,
+ * so we need to try to find the "best" match if multiple exist.
+ */
+export const findBestPluginInfo = (
+    pluginId: string,
+    plugins?: PluginInfo[]
+) => {
+    if (!plugins) return;
+    // Find all plugin entries with a matching ID
+    const matches = plugins.filter(p => p.Id === pluginId);
+    // Get the first match (or undefined if none)
+    const firstMatch = matches?.[0];
+
+    if (matches.length > 1) {
+        return matches.find(p => p.Status === PluginStatus.Disabled) // Disabled entries take priority
+            || matches.find(p => p.Status === PluginStatus.Restart) // Then entries specifying restart is needed
+            || firstMatch; // Fallback to the first match
+    }
+
+    return firstMatch;
+};

src/apps/dashboard/features/plugins/api/queryKey.ts

@@ -0,0 +1,5 @@
+export enum QueryKey {
+    ConfigurationPages = 'ConfigurationPages',
+    PackageInfo = 'PackageInfo',
+    Plugins = 'Plugins'
+}

src/apps/dashboard/features/plugins/api/useConfigurationPages.ts

@@ -0,0 +1,40 @@
+import type { Api } from '@jellyfin/sdk';
+import type { DashboardApiGetConfigurationPagesRequest } from '@jellyfin/sdk/lib/generated-client/api/dashboard-api';
+import { getDashboardApi } from '@jellyfin/sdk/lib/utils/api/dashboard-api';
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { AxiosRequestConfig } from 'axios';
+
+import { useApi } from 'hooks/useApi';
+
+import { QueryKey } from './queryKey';
+
+const fetchConfigurationPages = async (
+    api?: Api,
+    params?: DashboardApiGetConfigurationPagesRequest,
+    options?: AxiosRequestConfig
+) => {
+    if (!api) {
+        console.warn('[fetchConfigurationPages] No API instance available');
+        return [];
+    }
+
+    const response = await getDashboardApi(api)
+        .getConfigurationPages(params, options);
+    return response.data;
+};
+
+const getConfigurationPagesQuery = (
+    api?: Api,
+    params?: DashboardApiGetConfigurationPagesRequest
+) => queryOptions({
+    queryKey: [ QueryKey.ConfigurationPages, params?.enableInMainMenu ],
+    queryFn: ({ signal }) => fetchConfigurationPages(api, params, { signal }),
+    enabled: !!api
+});
+
+export const useConfigurationPages = (
+    params?: DashboardApiGetConfigurationPagesRequest
+) => {
+    const { api } = useApi();
+    return useQuery(getConfigurationPagesQuery(api, params));
+};

src/apps/dashboard/features/plugins/api/useDisablePlugin.ts

@@ -0,0 +1,24 @@
+import type { PluginsApiDisablePluginRequest } from '@jellyfin/sdk/lib/generated-client/api/plugins-api';
+import { getPluginsApi } from '@jellyfin/sdk/lib/utils/api/plugins-api';
+import { useMutation } from '@tanstack/react-query';
+
+import { useApi } from 'hooks/useApi';
+import { queryClient } from 'utils/query/queryClient';
+
+import { QueryKey } from './queryKey';
+
+export const useDisablePlugin = () => {
+    const { api } = useApi();
+    return useMutation({
+        mutationFn: (params: PluginsApiDisablePluginRequest) => (
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            getPluginsApi(api!)
+                .disablePlugin(params)
+        ),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({
+                queryKey: [ QueryKey.Plugins ]
+            });
+        }
+    });
+};

src/apps/dashboard/features/plugins/api/useEnablePlugin.ts

@@ -0,0 +1,24 @@
+import type { PluginsApiEnablePluginRequest } from '@jellyfin/sdk/lib/generated-client/api/plugins-api';
+import { getPluginsApi } from '@jellyfin/sdk/lib/utils/api/plugins-api';
+import { useMutation } from '@tanstack/react-query';
+
+import { useApi } from 'hooks/useApi';
+import { queryClient } from 'utils/query/queryClient';
+
+import { QueryKey } from './queryKey';
+
+export const useEnablePlugin = () => {
+    const { api } = useApi();
+    return useMutation({
+        mutationFn: (params: PluginsApiEnablePluginRequest) => (
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            getPluginsApi(api!)
+                .enablePlugin(params)
+        ),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({
+                queryKey: [ QueryKey.Plugins ]
+            });
+        }
+    });
+};

src/apps/dashboard/features/plugins/api/useInstallPackage.ts

@@ -0,0 +1,27 @@
+import type { PackageApiInstallPackageRequest } from '@jellyfin/sdk/lib/generated-client/api/package-api';
+import { getPackageApi } from '@jellyfin/sdk/lib/utils/api/package-api';
+import { useMutation } from '@tanstack/react-query';
+
+import { useApi } from 'hooks/useApi';
+import { queryClient } from 'utils/query/queryClient';
+
+import { QueryKey } from './queryKey';
+
+export const useInstallPackage = () => {
+    const { api } = useApi();
+    return useMutation({
+        mutationFn: (params: PackageApiInstallPackageRequest) => (
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            getPackageApi(api!)
+                .installPackage(params)
+        ),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({
+                queryKey: [ QueryKey.ConfigurationPages ]
+            });
+            void queryClient.invalidateQueries({
+                queryKey: [ QueryKey.Plugins ]
+            });
+        }
+    });
+};

src/apps/dashboard/features/plugins/api/usePackageInfo.ts

@@ -0,0 +1,47 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { Api } from '@jellyfin/sdk';
+import type { PackageApiGetPackageInfoRequest } from '@jellyfin/sdk/lib/generated-client/api/package-api';
+import { getPackageApi } from '@jellyfin/sdk/lib/utils/api/package-api';
+import type { AxiosRequestConfig } from 'axios';
+
+import { useApi } from 'hooks/useApi';
+
+import { QueryKey } from './queryKey';
+
+const fetchPackageInfo = async (
+    api?: Api,
+    params?: PackageApiGetPackageInfoRequest,
+    options?: AxiosRequestConfig
+) => {
+    if (!api) {
+        console.warn('[fetchPackageInfo] No API instance available');
+        return;
+    }
+
+    if (!params) {
+        console.warn('[fetchPackageInfo] Missing request params');
+        return;
+    }
+
+    const response = await getPackageApi(api)
+        .getPackageInfo(params, options);
+    return response.data;
+};
+
+const getPackageInfoQuery = (
+    api?: Api,
+    params?: PackageApiGetPackageInfoRequest
+) => queryOptions({
+    // Don't retry since requests for plugins not available in repos fail
+    retry: false,
+    queryKey: [ QueryKey.PackageInfo, params?.name, params?.assemblyGuid ],
+    queryFn: ({ signal }) => fetchPackageInfo(api, params, { signal }),
+    enabled: !!api && !!params?.name
+});
+
+export const usePackageInfo = (
+    params?: PackageApiGetPackageInfoRequest
+) => {
+    const { api } = useApi();
+    return useQuery(getPackageInfoQuery(api, params));
+};

src/apps/dashboard/features/plugins/api/usePlugins.ts

@@ -0,0 +1,36 @@
+import type { Api } from '@jellyfin/sdk';
+import { getPluginsApi } from '@jellyfin/sdk/lib/utils/api/plugins-api';
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { AxiosRequestConfig } from 'axios';
+
+import { useApi } from 'hooks/useApi';
+
+import { QueryKey } from './queryKey';
+
+const fetchPlugins = async (
+    api?: Api,
+    options?: AxiosRequestConfig
+) => {
+    if (!api) {
+        console.warn('[fetchPlugins] No API instance available');
+        return [];
+    }
+
+    const response = await getPluginsApi(api)
+        .getPlugins(options);
+    return response.data;
+};
+
+const getPluginsQuery = (
+    api?: Api
+) => queryOptions({
+    queryKey: [ QueryKey.Plugins ],
+    queryFn: ({ signal }) => fetchPlugins(api, { signal }),
+    enabled: !!api
+});
+
+export const usePlugins = () => {
+    const { api } = useApi();
+    return useQuery(getPluginsQuery(api));
+};
+

src/apps/dashboard/features/plugins/api/useUninstallPlugin.ts

@@ -0,0 +1,27 @@
+import type { PluginsApiUninstallPluginByVersionRequest } from '@jellyfin/sdk/lib/generated-client/api/plugins-api';
+import { getPluginsApi } from '@jellyfin/sdk/lib/utils/api/plugins-api';
+import { useMutation } from '@tanstack/react-query';
+
+import { useApi } from 'hooks/useApi';
+import { queryClient } from 'utils/query/queryClient';
+
+import { QueryKey } from './queryKey';
+
+export const useUninstallPlugin = () => {
+    const { api } = useApi();
+    return useMutation({
+        mutationFn: (params: PluginsApiUninstallPluginByVersionRequest) => (
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            getPluginsApi(api!)
+                .uninstallPluginByVersion(params)
+        ),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({
+                queryKey: [ QueryKey.Plugins ]
+            });
+            void queryClient.invalidateQueries({
+                queryKey: [ QueryKey.ConfigurationPages ]
+            });
+        }
+    });
+};