@workbench-kit/shell-react 0.0.2-prototype.0.2.43 → 0.0.2-prototype.0.2.44

package/src/field-remap/document-io.tsx

@@ -0,0 +1,299 @@
+import { useEffect, useId, useMemo, useRef, useState, type FormEvent, type JSX } from 'react';
+import { Modal } from '@workbench-kit/react/modal';
+import { Button, TextArea } from '@workbench-kit/react/primitives';
+import { WorkbenchModalPortal } from '@workbench-kit/react/workbench/modal-portal';
+import type { FieldRemapImportFailureCode } from '@workbench-kit/field-remap';
+
+import {
+  resolveFieldRemapChromeLabels,
+  type FieldRemapChromeLabels,
+  type FieldRemapTranslate,
+} from './chrome-labels.js';
+
+export type FieldRemapDocumentImportActionResult =
+  | { readonly status: 'accepted' }
+  | {
+      readonly status: 'rejected';
+      readonly code: FieldRemapImportFailureCode;
+    };
+
+interface FieldRemapDocumentIoProps {
+  readonly getDocumentJson: () => string;
+  readonly importAvailable: boolean;
+  readonly labels?: Partial<FieldRemapChromeLabels> | undefined;
+  readonly t?: FieldRemapTranslate | undefined;
+  readonly onImportText: (text: string) => FieldRemapDocumentImportActionResult;
+}
+
+type DocumentIoStatus =
+  | { readonly kind: 'success'; readonly message: string }
+  | { readonly kind: 'error'; readonly message: string };
+
+function importFailureMessage(
+  code: FieldRemapImportFailureCode,
+  labels: FieldRemapChromeLabels,
+): string {
+  switch (code) {
+    case 'invalid-json':
+      return labels.documentImportInvalidJson ?? '';
+    case 'unsupported-version':
+      return labels.documentImportUnsupportedVersion ?? '';
+    case 'duplicate-id':
+      return labels.documentImportDuplicateId ?? '';
+    case 'incompatible-source':
+      return labels.documentImportIncompatibleSource ?? '';
+    case 'incompatible-target':
+      return labels.documentImportIncompatibleTarget ?? '';
+    case 'unavailable-transform':
+      return labels.documentImportUnavailableTransform ?? '';
+    case 'invalid-document':
+      return labels.documentImportInvalidDocument ?? '';
+  }
+}
+
+export function FieldRemapDocumentIo({
+  getDocumentJson,
+  importAvailable,
+  labels: labelOverrides,
+  t,
+  onImportText,
+}: FieldRemapDocumentIoProps): JSX.Element {
+  const labels = useMemo(
+    () => resolveFieldRemapChromeLabels(labelOverrides, t),
+    [labelOverrides, t],
+  );
+  const [exportOpen, setExportOpen] = useState(false);
+  const [exportText, setExportText] = useState('');
+  const [importOpen, setImportOpen] = useState(false);
+  const [draft, setDraft] = useState('');
+  const [importError, setImportError] = useState<string | null>(null);
+  const [status, setStatus] = useState<DocumentIoStatus | null>(null);
+  const instanceId = useId();
+  const exportTextId = `field-remap-document-export-text-${instanceId}`;
+  const importTextId = `field-remap-document-import-text-${instanceId}`;
+  const importErrorId = `field-remap-document-import-error-${instanceId}`;
+  const exportTextareaRef = useRef<HTMLTextAreaElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (!importAvailable && importOpen) {
+      setImportOpen(false);
+      setDraft('');
+      setImportError(null);
+    }
+  }, [importAvailable, importOpen]);
+
+  const closeImport = () => {
+    setImportOpen(false);
+    setDraft('');
+    setImportError(null);
+  };
+
+  const closeExport = () => {
+    setExportOpen(false);
+    setExportText('');
+    setStatus(null);
+  };
+
+  const openExport = () => {
+    try {
+      setExportText(getDocumentJson());
+      setStatus(null);
+      setExportOpen(true);
+    } catch {
+      setStatus({ kind: 'error', message: labels.documentCopyFailed ?? '' });
+    }
+  };
+
+  const copyDocument = async () => {
+    try {
+      const clipboard = globalThis.navigator?.clipboard;
+      if (!clipboard || typeof clipboard.writeText !== 'function') {
+        throw new Error('Clipboard write is unavailable.');
+      }
+      await clipboard.writeText(exportText);
+      setStatus({ kind: 'success', message: labels.documentCopied ?? '' });
+    } catch {
+      setStatus({ kind: 'error', message: labels.documentCopyFailed ?? '' });
+    }
+  };
+
+  const openImport = () => {
+    if (!importAvailable) {
+      return;
+    }
+    setDraft('');
+    setImportError(null);
+    setStatus(null);
+    setImportOpen(true);
+  };
+
+  const applyImport = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const result = onImportText(draft);
+    if (result.status === 'rejected') {
+      setImportError(importFailureMessage(result.code, labels));
+      queueMicrotask(() => textareaRef.current?.focus());
+      return;
+    }
+    closeImport();
+  };
+
+  return (
+    <div className="workbench-field-remap-document-io" data-testid="field-remap-document-io">
+      <div className="workbench-field-remap-document-io__actions">
+        <Button
+          compact
+          type="button"
+          data-testid="field-remap-export-document"
+          onClick={openExport}
+        >
+          {labels.exportDocumentJson}
+        </Button>
+        <Button
+          compact
+          type="button"
+          data-testid="field-remap-import-document"
+          disabled={!importAvailable}
+          onClick={openImport}
+        >
+          {labels.importDocumentJson}
+        </Button>
+      </div>
+      {!importAvailable ? (
+        <span className="workbench-field-remap-document-io__availability">
+          {labels.documentImportUnavailable}
+        </span>
+      ) : null}
+      {status && !exportOpen ? (
+        <span
+          className="workbench-field-remap-document-io__status"
+          data-status={status.kind}
+          role={status.kind === 'error' ? 'alert' : 'status'}
+        >
+          {status.message}
+        </span>
+      ) : null}
+
+      {exportOpen ? (
+        <WorkbenchModalPortal>
+          <Modal
+            bodyClassName="workbench-field-remap-document-export__body"
+            bodyLayout="stack"
+            bodyPadding="lg"
+            bodyScroll="auto"
+            className="workbench-field-remap-document-export"
+            closeLabel={labels.closeDocumentExport}
+            footer={
+              <>
+                <Button
+                  type="button"
+                  data-testid="field-remap-copy-document"
+                  onClick={() => void copyDocument()}
+                >
+                  {labels.copyDocumentJson}
+                </Button>
+                <Button type="button" onClick={closeExport}>
+                  {labels.closeDocumentExport}
+                </Button>
+              </>
+            }
+            initialFocusRef={exportTextareaRef}
+            title={labels.exportDocumentTitle}
+            onClose={closeExport}
+          >
+            <p className="workbench-field-remap-document-export__description">
+              {labels.exportDocumentDescription}
+            </p>
+            <label className="workbench-field-remap-document-export__label" htmlFor={exportTextId}>
+              {labels.exportDocumentLabel}
+            </label>
+            <TextArea
+              ref={exportTextareaRef}
+              id={exportTextId}
+              controlWidth="full"
+              data-testid="field-remap-document-export-text"
+              monospace
+              readOnly
+              rows={12}
+              value={exportText}
+              onFocus={(event) => event.currentTarget.select()}
+            />
+            {status ? (
+              <p
+                className="workbench-field-remap-document-io__status"
+                data-status={status.kind}
+                role={status.kind === 'error' ? 'alert' : 'status'}
+              >
+                {status.message}
+              </p>
+            ) : null}
+          </Modal>
+        </WorkbenchModalPortal>
+      ) : null}
+
+      {importOpen ? (
+        <WorkbenchModalPortal>
+          <Modal
+            bodyClassName="workbench-field-remap-document-import__body"
+            bodyLayout="stack"
+            bodyPadding="lg"
+            bodyScroll="auto"
+            className="workbench-field-remap-document-import"
+            closeLabel={labels.closeDocumentImport}
+            footer={
+              <>
+                <Button type="button" onClick={closeImport}>
+                  {labels.cancelDocumentImport}
+                </Button>
+                <Button
+                  type="submit"
+                  variant="primary"
+                  data-testid="field-remap-apply-document-import"
+                >
+                  {labels.applyDocumentImport}
+                </Button>
+              </>
+            }
+            initialFocusRef={textareaRef}
+            title={labels.importDocumentTitle}
+            onClose={closeImport}
+            onSubmit={applyImport}
+          >
+            <p className="workbench-field-remap-document-import__description">
+              {labels.importDocumentDescription}
+            </p>
+            <label className="workbench-field-remap-document-import__label" htmlFor={importTextId}>
+              {labels.importDocumentLabel}
+            </label>
+            <TextArea
+              ref={textareaRef}
+              id={importTextId}
+              aria-describedby={importError ? importErrorId : undefined}
+              aria-invalid={importError ? true : undefined}
+              controlWidth="full"
+              data-testid="field-remap-document-import-text"
+              monospace
+              placeholder={labels.importDocumentPlaceholder}
+              rows={12}
+              value={draft}
+              onChange={(event) => {
+                setDraft(event.currentTarget.value);
+                setImportError(null);
+              }}
+            />
+            {importError ? (
+              <p
+                id={importErrorId}
+                className="workbench-field-remap-document-import__error"
+                role="alert"
+              >
+                {importError}
+              </p>
+            ) : null}
+          </Modal>
+        </WorkbenchModalPortal>
+      ) : null}
+    </div>
+  );
+}

package/src/field-remap/flow.tsx

@@ -377,8 +377,10 @@ const DEFAULT_FIT_VIEW_OPTIONS = { padding: 0.12, maxZoom: 1.15 } as const;
  * to the React Flow store (avoids update loops with controlled nodes).
  */
 function FieldRemapFlowActionsBridge({
+  canFitView,
   flowActionsRef,
 }: {
+  readonly canFitView: () => boolean;
   readonly flowActionsRef?: Ref<FieldRemapFlowActions | null> | undefined;
 }): null {
   const { fitView } = useReactFlow();
@@ -386,13 +388,16 @@ function FieldRemapFlowActionsBridge({
     flowActionsRef,
     () => ({
       fitView: (options) => {
+        if (!canFitView()) {
+          return;
+        }
         void fitView({
           padding: options?.padding ?? DEFAULT_FIT_VIEW_OPTIONS.padding,
           maxZoom: options?.maxZoom ?? DEFAULT_FIT_VIEW_OPTIONS.maxZoom,
         });
       },
     }),
-    [fitView],
+    [canFitView, fitView],
   );
   return null;
 }
@@ -700,7 +705,9 @@ function FieldRemapFlowCanvas({
   const showAuthoringPalette = showConvertPalette && !readOnly;
   const emptyDetail = emptyDetailProp ?? (chrome === 'embed' ? 'collapse' : 'hint');
   const mapperRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLDivElement>(null);
   const restoreMapperFocusRef = useRef(false);
+  const [hasPositiveCanvasSize, setHasPositiveCanvasSize] = useState(false);
   const [workspaceLayout, setWorkspaceLayout] = useState<'wide' | 'medium' | 'narrow'>('wide');
   const [internalSelection, setInternalSelection] = useState<FieldRemapSelection>(null);
   const authoritativeSelection = selectionProp !== undefined ? selectionProp : internalSelection;
@@ -982,6 +989,48 @@ function FieldRemapFlowCanvas({
     return () => observer.disconnect();
   }, []);
 
+  const canFitView = useCallback(() => {
+    const bounds = canvasRef.current?.getBoundingClientRect();
+    return bounds !== undefined && bounds.width > 0 && bounds.height > 0;
+  }, []);
+
+  useEffect(() => {
+    const element = canvasRef.current;
+    if (!element) {
+      return;
+    }
+
+    const updateMountEligibility = () => {
+      const bounds = element.getBoundingClientRect();
+      if (bounds.width > 0 && bounds.height > 0) {
+        setHasPositiveCanvasSize(true);
+      }
+    };
+
+    updateMountEligibility();
+    if (typeof ResizeObserver === 'undefined') {
+      return;
+    }
+    let pendingFrame: number | undefined;
+    const scheduleMountEligibilityUpdate = () => {
+      if (pendingFrame !== undefined) {
+        return;
+      }
+      pendingFrame = requestAnimationFrame(() => {
+        pendingFrame = undefined;
+        updateMountEligibility();
+      });
+    };
+    const observer = new ResizeObserver(scheduleMountEligibilityUpdate);
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      if (pendingFrame !== undefined) {
+        cancelAnimationFrame(pendingFrame);
+      }
+    };
+  }, []);
+
   const graph = useMemo(
     () =>
       mappingToFlowGraph({
@@ -1837,105 +1886,61 @@ function FieldRemapFlowCanvas({
           ) : null}
         </>
 
-        <div className="workbench-field-remap-flow__canvas" data-testid="field-remap-flow">
-          <ReactFlow
-            nodes={nodes}
-            edges={flowEdges}
-            nodeTypes={nodeTypes}
-            edgeTypes={edgeTypes}
-            onNodesChange={onProjectedNodesChange}
-            onEdgesChange={onProjectedFlowEdgesChange}
-            onConnect={readOnly ? undefined : onConnect}
-            onConnectStart={readOnly ? undefined : onConnectStart}
-            onConnectEnd={readOnly ? undefined : onConnectEnd}
-            onEdgesDelete={readOnly ? undefined : onEdgesDelete}
-            onDragOver={onCanvasDragOver}
-            onDrop={onCanvasDrop}
-            onNodeClick={onNodeClick}
-            onEdgeClick={onEdgeClick}
-            onPaneContextMenu={onPaneContextMenu ? handlePaneContextMenu : undefined}
-            onNodeContextMenu={onNodeContextMenu ? handleNodeContextMenu : undefined}
-            onEdgeContextMenu={onEdgeContextMenu ? handleEdgeContextMenu : undefined}
-            isValidConnection={isValidConnection}
-            nodesDraggable={!readOnly}
-            nodesConnectable={!readOnly}
-            edgesReconnectable={!readOnly}
-            elementsSelectable={false}
-            ariaLabelConfig={flowAriaLabelConfig}
-            deleteKeyCode={null}
-            fitView
-            fitViewOptions={DEFAULT_FIT_VIEW_OPTIONS}
-            proOptions={{ hideAttribution: true }}
-          >
-            <FieldRemapFlowActionsBridge flowActionsRef={flowActionsRef} />
-            <Background gap={16} color="var(--xy-background-pattern-color)" />
-            <Controls showInteractive={false} fitViewOptions={DEFAULT_FIT_VIEW_OPTIONS}>
-              {onShowMinimapChange ? (
-                <ControlButton
-                  aria-label={showMinimap ? chromeLabels.hideMinimap : chromeLabels.showMinimap}
-                  className={
-                    showMinimap
-                      ? 'workbench-field-remap-flow__minimap-toggle is-active'
-                      : 'workbench-field-remap-flow__minimap-toggle'
-                  }
-                  data-testid="field-remap-toggle-minimap"
-                  title={showMinimap ? chromeLabels.hideMinimap : chromeLabels.showMinimap}
-                  onClick={() => {
-                    onShowMinimapChange(!showMinimap);
-                  }}
-                >
-                  <svg
-                    aria-hidden="true"
-                    fill="none"
-                    height="16"
-                    stroke="currentColor"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="1.75"
-                    viewBox="0 0 24 24"
-                    width="16"
+        <div
+          ref={canvasRef}
+          className="workbench-field-remap-flow__canvas"
+          data-testid="field-remap-flow"
+        >
+          {hasPositiveCanvasSize ? (
+            <ReactFlow
+              nodes={nodes}
+              edges={flowEdges}
+              nodeTypes={nodeTypes}
+              edgeTypes={edgeTypes}
+              onNodesChange={onProjectedNodesChange}
+              onEdgesChange={onProjectedFlowEdgesChange}
+              onConnect={readOnly ? undefined : onConnect}
+              onConnectStart={readOnly ? undefined : onConnectStart}
+              onConnectEnd={readOnly ? undefined : onConnectEnd}
+              onEdgesDelete={readOnly ? undefined : onEdgesDelete}
+              onDragOver={onCanvasDragOver}
+              onDrop={onCanvasDrop}
+              onNodeClick={onNodeClick}
+              onEdgeClick={onEdgeClick}
+              onPaneContextMenu={onPaneContextMenu ? handlePaneContextMenu : undefined}
+              onNodeContextMenu={onNodeContextMenu ? handleNodeContextMenu : undefined}
+              onEdgeContextMenu={onEdgeContextMenu ? handleEdgeContextMenu : undefined}
+              isValidConnection={isValidConnection}
+              nodesDraggable={!readOnly}
+              nodesConnectable={!readOnly}
+              edgesReconnectable={!readOnly}
+              elementsSelectable={false}
+              ariaLabelConfig={flowAriaLabelConfig}
+              deleteKeyCode={null}
+              fitView
+              fitViewOptions={DEFAULT_FIT_VIEW_OPTIONS}
+              proOptions={{ hideAttribution: true }}
+            >
+              <FieldRemapFlowActionsBridge
+                canFitView={canFitView}
+                flowActionsRef={flowActionsRef}
+              />
+              <Background gap={16} color="var(--xy-background-pattern-color)" />
+              <Controls showInteractive={false} fitViewOptions={DEFAULT_FIT_VIEW_OPTIONS}>
+                {onShowMinimapChange ? (
+                  <ControlButton
+                    aria-label={showMinimap ? chromeLabels.hideMinimap : chromeLabels.showMinimap}
+                    className={
+                      showMinimap
+                        ? 'workbench-field-remap-flow__minimap-toggle is-active'
+                        : 'workbench-field-remap-flow__minimap-toggle'
+                    }
+                    data-testid="field-remap-toggle-minimap"
+                    title={showMinimap ? chromeLabels.hideMinimap : chromeLabels.showMinimap}
+                    onClick={() => {
+                      onShowMinimapChange(!showMinimap);
+                    }}
                   >
-                    <path d="M3 6.5 9 4l6 2.5L21 4v13.5L15 20l-6-2.5L3 20z" />
-                    <path d="M9 4v13.5" />
-                    <path d="M15 6.5V20" />
-                  </svg>
-                </ControlButton>
-              ) : null}
-              {onIncludeHiddenChange ? (
-                <ControlButton
-                  aria-label={
-                    includeHidden ? chromeLabels.hideHiddenFields : chromeLabels.showHiddenFields
-                  }
-                  aria-pressed={includeHidden}
-                  className={
-                    includeHidden
-                      ? 'workbench-field-remap-flow__hidden-toggle is-active'
-                      : 'workbench-field-remap-flow__hidden-toggle'
-                  }
-                  data-testid="field-remap-toggle-hidden-fields"
-                  title={
-                    includeHidden ? chromeLabels.hideHiddenFields : chromeLabels.showHiddenFields
-                  }
-                  onClick={() => {
-                    onIncludeHiddenChange(!includeHidden);
-                  }}
-                >
-                  {includeHidden ? (
-                    <svg
-                      aria-hidden="true"
-                      fill="none"
-                      height="16"
-                      stroke="currentColor"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="1.75"
-                      viewBox="0 0 24 24"
-                      width="16"
-                    >
-                      <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
-                      <circle cx="12" cy="12" r="3" />
-                    </svg>
-                  ) : (
                     <svg
                       aria-hidden="true"
                       fill="none"
@@ -1947,35 +1952,92 @@ function FieldRemapFlowCanvas({
                       viewBox="0 0 24 24"
                       width="16"
                     >
-                      <path d="M3 3l18 18" />
-                      <path d="M10.6 10.6a3 3 0 0 0 4.2 4.2" />
-                      <path d="M9.9 5.1A10.6 10.6 0 0 1 12 5c6.5 0 10 7 10 7a17.4 17.4 0 0 1-3.2 4.4" />
-                      <path d="M6.1 6.1C3.9 7.7 2 12 2 12s3.5 7 10 7a10.4 10.4 0 0 0 4.2-.9" />
+                      <path d="M3 6.5 9 4l6 2.5L21 4v13.5L15 20l-6-2.5L3 20z" />
+                      <path d="M9 4v13.5" />
+                      <path d="M15 6.5V20" />
                     </svg>
-                  )}
-                </ControlButton>
+                  </ControlButton>
+                ) : null}
+                {onIncludeHiddenChange ? (
+                  <ControlButton
+                    aria-label={
+                      includeHidden ? chromeLabels.hideHiddenFields : chromeLabels.showHiddenFields
+                    }
+                    aria-pressed={includeHidden}
+                    className={
+                      includeHidden
+                        ? 'workbench-field-remap-flow__hidden-toggle is-active'
+                        : 'workbench-field-remap-flow__hidden-toggle'
+                    }
+                    data-testid="field-remap-toggle-hidden-fields"
+                    title={
+                      includeHidden ? chromeLabels.hideHiddenFields : chromeLabels.showHiddenFields
+                    }
+                    onClick={() => {
+                      onIncludeHiddenChange(!includeHidden);
+                    }}
+                  >
+                    {includeHidden ? (
+                      <svg
+                        aria-hidden="true"
+                        fill="none"
+                        height="16"
+                        stroke="currentColor"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="1.75"
+                        viewBox="0 0 24 24"
+                        width="16"
+                      >
+                        <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
+                        <circle cx="12" cy="12" r="3" />
+                      </svg>
+                    ) : (
+                      <svg
+                        aria-hidden="true"
+                        fill="none"
+                        height="16"
+                        stroke="currentColor"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="1.75"
+                        viewBox="0 0 24 24"
+                        width="16"
+                      >
+                        <path d="M3 3l18 18" />
+                        <path d="M10.6 10.6a3 3 0 0 0 4.2 4.2" />
+                        <path d="M9.9 5.1A10.6 10.6 0 0 1 12 5c6.5 0 10 7 10 7a17.4 17.4 0 0 1-3.2 4.4" />
+                        <path d="M6.1 6.1C3.9 7.7 2 12 2 12s3.5 7 10 7a10.4 10.4 0 0 0 4.2-.9" />
+                      </svg>
+                    )}
+                  </ControlButton>
+                ) : null}
+              </Controls>
+              {showMinimap ? (
+                <MiniMap
+                  pannable
+                  zoomable
+                  bgColor="var(--xy-minimap-background-color)"
+                  maskColor="var(--xy-minimap-mask-background-color)"
+                  nodeColor={(node) => {
+                    const kind = (node.data as FieldRemapFlowNodeData | undefined)?.kind;
+                    if (kind === 'source-object') {
+                      return 'var(--vscode-charts-blue, #3794ff)';
+                    }
+                    if (kind === 'target-object') {
+                      return 'var(--vscode-charts-green, #89d185)';
+                    }
+                    return 'var(--vscode-focusBorder, var(--color-accent, #3794ff))';
+                  }}
+                  nodeStrokeColor="var(--xy-minimap-node-stroke-color)"
+                />
               ) : null}
-            </Controls>
-            {showMinimap ? (
-              <MiniMap
-                pannable
-                zoomable
-                bgColor="var(--xy-minimap-background-color)"
-                maskColor="var(--xy-minimap-mask-background-color)"
-                nodeColor={(node) => {
-                  const kind = (node.data as FieldRemapFlowNodeData | undefined)?.kind;
-                  if (kind === 'source-object') {
-                    return 'var(--vscode-charts-blue, #3794ff)';
-                  }
-                  if (kind === 'target-object') {
-                    return 'var(--vscode-charts-green, #89d185)';
-                  }
-                  return 'var(--vscode-focusBorder, var(--color-accent, #3794ff))';
-                }}
-                nodeStrokeColor="var(--xy-minimap-node-stroke-color)"
-              />
-            ) : null}
-          </ReactFlow>
+            </ReactFlow>
+          ) : (
+            <p className="workbench-field-remap-demo__warn" role="status">
+              Mapping canvas is waiting for available space.
+            </p>
+          )}
         </div>
 
         <div className="workbench-field-remap-flow__side-rail">