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,87 @@
+/* @flow strict-local */
+
+import React from 'react';
+import { View, Platform } from 'react-native';
+import { WebView } from 'react-native-webview';
+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, getAllUsersById } from '../selectors';
+import { Screen } from '../common';
+import * as api from '../api';
+import editHistoryHtml from '../webview/html/editHistoryHtml';
+
+type SelectorProps = {|
+  auth: Auth,
+  usersById: Map<number, UserOrBot>,
+|};
+
+type Props = $ReadOnly<{|
+  navigation: NavigationScreenProp<{ params: {| messageId: number, theme: ThemeName |} }>,
+
+  dispatch: Dispatch,
+  ...SelectorProps,
+|}>;
+
+type State = $ReadOnly<{|
+  messageHistory: MessageSnapshot[] | null,
+|}>;
+
+class EditHistory extends React.Component<Props, State> {
+  state = {
+    messageHistory: null,
+  };
+
+  async componentDidMount() {
+    const { auth, navigation } = this.props;
+
+    this.setState({
+      messageHistory: (await api.getMessageHistory(auth, navigation.state.params.messageId))
+        .message_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 } = this.props;
+    const theme = this.props.navigation.state.params.theme;
+
+    // For the logic behind these, see comments in MessageList component's render method.
+    const assetsPath = Platform.OS === 'ios' ? './webview' : 'file:///android_asset/webview';
+    const baseUrl = `${assetsPath}/editHistory.html`;
+
+    const html: string = editHistoryHtml(messageHistory, theme, usersById, auth);
+
+    return (
+      <Screen title="Edit History">
+        <WebView
+          source={{ baseUrl, html }}
+          originWhitelist={['file://']}
+          style={{ backgroundColor: 'transparent' }}
+          onShouldStartLoadWithRequest={(_: string) => false} // Don't load any webview requests.
+          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),
+}))(EditHistory);

src/message/messageActionSheet.js

@@ -22,7 +22,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 } from '../utils/recipient';
 import { deleteMessagesForTopic } from '../topics/topicActions';
 import * as logging from '../utils/logging';
@@ -41,6 +41,7 @@ type ButtonDescription = {
     ownEmail: string,
     message: Message | Outbox,
     subscriptions: Subscription[],
+    backgroundData: BackgroundData,
     dispatch: Dispatch,
     _: GetText,
     startEditMessage: (editMessage: EditMessage) => void,
@@ -200,6 +201,12 @@ const showReactions = ({ message, dispatch }) => {
 showReactions.title = 'See who reacted';
 showReactions.errorMessage = 'Failed to show reactions';
 
+const editHistory = ({ message, dispatch, backgroundData }) => {
+  dispatch(navigateToEditHistory(message.id, backgroundData.theme));
+};
+editHistory.title = 'Show edit history';
+editHistory.errorMessage = 'Failed to show edit history';
+
 const cancel = params => {};
 cancel.title = 'Cancel';
 cancel.errorMessage = 'Failed to hide menu';
@@ -215,6 +222,7 @@ const allButtonsRaw = {
   starMessage,
   unstarMessage,
   showReactions,
+  editHistory,
 
   // For headers
   unmuteTopic,
@@ -316,6 +324,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

@@ -31,6 +31,7 @@ import TopicListScreen from '../topics/TopicListScreen';
 import EmojiPickerScreen from '../emoji/EmojiPickerScreen';
 import LegalScreen from '../settings/LegalScreen';
 import UserStatusScreen from '../user-status/UserStatusScreen';
+import EditHistory from '../message/EditHistory';
 
 export default createStackNavigator(
   // $FlowFixMe react-navigation types :-/ -- see a36814e80
@@ -45,6 +46,7 @@ export default createStackNavigator(
     loading: { screen: LoadingScreen },
     main: { screen: MainScreenWithTabs },
     'message-reactions': { screen: MessageReactionList },
+    'edit-history': { screen: EditHistory },
     password: { screen: PasswordAuthScreen },
     realm: { screen: RealmScreen },
     search: { screen: SearchMessagesScreen },

src/nav/navActions.js

@@ -9,6 +9,7 @@ import type {
   Narrow,
   UserOrBot,
   ApiResponseServerSettings,
+  ThemeName,
 } from '../types';
 import { getSameRoutesCount } from '../selectors';
 
@@ -99,6 +100,9 @@ export const navigateToMessageReactionScreen = (
 ): NavigationAction =>
   StackActions.push({ routeName: 'message-reactions', params: { messageId, reactionName } });
 
+export const navigateToEditHistory = (messageId: number, theme: ThemeName): NavigationAction =>
+  StackActions.push({ routeName: 'edit-history', params: { messageId, theme } });
+
 export const navigateToLegal = (): NavigationAction => StackActions.push({ routeName: 'legal' });
 
 export const navigateToUserStatus = (): NavigationAction =>

static/translations/messages_en.json

@@ -139,6 +139,8 @@
   "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",
   "Cancel": "Cancel",
   "Message copied": "Message copied",
   "Edit message": "Edit message",
@@ -187,6 +189,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",