Conditionally render Connection Security panel based on deployment mode

frontend/src/components/forms/settings/ConnectionSecurityPanel.jsx

@@ -152,21 +152,17 @@ const PostgresStatus = ({ tls }) => {
 
 const ConnectionSecurityPanel = React.memo(() => {
   const environment = useSettingsStore((s) => s.environment);
-  const isModular = environment.env_mode === 'modular';
 
   return (
     <Stack gap="md">
       <Text size="sm" c="dimmed">
-        {isModular
-          ? 'Encrypt connections to Redis and PostgreSQL using environment variables in the docker compose file.'
-          : 'Connection encryption is only available in modular deployment mode with external services.'}
+        Encrypt connections to Redis and PostgreSQL using environment variables
+        in the docker compose file.
       </Text>
-      {isModular && (
-        <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
-          <RedisStatus tls={environment.redis_tls} />
-          <PostgresStatus tls={environment.postgres_tls} />
-        </SimpleGrid>
-      )}
+      <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
+        <RedisStatus tls={environment.redis_tls} />
+        <PostgresStatus tls={environment.postgres_tls} />
+      </SimpleGrid>
     </Stack>
   );
 });

frontend/src/components/forms/settings/SystemSettingsForm.jsx

@@ -20,6 +20,8 @@ import { getSystemSettingsFormInitialValues } from '../../../utils/forms/setting
 
 const SystemSettingsForm = React.memo(({ active }) => {
   const settings = useSettingsStore((s) => s.settings);
+  const isModular =
+    useSettingsStore((s) => s.environment.env_mode) === 'modular';
 
   const [saved, setSaved] = useState(false);
 
@@ -77,8 +79,12 @@ const SystemSettingsForm = React.memo(({ active }) => {
         max={1000}
         step={10}
       />
-      <Divider my="md" label="Connection Security" labelPosition="left" />
-      <ConnectionSecurityPanel />
+      {isModular && (
+        <>
+          <Divider my="md" label="Connection Security" labelPosition="left" />
+          <ConnectionSecurityPanel />
+        </>
+      )}
       <Flex mih={50} gap="xs" justify="flex-end" align="flex-end">
         <Button
           onClick={form.onSubmit(onSubmit)}

frontend/src/components/forms/settings/__tests__/SystemSettingsForm.test.jsx

@@ -76,7 +76,15 @@ const makeSettings = (overrides = {}) => ({
   ...overrides,
 });
 
-const setupMocks = ({ settings = makeSettings() } = {}) => {
+const makeEnvironment = (overrides = {}) => ({
+  env_mode: 'aio',
+  ...overrides,
+});
+
+const setupMocks = ({
+  settings = makeSettings(),
+  environment = makeEnvironment(),
+} = {}) => {
   const formValues = { max_system_events: settings?.max_system_events ?? 100 };
 
   const formMock = {
@@ -92,7 +100,9 @@ const setupMocks = ({ settings = makeSettings() } = {}) => {
 
   vi.mocked(useForm).mockReturnValue(formMock);
   vi.mocked(getSystemSettingsFormInitialValues).mockReturnValue(formValues);
-  vi.mocked(useSettingsStore).mockImplementation((sel) => sel({ settings }));
+  vi.mocked(useSettingsStore).mockImplementation((sel) =>
+    sel({ settings, environment })
+  );
   vi.mocked(parseSettings).mockReturnValue(formValues);
   vi.mocked(getChangedSettings).mockReturnValue({
     max_system_events: settings?.max_system_events ?? 100,
@@ -155,6 +165,22 @@ describe('SystemSettingsForm', () => {
       expect(screen.queryByTestId('alert')).not.toBeInTheDocument();
     });
 
+    it('does not render Connection Security panel in non-modular mode', () => {
+      setupMocks({ environment: makeEnvironment({ env_mode: 'aio' }) });
+      render(<SystemSettingsForm active={true} />);
+      expect(
+        screen.queryByTestId('connection-security-panel')
+      ).not.toBeInTheDocument();
+    });
+
+    it('renders Connection Security panel in modular mode', () => {
+      setupMocks({ environment: makeEnvironment({ env_mode: 'modular' }) });
+      render(<SystemSettingsForm active={true} />);
+      expect(
+        screen.getByTestId('connection-security-panel')
+      ).toBeInTheDocument();
+    });
+
     it('renders NumberInput with value from form values', () => {
       setupMocks({ settings: makeSettings({ max_system_events: 250 }) });
       render(<SystemSettingsForm active={true} />);
@@ -174,7 +200,10 @@ describe('SystemSettingsForm', () => {
       vi.mocked(useForm).mockReturnValue(formMock);
       vi.mocked(getSystemSettingsFormInitialValues).mockReturnValue(formValues);
       vi.mocked(useSettingsStore).mockImplementation((sel) =>
-        sel({ settings: makeSettings({ max_system_events: 0 }) })
+        sel({
+          settings: makeSettings({ max_system_events: 0 }),
+          environment: makeEnvironment(),
+        })
       );
       vi.mocked(parseSettings).mockReturnValue(formValues);
       vi.mocked(getChangedSettings).mockReturnValue({});
@@ -218,7 +247,7 @@ describe('SystemSettingsForm', () => {
         max_system_events: 100,
       });
       vi.mocked(useSettingsStore).mockImplementation((sel) =>
-        sel({ settings: null })
+        sel({ settings: null, environment: makeEnvironment() })
       );
       vi.mocked(parseSettings).mockReturnValue({});
       vi.mocked(saveChangedSettings).mockResolvedValue(undefined);