display modal

packages/app/src/components/PageEditor/ConflictDiffModal.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, FC } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Modal, ModalHeader, ModalBody, ModalFooter,
+  Modal, ModalHeader, ModalBody, ModalFooter, Button,
 } from 'reactstrap';
 // import CodeMirror from 'codemirror/lib/codemirror';
 import { useTranslation } from 'react-i18next';
@@ -20,19 +20,20 @@ require('jquery-ui/ui/widgets/resizable');
 
 const DMP = require('diff_match_patch');
 
+const INITIAL_TEXT = 'Please choose revision';
+
 Object.keys(DMP).forEach((key) => { window[key] = DMP[key] });
 
 type ConflictDiffModalProps = {
   isOpen: boolean | null;
   onCancel: (() => void) | null;
-  onResolveConflict: (() => void) | null;
   pageContainer: PageContainer;
 };
 
 export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
   const [val, setVal] = useState('value 1');
   const [orig, setOrig] = useState('value 2');
-  const [resolvedPageBody, SetResolvedPageBody] = useState<string>('initial text will be replaced');
+  const [resolvedRevision, SetResolvedRevision] = useState<string>(INITIAL_TEXT);
   const [codeMirrorRef, setCodeMirrorRef] = useState<HTMLDivElement | null>(null);
   const { t } = useTranslation('');
 
@@ -50,7 +51,7 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
       revisionId: pageContainer.state.revisionsOnConflict?.latest.revisionId,
     }, async() => {
       try {
-        await pageContainer.save(resolvedPageBody);
+        await pageContainer.save(resolvedRevision);
         window.location.href = pageContainer.state.path || '/';
       }
       catch (e) {
@@ -67,34 +68,61 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
       <ModalBody>
         {Object.keys(pageContainer.state.revisionsOnConflict || {}).length > 0
           && (
-            <div className="row">
+            <div className="row mx-2">
               <div className="col-12 text-center mt-2 mb-4">
                 <h2>{`Selected revision: ${val}`}</h2>
               </div>
-              <div className="col-4">
-                <h2>Previous Revision</h2>
+              <div className="col-4 border border-dark">
+                <h3 className="font-weight-bold">Previous Revision</h3>
                 <CodeMirror
                   value={pageContainer.state.revisionsOnConflict?.request.revisionBody}
                   onChange={() => {
                   }}
                 />
+                <Button
+                  outline
+                  color="secondary"
+                  size="sm"
+                  className="btn-comment-reply"
+                  onClick={() => { SetResolvedRevision(pageContainer.state.revisionsOnConflict?.request.revisionBody) }}
+                >
+                  <i className="icon-fw icon-action-undo"></i>Use previous
+                </Button>
               </div>
-              <div className="col-4">
-                <h2>Original Revision</h2>
+              <div className="col-4 border border-dark">
+                <h3 className="font-weight-bold">Original Revision</h3>
                 <CodeMirror
                   value={pageContainer.state.revisionsOnConflict?.origin.revisionBody}
                 />
+                <Button
+                  outline
+                  color="secondary"
+                  size="sm"
+                  className="btn-comment-reply"
+                  onClick={() => { SetResolvedRevision(pageContainer.state.revisionsOnConflict?.origin.revisionBody) }}
+                >
+                  <i className="icon-fw icon-action-undo"></i>Use Original
+                </Button>
               </div>
-              <div className="col-4">
-                <h2>Latest Revision</h2>
+              <div className="col-4 border border-dark">
+                <h3 className="font-weight-bold">Latest Revision</h3>
                 <CodeMirror
                   value={pageContainer.state.revisionsOnConflict?.latest.revisionBody}
                 />
+                <Button
+                  outline
+                  color="secondary"
+                  size="sm"
+                  className="btn-comment-reply"
+                  onClick={() => { SetResolvedRevision(pageContainer.state.revisionsOnConflict?.latest.revisionBody) }}
+                >
+                  <i className="icon-fw icon-action-undo"></i>Use Latest
+                </Button>
               </div>
-              <div className="col-12">
-                <h2>Selected Revision</h2>
+              <div className="col-12 border border-dark">
+                <h3>Selected Revision</h3>
                 <CodeMirror
-                  value="clicked text"
+                  value={resolvedRevision}
                 />
               </div>
             </div>
@@ -107,6 +135,7 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
           type="button"
           className="btn btn-outline-secondary"
           onClick={onCancel}
+          disabled={resolvedRevision === INITIAL_TEXT}
         >
           {t('Cancel')}
         </button>
@@ -125,7 +154,6 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
 ConflictDiffModal.propTypes = {
   isOpen: PropTypes.bool,
   onCancel: PropTypes.func,
-  onResolveConflict: PropTypes.func,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 };
 

packages/app/src/components/PageEditor/Editor.jsx

@@ -375,7 +375,6 @@ class Editor extends AbstractEditor {
           isOpen={this.props.pageContainer.state.isConflictDiffModalOpen}
           onCancel={() => this.props.pageContainer.setState({ isConflictDiffModalOpen: false, revisionsOnConflict: {} })}
           pageContainer={this.props.pageContainer}
-          editorContainer={this.props.editorContainer}
         />
       </>
     );