Frontend: Fix specific pod counter test failing build

Signed-off-by: Vincent T <[email protected]>

e2e-tests/tests/headlampPage.ts

@@ -119,6 +119,13 @@ export class HeadlampPage {
     expect(rowsDisplayed1).not.toBe(rowsDisplayed2);
   }
 
+  async checkPluginTitle(pluginName: string) {
+    await this.page.waitForLoadState('load');
+    await this.page.waitForSelector(`h2:has-text("${pluginName}")`);
+
+    expect(await this.page.locator('h2').textContent()).toBe(pluginName);
+  }
+
   async getRowsDisplayed() {
     const paginationCaption = this.page.locator("span:has-text(' of ')");
     const captionText = await paginationCaption.textContent();

e2e-tests/tests/pluginSetting.spec.ts

@@ -18,13 +18,17 @@ test('plugin settings page should have a table', async ({ page }) => {
   await headlampPage.tableHasHeaders('table', expectedHeaders);
 });
 
+// NOTE:
+// - this test checks to see if the plugin details view has sub options
+// - this test assumes that there is an installed headlamp-pod-counter plugin already within the builder, fails on local without plugin
+// - when testing plugin names use the name that the plugin is displayed in the UI and not the package name, i.e. headlamp-pod-counter and not @kinvolk/headlamp-pod-counter
 test('pod counter plugin should have setting option', async ({ page }) => {
   const headlampPage = new HeadlampPage(page);
   const pluginName = 'headlamp-pod-counter';
 
   await headlampPage.authenticate();
   await headlampPage.navigateTopage('/settings/plugins', /Plugin/);
   await headlampPage.clickOnPlugin(pluginName);
-  await headlampPage.hasTitleContaining(/Plugin Details/);
+  await headlampPage.checkPluginTitle(pluginName);
   await headlampPage.checkPageContent('Custom Error Message');
 });

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

@@ -71,13 +71,9 @@ export default function PluginSettingsDetails() {
   const pluginSettings = useTypedSelector(state => state.plugins.pluginSettings);
   const { data: plugins } = usePlugins(pluginSettings);
 
-  if (!plugins?.length) {
-    return null;
-  }
-
   const plugin = useMemo(() => {
     const decodedName = decodeURIComponent(name);
-    return plugins.find((plugin: PluginInfo) => plugin.name === decodedName);
+    return plugins?.find((plugin: PluginInfo) => plugin.name === decodedName);
   }, [plugins, name]);
 
   if (!plugin) {

frontend/src/lib/k8s/api/v2/plugins.ts

@@ -2,7 +2,7 @@ import '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import semver from 'semver';
 import helpers from '../../../../helpers';
-import { PluginInfo } from '../../../../plugin/pluginsSlice';
+import { PluginInfo, PluginSettings } from '../../../../plugin/pluginsSlice';
 import { backendFetch } from './fetch';
 
 /*
@@ -11,7 +11,7 @@ import { backendFetch } from './fetch';
  * - it will also do a compatibility check for the plugins and return the plugins with their compatibility status,
  * - the compatibility check is needed to render the plugin switches
  */
-export async function getPlugins(pluginSettings: { name: string; isEnabled?: boolean }[]) {
+export async function getPlugins(pluginSettings: PluginSettings[]) {
   const pluginPaths = (await fetch(`${helpers.getAppUrl()}plugins`).then(resp =>
     resp.json()
   )) as string[];
@@ -26,9 +26,9 @@ export async function getPlugins(pluginSettings: { name: string; isEnabled?: boo
 
           console.warn(
             'Missing package.json. ' +
-            `Please upgrade the plugin ${path}` +
-            ' by running "headlamp-plugin extract" again.' +
-            ' Please use headlamp-plugin >= 0.8.0'
+              `Please upgrade the plugin ${path}` +
+              ' by running "headlamp-plugin extract" again.' +
+              ' Please use headlamp-plugin >= 0.8.0'
           );
 
           return {
@@ -57,6 +57,9 @@ export async function getPlugins(pluginSettings: { name: string; isEnabled?: boo
 
       return {
         ...plugin,
+        settingsComponent: matchedSetting.settingsComponent,
+        displaySettingsComponentWithSaveButton:
+          matchedSetting.displaySettingsComponentWithSaveButton,
         isEnabled: matchedSetting.isEnabled,
         isCompatible: isCompatible,
       };
@@ -67,7 +70,7 @@ export async function getPlugins(pluginSettings: { name: string; isEnabled?: boo
   return pluginsWithIsEnabled;
 }
 
-export function usePlugins(pluginSettings: { name: string; isEnabled?: boolean }[]) {
+export function usePlugins(pluginSettings: { name: string; isEnabled: boolean }[]) {
   // takes two params, the key and the function that will be called to get the data
   return useQuery({ queryKey: ['plugins'], queryFn: () => getPlugins(pluginSettings) });
 }

frontend/src/plugin/pluginsSlice.ts

@@ -87,11 +87,18 @@ export type PluginInfo = {
   displaySettingsComponentWithSaveButton?: boolean;
 };
 
+export interface PluginSettings {
+  name: string;
+  isEnabled: boolean;
+  settingsComponent?: PluginSettingsComponentType;
+  displaySettingsComponentWithSaveButton?: boolean;
+}
+
 export interface PluginsState {
   /** Have plugins finished executing? */
   loaded: boolean;
   /** Information stored by settings about plugins. */
-  pluginSettings: { name: string; isEnabled: boolean }[];
+  pluginSettings: PluginSettings[];
 }
 const initialState: PluginsState = {
   /** Once the plugins have been fetched and executed. */