176 expandable attachment editor (#184)

* expand attachement in a modal

* test modal for attachements

* update changelog

Author: AnthonyCvn

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Move time controls into the conditional query toolbox header, [PR-183](https://github.com/reductstore/web-console/pull/183)
+- Make existing attachment JSON editors expandable with conditional-query-style toolbar actions, [PR-184](https://github.com/reductstore/web-console/pull/184)
 
 ## 1.13.0 - 2026-01-24
 

src/Components/Entry/AttachmentEditor.tsx

@@ -1,7 +1,14 @@
 import React, { useState } from "react";
-import { Button, Input, Typography, message } from "antd";
+import { Button, Input, Modal, Tooltip, Typography, message } from "antd";
 import Editor from "@monaco-editor/react";
-import { SaveOutlined, CloseOutlined, CopyOutlined } from "@ant-design/icons";
+import type * as monaco from "monaco-editor";
+import {
+  SaveOutlined,
+  CloseOutlined,
+  CompressOutlined,
+  ExpandOutlined,
+  FormatPainterOutlined,
+} from "@ant-design/icons";
 import "./EntryAttachmentsCard.css";
 
 const readFileAsText = (file: File): Promise<string> =>
@@ -29,6 +36,10 @@ interface AttachmentEditorProps {
   error?: string | null;
   /** Callback to clear external error */
   onClearError?: () => void;
+  /** Whether the editor can be expanded into a modal */
+  expandable?: boolean;
+  /** Modal title when expanded */
+  expandedTitle?: string;
 }
 
 const AttachmentEditor: React.FC<AttachmentEditorProps> = ({
@@ -40,11 +51,16 @@ const AttachmentEditor: React.FC<AttachmentEditorProps> = ({
   isSaving = false,
   error = null,
   onClearError,
+  expandable = false,
+  expandedTitle = "Attachment Editor",
 }) => {
   const [name, setName] = useState(initialKey);
   const [content, setContent] = useState(initialValue);
   const [localError, setLocalError] = useState<string | null>(null);
   const [isDragOver, setIsDragOver] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [editorInstance, setEditorInstance] =
+    useState<monaco.editor.IStandaloneCodeEditor | null>(null);
 
   const displayError = error ?? localError;
 
@@ -62,29 +78,33 @@ const AttachmentEditor: React.FC<AttachmentEditorProps> = ({
     }
   };
 
-  const copyToClipboard = async () => {
-    try {
-      await navigator.clipboard.writeText(content);
-      message.success("Copied to clipboard");
-    } catch {
-      message.error("Failed to copy");
-    }
+  const handleFormat = () => {
+    editorInstance?.getAction("editor.action.formatDocument")?.run();
   };
 
   const handleSave = async () => {
+    if (!readOnly && editorInstance) {
+      await editorInstance.getAction("editor.action.formatDocument")?.run();
+    }
+
+    const currentContent = editorInstance?.getValue() ?? content;
+    if (currentContent !== content) {
+      setContent(currentContent);
+    }
+
     const trimmedKey = name.trim();
     if (!trimmedKey) {
       setLocalError("Name cannot be empty.");
       return;
     }
 
-    const jsonError = validateJson(content);
+    const jsonError = validateJson(currentContent);
     if (jsonError) {
       setLocalError(`Invalid JSON: ${jsonError}`);
       return;
     }
 
-    const success = await onSave(trimmedKey, content);
+    const success = await onSave(trimmedKey, currentContent);
     if (success) {
       setLocalError(null);
     }
@@ -109,6 +129,7 @@ const AttachmentEditor: React.FC<AttachmentEditorProps> = ({
       setLocalError(null);
       onClearError?.();
     } else {
+      setIsExpanded(false);
       onClose();
     }
   };
@@ -167,7 +188,7 @@ const AttachmentEditor: React.FC<AttachmentEditorProps> = ({
     Math.max(100, (content + "\n").split("\n").length * 18),
   );
 
-  return (
+  const renderEditor = (expanded = false) => (
     <div className="expandedEditRow">
       <div className="expandedEditFields">
         <Input
@@ -177,7 +198,7 @@ const AttachmentEditor: React.FC<AttachmentEditorProps> = ({
           disabled={readOnly}
         />
         <div
-          className={`monacoEditorWrapper${isDragOver ? " dragOver" : ""}`}
+          className={`monacoEditorWrapper${isDragOver ? " dragOver" : ""}${expanded ? " expanded" : ""}`}
           onDrop={handleDrop}
           onDragOver={handleDragOver}
           onDragLeave={handleDragLeave}
@@ -189,76 +210,133 @@ const AttachmentEditor: React.FC<AttachmentEditorProps> = ({
               </Typography.Text>
             </div>
           )}
-          <Editor
-            height={`${editorHeight}px`}
-            language="json"
-            value={content}
-            onChange={handleContentChange}
-            options={{
-              minimap: { enabled: false },
-              lineNumbers: "on",
-              scrollBeyondLastLine: false,
-              wordWrap: "on",
-              automaticLayout: true,
-              folding: false,
-              glyphMargin: false,
-              lineDecorationsWidth: 10,
-              lineNumbersMinChars: 3,
-              renderLineHighlight: "none",
-              scrollbar: {
-                vertical: "auto",
-                horizontal: "hidden",
-                verticalScrollbarSize: 8,
-              },
-              readOnly: readOnly,
-              quickSuggestions: false,
-              suggestOnTriggerCharacters: false,
-              parameterHints: { enabled: false },
-            }}
-          />
+          <div className={`attachmentEditorBody${expanded ? " expanded" : ""}`}>
+            <Editor
+              height={expanded ? "100%" : `${editorHeight}px`}
+              language="json"
+              value={content}
+              onChange={handleContentChange}
+              onMount={(editor) => setEditorInstance(editor)}
+              options={{
+                minimap: { enabled: false },
+                lineNumbers: "on",
+                scrollBeyondLastLine: false,
+                wordWrap: "on",
+                automaticLayout: true,
+                folding: false,
+                glyphMargin: false,
+                lineDecorationsWidth: 10,
+                lineNumbersMinChars: 3,
+                renderLineHighlight: "none",
+                scrollbar: {
+                  vertical: "auto",
+                  horizontal: "hidden",
+                  verticalScrollbarSize: 8,
+                },
+                readOnly: readOnly,
+                quickSuggestions: false,
+                suggestOnTriggerCharacters: false,
+                parameterHints: { enabled: false },
+              }}
+            />
+          </div>
         </div>
       </div>
-      <div className="expandedEditActions">
-        {!readOnly && !displayError && (
-          <span className="dropHintText">
-            <Typography.Text type="secondary">
-              Tip: drag & drop JSON file
-            </Typography.Text>
-          </span>
-        )}
-        {displayError && (
-          <span className="expandedRowError">
-            <span className="expandedRowErrorX">✗</span>
-            <span>{displayError}</span>
-          </span>
-        )}
-        <Button size="small" icon={<CopyOutlined />} onClick={copyToClipboard}>
-          Copy
-        </Button>
-        {!readOnly && (
+      <div className="attachmentEditorToolbar">
+        <div className="attachmentEditorToolbarStatus">
+          {!readOnly && !displayError && (
+            <span className="dropHintText">
+              <Typography.Text type="secondary">
+                Tip: drag & drop JSON file
+              </Typography.Text>
+            </span>
+          )}
+          {displayError && (
+            <span className="expandedRowError">
+              <span className="expandedRowErrorX">✗</span>
+              <span>{displayError}</span>
+            </span>
+          )}
+        </div>
+        <div className="attachmentEditorToolbarActions">
           <Button
             size="small"
-            type="primary"
-            icon={<SaveOutlined />}
-            onClick={handleSave}
-            loading={isSaving}
-            disabled={!hasChanges && initialKey !== ""}
+            icon={<CloseOutlined />}
+            onClick={handleClose}
+            className={`attachmentEditorCancelButton${hasChanges ? "" : " hidden"}`}
+            disabled={!hasChanges}
+            aria-hidden={!hasChanges}
+            tabIndex={hasChanges ? 0 : -1}
           >
-            Save
-          </Button>
-        )}
-        {hasChanges ? (
-          <Button size="small" icon={<CloseOutlined />} onClick={handleClose}>
             Cancel
           </Button>
-        ) : (
-          <Button size="small" icon={<CloseOutlined />} onClick={onClose}>
-            Close
-          </Button>
-        )}
+          {!readOnly && (
+            <Button
+              size="small"
+              type="primary"
+              icon={<SaveOutlined />}
+              onClick={handleSave}
+              loading={isSaving}
+              disabled={!hasChanges && initialKey !== ""}
+            >
+              Save
+            </Button>
+          )}
+          <Tooltip
+            title={readOnly ? "Cannot format in read-only mode" : "Format JSON"}
+          >
+            <Button
+              size="small"
+              aria-label="Format JSON"
+              icon={<FormatPainterOutlined />}
+              onClick={handleFormat}
+              disabled={readOnly}
+            />
+          </Tooltip>
+          {expandable && (
+            <Tooltip title={isExpanded ? "Collapse editor" : "Expand editor"}>
+              <Button
+                size="small"
+                aria-label={isExpanded ? "Collapse editor" : "Expand editor"}
+                icon={isExpanded ? <CompressOutlined /> : <ExpandOutlined />}
+                onClick={() => setIsExpanded((prev) => !prev)}
+              />
+            </Tooltip>
+          )}
+        </div>
       </div>
     </div>
   );
+
+  return (
+    <>
+      {isExpanded ? (
+        <div className="attachmentEditorPlaceholder">
+          Editing in expanded attachment editor
+        </div>
+      ) : (
+        renderEditor(false)
+      )}
+      {expandable && isExpanded && (
+        <Modal
+          open={isExpanded}
+          onCancel={() => setIsExpanded(false)}
+          footer={null}
+          closable
+          title={expandedTitle}
+          maskClosable={false}
+          keyboard={false}
+          className="attachmentEditorModal"
+          width="90vw"
+          centered
+        >
+          <div className="attachmentEditorModalContent">
+            {renderEditor(true)}
+          </div>
+        </Modal>
+      )}
+    </>
+  );
 };
 
 export default AttachmentEditor;