plugins: Support scoped/namespace package names in headlamp-plugin

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

@@ -25,7 +25,7 @@ import { useTranslation } from 'react-i18next';
 import { useHistory, useParams } from 'react-router-dom';
 import { isElectron } from '../../../helpers/isElectron';
 import { ConfigStore } from '../../../plugin/configStore';
-import { PluginInfo } from '../../../plugin/pluginsSlice';
+import { getPluginFolderName, PluginInfo } from '../../../plugin/pluginsSlice';
 import { useTypedSelector } from '../../../redux/hooks';
 import NotFoundComponent from '../../404';
 import { SectionHeader } from '../../common';
@@ -41,7 +41,7 @@ function openPluginFolder(plugin: PluginInfo) {
     return;
   }
 
-  const folderName = plugin.folderName || plugin.name.split('/').pop();
+  const folderName = getPluginFolderName(plugin);
   if (!folderName || !plugin.type) {
     return;
   }
@@ -61,7 +61,7 @@ function canOpenPluginFolder(plugin: PluginInfo): boolean {
     return false;
   }
 
-  const folderName = plugin.folderName || plugin.name.split('/').pop();
+  const folderName = getPluginFolderName(plugin);
   return !!(folderName && plugin.type);
 }
 

frontend/src/components/App/PluginSettings/usePluginDelete.ts

@@ -19,7 +19,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { deletePlugin } from '../../../lib/k8s/api/v1/pluginsApi';
-import { PluginInfo, reloadPage } from '../../../plugin/pluginsSlice';
+import { getPluginFolderName, PluginInfo, reloadPage } from '../../../plugin/pluginsSlice';
 import { clusterAction } from '../../../redux/clusterActionSlice';
 import type { AppDispatch } from '../../../redux/stores/store';
 
@@ -49,7 +49,7 @@ export function usePluginDelete() {
     (plugin: PluginInfo): Promise<void> => {
       // Use folderName when present (the actual folder name on disk),
       // otherwise fall back to extracting from the name.
-      const pluginFolderName = plugin.folderName || plugin.name.split('/').splice(-1)[0];
+      const pluginFolderName = getPluginFolderName(plugin);
 
       // Only user and development plugins can be deleted.
       const pluginType =

frontend/src/plugin/pluginsSlice.ts

@@ -125,6 +125,14 @@ export type PluginInfo = {
   displaySettingsComponentWithSaveButton?: boolean;
 };
 
+/**
+ * Returns the folder name of a plugin on the local filesystem.
+ * Handles scoped packages cleanly by mapping them to flat naming (e.g. @org/plugin -> org-plugin).
+ */
+export function getPluginFolderName(plugin: PluginInfo): string {
+  return plugin.folderName || plugin.name.replace('@', '').replace('/', '-');
+}
+
 export interface PluginsState {
   /** Have plugins finished executing? */
   loaded: boolean;

plugins/headlamp-plugin/bin/headlamp-plugin.js

@@ -504,9 +504,8 @@ async function start() {
   async function copyToPluginsFolder(viteConfig) {
     const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'));
 
-    // @todo: should the whole package name be used here,
-    //    and the load be fixed to use? What about namespace packages?
-    const packageName = packageJson.name.split('/').splice(-1)[0];
+    // Support scoped packages safely by mapping them to flat naming (e.g. @org/plugin -> org_plugin)
+    const packageName = packageJson.name.replace('@', '').replace('/', '_');
     const paths = envPaths('Headlamp', { suffix: '' });
     const configDir = fs.existsSync(paths.data) ? paths.data : paths.config;