i18n, impl

packages/app/resource/locales/en_US/translation.json

@@ -461,7 +461,8 @@
     "dont_ask_again": "Don't ask again"
   },
   "modal_resolve_conflict": {
-    "title": "Resolve Conflict",
+    "file_conflicting_with_newer_remote": "This file is conflicting with newer remote file",
+    "resolve_conflict": "Resolve Conflict",
     "resolve_and_save" : "Resolve and save"
   },
   "link_edit": {

packages/app/resource/locales/ja_JP/translation.json

@@ -461,7 +461,8 @@
     "dont_ask_again": "常に許可する"
   },
   "modal_resolve_conflict": {
-    "title": "衝突を解消する",
+    "file_conflicting_with_newer_remote": "サーバー側の新しいファイルと衝突します。",
+    "resolve_conflict": "衝突を解消する",
     "resolve_and_save" : "解消し保存する"
   },
   "link_edit": {

packages/app/resource/locales/zh_CN/translation.json

@@ -439,7 +439,8 @@
     "dont_ask_again": "不要再问"
   },
   "modal_resolve_conflict": {
-    "title": "解决冲突",
+    "file_conflicting_with_newer_remote": "此文件与较新的远程文件冲突",
+    "resolve_conflict": "解决冲突",
     "resolve_and_save" : "解决冲突并保存"
   },
   "link_edit": {

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

@@ -55,7 +55,7 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
   return (
     <Modal isOpen={props.isOpen || false} toggle={onCancel} className="modal-gfm-cheatsheet">
       <ModalHeader tag="h4" toggle={onCancel} className="bg-primary text-light">
-        <i className="icon-fw icon-exclamation" />{t('modal_resolve_conflict.title')}
+        <i className="icon-fw icon-exclamation" />{t('modal_resolve_conflict.resolve_conflict')}
       </ModalHeader>
       <ModalBody>
         <div ref={(el) => { setCodeMirrorRef(el) }}></div>

packages/app/src/components/PageStatusAlert.jsx

@@ -26,6 +26,7 @@ class PageStatusAlert extends React.Component {
     };
 
     this.getContentsForSomeoneEditingAlert = this.getContentsForSomeoneEditingAlert.bind(this);
+    this.getContentsForRevisionOutdated = this.getContentsForRevisionOutdated.bind(this);
     this.getContentsForDraftExistsAlert = this.getContentsForDraftExistsAlert.bind(this);
     this.getContentsForUpdatedAlert = this.getContentsForUpdatedAlert.bind(this);
   }
@@ -55,12 +56,11 @@ class PageStatusAlert extends React.Component {
       ['bg-success', 'd-hackmd-none'],
       <>
         <i className="icon-fw icon-pencil"></i>
-        {/* {t('hackmd.this_page_has_draft')} */}
-        Merge Conflict
+        {t('modal_resolve_conflict.file_conflicting_with_newer_remote')}
       </>,
       <a href="#hackmd" className="btn btn-outline-white">
         <i className="fa fa-fw fa-file-text-o mr-1"></i>
-        Resolve conflict
+        {t('modal_resolve_conflict.resolve_conflict')}
       </a>,
     ];
   }

packages/app/src/components/SavePageControls.jsx

@@ -47,12 +47,15 @@ class SavePageControls extends React.Component {
       await pageContainer.saveAndReload(editorContainer.getCurrentOptionsToSave());
     }
     catch (error) {
-      // TODO: display resolve conflict button when operation to update page is conflicted
-      // ref: https://estoc.weseek.co.jp/redmine/issues/78784
-      console.log(error);
       logger.error('failed to save', error);
       pageContainer.showErrorToastr(error);
-      pageContainer.setState({})
+      if (error.code === 'conflict') {
+        const { latest, origin } = error.data;
+        pageContainer.setState({
+          remoteRevisionId: latest.revisionId,
+          revisionId: origin.revisionId,
+        });
+      }
     }
   }