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