Implementing more advanced feature: audit and more

web/src/ViewMode.tsx

@@ -7,10 +7,10 @@ import { parseInterface } from './lib/xml';
 import { newPlotPanel } from './lib/templates';
 import { useAuth, canWrite } from './lib/auth';
 import type { Interface } from './lib/types';
-import ContextualHelp from './ContextualHelp';
 import HelpModal from './HelpModal';
 import ZoomControl from './ZoomControl';
 import ControlLogicEditor from './ControlLogicEditor';
+import AuditViewer from './AuditViewer';
 
 interface Props {
   onEdit?: (iface?: Interface) => void;
@@ -33,6 +33,7 @@ export default function ViewMode({ onEdit, initialInterface, onView }: Props) {
   const [helpSection, setHelpSection] = useState('start');
   const [showTimeNav, setShowTimeNav] = useState(false);
   const [showControlLogic, setShowControlLogic] = useState(false);
+  const [showAudit, setShowAudit] = useState(false);
   const [leftW, setLeftW] = useState(220);
   const [listCollapsed, setListCollapsed] = useState(false);
   const me = useAuth();
@@ -137,9 +138,13 @@ export default function ViewMode({ onEdit, initialInterface, onView }: Props) {
           )}
         </div>
         <div class="toolbar-right">
-          <div class={`status-chip ${wsStatus}`}>
+          <div
+            class={`status-chip ${wsStatus}`}
+            title={me.user ? `Signed in as ${me.user}${writable ? '' : ' (read-only)'}` : undefined}
+          >
             <span class="status-dot"></span>
             {wsStatus === 'connected' && me.user ? `connected as ${me.user}` : wsStatus}
+            {me.user && !writable && ' (read-only)'}
           </div>
           <button
             class={`toolbar-btn${showTimeNav ? ' toolbar-btn-active' : ''}`}
@@ -148,7 +153,6 @@ export default function ViewMode({ onEdit, initialInterface, onView }: Props) {
           >
             ⏱ History
           </button>
-          <ContextualHelp mode="view" onOpenManual={openHelp} />
           <button
             class="icon-btn help-manual-btn"
             onClick={() => openHelp('start')}
@@ -166,6 +170,15 @@ export default function ViewMode({ onEdit, initialInterface, onView }: Props) {
               ⚙ Control logic
             </button>
           )}
+          {me.canViewAudit && (
+            <button
+              class="toolbar-btn"
+              onClick={() => setShowAudit(true)}
+              title="View the audit log"
+            >
+              🛡 Audit
+            </button>
+          )}
           {writable && (
             <button
               class="btn-edit"
@@ -175,11 +188,6 @@ export default function ViewMode({ onEdit, initialInterface, onView }: Props) {
               Edit
             </button>
           )}
-          {me.user && (
-            <span class="user-chip" title={`Signed in as ${me.user}${writable ? '' : ' (read-only)'}`}>
-              {me.user}{!writable && ' (read-only)'}
-            </span>
-          )}
         </div>
       </header>
 
@@ -257,6 +265,10 @@ export default function ViewMode({ onEdit, initialInterface, onView }: Props) {
       {showControlLogic && (
         <ControlLogicEditor onClose={() => setShowControlLogic(false)} />
       )}
+
+      {showAudit && (
+        <AuditViewer onClose={() => setShowAudit(false)} />
+      )}
     </div>
   );
 }