Confirmation dialog to release legal hold.

Fixes #8

webapp/src/components/confirm_release.tsx

@@ -0,0 +1,62 @@
+import React, {useState} from 'react';
+
+import {UserProfile} from 'mattermost-redux/types/users';
+
+import UsersInput from '@/components/users_input';
+import {CreateLegalHold, LegalHold} from '@/types';
+import {GenericModal} from '@/components/mattermost-webapp/generic_modal/generic_modal';
+import Input from '@/components/mattermost-webapp/input/input';
+
+import './create_legal_hold_form.scss';
+
+interface ConfirmReleaseProps {
+    legalHold: LegalHold;
+    releaseLegalHold: (id: string) => Promise<any>;
+    onExited: () => void;
+    visible: boolean;
+}
+
+const ConfirmRelease = (props: ConfirmReleaseProps) => {
+    const [saving, setSaving] = useState(false);
+    const [serverError, setServerError] = useState('');
+
+    const release = () => {
+        setSaving(true);
+        props.releaseLegalHold(props.legalHold.id).then((response) => {
+            props.onExited();
+        }).catch((error) => {
+            setSaving(false);
+            setServerError(error.toString());
+        });
+    };
+
+    const onCancel = () => {
+        props.onExited();
+    };
+
+    return (
+        <GenericModal
+            id='confirm-release-legal-hold-modal'
+            className='confirm-release-legal-hold-modal'
+            modalHeaderText='Release legal hold'
+            confirmButtonText='Release'
+            cancelButtonText='Cancel'
+            errorText={serverError}
+            autoCloseOnConfirmButton={false}
+            compassDesign={true}
+            isConfirmDisabled={saving}
+            handleConfirm={release}
+            handleCancel={onCancel}
+            onExited={onCancel}
+            show={props.visible}
+        >
+            <div>
+                Are you sure you want to release this legal hold? All data
+                associated with it will immediately be deleted and cannot be recovered.
+            </div>
+        </GenericModal>
+    );
+};
+
+export default ConfirmRelease;
+

webapp/src/components/legal_hold_table/legal_hold_row/legal_hold_row.tsx

@@ -17,7 +17,7 @@ const LegalHoldRow = (props: LegalHoldRowProps) => {
     const endsAt = lh.ends_at != 0 ? (new Date(lh.ends_at)).toLocaleDateString() : "Never";
 
     const release = () => {
-        props.releaseLegalHold(lh.id);
+        props.releaseLegalHold(lh);
     };
 
     const usernames = props.users.map((user) => {

webapp/src/components/legal_holds_setting.tsx

@@ -11,13 +11,15 @@ import CreateLegalHoldButton from '@/components/create_legal_hold_button';
 
 import LegalHoldIcon from '@/components/legal_hold_icon.svg';
 import UpdateLegalHoldForm from "@/components/update_legal_hold_form";
+import ConfirmRelease from "@/components/confirm_release";
 
 const LegalHoldsSetting = () => {
     const [legalHoldsFetched, setLegalHoldsFetched] = useState(false);
     const [legalHoldsFetching, setLegalHoldsFetching] = useState(false);
     const [legalHolds, setLegalHolds] = useState(Array<LegalHold>());
     const [showCreateModal, setShowCreateModal] = useState(false);
     const [showUpdateModal, setShowUpdateModal] = useState(false);
+    const [showReleaseModal, setShowReleaseModal] = useState(false);
     const [activeLegalHold, setActiveLegalHold] = useState<LegalHold|null>(null);
 
     const createLegalHold = async (data: CreateLegalHold) => {
@@ -58,6 +60,11 @@ const LegalHoldsSetting = () => {
         setShowUpdateModal(true);
     }
 
+    const doShowReleaseModal = (legalHold: LegalHold) => {
+        setActiveLegalHold(legalHold);
+        setShowReleaseModal(true);
+    }
+
     useEffect(() => {
         const fetchLegalHolds = async () => {
             try {
@@ -151,7 +158,7 @@ const LegalHoldsSetting = () => {
                 {legalHolds.length > 0 && (
                     <LegalHoldTable
                         legalHolds={legalHolds}
-                        releaseLegalHold={releaseLegalHold}
+                        releaseLegalHold={doShowReleaseModal}
                         showUpdateModal={doShowUpdateModal}
                     />
                 )}
@@ -169,6 +176,13 @@ const LegalHoldsSetting = () => {
                     legalHold={activeLegalHold}
                 />
 
+                <ConfirmRelease
+                    legalHold={activeLegalHold}
+                    releaseLegalHold={releaseLegalHold}
+                    onExited={() => setShowReleaseModal(false)}
+                    visible={showReleaseModal}
+                />
+
             </div>
         </IntlProvider>
     );