Testing

web/src/EditMode.tsx

@@ -1,6 +1,6 @@
 import { h, Fragment } from 'preact';
 import { useState, useCallback, useRef, useEffect } from 'preact/hooks';
-import type { Interface, Widget, PlotLayout, StateVar, LogicGraph } from './lib/types';
+import type { Interface, Widget, PlotLayout, StateVar, LogicGraph, Folder } from './lib/types';
 import { serializeInterface, parseInterface } from './lib/xml';
 import { initLocalState } from './lib/localstate';
 import SignalTree from './SignalTree';
@@ -8,6 +8,7 @@ import EditCanvas, { genWidgetId, DEFAULT_SIZES } from './EditCanvas';
 import PlotPanelCanvas from './PlotPanelCanvas';
 import LogicEditor from './LogicEditor';
 import PropertiesPane from './PropertiesPane';
+import ShareDialog from './ShareDialog';
 import HelpModal from './HelpModal';
 import ZoomControl from './ZoomControl';
 import { useAuth, canWrite } from './lib/auth';
@@ -121,6 +122,10 @@ export default function EditMode({ initial, onDone }: Props) {
   const [showGroupMenu, setShowGroupMenu] = useState(false);
   const [showHelp, setShowHelp] = useState(false);
   const [helpSection, setHelpSection] = useState('edit');
+  // Panel sharing (folder, public visibility, grants). The folders list feeds
+  // ShareDialog's folder picker; fetched lazily the first time Share is opened.
+  const [showShare, setShowShare] = useState(false);
+  const [folders, setFolders] = useState<Folder[]>([]);
   const [leftW, setLeftW] = useState(220);
   const [rightW, setRightW] = useState(260);
   // Center column tab: the drag-and-drop layout editor, or the panel-logic editor.
@@ -163,6 +168,15 @@ export default function EditMode({ initial, onDone }: Props) {
     setShowHelp(true);
   }, []);
 
+  // Open the panel-sharing dialog, refreshing the folder list it offers first.
+  const openShare = useCallback(() => {
+    fetch('/api/v1/folders')
+      .then(r => r.ok ? r.json() : [])
+      .then(data => setFolders(Array.isArray(data) ? data : []))
+      .catch(() => {})
+      .finally(() => setShowShare(true));
+  }, []);
+
   // Undo / redo. Snapshots capture both widgets and (for plot panels) the split
   // layout, so split/close/resize operations are undone atomically.
   type Snapshot = { widgets: Widget[]; layout?: PlotLayout };
@@ -748,6 +762,7 @@ export default function EditMode({ initial, onDone }: Props) {
               onChange={handleWidgetChange}
               onRenameId={handleWidgetRename}
               onIfaceChange={handleIfaceChange}
+              onShare={writable && iface.id ? openShare : undefined}
               width={rightW}
             />
           </Fragment>
@@ -797,6 +812,16 @@ export default function EditMode({ initial, onDone }: Props) {
       {showHelp && (
         <HelpModal initialSection={helpSection} onClose={() => setShowHelp(false)} />
       )}
+
+      {showShare && iface.id && (
+        <ShareDialog
+          ifaceId={iface.id}
+          ifaceName={iface.name}
+          folders={folders}
+          onClose={() => setShowShare(false)}
+          onSaved={() => window.dispatchEvent(new CustomEvent('uopi:refresh-interfaces'))}
+        />
+      )}
     </div>
   );
 }