frontend: Enable cluster deletion in browser

Enable cluster deletion when running in a browser if dynamic cluster management is enabled in the backend. This was previously restricted to the Electron app.

Author: alokdangre

frontend/src/components/App/Home/ClusterContextMenu.tsx

@@ -52,6 +52,7 @@ export default function ClusterContextMenu({ cluster }: ClusterContextMenuProps)
   const [openConfirmDialog, setOpenConfirmDialog] = React.useState<string | null>(null);
   const dialogs = useTypedSelector(state => state.clusterProvider.dialogs);
   const menuItems = useTypedSelector(state => state.clusterProvider.menuItems);
+  const isDynamicClusterEnabled = useTypedSelector(state => state.config.isDynamicClusterEnabled);
 
   const kubeconfigOrigin = cluster.meta_data?.origin?.kubeconfig;
   const deleteFromKubeconfig = cluster.meta_data?.source === 'kubeconfig';
@@ -154,7 +155,7 @@ export default function ClusterContextMenu({ cluster }: ClusterContextMenuProps)
           <ListItemText>{t('translation|Settings')}</ListItemText>
         </MenuItem>
         {(!menuItems || menuItems.length === 0) &&
-          helpers.isElectron() &&
+          (helpers.isElectron() || isDynamicClusterEnabled) &&
           (cluster.meta_data?.source === 'dynamic_cluster' ||
             cluster.meta_data?.source === 'kubeconfig') && (
             <MenuItem

frontend/src/components/project/ProjectCreateFromYaml.stories.tsx

@@ -40,6 +40,7 @@ const makeStore = () => {
           'cluster-a': { name: 'cluster-a' },
           'cluster-b': { name: 'cluster-b' },
         } as any,
+        isDynamicClusterEnabled: true,
         settings: {
           tableRowsPerPageOptions: [15, 25, 50],
           timezone: 'UTC',

frontend/src/helpers/getHeadlampAPIHeaders.ts

@@ -21,8 +21,12 @@
  *
  * The app also sets HEADLAMP_BACKEND_TOKEN in the headlamp-server environment,
  * which the server checks to validate requests containing this same token.
+ *
+ * For development, when running the frontend separately from the backend,
+ * the token can be initialized from the REACT_APP_HEADLAMP_BACKEND_TOKEN
+ * environment variable to authenticate API requests.
  */
-let backendToken: string | null = null;
+let backendToken: string | null = import.meta.env.REACT_APP_HEADLAMP_BACKEND_TOKEN || null;
 
 /**
  * Sets the backend token to use when making API calls from Headlamp when running as an app.

frontend/src/redux/configSlice.test.ts

@@ -38,6 +38,36 @@ describe('configSlice', () => {
     expect(nextState.clusters).toEqual(clusters);
   });
 
+  it('should handle setConfig with isDynamicClusterEnabled', () => {
+    const clusters: ConfigState['clusters'] = {
+      'cluster-1': { name: 'cluster-1' } as Cluster,
+    };
+    const nextState = configReducer(
+      initialState,
+      setConfig({ clusters, isDynamicClusterEnabled: true })
+    );
+    expect(nextState.clusters).toEqual(clusters);
+    expect(nextState.isDynamicClusterEnabled).toBe(true);
+  });
+
+  it('should preserve isDynamicClusterEnabled when setConfig is called without it', () => {
+    let state = configReducer(
+      initialState,
+      setConfig({ clusters: {}, isDynamicClusterEnabled: true })
+    );
+
+    expect(state.isDynamicClusterEnabled).toBe(true);
+
+    const newClusters: ConfigState['clusters'] = {
+      'cluster-1': { name: 'cluster-1' } as Cluster,
+    };
+
+    state = configReducer(state, setConfig({ clusters: newClusters }));
+
+    expect(state.clusters).toEqual(newClusters);
+    expect(state.isDynamicClusterEnabled).toBe(true);
+  });
+
   it('should handle setStatelessConfig', () => {
     const statelessClusters: ConfigState['statelessClusters'] = {
       'stateless-1': { name: 'stateless-1' } as Cluster,

frontend/src/redux/configSlice.ts

@@ -42,6 +42,11 @@ export interface ConfigState {
   allClusters: {
     [clusterName: string]: Cluster;
   } | null;
+  /**
+   * Whether dynamic clusters are enabled.
+   * When true, users can add and delete clusters dynamically.
+   */
+  isDynamicClusterEnabled: boolean;
   /**
    * Settings is a map of settings names to settings values.
    */
@@ -71,6 +76,7 @@ export const initialState: ConfigState = {
   clusters: null,
   statelessClusters: null,
   allClusters: null,
+  isDynamicClusterEnabled: false,
   settings: {
     tableRowsPerPageOptions:
       storedSettings.tableRowsPerPageOptions || defaultTableRowsPerPageOptions,
@@ -89,8 +95,17 @@ const configSlice = createSlice({
      * @param state - The current state.
      * @param action - The payload action containing the config.
      */
-    setConfig(state, action: PayloadAction<{ clusters: ConfigState['clusters'] }>) {
+    setConfig(
+      state,
+      action: PayloadAction<{
+        clusters: ConfigState['clusters'];
+        isDynamicClusterEnabled?: boolean;
+      }>
+    ) {
       state.clusters = action.payload.clusters;
+      if (action.payload.isDynamicClusterEnabled !== undefined) {
+        state.isDynamicClusterEnabled = action.payload.isDynamicClusterEnabled;
+      }
     },
     /**
      * Save the config. To both the store, and localStorage.