diff --git a/plugin-catalog/src/components/plugins/InstalledList.tsx b/plugin-catalog/src/components/plugins/InstalledList.tsx
index 24fe40587..4d02307cc 100644
--- a/plugin-catalog/src/components/plugins/InstalledList.tsx
+++ b/plugin-catalog/src/components/plugins/InstalledList.tsx
@@ -5,6 +5,9 @@ import { Link, SectionBox, SimpleTable } from '@kinvolk/headlamp-plugin/lib/Comm
import { Typography } from '@mui/material';
import { Box } from '@mui/material';
import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+
+// this will need to import the store from the main project after everything is merged in from the refactor
interface Plugin {
pluginName: string;
@@ -17,16 +20,21 @@ interface Plugin {
export interface PurePluginInstalledListProps {
installedPlugins: Plugin[] | null;
+ otherInstalledPlugins: any[] | null;
error: string | null;
}
-export function PurePluginInstalledList({ installedPlugins, error }: PurePluginInstalledListProps) {
+export function PurePluginInstalledList({
+ installedPlugins,
+ otherInstalledPlugins,
+ error,
+}: PurePluginInstalledListProps) {
return (
Go to all installed plugins,
]
@@ -70,6 +78,102 @@ export function PurePluginInstalledList({ installedPlugins, error }: PurePluginI
emptyMessage="No plugins installed"
data={installedPlugins || []}
/>
+
+
+
+ Installed from the Plugin Catalog
+
+ (
+
+
+ {plugin.pluginTitle}
+
+
+ ),
+ },
+ {
+ label: 'Version',
+ getter: plugin => plugin.pluginVersion,
+ },
+ {
+ label: 'Repo',
+ getter: plugin => plugin.repoName,
+ },
+ {
+ label: 'Author',
+ getter: plugin => plugin.author,
+ },
+ ]}
+ emptyMessage="No plugins installed"
+ data={installedPlugins || []}
+ />
+
+
+
+
+ Other Installed Plugins
+
+
+ (
+
+
+ {otherInstalledPlugins.name}
+
+
+ ),
+ },
+ {
+ label: 'Version',
+ getter: otherInstalledPlugins => otherInstalledPlugins.version,
+ },
+ {
+ label: 'Repo',
+ getter: plugin => plugin.repoName,
+ },
+ {
+ label: 'Author',
+ getter: plugin => plugin.author,
+ },
+ ]}
+ emptyMessage="No plugins installed"
+ data={otherInstalledPlugins || []}
+ />
+
+
>
)}
@@ -77,9 +181,17 @@ export function PurePluginInstalledList({ installedPlugins, error }: PurePluginI
}
export function PluginInstalledList() {
+
+ // const mainPlugins = useTypedSelector(state => state.plugins.PluginSettings);
+
const [installedPlugins, setInstalledPlugins] = useState(null);
+ const [otherInstalledPlugins, setOtherInstalledPlugins] = useState(null);
const [error, setError] = useState(null);
+ const pluginInfo = useSelector((state: any) => state.plugins.pluginSettings);
+
+ console.log("WORKING", pluginInfo);
+
useEffect(() => {
async function fetchInstalledPlugins() {
try {
@@ -95,8 +207,26 @@ export function PluginInstalledList() {
}
}
+ function fetchOtherInstalledPlugins() {
+ const storedPlugins = localStorage.getItem('headlampPluginSettings');
+ if (storedPlugins) {
+ const parsedPlugins = JSON.parse(storedPlugins);
+ setOtherInstalledPlugins(parsedPlugins);
+ } else {
+ setOtherInstalledPlugins([]);
+ }
+ }
+
fetchInstalledPlugins();
+ fetchOtherInstalledPlugins();
}, []);
- return ;
+ return (
+
+ );
}
+