topic edit modal: Add new edit-topic UI.

Fixes: #5365

Author: Leslie Ngo

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) => void,
   ...
 };
 
@@ -169,6 +170,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',
@@ -502,9 +511,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 {
@@ -515,7 +533,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 +684,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,62 @@
+/* @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 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({
+    visible: false,
+    streamId: -1,
+    oldTopic: '',
+  });
+
+  const { visible } = topicModalProviderState;
+
+  const startEditTopic = useCallback(
+    (streamId: number, oldTopic: string) => {
+      if (visible) {
+        return;
+      }
+      setTopicModalProviderState({
+        visible: true,
+        streamId,
+        oldTopic,
+      });
+    },
+    [visible],
+  );
+
+  const closeEditTopicModal = useCallback(() => {
+    setTopicModalProviderState({
+      visible: false,
+      streamId: -1,
+      oldTopic: '',
+    });
+  }, []);
+
+  return (
+    <TopicEditModalContext.Provider value={startEditTopic}>
+      <TopicEditModal
+        topicModalProviderState={topicModalProviderState}
+        closeEditTopicModal={closeEditTopicModal}
+      />
+      {children}
+    </TopicEditModalContext.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'>,
@@ -133,6 +134,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));
@@ -221,6 +223,7 @@ export default function ChatScreen(props: Props): Node {
               }
               showMessagePlaceholders={showMessagePlaceholders}
               startEditMessage={setEditMessage}
+              startEditTopic={startEditTopic}
             />
           );
         }

src/common/ZulipTextButton.js

@@ -86,7 +86,7 @@ type Props = $ReadOnly<{|
   /**
    * isPressHandledWhenDisabled - Whether `onPress` is used even when
    *   `disabled` is true.
-  */
+   */
   isPressHandledWhenDisabled?: boolean,
 
   onPress: () => void | Promise<void>,
@@ -111,9 +111,20 @@ type Props = $ReadOnly<{|
 // things like project-specific styles and making any sensible adjustments
 // to the interface.
 export default function ZulipTextButton(props: Props): Node {
-  const { variant = 'standard', leftMargin, rightMargin, label, onPress, disabled = false, isPressHandledWhenDisabled = false } = props;
-
-  const variantStyles = useMemo(() => styleSheetForVariant(variant, disabled === true), [variant, disabled]);
+  const {
+    variant = 'standard',
+    leftMargin,
+    rightMargin,
+    label,
+    onPress,
+    disabled = false,
+    isPressHandledWhenDisabled = false,
+  } = props;
+
+  const variantStyles = useMemo(
+    () => styleSheetForVariant(variant, disabled === true),
+    [variant, disabled],
+  );
 
   return (
     <Touchable

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),