test packet rewrite dns example

frontend/src/components/ScriptManager.tsx

@@ -2,6 +2,7 @@ import {
   DeleteOutlined,
   DownloadOutlined,
   EditOutlined,
+  EyeOutlined,
   FileAddOutlined,
   PauseCircleOutlined,
   PlayCircleOutlined,
@@ -72,6 +73,7 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
   const [editorModalVisible, setEditorModalVisible] = useState(false);
   const [editorValue, setEditorValue] = useState<string>('');
   const [currentEditingName, setCurrentEditingName] = useState<string | null>(null);
+  const [editorReadOnly, setEditorReadOnly] = useState(false);
 
   const [useInlineReqEditor, setUseInlineReqEditor] = useState(false);
   const [inlineReqValue, setInlineReqValue] = useState<string>('');
@@ -383,6 +385,7 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
         const blob = await downloadScript(name);
         const text = await blob.text();
         setEditorValue(text);
+        setEditorReadOnly(false);
         setEditorModalVisible(true);
         setCurrentEditingName(name);
         if (onOpenInEditor) onOpenInEditor(text);
@@ -393,6 +396,19 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
     [onOpenInEditor],
   );
 
+  const openReadOnlyViewerFromServer = useCallback(async (name: string) => {
+    try {
+      const blob = await downloadScript(name);
+      const text = await blob.text();
+      setEditorValue(text);
+      setEditorReadOnly(true);
+      setEditorModalVisible(true);
+      setCurrentEditingName(name);
+    } catch (err: any) {
+      notification.error({ message: 'Failed to open', description: err?.message ?? String(err) });
+    }
+  }, []);
+
   const handleSaveFromEditorAs = useCallback(
     async (name: string) => {
       try {
@@ -608,6 +624,13 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
               onClick={() => handleDownload(record.name)}
               icon={<DownloadOutlined />}
             />
+            {record.is_protected_example ? (
+              <IconButtonTooltip
+                title="View script"
+                onClick={() => openReadOnlyViewerFromServer(record.name)}
+                icon={<EyeOutlined />}
+              />
+            ) : null}
             {!record.is_protected_example ? (
               <IconButtonTooltip
                 title="Open in editor"
@@ -642,6 +665,7 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
       handleEditRequirements,
       isScriptActive,
       openAddRequirements,
+      openReadOnlyViewerFromServer,
       openInEditorFromServer,
       renderStatus,
     ],
@@ -819,59 +843,86 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
 
       <Modal
         open={editorModalVisible}
-        title={currentEditingName ? `Editing — ${currentEditingName}` : 'Editor'}
-        onCancel={() => setEditorModalVisible(false)}
+        title={
+          currentEditingName
+            ? `${editorReadOnly ? 'Viewing' : 'Editing'} — ${currentEditingName}`
+            : editorReadOnly
+              ? 'Viewer'
+              : 'Editor'
+        }
+        onCancel={() => {
+          setEditorModalVisible(false);
+          setEditorReadOnly(false);
+        }}
         width={900}
         footer={
-          <Space>
-            <Button onClick={() => setEditorModalVisible(false)}>Close</Button>
+          editorReadOnly ? (
             <Button
-              type="default"
-              onClick={() =>
-                Modal.confirm({
-                  title: 'Save as',
-                  content: (
-                    <Form
-                      layout="vertical"
-                      onFinish={(values) => {
-                        handleSaveFromEditorAs(values.name);
-                        Modal.destroyAll();
-                      }}
-                    >
-                      <Form.Item name="name" label="Name" rules={[{ required: true }]}>
-                        <Input placeholder="new_name.py" />
-                      </Form.Item>
-                      <Form.Item>
-                        <Button htmlType="submit" type="primary">
-                          Save
-                        </Button>
-                      </Form.Item>
-                    </Form>
-                  ),
-                  icon: null,
-                  okButtonProps: { style: { display: 'none' } },
-                  cancelButtonProps: { style: { display: 'none' } },
-                })
-              }
-            >
-              Save as...
-            </Button>
-            <Button
-              type="primary"
               onClick={() => {
-                if (!currentEditingName) {
-                  notification.warning({ message: 'No filename to overwrite' });
-                  return;
-                }
-                handleSaveFromEditorAs(currentEditingName);
+                setEditorModalVisible(false);
+                setEditorReadOnly(false);
               }}
             >
-              Save
+              Close
             </Button>
-          </Space>
+          ) : (
+            <Space>
+              <Button
+                onClick={() => {
+                  setEditorModalVisible(false);
+                  setEditorReadOnly(false);
+                }}
+              >
+                Close
+              </Button>
+              <Button
+                type="default"
+                onClick={() =>
+                  Modal.confirm({
+                    title: 'Save as',
+                    content: (
+                      <Form
+                        layout="vertical"
+                        onFinish={(values) => {
+                          handleSaveFromEditorAs(values.name);
+                          Modal.destroyAll();
+                        }}
+                      >
+                        <Form.Item name="name" label="Name" rules={[{ required: true }]}>
+                          <Input placeholder="new_name.py" />
+                        </Form.Item>
+                        <Form.Item>
+                          <Button htmlType="submit" type="primary">
+                            Save
+                          </Button>
+                        </Form.Item>
+                      </Form>
+                    ),
+                    icon: null,
+                    okButtonProps: { style: { display: 'none' } },
+                    cancelButtonProps: { style: { display: 'none' } },
+                  })
+                }
+              >
+                Save as...
+              </Button>
+              <Button
+                type="primary"
+                onClick={() => {
+                  if (!currentEditingName) {
+                    notification.warning({ message: 'No filename to overwrite' });
+                    return;
+                  }
+                  handleSaveFromEditorAs(currentEditingName);
+                }}
+              >
+                Save
+              </Button>
+            </Space>
+          )
         }
       >
-        <PythonEditor value={editorValue} onChange={setEditorValue} height={520} />
+        <PythonEditor value={editorValue} onChange={setEditorValue} height={520} readOnly={editorReadOnly} />
       </Modal>
 
       <Modal