topic edit modal: Add new edit-topic UI.

Fixes: zulip#5365

Author: Leslie Ngo

src/ZulipMobile.js

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

src/action-sheets/index.js

@@ -79,6 +79,7 @@ type TopicArgs = {
   zulipFeatureLevel: number,
   dispatch: Dispatch,
   _: GetText,
+  startEditTopic: (streamId: number, topic: string) => void,
   ...
 };
 
@@ -171,6 +172,14 @@ const deleteMessage = {
   },
 };
 
+const editTopic = {
+  title: 'Edit topic',
+  errorMessage: 'Failed to edit topic',
+  action: ({ streamId, topic, startEditTopic }) => {
+    startEditTopic(streamId, topic);
+  },
+};
+
 const markTopicAsRead = {
   title: 'Mark topic as read',
   errorMessage: 'Failed to mark topic as read',
@@ -532,9 +541,18 @@ export const constructTopicActionButtons = (args: {|
 
   const buttons = [];
   const unreadCount = getUnreadCountForTopic(unread, streamId, topic);
+  const isAdmin = roleIsAtLeast(ownUserRole, Role.Admin);
   if (unreadCount > 0) {
     buttons.push(markTopicAsRead);
   }
+  // At present, the permissions for editing the topic of a message are highly complex.
+  // Until we move to a better set of policy options, we'll only display the edit topic
+  // button to admins.
+  // Issue: https://github.com/zulip/zulip/issues/21739
+  // Relevant comment: https://github.com/zulip/zulip-mobile/issues/5365#issuecomment-1197093294
+  if (isAdmin) {
+    buttons.push(editTopic);
+  }
   if (isTopicMuted(streamId, topic, mute)) {
     buttons.push(unmuteTopic);
   } else {
@@ -545,7 +563,7 @@ export const constructTopicActionButtons = (args: {|
   } else {
     buttons.push(unresolveTopic);
   }
-  if (roleIsAtLeast(ownUserRole, Role.Admin)) {
+  if (isAdmin) {
     buttons.push(deleteTopic);
   }
   const sub = subscriptions.get(streamId);
@@ -705,6 +723,7 @@ export const showTopicActionSheet = (args: {|
   showActionSheetWithOptions: ShowActionSheetWithOptions,
   callbacks: {|
     dispatch: Dispatch,
+    startEditTopic: (streamId: number, topic: string) => void,
     _: GetText,
   |},
   backgroundData: $ReadOnly<{

src/boot/TopicEditModalProvider.js

@@ -0,0 +1,57 @@
+/* @flow strict-local */
+import React, { createContext, useState, useCallback, useContext } from 'react';
+import type { Context, Node } from 'react';
+
+import TopicEditModal from '../topics/TopicEditModal';
+
+type Props = $ReadOnly<{|
+  children: Node,
+|}>;
+
+type TopicEditModalProviderState = {
+  streamId: number,
+  oldTopic: string,
+} | null;
+
+type StartEditTopicContext = (streamId: number, oldTopic: string) => void;
+
+const TopicEditModalContext: Context<StartEditTopicContext> = createContext(() => {
+  throw new Error(
+    'Tried to open the edit-topic UI from a component without TopicEditModalProvider above it in the tree.',
+  );
+});
+
+export const useStartEditTopic = (): StartEditTopicContext => useContext(TopicEditModalContext);
+
+export default function TopicEditModalProvider(props: Props): Node {
+  const { children } = props;
+
+  const [topicModalProviderState, setTopicModalProviderState] =
+    useState<TopicEditModalProviderState>(null);
+
+  const startEditTopic = useCallback(
+    (streamIdArg, oldTopicArg) => {
+      if (!topicModalProviderState) {
+        setTopicModalProviderState({
+          streamId: streamIdArg,
+          oldTopic: oldTopicArg,
+        });
+      }
+    },
+    [topicModalProviderState],
+  );
+
+  const closeEditTopicModal = () => {
+    setTopicModalProviderState(null);
+  };
+
+  return (
+    <TopicEditModalContext.Provider value={startEditTopic}>
+      <TopicEditModal
+        topicModalProviderState={topicModalProviderState}
+        closeEditTopicModal={closeEditTopicModal}
+      />
+      {children}
+    </TopicEditModalContext.Provider>
+  );
+}

src/chat/ChatScreen.js

@@ -29,6 +29,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'>,
@@ -132,6 +133,7 @@ export default function ChatScreen(props: Props): Node {
     (value: EditMessage | null) => navigation.setParams({ editMessage: value }),
     [navigation],
   );
+  const startEditTopic = useStartEditTopic();
 
   const isNarrowValid = useSelector(state => getIsNarrowValid(state, narrow));
   const draft = useSelector(state => getDraftForNarrow(state, narrow));
@@ -219,6 +221,7 @@ export default function ChatScreen(props: Props): Node {
               }
               showMessagePlaceholders={showMessagePlaceholders}
               startEditMessage={setEditMessage}
+              startEditTopic={startEditTopic}
             />
           );
         }

src/common/ZulipTextButton.js

@@ -78,13 +78,13 @@ type Props = $ReadOnly<{|
 
   /**
    * True just if the button is in the disabled state.
-   *   https://material.io/design/interaction/states.html#disabled
+   *
+   * https://material.io/design/interaction/states.html#disabled
    */
   disabled?: boolean,
 
   /**
-   * Whether `onPress` is used even when
-   *   `disabled` is true.
+   * Whether `onPress` is used even when `disabled` is true.
    */
   isPressHandledWhenDisabled?: boolean,
 

src/search/SearchMessagesCard.js

@@ -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: {
@@ -24,6 +25,7 @@ type Props = $ReadOnly<{|
 
 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
@@ -55,6 +57,7 @@ export default function SearchMessagesCard(props: Props): Node {
         // 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,
@@ -51,6 +52,7 @@ export default function TitleStream(props: Props): Node {
   const { narrow, color } = props;
   const dispatch = useDispatch();
   const stream = useSelector(state => getStreamInNarrow(state, narrow));
+  const startEditTopic = useStartEditTopic();
   const backgroundData = useSelector(state => ({
     auth: getAuth(state),
     mute: getMute(state),
@@ -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),