frontend: Add usePlugins hook to plugin settings logic

Signed-off-by: Vincent T <[email protected]>

Author: vyncent-t

frontend/src/components/App/PluginSettings/PluginSettings.tsx

@@ -26,6 +26,7 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { isElectron } from '../../../helpers/isElectron';
+import { usePlugins } from '../../../lib/k8s/api/v2/plugins';
 import { useFilterFunc } from '../../../lib/util';
 import { PluginInfo, reloadPage, setPluginSettings } from '../../../plugin/pluginsSlice';
 import { useTypedSelector } from '../../../redux/reducers/reducers';
@@ -306,9 +307,15 @@ export default function PluginSettings() {
 
   const pluginSettings = useTypedSelector(state => state.plugins.pluginSettings);
 
+  const { data: plugins } = usePlugins(pluginSettings);
+
+  if (!plugins?.length) {
+    return null;
+  }
+
   return (
     <PluginSettingsPure
-      plugins={pluginSettings}
+      plugins={plugins}
       onSave={plugins => {
         dispatch(setPluginSettings(plugins));
         dispatch(reloadPage());

frontend/src/components/App/PluginSettings/PluginSettingsDetails.tsx

@@ -25,6 +25,7 @@ import { useParams } from 'react-router-dom';
 import { useHistory } from 'react-router-dom';
 import { isElectron } from '../../../helpers/isElectron';
 import { getCluster } from '../../../lib/cluster';
+import { usePlugins } from '../../../lib/k8s/api/v2/plugins';
 import { deletePlugin } from '../../../lib/k8s/apiProxy';
 import { ConfigStore } from '../../../plugin/configStore';
 import { PluginInfo, reloadPage } from '../../../plugin/pluginsSlice';
@@ -82,13 +83,14 @@ const PluginSettingsDetailsInitializer = (props: { plugin: PluginInfo }) => {
 };
 
 export default function PluginSettingsDetails() {
-  const pluginSettings = useTypedSelector(state => state.plugins.pluginSettings);
   const { name } = useParams<{ name: string }>();
+  const pluginSettings = useTypedSelector(state => state.plugins.pluginSettings);
+  const { data: plugins } = usePlugins(pluginSettings);
 
   const plugin = useMemo(() => {
     const decodedName = decodeURIComponent(name);
-    return pluginSettings.find(plugin => plugin.name === decodedName);
-  }, [pluginSettings, name]);
+    return plugins?.find((plugin: PluginInfo) => plugin.name === decodedName);
+  }, [plugins, name]);
 
   if (!plugin) {
     return <NotFoundComponent />;