message: Add feature to view edit history.

Creates a component 'EditHistory' that renders a webview to show
the edit history of a message. This webview is non-interactive -
the user can select/copy message contents, but can not interact
with them - like open links/navigate to narrows etc.

Fixes: #4134

Author: agrawal-d

src/message/EditHistory.js

@@ -0,0 +1,86 @@
+/* @flow strict-local */
+
+import React from 'react';
+import { View } from 'react-native';
+import type { NavigationScreenProp } from 'react-navigation';
+import type { Dispatch, Auth, ThemeName, UserOrBot } from '../types';
+import SpinningProgress from '../common/SpinningProgress';
+import type { MessageSnapshot } from '../api/modelTypes';
+import { connect } from '../react-redux';
+import { getAuth, getSettings, getAllUsersById } from '../selectors';
+import { Screen, ZulipWebView } from '../common';
+import { showToast } from '../utils/info';
+import * as api from '../api';
+import editHistoryHtml from '../webview/html/editHistoryHtml';
+
+type SelectorProps = {|
+  auth: Auth,
+  usersById: Map<number, UserOrBot>,
+  themeName: ThemeName,
+|};
+
+type Props = $ReadOnly<{|
+  navigation: NavigationScreenProp<{ params: {| messageId: number |} }>,
+
+  dispatch: Dispatch,
+  ...SelectorProps,
+|}>;
+
+type State = $ReadOnly<{|
+  messageHistory: MessageSnapshot[] | null,
+|}>;
+
+class EditHistory extends React.Component<Props, State> {
+  state = {
+    messageHistory: null,
+  };
+
+  componentDidMount() {
+    const { auth, navigation } = this.props;
+
+    api
+      .getMessageHistory(auth, navigation.state.params.messageId)
+      .then(response => {
+        this.setState({
+          messageHistory: response.message_history,
+        });
+      })
+      .catch(err => {
+        navigation.goBack();
+        showToast('An error occurred while loading edit history');
+      });
+  }
+
+  render() {
+    const { messageHistory } = this.state;
+
+    if (messageHistory === null) {
+      return (
+        <Screen title="Edit History">
+          <View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
+            <SpinningProgress color="white" size={48} />
+          </View>
+        </Screen>
+      );
+    }
+    const { usersById, auth, themeName } = this.props;
+
+    return (
+      <Screen title="Edit History">
+        <ZulipWebView
+          html={editHistoryHtml(messageHistory, themeName, usersById, auth)}
+          onError={(msg: mixed) => {
+            // eslint-disable-next-line no-console
+            console.error(msg);
+          }}
+        />
+      </Screen>
+    );
+  }
+}
+
+export default connect<SelectorProps, _, _>((state, props) => ({
+  auth: getAuth(state),
+  usersById: getAllUsersById(state),
+  themeName: getSettings(state).theme,
+}))(EditHistory);

src/message/messageActionSheet.js

@@ -25,7 +25,7 @@ import { isTopicMuted } from '../utils/message';
 import * as api from '../api';
 import { showToast } from '../utils/info';
 import { doNarrow, deleteOutboxMessage, navigateToEmojiPicker } from '../actions';
-import { navigateToMessageReactionScreen } from '../nav/navActions';
+import { navigateToMessageReactionScreen, navigateToEditHistory } from '../nav/navActions';
 import { pmUiRecipientsFromMessage, streamNameOfStreamMessage } from '../utils/recipient';
 import { deleteMessagesForTopic } from '../topics/topicActions';
 import * as logging from '../utils/logging';
@@ -44,6 +44,7 @@ type ButtonDescription = {
     ownUser: User,
     message: Message | Outbox,
     subscriptions: Subscription[],
+    backgroundData: BackgroundData,
     dispatch: Dispatch,
     _: GetText,
     startEditMessage: (editMessage: EditMessage) => void,
@@ -204,6 +205,12 @@ const showReactions = ({ message, dispatch }) => {
 showReactions.title = 'See who reacted';
 showReactions.errorMessage = 'Failed to show reactions';
 
+const editHistory = ({ message, dispatch }) => {
+  NavigationService.dispatch(navigateToEditHistory(message.id));
+};
+editHistory.title = 'Show edit history';
+editHistory.errorMessage = 'Failed to show edit history';
+
 const cancel = params => {};
 cancel.title = 'Cancel';
 cancel.errorMessage = 'Failed to hide menu';
@@ -219,6 +226,7 @@ const allButtonsRaw = {
   starMessage,
   unstarMessage,
   showReactions,
+  editHistory,
 
   // For headers
   unmuteTopic,
@@ -321,6 +329,11 @@ export const constructMessageActionButtons = ({
   } else {
     buttons.push('starMessage');
   }
+
+  if (message.last_edit_timestamp !== undefined) {
+    buttons.push('editHistory');
+  }
+
   buttons.push('cancel');
   return buttons;
 };

src/nav/AppNavigator.js

@@ -44,6 +44,7 @@ import EmojiPickerScreen from '../emoji/EmojiPickerScreen';
 import LegalScreen from '../settings/LegalScreen';
 import UserStatusScreen from '../user-status/UserStatusScreen';
 import SharingScreen from '../sharing/SharingScreen';
+import EditHistory from '../message/EditHistory';
 
 export default createStackNavigator(
   // $FlowFixMe react-navigation types :-/ -- see a36814e80
@@ -65,6 +66,7 @@ export default createStackNavigator(
       },
     },
     'message-reactions': { screen: MessageReactionList },
+    'edit-history': { screen: EditHistory },
     password: { screen: PasswordAuthScreen },
     realm: { screen: RealmScreen },
     search: { screen: SearchMessagesScreen },

src/nav/navActions.js

@@ -117,6 +117,9 @@ export const navigateToMessageReactionScreen = (
 ): NavigationAction =>
   StackActions.push({ routeName: 'message-reactions', params: { messageId, reactionName } });
 
+export const navigateToEditHistory = (messageId: number): NavigationAction =>
+  StackActions.push({ routeName: 'edit-history', params: { messageId } });
+
 export const navigateToLegal = (): NavigationAction => StackActions.push({ routeName: 'legal' });
 
 export const navigateToUserStatus = (): NavigationAction =>

static/translations/messages_en.json

@@ -139,6 +139,9 @@
   "Share": "Share",
   "Star message": "Star message",
   "Unstar message": "Unstar message",
+  "Show edit history": "Show edit history",
+  "Failed to show edit history": "Failed to show edit history",
+  "An error occurred while loading edit history": "An error occurred while loading edit history",
   "Cancel": "Cancel",
   "Message copied": "Message copied",
   "Edit message": "Edit message",
@@ -188,6 +191,7 @@
   "Please download the image from your browser": "Please download the image from your browser",
   "Can not download": "Can not download",
   "Download file": "Download file",
+  "Edit History": "Edit History",
   "Update": "Update",
   "Save": "Save",
   "Pinned": "Pinned",