From 1ec8340a0fa5f75c590b4c13bf35b97427b196be Mon Sep 17 00:00:00 2001
From: Chris Farhood <chris@farhood.org>
Date: Fri, 13 Feb 2026 15:59:25 -0500
Subject: [PATCH] fix: restore SectionBox wrapper in SettingsPage to fix React
 context

The plugin settings page requires SectionBox from CommonComponents
to properly initialize the React context. Without it, React.useState
is undefined causing runtime errors.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
---
 headlamp-sealed-secrets/package.json                    | 2 +-
 headlamp-sealed-secrets/src/components/SettingsPage.tsx | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/headlamp-sealed-secrets/package.json b/headlamp-sealed-secrets/package.json
index f78a9e9..e90996a 100644
--- a/headlamp-sealed-secrets/package.json
+++ b/headlamp-sealed-secrets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sealed-secrets",
-  "version": "0.2.17",
+  "version": "0.2.18",
   "description": "Headlamp plugin for Bitnami Sealed Secrets - manage encrypted Kubernetes secrets",
   "files": [
     "dist",
diff --git a/headlamp-sealed-secrets/src/components/SettingsPage.tsx b/headlamp-sealed-secrets/src/components/SettingsPage.tsx
index 5577056..f72a908 100644
--- a/headlamp-sealed-secrets/src/components/SettingsPage.tsx
+++ b/headlamp-sealed-secrets/src/components/SettingsPage.tsx
@@ -4,6 +4,7 @@
  * Configuration page for the Sealed Secrets plugin
  */
 
+import { SectionBox } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import { Box, Button, Divider, TextField, Typography } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import React from 'react';
@@ -34,7 +35,8 @@ export function SettingsPage() {
   };
 
   return (
-    <Box p={3}>
+    <SectionBox title="Sealed Secrets Plugin Settings">
+      <Box p={3}>
         <Typography variant="body1" paragraph id="settings-description">
           Configure the connection to your Sealed Secrets controller. These settings are stored in
           your browser's local storage.
@@ -151,6 +153,7 @@ export function SettingsPage() {
             <dd style={{ display: 'inline', margin: 0 }}>8080</dd>
           </Typography>
         </Box>
-    </Box>
+      </Box>
+    </SectionBox>
   );
 }