Show warning dialog when changing group type

Warn the user if changing the group type may expose or hide annotations that are
already in the group from public view.

Author: robertknight

h/static/scripts/group-forms/components/CreateEditGroupForm.tsx

@@ -6,6 +6,7 @@ import {
   Input,
   RadioGroup,
   Textarea,
+  ModalDialog,
   useWarnOnPageUnload,
 } from '@hypothesis/frontend-shared';
 import { readConfig } from '../config';
@@ -17,6 +18,7 @@ import type {
 } from '../utils/api';
 import { setLocation } from '../utils/set-location';
 import SaveStateIcon from './SaveStateIcon';
+import WarningDialog from './WarningDialog';
 
 function Star() {
   return <span className="text-brand">*</span>;
@@ -133,6 +135,58 @@ function TextField({
   );
 }
 
+/**
+ * Dialog that warns users about existing annotations in a group being exposed
+ * or hidden from public view when the group type is changed.
+ */
+function GroupTypeChangeWarning({
+  name,
+  newType,
+  annotationCount: count,
+  onConfirm,
+  onCancel,
+}: {
+  /** Name of the group. */
+  name: string;
+
+  /**
+   * The new type for the group. If this is private, the old type is inferred
+   * to be public and vice-versa.
+   */
+  newType: GroupType;
+
+  /** Number of annotations in the group. */
+  annotationCount: number;
+
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  const newTypeIsPrivate = newType === 'private';
+
+  let title;
+  let confirmAction;
+  let message;
+  if (newTypeIsPrivate) {
+    title = `Make ${count} annotations private?`;
+    confirmAction = 'Make annotations private';
+    message = `Are you sure you want to make "${name}" private? ${count} annotations that are publicly visible will become visible only to members of ${name}`;
+  } else {
+    title = `Make ${count} annotations public?`;
+    confirmAction = 'Make annotations public';
+    message = `Are you sure you want to make "${name}" public? ${count} annotations that are visible only to group members will become publicly visible`;
+  }
+
+  return (
+    <WarningDialog
+      title={title}
+      message={message}
+      confirmAction={confirmAction}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+    />
+  );
+}
+
 export default function CreateEditGroupForm() {
   const config = useMemo(() => readConfig(), []);
   const group = config.context.group;
@@ -143,6 +197,12 @@ export default function CreateEditGroupForm() {
     group?.type ?? 'private',
   );
 
+  // Set when the user selects a new group type if confirmation is required.
+  // Cleared after confirmation.
+  const [pendingGroupType, setPendingGroupType] = useState<GroupType | null>(
+    null,
+  );
+
   const [errorMessage, setErrorMessage] = useState('');
   const [saveState, setSaveState] = useState<
     'unmodified' | 'unsaved' | 'saving' | 'saved'
@@ -249,6 +309,18 @@ export default function CreateEditGroupForm() {
 
   const groupTypeLabel = useId();
 
+  const changeGroupType = (newType: GroupType) => {
+    const count = group?.num_annotations ?? 0;
+    const oldTypeIsPrivate = groupType === 'private';
+    const newTypeIsPrivate = newType === 'private';
+
+    if (count === 0 || oldTypeIsPrivate === newTypeIsPrivate) {
+      setGroupType(newType);
+    } else {
+      setPendingGroupType(newType);
+    }
+  };
+
   return (
     <div className="text-grey-6 text-sm/relaxed">
       <h1 className="mt-14 mb-8 text-grey-7 text-xl/none" data-testid="header">
@@ -280,12 +352,12 @@ export default function CreateEditGroupForm() {
         {config.features.group_type && (
           <>
             <Label id={groupTypeLabel} text="Group type" />
-            <RadioGroup<GroupType>
+            <RadioGroup
               aria-labelledby={groupTypeLabel}
               data-testid="group-type"
               direction="vertical"
               selected={groupType}
-              onChange={setGroupType}
+              onChange={changeGroupType}
             >
               <RadioGroup.Radio
                 value="private"
@@ -336,6 +408,19 @@ export default function CreateEditGroupForm() {
         </div>
       </form>
 
+      {group && pendingGroupType && (
+        <GroupTypeChangeWarning
+          name={name}
+          newType={pendingGroupType}
+          annotationCount={group.num_annotations}
+          onCancel={() => setPendingGroupType(null)}
+          onConfirm={() => {
+            setGroupType(pendingGroupType);
+            setPendingGroupType(null);
+          }}
+        />
+      )}
+
       <footer className="mt-14 pt-4 border-t border-t-text-grey-6">
         <div className="flex">
           {group && (

h/static/scripts/group-forms/components/test/CreateEditGroupForm-test.js

@@ -477,6 +477,101 @@ describe('CreateEditGroupForm', () => {
       });
     });
   });
+
+  [
+    // There no warning when creating a new group
+    {
+      oldType: null,
+      newType: 'open',
+      expectedWarning: null,
+      annotationCount: 0,
+    },
+    {
+      // Warn when making annotations public
+      oldType: 'private',
+      newType: 'open',
+      annotationCount: 2,
+      expectedWarning: 'Make 2 annotations public?',
+    },
+    {
+      // Warn when making annotations private
+      oldType: 'open',
+      newType: 'private',
+      annotationCount: 3,
+      expectedWarning: 'Make 3 annotations private?',
+    },
+    {
+      // Don't warn if there are no annotations
+      oldType: 'open',
+      newType: 'private',
+      annotationCount: 0,
+      expectedWarning: null,
+    },
+  ].forEach(({ oldType, newType, annotationCount, expectedWarning }) => {
+    it('shows warning when changing group type between private and public', async () => {
+      if (oldType !== null) {
+        config.context.group = {
+          pubid: 'testid',
+          name: 'Test Name',
+          description: 'Test group description',
+          link: 'https://example.com/groups/testid',
+          type: oldType,
+          num_annotations: annotationCount,
+        };
+      }
+
+      const { wrapper } = createWrapper();
+      setSelectedGroupType(wrapper, newType);
+
+      if (expectedWarning) {
+        const warning = wrapper.find('WarningDialog');
+        assert.isTrue(warning.exists());
+        assert.equal(warning.prop('title'), expectedWarning);
+      } else {
+        assert.isFalse(wrapper.exists('WarningDialog'));
+      }
+    });
+  });
+
+  it('updates group type if change is confirmed', async () => {
+    config.context.group = {
+      pubid: 'testid',
+      name: 'Test Name',
+      description: 'Test group description',
+      link: 'https://example.com/groups/testid',
+      type: 'private',
+      num_annotations: 3,
+    };
+
+    const { wrapper } = createWrapper();
+    setSelectedGroupType(wrapper, 'open');
+
+    const warning = wrapper.find('WarningDialog');
+    act(() => warning.prop('onConfirm')());
+    wrapper.update();
+
+    assert.equal(getSelectedGroupType(wrapper), 'open');
+  });
+
+  it('does not group type if change is canceled', async () => {
+    config.context.group = {
+      pubid: 'testid',
+      name: 'Test Name',
+      description: 'Test group description',
+      link: 'https://example.com/groups/testid',
+      type: 'private',
+      num_annotations: 3,
+    };
+
+    const { wrapper } = createWrapper();
+    setSelectedGroupType(wrapper, 'open');
+
+    const warning = wrapper.find('WarningDialog');
+    act(() => warning.prop('onCancel')());
+    wrapper.update();
+
+    assert.equal(getSelectedGroupType(wrapper), 'private');
+  });
 });
 
 async function assertInLoadingState(wrapper, inLoadingState) {

h/static/scripts/group-forms/config.ts

@@ -20,6 +20,7 @@ export type ConfigObject = {
       description: string;
       link: string;
       type: GroupType;
+      num_annotations: number;
     } | null;
   };
   features: {