Topic edit modal

src/ZulipMobile.js

@@ -16,6 +16,7 @@ import CompatibilityChecker from './boot/CompatibilityChecker';
 import AppEventHandlers from './boot/AppEventHandlers';
 import { initializeSentry } from './sentry';
 import ZulipSafeAreaProvider from './boot/ZulipSafeAreaProvider';
+import TopicEditModalProvider from './boot/TopicEditModalProvider';
 
 initializeSentry();
 
@@ -55,9 +56,11 @@ export default function ZulipMobile(): Node {
               <AppEventHandlers>
                 <TranslationProvider>
                   <ThemeProvider>
-                    <ActionSheetProvider>
-                      <ZulipNavigationContainer />
-                    </ActionSheetProvider>
+                    <TopicEditModalProvider>
+                      <ActionSheetProvider>
+                        <ZulipNavigationContainer />
+                      </ActionSheetProvider>
+                    </TopicEditModalProvider>
                   </ThemeProvider>
                 </TranslationProvider>
               </AppEventHandlers>

src/action-sheets/index.js

@@ -77,6 +77,7 @@ type TopicArgs = {
   zulipFeatureLevel: number,
   dispatch: Dispatch,
   _: GetText,
+  startEditTopic: (streamId: number, topic: string) => Promise<void>,
   ...
 };
 
@@ -251,6 +252,14 @@ const toggleResolveTopic = async ({ auth, streamId, topic, _, streams, zulipFeat
   });
 };
 
+const editTopic = {
+  title: 'Edit topic',
+  errorMessage: 'Failed to resolve topic',
+  action: ({ streamId, topic, startEditTopic }) => {
+    startEditTopic(streamId, topic);
+  },
+};
+
 const resolveTopic = {
   title: 'Resolve topic',
   errorMessage: 'Failed to resolve topic',
@@ -502,9 +511,14 @@ export const constructTopicActionButtons = (args: {|
 
   const buttons = [];
   const unreadCount = getUnreadCountForTopic(unread, streamId, topic);
+  const isAdmin = roleIsAtLeast(ownUserRole, Role.Admin);
   if (unreadCount > 0) {
     buttons.push(markTopicAsRead);
   }
+  // Set back to isAdmin after testing feature
+  if (true) {
+    buttons.push(editTopic);
+  }
   if (isTopicMuted(streamId, topic, mute)) {
     buttons.push(unmuteTopic);
   } else {
@@ -515,7 +529,7 @@ export const constructTopicActionButtons = (args: {|
   } else {
     buttons.push(unresolveTopic);
   }
-  if (roleIsAtLeast(ownUserRole, Role.Admin)) {
+  if (isAdmin) {
     buttons.push(deleteTopic);
   }
   const sub = subscriptions.get(streamId);
@@ -666,6 +680,7 @@ export const showTopicActionSheet = (args: {|
   showActionSheetWithOptions: ShowActionSheetWithOptions,
   callbacks: {|
     dispatch: Dispatch,
+    startEditTopic: (streamId: number, topic: string) => Promise<void>,
     _: GetText,
   |},
   backgroundData: $ReadOnly<{

src/api/index.js

@@ -30,6 +30,7 @@ import deleteMessage from './messages/deleteMessage';
 import deleteTopic from './messages/deleteTopic';
 import getRawMessageContent from './messages/getRawMessageContent';
 import getMessages from './messages/getMessages';
+import getSingleMessage from './messages/getSingleMessage';
 import getMessageHistory from './messages/getMessageHistory';
 import messagesFlags from './messages/messagesFlags';
 import sendMessage from './messages/sendMessage';
@@ -78,6 +79,7 @@ export {
   deleteTopic,
   getRawMessageContent,
   getMessages,
+  getSingleMessage,
   getMessageHistory,
   messagesFlags,
   sendMessage,

src/api/messages/getSingleMessage.js

@@ -0,0 +1,55 @@
+/* @flow strict-local */
+
+import type { Auth, ApiResponseSuccess } from '../transportTypes';
+import type { Message } from '../apiTypes';
+import { transformFetchedMessage, type FetchedMessage } from '../rawModelTypes';
+import { apiGet } from '../apiFetch';
+import { identityOfAuth } from '../../account/accountMisc';
+
+// The actual response from the server.  We convert the message to a proper
+// Message before returning it to application code.
+type ServerApiResponseSingleMessage = {|
+  ...$Exact<ApiResponseSuccess>,
+  -raw_content: string, // deprecated
+
+  // Until we narrow FetchedMessage into its FL 120+ form, FetchedMessage
+  // will be a bit less precise than we could be here. That's because we
+  // only get this field from servers FL 120+.
+  // TODO(server-5.0): Make this field required, and remove FL-120 comment.
+  +message?: FetchedMessage,
+|};
+
+/**
+ * See https://zulip.com/api/get-message
+ *
+ * Gives undefined if the `message` field is missing, which it will be for
+ * FL <120.
+ */
+// TODO(server-5.0): Simplify FL-120 condition in jsdoc and implementation.
+export default async (
+  auth: Auth,
+  args: {|
+    +message_id: number,
+  |},
+
+  // TODO(#4659): Don't get this from callers.
+  zulipFeatureLevel: number,
+
+  // TODO(#4659): Don't get this from callers?
+  allowEditHistory: boolean,
+): Promise<Message | void> => {
+  const { message_id } = args;
+  const response: ServerApiResponseSingleMessage = await apiGet(auth, `messages/${message_id}`, {
+    apply_markdown: true,
+  });
+
+  return (
+    response.message
+    && transformFetchedMessage<Message>(
+      response.message,
+      identityOfAuth(auth),
+      zulipFeatureLevel,
+      allowEditHistory,
+    )
+  );
+};

src/boot/TopicEditModalProvider.js

@@ -0,0 +1,70 @@
+/* @flow strict-local */
+import React, { createContext, useState, useCallback, useContext } from 'react';
+import type { Context, Node } from 'react';
+import { useSelector } from '../react-redux';
+import TopicEditModal from '../topics/TopicEditModal';
+import { getAuth, getZulipFeatureLevel, getStreamsById } from '../selectors';
+import { TranslationContext } from './TranslationProvider';
+
+type Props = $ReadOnly<{|
+  children: Node,
+|}>;
+
+type StartEditTopicContext = (
+  streamId: number,
+  topic: string,
+) => Promise<void>;
+
+// $FlowIssue[incompatible-type]
+const TopicModal: Context<StartEditTopicContext> = createContext(undefined);
+
+export const useStartEditTopic = ():StartEditTopicContext => useContext(TopicModal);
+
+export default function TopicEditModalProvider(props: Props): Node {
+  const { children } = props;
+  const auth = useSelector(getAuth);
+  const zulipFeatureLevel = useSelector(getZulipFeatureLevel);
+  const streamsById = useSelector(getStreamsById);
+  const _ = useContext(TranslationContext);
+
+  const [topicModalProviderState, setTopicModalProviderState] = useState({
+    visible: false,
+    streamId: -1,
+    topic: '',
+  });
+
+  const startEditTopic = useCallback(
+    async (streamId: number, topic: string) => {
+      const { visible } = topicModalProviderState;
+      if (visible) {
+        return;
+      }
+      setTopicModalProviderState({
+        visible: true,
+        streamId,
+        topic,
+      });
+    }, [topicModalProviderState]);
+
+  const closeEditTopicModal = useCallback(() => {
+    setTopicModalProviderState({
+      visible: false,
+      streamId: -1,
+      topic: '',
+    });
+  }, []);
+
+  return (
+    <TopicModal.Provider value={startEditTopic}>
+      <TopicEditModal
+        topicModalProviderState={topicModalProviderState}
+        closeEditTopicModal={closeEditTopicModal}
+        auth={auth}
+        zulipFeatureLevel={zulipFeatureLevel}
+        streamsById={streamsById}
+        _={_}
+      />
+      {children}
+    </TopicModal.Provider>
+  );
+}

src/chat/ChatScreen.js

@@ -30,6 +30,7 @@ import { showErrorAlert } from '../utils/info';
 import { TranslationContext } from '../boot/TranslationProvider';
 import * as api from '../api';
 import { useConditionalEffect } from '../reactUtils';
+import { useStartEditTopic } from '../boot/TopicEditModalProvider';
 
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'chat'>,
@@ -127,6 +128,7 @@ const useMessagesWithFetch = args => {
 export default function ChatScreen(props: Props): Node {
   const { route, navigation } = props;
   const { backgroundColor } = React.useContext(ThemeContext);
+  const startEditTopic = useStartEditTopic();
 
   const { narrow, editMessage } = route.params;
   const setEditMessage = useCallback(
@@ -221,6 +223,7 @@ export default function ChatScreen(props: Props): Node {
               }
               showMessagePlaceholders={showMessagePlaceholders}
               startEditMessage={setEditMessage}
+              startEditTopic={startEditTopic}
             />
           );
         }

src/search/SearchMessagesCard.js

@@ -1,6 +1,6 @@
 /* @flow strict-local */
 
-import React, { PureComponent } from 'react';
+import React from 'react';
 import type { Node } from 'react';
 import { View } from 'react-native';
 
@@ -9,6 +9,7 @@ import { createStyleSheet } from '../styles';
 import LoadingIndicator from '../common/LoadingIndicator';
 import SearchEmptyState from '../common/SearchEmptyState';
 import MessageList from '../webview/MessageList';
+import { useStartEditTopic } from '../boot/TopicEditModalProvider';
 
 const styles = createStyleSheet({
   results: {
@@ -22,42 +23,42 @@ type Props = $ReadOnly<{|
   isFetching: boolean,
 |}>;
 
-export default class SearchMessagesCard extends PureComponent<Props> {
-  render(): Node {
-    const { isFetching, messages } = this.props;
+export default function SearchMessagesCard(props: Props): Node {
+  const { narrow, isFetching, messages } = props;
+  const startEditTopic = useStartEditTopic();
 
-    if (isFetching) {
-      // Display loading indicator only if there are no messages to
-      // display from a previous search.
-      if (!messages || messages.length === 0) {
-        return <LoadingIndicator size={40} />;
-      }
-    }
-
-    if (!messages) {
-      return null;
+  if (isFetching) {
+    // Display loading indicator only if there are no messages to
+    // display from a previous search.
+    if (!messages || messages.length === 0) {
+      return <LoadingIndicator size={40} />;
     }
+  }
 
-    if (messages.length === 0) {
-      return <SearchEmptyState text="No results" />;
-    }
+  if (!messages) {
+    return null;
+  }
 
-    return (
-      <View style={styles.results}>
-        <MessageList
-          initialScrollMessageId={
-            // This access is OK only because of the `.length === 0` check
-            // above.
-            messages[messages.length - 1].id
-          }
-          messages={messages}
-          narrow={this.props.narrow}
-          showMessagePlaceholders={false}
-          // TODO: handle editing a message from the search results,
-          // or make this prop optional
-          startEditMessage={() => undefined}
-        />
-      </View>
-    );
+  if (messages.length === 0) {
+    return <SearchEmptyState text="No results" />;
   }
+
+  return (
+    <View style={styles.results}>
+      <MessageList
+        initialScrollMessageId={
+          // This access is OK only because of the `.length === 0` check
+          // above.
+          messages[messages.length - 1].id
+        }
+        messages={messages}
+        narrow={narrow}
+        showMessagePlaceholders={false}
+        // TODO: handle editing a message from the search results,
+        // or make this prop optional
+        startEditMessage={() => undefined}
+        startEditTopic={startEditTopic}
+      />
+    </View>
+  );
 }

src/streams/TopicItem.js

@@ -25,6 +25,7 @@ import {
 import { getMute } from '../mute/muteModel';
 import { getUnread } from '../unread/unreadModel';
 import { getOwnUserRole } from '../permissionSelectors';
+import { useStartEditTopic } from '../boot/TopicEditModalProvider';
 
 const componentStyles = createStyleSheet({
   selectedRow: {
@@ -70,6 +71,7 @@ export default function TopicItem(props: Props): Node {
     useActionSheet().showActionSheetWithOptions;
   const _ = useContext(TranslationContext);
   const dispatch = useDispatch();
+  const startEditTopic = useStartEditTopic();
   const backgroundData = useSelector(state => ({
     auth: getAuth(state),
     mute: getMute(state),
@@ -88,7 +90,7 @@ export default function TopicItem(props: Props): Node {
       onLongPress={() => {
         showTopicActionSheet({
           showActionSheetWithOptions,
-          callbacks: { dispatch, _ },
+          callbacks: { dispatch, startEditTopic, _ },
           backgroundData,
           streamId,
           topic: name,

src/title/TitleStream.js

@@ -27,6 +27,7 @@ import { showStreamActionSheet, showTopicActionSheet } from '../action-sheets';
 import type { ShowActionSheetWithOptions } from '../action-sheets';
 import { getUnread } from '../unread/unreadModel';
 import { getOwnUserRole } from '../permissionSelectors';
+import { useStartEditTopic } from '../boot/TopicEditModalProvider';
 
 type Props = $ReadOnly<{|
   narrow: Narrow,
@@ -67,6 +68,7 @@ export default function TitleStream(props: Props): Node {
   const showActionSheetWithOptions: ShowActionSheetWithOptions =
     useActionSheet().showActionSheetWithOptions;
   const _ = useContext(TranslationContext);
+  const startEditTopic = useStartEditTopic();
 
   return (
     <TouchableWithoutFeedback
@@ -75,7 +77,7 @@ export default function TitleStream(props: Props): Node {
           ? () => {
               showTopicActionSheet({
                 showActionSheetWithOptions,
-                callbacks: { dispatch, _ },
+                callbacks: { dispatch, startEditTopic, _ },
                 backgroundData,
                 streamId: stream.stream_id,
                 topic: topicOfNarrow(narrow),