firewall + scripts working

frontend/src/components/FireWallAddTableModal.tsx

@@ -1,5 +1,5 @@
 // src/components/FirewallManager.tsx
-import { Button, Card, Col, Form, Input, Modal, Row, Select, Space, Spin, Typography, message } from 'antd';
+import { Button, Card, Col, Form, Input, Modal, Row, Select, Space, Spin, Typography, notification } from 'antd';
 import { ReactElement, useEffect, useState } from 'react';
 import { execFirewallRaw, fetchRuleset } from '../api/apiClient';
 
@@ -20,7 +20,7 @@ type CmdResult = {
 
 type Props = {
   open: boolean;
-  onClose: () => void;
+  onClose?: (created?: boolean) => void; // created === true when a table was created
   startOnPreview?: boolean;
 };
 
@@ -70,7 +70,13 @@ export default function FirewallAddTableModal({ open, onClose, startOnPreview =
         setRulesetEmpty(false);
       }
     } catch (err: any) {
-      message.warning('Could not load ruleset: ' + (err?.message ?? String(err)));
+      // use notification instead of message
+      notification.warning({
+        message: 'Could not load ruleset',
+        description: err?.message ?? String(err),
+        duration: 6,
+      });
+      setRulesetEmpty(false);
     } finally {
       setLocalLoadingRuleset(false);
     }
@@ -78,8 +84,8 @@ export default function FirewallAddTableModal({ open, onClose, startOnPreview =
 
   // Build commands: only create table
   function buildCommands(values: any): string[] {
-    const family = values.family ?? 'bridge';
-    const table = values.tableName ?? 'filter';
+    const family = (values.family ?? 'bridge').trim();
+    const table = (values.tableName ?? 'filter').trim();
     return [`add table ${family} ${table}`];
   }
 
@@ -107,15 +113,25 @@ export default function FirewallAddTableModal({ open, onClose, startOnPreview =
     try {
       await refreshRuleset();
     } catch {
-      // ignore — refreshRuleset handles messaging
+      // ignore — refreshRuleset handles notifications on error
     }
 
     const hadError = acc.some((r) => r.err);
     if (!hadError) {
-      message.success('Table created and ruleset refreshed');
-      onClose();
+      // success -> notify briefly and inform parent that a resource was created
+      notification.success({
+        message: 'Table created',
+        description: 'Table was created and ruleset has been refreshed locally in the modal.',
+        duration: 4,
+      });
+      onClose?.(true); // signal parent to refresh and close modal
     } else {
-      message.error('Some commands returned errors — see results in the modal');
+      // error -> open results view and show notification
+      notification.error({
+        message: 'Some commands returned errors',
+        description: 'See execution results below for details.',
+        duration: 6,
+      });
       setStep(1);
     }
   }
@@ -125,7 +141,7 @@ export default function FirewallAddTableModal({ open, onClose, startOnPreview =
       <Space>
         <Button
           onClick={() => {
-            if (step === 0) onClose();
+            if (step === 0) onClose?.(false);
             else setStep(0);
           }}
         >
@@ -134,7 +150,21 @@ export default function FirewallAddTableModal({ open, onClose, startOnPreview =
 
         {step === 0 ? (
           <Space>
-            <Button type="primary" onClick={() => setStep(1)}>
+            <Button
+              type="primary"
+              onClick={() => {
+                // validate form before preview
+                form
+                  .validateFields()
+                  .then(() => setStep(1))
+                  .catch(() =>
+                    notification.warning({
+                      message: 'Validation',
+                      description: 'Please fill required fields before preview.',
+                    }),
+                  );
+              }}
+            >
               Preview
             </Button>
           </Space>
@@ -154,7 +184,7 @@ export default function FirewallAddTableModal({ open, onClose, startOnPreview =
   // show spinner while checking ruleset
   if (localLoadingRuleset) {
     return (
-      <Modal title="Create Table" open={open} onCancel={onClose} footer={null} width={700}>
+      <Modal title="Create Table" open={open} onCancel={() => onClose?.(false)} footer={null} width={700}>
         <div style={{ textAlign: 'center', padding: 28 }}>
           <Spin />
         </div>
@@ -163,7 +193,14 @@ export default function FirewallAddTableModal({ open, onClose, startOnPreview =
   }
 
   return (
-    <Modal title="Create Table" open={open} onCancel={onClose} width={700} footer={renderFooter()} destroyOnClose>
+    <Modal
+      title="Create Table"
+      open={open}
+      onCancel={() => onClose?.(false)}
+      width={700}
+      footer={renderFooter()}
+      destroyOnClose
+    >
       {/* Step 0: minimal form */}
       {step === 0 && (
         <div>