Merge pull request #1570 from headlamp-k8s/compat-check

plugin: Add plugin compatibility check UI
headlamp-k8s · Mar 5, 2024 · ddd07a2 · ddd07a2
2 parents 154a574 + df55a76
commit ddd07a2
Show file tree

Hide file tree

Showing 16 changed files with 122 additions and 1,237 deletions.
diff --git a/e2e-tests/tests/pluginSetting.spec.ts b/e2e-tests/tests/pluginSetting.spec.ts
@@ -10,7 +10,8 @@ test('plugin settings page should have a title', async ({ page }) => {
 
 test('plugin settings page should have a table', async ({ page }) => {
   const headlampPage = new HeadlampPage(page);
-  const expectedHeaders = ['Name', 'Description', 'Origin', 'Status', 'Enable'];
+  const expectedHeaders = ['Name', 'Description', 'Origin', 'Status'];
+  // note: Enable column is only there in app mode.
 
   await headlampPage.authenticate();
   await headlampPage.navigateTopage('/settings/plugins', /Plugins/);

diff --git a/frontend/package.json b/frontend/package.json
@@ -107,7 +107,7 @@
     "storybook": "storybook dev -p 6006 -s public",
     "build-typedoc": "npx typedoc",
     "build-storybook": "storybook build -s public -o ../docs/development/storybook",
-    "i18n": "npx --no-install i18next ./src/**/ts* ./src/**/**/*.ts* ./src/**/**/**/*.ts* -c ./src/i18n/i18next-parser.config.js",
+    "i18n": "npx --no-install i18next ./src/**/*.ts* ./src/**/**/*.ts* ./src/**/**/**/*.ts* -c ./src/i18n/i18next-parser.config.js",
     "tsc": "tsc",
     "make-version": "node ./make-env.js",
     "postinstall": "patch-package"

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -10,7 +10,6 @@ import i18n from './i18n/config';
 import { useElectronI18n } from './i18n/electronI18n';
 import ThemeProviderNexti18n from './i18n/ThemeProviderNexti18n';
 import themes, { getThemeName, usePrefersColorScheme } from './lib/themes';
-import Plugins from './plugin/Plugins';
 import { useTypedSelector } from './redux/reducers/reducers';
 import store from './redux/stores/store';
 
@@ -34,7 +33,6 @@ function App() {
   return (
     <ErrorBoundary fallback={<ErrorComponent />}>
       <Provider store={store}>
-        <Plugins />
         <AppWithRedux>
           <AppContainer />
         </AppWithRedux>

diff --git a/frontend/src/components/App/AppContainer.tsx b/frontend/src/components/App/AppContainer.tsx
@@ -2,6 +2,7 @@ import { SnackbarProvider } from 'notistack';
 import React from 'react';
 import { BrowserRouter, HashRouter } from 'react-router-dom';
 import helpers from '../../helpers';
+import Plugins from '../../plugin/Plugins';
 import ReleaseNotes from '../common/ReleaseNotes/ReleaseNotes';
 import Layout from './Layout';
 import { PreviousRouteProvider } from './RouteSwitcher';
@@ -23,6 +24,7 @@ export default function AppContainer() {
     >
       <Router>
         <PreviousRouteProvider>
+          <Plugins />
           <Layout />
         </PreviousRouteProvider>
       </Router>

diff --git a/frontend/src/components/App/PluginSettings/PluginSettings.stories.tsx b/frontend/src/components/App/PluginSettings/PluginSettings.stories.tsx
@@ -26,6 +26,7 @@ function createDemoData(arrSize: number, useHomepage?: boolean) {
       name: `plugin a ${i}`,
       description: `This is a plugin for this project PLUGIN A${i}`,
       isEnabled: i % 2 === 0,
+      isCompatible: i % 2 === 0,
     };
 
     if (useHomepage) {

diff --git a/frontend/src/components/App/PluginSettings/PluginSettings.tsx b/frontend/src/components/App/PluginSettings/PluginSettings.tsx
@@ -5,6 +5,7 @@ import Link from '@mui/material/Link';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
+import helpers from '../../../helpers';
 import { useFilterFunc } from '../../../lib/util';
 import { PluginInfo, reloadPage, setPluginSettings } from '../../../plugin/pluginsSlice';
 import { useTypedSelector } from '../../../redux/reducers/reducers';
@@ -167,7 +168,7 @@ export function PluginSettingsPure(props: PluginSettingsPureProps) {
           columns={[
             {
               label: t('translation|Name'),
-              getter: plugin => {
+              getter: (plugin: PluginInfo) => {
                 return (
                   <>
                     <Typography variant="subtitle1">
@@ -183,7 +184,7 @@ export function PluginSettingsPure(props: PluginSettingsPureProps) {
                   </>
                 );
               },
-              sort: (a, b) => a.name.localeCompare(b.name),
+              sort: (a: PluginInfo, b: PluginInfo) => a.name.localeCompare(b.name),
             },
             {
               label: t('translation|Description'),
@@ -192,7 +193,7 @@ export function PluginSettingsPure(props: PluginSettingsPureProps) {
             },
             {
               label: t('translation|Origin'),
-              getter: plugin => {
+              getter: (plugin: PluginInfo) => {
                 const url = plugin?.homepage || plugin?.repository?.url;
                 return plugin?.origin ? (
                   url ? (
@@ -209,14 +210,20 @@ export function PluginSettingsPure(props: PluginSettingsPureProps) {
             // TODO: Fetch the plugin status from the plugin settings store
             {
               label: t('translation|Status'),
-              getter: plugin => {
+              getter: (plugin: PluginInfo) => {
+                if (plugin.isCompatible === false) {
+                  return t('translation|Incompatible');
+                }
                 return plugin.isEnabled ? t('translation|Enabled') : t('translation|Disabled');
               },
               sort: true,
             },
             {
               label: t('translation|Enable'),
-              getter: plugin => {
+              getter: (plugin: PluginInfo) => {
+                if (!plugin.isCompatible || !helpers.isElectron()) {
+                  return null;
+                }
                 return (
                   <EnableSwitch
                     aria-label={`Toggle ${plugin.name}`}
@@ -227,9 +234,12 @@ export function PluginSettingsPure(props: PluginSettingsPureProps) {
                   />
                 );
               },
-              sort: (a, b) => (a.isEnabled === b.isEnabled ? 0 : a.isEnabled ? -1 : 1),
+              sort: (a: PluginInfo, b: PluginInfo) =>
+                a.isEnabled === b.isEnabled ? 0 : a.isEnabled ? -1 : 1,
             },
-          ]}
+          ]
+            // remove the enable column if we're not in app mode
+            .filter(el => !(el.label === t('translation|Enable') && !helpers.isElectron()))}
           data={pluginChanges}
           filterFunction={useFilterFunc<PluginInfo>(['.name'])}
         />