diff --git a/src/apps/dashboard/routes/plugins/plugin.tsx b/src/apps/dashboard/routes/plugins/plugin.tsx index 56fc9dd69a..1318e1813d 100644 --- a/src/apps/dashboard/routes/plugins/plugin.tsx +++ b/src/apps/dashboard/routes/plugins/plugin.tsx @@ -13,7 +13,7 @@ import Typography from '@mui/material/Typography/Typography'; import Delete from '@mui/icons-material/Delete'; import Download from '@mui/icons-material/Download'; import Settings from '@mui/icons-material/Settings'; -import React, { type FC, useEffect, useState, useCallback, useMemo } from 'react'; +import React, { type FC, useState, useCallback, useMemo } from 'react'; import { useSearchParams, Link as RouterLink, useParams } from 'react-router-dom'; import { findBestConfigurationPage } from 'apps/dashboard/features/plugins/api/configurationPage'; @@ -53,13 +53,12 @@ const PluginPage: FC = () => { const installPlugin = useInstallPackage(); const uninstallPlugin = useUninstallPlugin(); - const [ isLoading, setIsLoading ] = useState(true); const [ isEnabledOverride, setIsEnabledOverride ] = useState(); const [ isInstallConfirmOpen, setIsInstallConfirmOpen ] = useState(false); const [ isUninstallConfirmOpen, setIsUninstallConfirmOpen ] = useState(false); const [ pendingInstallVersion, setPendingInstallVersion ] = useState(); - const [ pluginDetails, setPluginDetails ] = useState(); - const [ pluginName, setPluginName ] = useState(); + + const pluginName = searchParams.get('name') ?? undefined; const { data: configurationPages, @@ -82,6 +81,51 @@ const PluginPage: FC = () => { isError: isPluginsError } = usePlugins(); + const isLoading = + isConfigurationPagesLoading || isPackageInfoLoading || isPluginsLoading; + + const pluginDetails = useMemo(() => { + if (pluginId && !isPluginsLoading) { + const pluginInfo = findBestPluginInfo(pluginId, plugins); + + let version; + if (pluginInfo) { + // Find the installed version + const repoVersion = packageInfo?.versions?.find(v => v.version === pluginInfo.Version); + version = repoVersion || { + version: pluginInfo.Version, + VersionNumber: pluginInfo.Version + }; + } else { + // Use the latest version + version = packageInfo?.versions?.[0]; + } + + let imageUrl; + if (pluginInfo?.HasImage) { + imageUrl = api?.axiosInstance.getUri({ + baseURL: api.basePath, + url: `/Plugins/${pluginInfo.Id}/${pluginInfo.Version}/Image` + }); + } + + return { + canUninstall: !!pluginInfo?.CanUninstall, + description: pluginInfo?.Description || packageInfo?.description || packageInfo?.overview, + id: pluginId, + imageUrl: imageUrl || packageInfo?.imageUrl || undefined, + isEnabled: (isEnabledOverride && pluginInfo?.Status === PluginStatus.Restart) + ?? pluginInfo?.Status !== PluginStatus.Disabled, + name: pluginName || pluginInfo?.Name || packageInfo?.name, + owner: packageInfo?.owner, + status: pluginInfo?.Status, + configurationPage: findBestConfigurationPage(configurationPages || [], pluginId), + version, + versions: packageInfo?.versions || [] + }; + } + }, [api?.axiosInstance, api?.basePath, configurationPages, isEnabledOverride, isPluginsLoading, packageInfo?.description, packageInfo?.imageUrl, packageInfo?.name, packageInfo?.overview, packageInfo?.owner, packageInfo?.versions, pluginId, pluginName, plugins]); + const alertMessages = useMemo(() => { const alerts: AlertMessage[] = []; @@ -245,56 +289,6 @@ const PluginPage: FC = () => { setIsUninstallConfirmOpen(false); }, []); - useEffect(() => { - setIsLoading(isConfigurationPagesLoading || isPackageInfoLoading || isPluginsLoading); - }, [ isConfigurationPagesLoading, isPackageInfoLoading, isPluginsLoading ]); - - useEffect(() => { - setPluginName(searchParams.get('name') ?? undefined); - }, [ searchParams ]); - - useEffect(() => { - if (pluginId && !isPluginsLoading) { - const pluginInfo = findBestPluginInfo(pluginId, plugins); - - let version; - if (pluginInfo) { - // Find the installed version - const repoVersion = packageInfo?.versions?.find(v => v.version === pluginInfo.Version); - version = repoVersion || { - version: pluginInfo.Version, - VersionNumber: pluginInfo.Version - }; - } else { - // Use the latest version - version = packageInfo?.versions?.[0]; - } - - let imageUrl; - if (pluginInfo?.HasImage) { - imageUrl = api?.axiosInstance.getUri({ - baseURL: api.basePath, - url: `/Plugins/${pluginInfo.Id}/${pluginInfo.Version}/Image` - }); - } - - setPluginDetails({ - canUninstall: !!pluginInfo?.CanUninstall, - description: pluginInfo?.Description || packageInfo?.description || packageInfo?.overview, - id: pluginId, - imageUrl: imageUrl || packageInfo?.imageUrl || undefined, - isEnabled: (isEnabledOverride && pluginInfo?.Status === PluginStatus.Restart) - ?? pluginInfo?.Status !== PluginStatus.Disabled, - name: pluginName || pluginInfo?.Name || packageInfo?.name, - owner: packageInfo?.owner, - status: pluginInfo?.Status, - configurationPage: findBestConfigurationPage(configurationPages || [], pluginId), - version, - versions: packageInfo?.versions || [] - }); - } - }, [ api, configurationPages, isEnabledOverride, isPluginsLoading, pluginId, packageInfo, pluginName, plugins ]); - return (