From 766ca373b98a0ea0aad13a3990533fab17122b6a Mon Sep 17 00:00:00 2001
From: Vincent T <vtaylor@microsoft.com>
Date: Wed, 20 Nov 2024 14:28:17 -0500
Subject: [PATCH] plugin-catalog: Rework installed list to include all plugins

Signed-off-by: Vincent T <vtaylor@microsoft.com>
---
 .../src/components/plugins/InstalledList.tsx  | 141 ++++++++++++++----
 plugin-catalog/src/index.tsx                  |   7 +
 2 files changed, 115 insertions(+), 33 deletions(-)

diff --git a/plugin-catalog/src/components/plugins/InstalledList.tsx b/plugin-catalog/src/components/plugins/InstalledList.tsx
index 61addb7b..e6d17867 100644
--- a/plugin-catalog/src/components/plugins/InstalledList.tsx
+++ b/plugin-catalog/src/components/plugins/InstalledList.tsx
@@ -17,46 +17,108 @@ 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 (
     <SectionBox title="Installed" textAlign="center" paddingTop={2}>
       {error ? (
         <Typography>{`Error loading Installed plugins: ${error}`}</Typography>
       ) : (
-        <SimpleTable
-          columns={[
-            {
-              label: 'Name',
-              getter: plugin => (
-                <Box>
-                  <Link
-                    routeName="/plugin-catalog/:repoName/:pluginName"
-                    params={{ repoName: plugin.repoName, pluginName: plugin.folderName }}
-                  >
-                    {plugin.pluginTitle}
-                  </Link>
-                </Box>
-              ),
-            },
-            {
-              label: 'Version',
-              getter: plugin => plugin.pluginVersion,
-            },
-            {
-              label: 'Repo',
-              getter: plugin => plugin.repoName,
-            },
-            {
-              label: 'Author',
-              getter: plugin => plugin.author,
-            },
-          ]}
-          emptyMessage="No plugins installed"
-          data={installedPlugins || []}
-        />
+        <Box sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+        }} >
+
+          <Box sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            alignItems: 'start',
+          }}>
+            <Typography variant="h6" components="h2">Installed from the Plugin Catalog</Typography>
+            <SimpleTable
+              columns={[
+                {
+                  label: 'Name',
+                  getter: plugin => (
+                    <Box>
+                      <Link
+                        routeName="/plugin-catalog/:repoName/:pluginName"
+                        params={{ repoName: plugin.repoName, pluginName: plugin.folderName }}
+                      >
+                        {plugin.pluginTitle}
+                      </Link>
+                    </Box>
+                  ),
+                },
+                {
+                  label: 'Version',
+                  getter: plugin => plugin.pluginVersion,
+                },
+                {
+                  label: 'Repo',
+                  getter: plugin => plugin.repoName,
+                },
+                {
+                  label: 'Author',
+                  getter: plugin => plugin.author,
+                },
+              ]}
+              emptyMessage="No plugins installed"
+              data={installedPlugins || []}
+            />
+          </Box>
+
+          <Box sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            alignItems: 'start',
+
+          }}>
+            <Typography variant="h6" components="h2">Other Installed Plugins</Typography>
+
+            <SimpleTable
+              columns={[
+                {
+                  label: 'Name',
+                  getter: otherInstalledPlugins => (
+                    <Box>
+                      <Link
+                        routeName={`/settings/plugins/:name`}
+                        params={{ name: otherInstalledPlugins.name }}
+                      >
+                        {otherInstalledPlugins.name}
+                      </Link>
+                    </Box>
+                  ),
+                },
+                {
+                  label: 'Version',
+                  getter: otherInstalledPlugins => otherInstalledPlugins.version,
+                },
+                {
+                  label: 'Repo',
+                  getter: plugin => plugin.repoName,
+                },
+                {
+                  label: 'Author',
+                  getter: plugin => plugin.author,
+                },
+              ]}
+              emptyMessage="No plugins installed"
+              data={otherInstalledPlugins || []}
+            />
+          </Box>
+
+
+
+
+        </Box>
       )}
     </SectionBox>
   );
@@ -64,6 +126,7 @@ export function PurePluginInstalledList({ installedPlugins, error }: PurePluginI
 
 export function PluginInstalledList() {
   const [installedPlugins, setInstalledPlugins] = useState<Plugin[] | null>(null);
+  const [otherInstalledPlugins, setOtherInstalledPlugins] = useState<Plugin[] | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -81,8 +144,20 @@ export function PluginInstalledList() {
       }
     }
 
+    async function fetchOtherInstalledPlugins() {
+      const storedPlugins = localStorage.getItem('headlampPluginSettings');
+      if (storedPlugins) {
+        const parsedPlugins = JSON.parse(storedPlugins);
+        setOtherInstalledPlugins(parsedPlugins);
+        console.log('other plugins', storedPlugins)
+      } else {
+        setOtherInstalledPlugins([]);
+      }
+    }
+
     fetchInstalledPlugins();
+    fetchOtherInstalledPlugins();
   }, []);
 
-  return <PurePluginInstalledList installedPlugins={installedPlugins} error={error} />;
+  return <PurePluginInstalledList installedPlugins={installedPlugins} otherInstalledPlugins={otherInstalledPlugins} error={error} />;
 }
diff --git a/plugin-catalog/src/index.tsx b/plugin-catalog/src/index.tsx
index ec99cc3f..f640d882 100644
--- a/plugin-catalog/src/index.tsx
+++ b/plugin-catalog/src/index.tsx
@@ -80,4 +80,11 @@ if (Headlamp.isRunningAsApp()) {
   });
 }
 
+registerRoute({
+  path: '/settings/plugins/:name',
+  exact: true,
+  noAuthRequired: true,
+  useClusterURL: false,
+})
+
 registerPluginSettings('@headlamp-k8s/plugin-catalog', Settings, true);