topic edit modal: Add a new edit-topic UI

Fixes: zulip#5365

Author: Leslie Ngo

src/ZulipMobile.js

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

src/action-sheets/index.js

@@ -77,12 +77,7 @@ type TopicArgs = {
   zulipFeatureLevel: number,
   dispatch: Dispatch,
   _: GetText,
-  startEditTopic: (
-    streamId: number,
-    topic: string,
-    streamsById: Map<number, Stream>,
-    _: GetText,
-  ) => Promise<void>,
+  startEditTopic: (streamId: number, topic: string) => Promise<void>,
   ...
 };
 
@@ -260,8 +255,8 @@ const toggleResolveTopic = async ({ auth, streamId, topic, _, streams, zulipFeat
 const editTopic = {
   title: 'Edit topic',
   errorMessage: 'Failed to resolve topic',
-  action: ({ streamId, topic, streams, _, startEditTopic }) => {
-    startEditTopic(streamId, topic, streams, _);
+  action: ({ streamId, topic, startEditTopic }) => {
+    startEditTopic(streamId, topic);
   },
 };
 
@@ -516,10 +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);
   }
-  buttons.push(editTopic);
+  // Set back to isAdmin after testing feature
+  if (true) {
+    buttons.push(editTopic);
+  }
   if (isTopicMuted(streamId, topic, mute)) {
     buttons.push(unmuteTopic);
   } else {
@@ -530,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);
@@ -681,12 +680,7 @@ export const showTopicActionSheet = (args: {|
   showActionSheetWithOptions: ShowActionSheetWithOptions,
   callbacks: {|
     dispatch: Dispatch,
-    startEditTopic: (
-      streamId: number,
-      topic: string,
-      streamsById: Map<number, Stream>,
-      _: GetText,
-    ) => Promise<void>,
+    startEditTopic: (streamId: number, topic: string) => Promise<void>,
     _: GetText,
   |},
   backgroundData: $ReadOnly<{

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/boot/TopicModalProvider.js

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

src/chat/ChatScreen.js

@@ -9,7 +9,7 @@ import { createStyleSheet } from '../styles';
 import LoadingIndicator from '../common/LoadingIndicator';
 import SearchEmptyState from '../common/SearchEmptyState';
 import MessageList from '../webview/MessageList';
-import { useTopicModalHandler } from '../boot/TopicModalProvider';
+import { useStartEditTopic } from '../boot/TopicEditModalProvider';
 
 const styles = createStyleSheet({
   results: {
@@ -25,7 +25,7 @@ type Props = $ReadOnly<{|
 
 export default function SearchMessagesCard(props: Props): Node {
   const { narrow, isFetching, messages } = props;
-  const { startEditTopic } = useTopicModalHandler();
+  const startEditTopic = useStartEditTopic();
 
   if (isFetching) {
     // Display loading indicator only if there are no messages to

src/search/SearchMessagesCard.js

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

src/streams/TopicItem.js

@@ -27,7 +27,7 @@ import { showStreamActionSheet, showTopicActionSheet } from '../action-sheets';
 import type { ShowActionSheetWithOptions } from '../action-sheets';
 import { getUnread } from '../unread/unreadModel';
 import { getOwnUserRole } from '../permissionSelectors';
-import { useTopicModalHandler } from '../boot/TopicModalProvider';
+import { useStartEditTopic } from '../boot/TopicEditModalProvider';
 
 type Props = $ReadOnly<{|
   narrow: Narrow,
@@ -68,7 +68,7 @@ export default function TitleStream(props: Props): Node {
   const showActionSheetWithOptions: ShowActionSheetWithOptions =
     useActionSheet().showActionSheetWithOptions;
   const _ = useContext(TranslationContext);
-  const { startEditTopic } = useTopicModalHandler();
+  const startEditTopic = useStartEditTopic();
 
   return (
     <TouchableWithoutFeedback