initial config manager

web/src/ViewMode.tsx

@@ -11,6 +11,7 @@ import HelpModal from './HelpModal';
 import ZoomControl from './ZoomControl';
 import ControlLogicEditor from './ControlLogicEditor';
 import AuditViewer from './AuditViewer';
+import ConfigManager from './ConfigManager';
 
 interface Props {
   onEdit?: (iface?: Interface) => void;
@@ -34,6 +35,7 @@ export default function ViewMode({ onEdit, initialInterface, onView }: Props) {
   const [showTimeNav, setShowTimeNav] = useState(false);
   const [showControlLogic, setShowControlLogic] = useState(false);
   const [showAudit, setShowAudit] = useState(false);
+  const [showConfig, setShowConfig] = useState(false);
   const [leftW, setLeftW] = useState(220);
   const [listCollapsed, setListCollapsed] = useState(false);
   const me = useAuth();
@@ -179,6 +181,15 @@ export default function ViewMode({ onEdit, initialInterface, onView }: Props) {
               🛡 Audit
             </button>
           )}
+          {writable && (
+            <button
+              class="toolbar-btn"
+              onClick={() => setShowConfig(true)}
+              title="Open configuration manager"
+            >
+              🗂 Config
+            </button>
+          )}
           {writable && (
             <button
               class="btn-edit"
@@ -269,6 +280,9 @@ export default function ViewMode({ onEdit, initialInterface, onView }: Props) {
       {showAudit && (
         <AuditViewer onClose={() => setShowAudit(false)} />
       )}
+      {showConfig && (
+        <ConfigManager onClose={() => setShowConfig(false)} />
+      )}
     </div>
   );
 }