plugin-catalog: Rework installed list to include all plugins

plugin-catalog/src/components/plugins/InstalledList.stories.tsx

@@ -31,6 +31,7 @@ const Template: StoryFn<PurePluginInstalledListProps> = args => (
 
 const samplePlugins = [
   {
+    artifacthub: 'abcde1',
     pluginName: 'plugin1',
     pluginTitle: 'Plugin 1',
     pluginVersion: '1.0.0',
@@ -39,6 +40,7 @@ const samplePlugins = [
     author: 'Author 1',
   },
   {
+    artifacthub: 'abcde2',
     pluginName: 'plugin2',
     pluginTitle: 'Plugin 2',
     pluginVersion: '1.2.0',
@@ -60,4 +62,11 @@ WithError.args = {
   error: 'Failed to load plugins.',
 };
 
+export const WithRepeatedPlugins = Template.bind({});
+WithRepeatedPlugins.args = {
+  installedPlugins: samplePlugins,
+  otherInstalledPlugins: [samplePlugins[1]],
+  error: 'Failed to load plugins.',
+};
+
 export const Empty = Template.bind({});

plugin-catalog/src/components/plugins/InstalledList.tsx

@@ -4,7 +4,8 @@ import { PluginManager } from '@kinvolk/headlamp-plugin/lib';
 import { Link, SectionBox, SimpleTable } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import { Typography } from '@mui/material';
 import { Box } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
 
 interface Plugin {
   pluginName: string;
@@ -16,11 +17,25 @@ interface Plugin {
 }
 
 export interface PurePluginInstalledListProps {
-  installedPlugins: Plugin[] | null;
+  catalogPlugins: Plugin[] | null;
+  nonCatalogPlugins: PluginInfo[] | null;
   error: string | null;
 }
 
-export function PurePluginInstalledList({ installedPlugins, error }: PurePluginInstalledListProps) {
+export type PluginInfo = {
+  name: string;
+  displayName?: string;
+  origin?: string;
+  repository?: any;
+  version?: string;
+  artifacthub?: boolean;
+};
+
+export function PurePluginInstalledList({
+  catalogPlugins,
+  nonCatalogPlugins,
+  error,
+}: PurePluginInstalledListProps) {
   return (
     <SectionBox
       title="Installed"
@@ -35,57 +50,127 @@ export function PurePluginInstalledList({ installedPlugins, error }: PurePluginI
         <Typography>{`Error loading Installed plugins: ${error}`}</Typography>
       ) : (
         <>
-          <Typography component="h2">Plugins 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
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2,
+            }}
+          >
+            <Box>
+              <Typography variant="h6" components="h2">
+                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: 'Repository',
+                    getter: plugin => plugin.repoName,
+                  },
+                ]}
+                emptyMessage="No plugins installed from the Plugin Catalog"
+                data={catalogPlugins || []}
+              />
+            </Box>
+
+            <Box>
+              <Typography variant="h6" components="h2">
+                Other Plugins
+              </Typography>
+
+              <SimpleTable
+                columns={[
+                  {
+                    label: 'Name',
+                    getter: otherInstalledPlugins => (
+                      <Box>
+                        <Link
+                          routeName="pluginDetails"
+                          params={{ name: otherInstalledPlugins.name }}
+                        >
+                          {otherInstalledPlugins.displayName}
+                        </Link>
+                      </Box>
+                    ),
+                  },
+                  {
+                    label: 'Version',
+                    getter: otherInstalledPlugins => otherInstalledPlugins.version,
+                  },
+                  {
+                    label: 'Author',
+                    getter: plugin => {
+                      const url = plugin?.homepage || plugin?.repository?.url;
+                      return plugin?.origin ? (
+                        url ? (
+                          <Link href={url}>{plugin.origin}</Link>
+                        ) : (
+                          plugin?.origin
+                        )
+                      ) : (
+                        'Unknown'
+                      );
+                    },
+                  },
+                ]}
+                emptyMessage="No plugins installed"
+                data={nonCatalogPlugins || []}
+              />
+            </Box>
+          </Box>
         </>
       )}
     </SectionBox>
   );
 }
 
 export function PluginInstalledList() {
-  const [installedPlugins, setInstalledPlugins] = useState<Plugin[] | null>(null);
+  const [catalogPlugins, setCatalogPlugins] = useState<Plugin[] | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const allInstalledPlugins = useSelector((state: any) => state.plugins.pluginSettings);
+  const nonCatalogPlugins = useMemo(() => {
+    const pluginList = allInstalledPlugins.filter((plugin: PluginInfo) => !plugin.artifacthub);
+
+    // Let's ensure we split the origin from the name
+    return pluginList.map((plugin: PluginInfo) => {
+      const [author, name] = plugin.name.includes('@')
+        ? plugin.name.split(/\/(.+)/)
+        : [null, plugin.name];
+
+      return {
+        ...plugin,
+        displayName: name ?? plugin.name,
+        origin: plugin.origin ?? author?.substring(1) ?? 'Unknown',
+      };
+    });
+  }, [allInstalledPlugins]);
 
   useEffect(() => {
     async function fetchInstalledPlugins() {
       try {
         const data = await PluginManager.list();
-        setInstalledPlugins(data);
+        setCatalogPlugins(data);
       } catch (error: any) {
         // @todo: We should have a better way to determine if the error is an ENOENT
         if (error.message.startsWith('ENOENT')) {
-          setInstalledPlugins([]);
+          setCatalogPlugins([]);
         } else {
           setError(error.message);
         }
@@ -95,5 +180,11 @@ export function PluginInstalledList() {
     fetchInstalledPlugins();
   }, []);
 
-  return <PurePluginInstalledList installedPlugins={installedPlugins} error={error} />;
+  return (
+    <PurePluginInstalledList
+      catalogPlugins={catalogPlugins}
+      nonCatalogPlugins={nonCatalogPlugins}
+      error={error}
+    />
+  );
 }