Show if collab editor has unuploaded changes

Should help the user know whether or not its safe to exit.

Also count edited-but-not-saved plain input fields as "dirty" so that
users know to save them.

Author: aparrill-specterops

javascript/src/frontend/collab_forms/connection.tsx

@@ -5,9 +5,9 @@ import * as Y from "yjs";
 export type ConnectionStatus =
     | "disconnected"
     | "connecting"
-    | "initialSyncing"
     | "syncing"
     | "error"
+    | "dirty"
     | "idle";
 
 /// Gets a YJS connection from the information embedded by the `collab_editing/update.html` view.
@@ -22,12 +22,17 @@ export function usePageConnection(settings: {
     status: ConnectionStatus;
     // A simple yes-no for whether or not controls should be enabled. Derived from `status` but provided here for convenience.
     connected: boolean;
+    // A setter that can be set to `true` to return the `"dirty"` status even if nothing is actually dirty.
+    // Use if a field is being edited but not saved to the document yet.
+    setEditing: (editing: boolean) => void;
 } {
     const [status, setStatus] = useState<
         "disconnected" | "connecting" | "connected"
     >("disconnected");
     const [synced, setSynced] = useState<boolean>(false);
-    const [initialSyncDone, setInitialSyncDone] = useState<boolean>(false);
+    const [hasUnsyncedChanges, setHasUnsyncedChanges] =
+        useState<boolean>(false);
+    const [editing, setEditing] = useState<boolean>(false);
     const savedInstanceID = useRef<string | null>(null);
 
     // Type as `HocuspocusProvider` only, cuz it's only going to be null for a slight bit.
@@ -60,12 +65,10 @@ export function usePageConnection(settings: {
             },
             onStatus(event) {
                 setStatus(event.status);
-                if (event.status !== "connected") setInitialSyncDone(false);
             },
             onSynced(event) {
                 const state = event.state;
                 setSynced(state);
-                if (state) setInitialSyncDone(true);
 
                 if (savedInstanceID.current === null) {
                     const doc = provider.current.document;
@@ -76,6 +79,12 @@ export function usePageConnection(settings: {
                     });
                 }
             },
+            onDisconnect() {
+                setSynced(false);
+            },
+        });
+        provider.current.on("unsyncedChanges", () => {
+            setHasUnsyncedChanges(provider.current!.hasUnsyncedChanges);
         });
 
         provider.current.awareness!.setLocalStateField("user", {
@@ -113,9 +122,9 @@ export function usePageConnection(settings: {
 
     let outStatus: ConnectionStatus;
     if (status === "connected") {
-        if (!initialSyncDone) outStatus = "initialSyncing";
-        else if (!synced) outStatus = "syncing";
+        if (!synced) outStatus = "syncing";
         else if (hasSaveError) outStatus = "error";
+        else if (hasUnsyncedChanges || editing) outStatus = "dirty";
         else outStatus = "idle";
     } else {
         outStatus = status;
@@ -124,10 +133,8 @@ export function usePageConnection(settings: {
     return {
         provider: provider.current,
         status: outStatus,
-        connected:
-            outStatus === "idle" ||
-            outStatus === "syncing" ||
-            outStatus === "error",
+        connected: outStatus === "idle" || outStatus === "dirty",
+        setEditing,
     };
 }
 
@@ -171,9 +178,9 @@ function hsv_to_rgb(h: number, s: number, v: number) {
 const STATUS_LOOKUP: { [key in ConnectionStatus]: [string, string] } = {
     disconnected: ["Disconnected", "alert-danger"],
     connecting: ["Connecting...", "alert-warning"],
-    initialSyncing: ["Synchronizing...", "alert-warning"],
     syncing: ["Synchronizing...", "alert-warning"],
     idle: ["Connected, changes saved automatically", "alert-success"],
+    dirty: ["Connected, unsaved changes", "alert-warning"],
     error: ["Could not save data - refresh page and try again", "alert-danger"],
 };
 

javascript/src/frontend/collab_forms/extra_fields.tsx

@@ -40,6 +40,7 @@ export default function ExtraFieldsSection(props: {
     provider: HocuspocusProvider;
     header?: React.ReactNode;
     toolbarExtra?: (editor: Editor) => React.ReactNode;
+    setEditing?: (editing: boolean) => void;
 }) {
     const specs = useExtraFieldSpecs();
 
@@ -66,6 +67,7 @@ export function ExtraFieldInput(props: {
     provider: HocuspocusProvider;
     spec: ExtraFieldSpec;
     toolbarExtra?: (editor: Editor) => React.ReactNode;
+    setEditing?: (editing: boolean) => void;
 }) {
     const map = useMemo(
         () => props.provider.document.getMap("extra_fields"),
@@ -91,6 +93,7 @@ export function ExtraFieldInput(props: {
                     mapKey={props.spec.internal_name}
                     inputProps={{ className: "form-control mb-3" }}
                     defaultValue={0}
+                    setEditing={props.setEditing}
                 />
             );
         case "integer":
@@ -102,6 +105,7 @@ export function ExtraFieldInput(props: {
                     mapKey={props.spec.internal_name}
                     inputProps={{ className: "form-control mb-3" }}
                     defaultValue={0}
+                    setEditing={props.setEditing}
                 />
             );
         case "single_line_text":
@@ -112,6 +116,7 @@ export function ExtraFieldInput(props: {
                     map={map}
                     mapKey={props.spec.internal_name}
                     inputProps={{ className: "form-control mb-3" }}
+                    setEditing={props.setEditing}
                 />
             );
         case "rich_text":

javascript/src/frontend/collab_forms/forms/finding.tsx

@@ -7,7 +7,7 @@ import { FindingFormFields } from "../forms_common/finding";
 import RichTextEditor from "../rich_text_editor";
 
 function FindingForm() {
-    const { provider, status, connected } = usePageConnection({
+    const { provider, status, connected, setEditing } = usePageConnection({
         model: "finding",
     });
 
@@ -16,6 +16,7 @@ function FindingForm() {
             provider={provider}
             status={status}
             connected={connected}
+            setEditing={setEditing}
             extraBottom={
                 <>
                     <div className="form-group col-md-12">

javascript/src/frontend/collab_forms/forms/observation.tsx

@@ -8,7 +8,7 @@ import ExtraFieldsSection from "../extra_fields";
 import ReactModal from "react-modal";
 
 function ObservationForm() {
-    const { provider, status, connected } = usePageConnection({
+    const { provider, status, connected, setEditing } = usePageConnection({
         model: "observation",
     });
 
@@ -29,6 +29,7 @@ function ObservationForm() {
                                 connected={connected}
                                 provider={provider}
                                 mapKey="title"
+                                setEditing={setEditing}
                             />
                         </div>
                     </div>
@@ -64,7 +65,11 @@ function ObservationForm() {
                     </div>
                 </div>
 
-                <ExtraFieldsSection connected={connected} provider={provider} />
+                <ExtraFieldsSection
+                    connected={connected}
+                    provider={provider}
+                    setEditing={setEditing}
+                />
 
                 <ConnectionStatus status={status} />
             </div>

javascript/src/frontend/collab_forms/forms/report_field.tsx

@@ -12,7 +12,7 @@ const renderToolbarExtra = (editor: Editor) => (
 );
 
 function ReportExtraFieldForm(props: { field: string }) {
-    const { provider, status, connected } = usePageConnection({
+    const { provider, status, connected, setEditing } = usePageConnection({
         model: "report",
     });
 
@@ -32,6 +32,7 @@ function ReportExtraFieldForm(props: { field: string }) {
                     provider={provider}
                     spec={extraField}
                     toolbarExtra={renderToolbarExtra}
+                    setEditing={setEditing}
                 />
                 {extraField.description && (
                     <small className="form-text text-muted">

javascript/src/frontend/collab_forms/forms/reportfindinglink.tsx

@@ -14,7 +14,7 @@ const renderToolbarExtra = (editor: Editor) => (
 );
 
 function ReportFindingLinkForm() {
-    const { provider, status, connected } = usePageConnection({
+    const { provider, status, connected, setEditing } = usePageConnection({
         model: "report_finding_link",
     });
 
@@ -24,6 +24,7 @@ function ReportFindingLinkForm() {
             status={status}
             connected={connected}
             toolbarExtra={renderToolbarExtra}
+            setEditing={setEditing}
             extraTop={
                 <>
                     <h4 className="icon list-icon">Affected Entities</h4>

javascript/src/frontend/collab_forms/forms/reportobservationlink.tsx

@@ -16,7 +16,7 @@ const renderToolbarExtra = (editor: Editor) => (
 );
 
 function ReportObservationLinkForm() {
-    const { provider, status, connected } = usePageConnection({
+    const { provider, status, connected, setEditing } = usePageConnection({
         model: "report_observation_link",
     });
 
@@ -37,6 +37,7 @@ function ReportObservationLinkForm() {
                                 connected={connected}
                                 provider={provider}
                                 mapKey="title"
+                                setEditing={setEditing}
                             />
                         </div>
                     </div>
@@ -77,6 +78,7 @@ function ReportObservationLinkForm() {
                     connected={connected}
                     provider={provider}
                     toolbarExtra={renderToolbarExtra}
+                    setEditing={setEditing}
                 />
             </div>
         </ProvidePageEvidence>

javascript/src/frontend/collab_forms/forms_common/finding.tsx

@@ -45,13 +45,15 @@ export function FindingFormFields({
     toolbarExtra,
     extraTop,
     extraBottom,
+    setEditing,
 }: {
     provider: HocuspocusProvider;
     status: ConnectionStatus;
     connected: boolean;
     toolbarExtra?: (editor: Editor) => React.ReactNode;
     extraTop?: React.ReactNode;
     extraBottom?: React.ReactNode;
+    setEditing?: (editing: boolean) => void;
 }) {
     return (
         <>
@@ -73,6 +75,7 @@ export function FindingFormFields({
                                 connected={connected}
                                 provider={provider}
                                 mapKey="title"
+                                setEditing={setEditing}
                             />
                         </div>
                     </div>
@@ -156,6 +159,7 @@ export function FindingFormFields({
                             mapKey="cvssScore"
                             connected={connected}
                             defaultValue={null}
+                            setEditing={setEditing}
                         />
                         <small className="form-text text-muted">
                             Set the CVSS score for this finding
@@ -175,6 +179,7 @@ export function FindingFormFields({
                             connected={connected}
                             provider={provider}
                             mapKey="cvssVector"
+                            setEditing={setEditing}
                         />
                         <small className="form-text text-muted">
                             Set the CVSS vector for this finding
@@ -310,6 +315,7 @@ export function FindingFormFields({
                     </>
                 }
                 toolbarExtra={toolbarExtra}
+                setEditing={setEditing}
             />
         </>
     );

javascript/src/frontend/collab_forms/plain_editors/field.ts

@@ -5,9 +5,10 @@ import { useEffect, useMemo, useReducer, useRef } from "react";
 
 /**
  * Gets and observes a YJS map key.
- * @param map The YJS map to observe
- * @param key The key of the YJS map to get and observe
- * @param defaultValue The value to return if the key is missing
+ * @param map The YJS map to observe.
+ * @param key The key of the YJS map to get and observe.
+ * @param defaultValue The value to return if the key is missing.
+ * @param onExternalChange Callback to call when a change to the field happens that wasn't caused by this client.
  * @returns The current value and a setter that sets the value on the YJS map.
  */
 export function usePlainField<T>(

javascript/src/frontend/collab_forms/plain_editors/input.tsx

@@ -14,6 +14,7 @@ export function BaseInput<T>(props: {
     toString: (v: T) => string;
     parse: (v: string) => T | undefined;
     defaultValue: T;
+    setEditing?: (editing: boolean) => void;
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
 }) {
     const map = useMemo(
@@ -40,13 +41,15 @@ export function BaseInput<T>(props: {
         if (formValue === null) return;
         let parsed = props.parse(formValue);
         if (parsed === undefined || parsed === docValue) {
+            if (props.setEditing) props.setEditing(false);
             setFormValue(null);
             return;
         } else if (parsed === null) {
             parsed = props.defaultValue;
         }
         setDocValue(parsed);
         setFormValue(null);
+        if (props.setEditing) props.setEditing(false);
     };
 
     return (
@@ -60,6 +63,7 @@ export function BaseInput<T>(props: {
                 }
                 onInput={(ev) => {
                     setFormValue((ev.target as HTMLInputElement).value);
+                    if (props.setEditing) props.setEditing(true);
                 }}
                 onFocus={onFocus}
                 onBlur={() => {
@@ -84,6 +88,7 @@ export function PlainTextInput(props: {
     mapKey: string;
     connected: boolean;
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    setEditing?: (editing: boolean) => void;
 }) {
     const inputProps = {
         type: "text",
@@ -115,6 +120,7 @@ export function NumberInput(props: {
     connected: boolean;
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
     defaultValue: number | null;
+    setEditing?: (editing: boolean) => void;
 }) {
     const inputProps = {
         type: "number",
@@ -146,6 +152,7 @@ export function IntegerInput(props: {
     connected: boolean;
     inputProps?: React.HTMLAttributes<HTMLInputElement>;
     defaultValue: number;
+    setEditing?: (editing: boolean) => void;
 }) {
     const inputProps = {
         type: "number",