Redesign add plugins page

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 ]
+            });
+        }
+    });
+};