Skip to content

Commit d1abf20

Browse files
committed
channel: Finish channel link autocomplete for compose box
Figma design: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=7952-30060&t=YfdW2W1p4ROsq9db-0 Fixes-partly: #124
1 parent 1b7a7b5 commit d1abf20

File tree

4 files changed

+250
-5
lines changed

4 files changed

+250
-5
lines changed

lib/model/compose.dart

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,69 @@ String wildcardMention(WildcardMentionOption wildcardOption, {
185185
String userGroupMention(String userGroupName, {bool silent = false}) =>
186186
'@${silent ? '_' : ''}*$userGroupName*';
187187

188+
// Corresponds to `topic_link_util.escape_invalid_stream_topic_characters`
189+
// in Zulip web:
190+
// https://github.com/zulip/zulip/blob/b42d3e77e/web/src/topic_link_util.ts#L15-L34
191+
const _channelTopicFaultyCharsReplacements = {
192+
'`': '`',
193+
'>': '>',
194+
'*': '*',
195+
'&': '&',
196+
'[': '[',
197+
']': ']',
198+
r'$$': '$$',
199+
};
200+
201+
final _channelTopicFaultyCharsRegex = RegExp(r'[`>*&[\]]|(?:\$\$)');
202+
203+
/// Markdown link for channel, topic, or message when the channel or topic name
204+
/// includes characters that will break normal markdown rendering.
205+
///
206+
/// Refer to [_channelTopicFaultyCharsReplacements] for a complete list of
207+
/// these characters.
208+
// Corresponds to `topic_link_util.get_fallback_markdown_link` in Zulip web;
209+
// https://github.com/zulip/zulip/blob/b42d3e77e/web/src/topic_link_util.ts#L96-L108
210+
String fallbackMarkdownLink({
211+
required PerAccountStore store,
212+
required ZulipStream channel,
213+
TopicName? topic,
214+
int? nearMessageId,
215+
}) {
216+
assert(nearMessageId == null || topic != null);
217+
218+
String replaceFaultyChars(String str) {
219+
return str.replaceAllMapped(_channelTopicFaultyCharsRegex,
220+
(match) => _channelTopicFaultyCharsReplacements[match[0]]!);
221+
}
222+
223+
final text = StringBuffer(replaceFaultyChars(channel.name));
224+
if (topic != null) {
225+
text.write(' > ${replaceFaultyChars(topic.displayName ?? store.realmEmptyTopicDisplayName)}');
226+
}
227+
if (nearMessageId != null) {
228+
text.write(' @ 💬');
229+
}
230+
231+
final narrow = topic == null
232+
? ChannelNarrow(channel.streamId) : TopicNarrow(channel.streamId, topic);
233+
final linkFragment = narrowLinkFragment(store, narrow, nearMessageId: nearMessageId);
234+
235+
return inlineLink(text.toString(), '#$linkFragment');
236+
}
237+
238+
/// A #channel link syntax of a channel, like #**announce**.
239+
///
240+
/// [fallbackMarkdownLink] will be used if the channel name includes some faulty
241+
/// characters that will break normal #**channel** rendering.
242+
String channelLinkSyntax(ZulipStream channel, {
243+
required PerAccountStore store,
244+
}) {
245+
if (_channelTopicFaultyCharsRegex.hasMatch(channel.name)) {
246+
return fallbackMarkdownLink(store: store, channel: channel);
247+
}
248+
return '#**${channel.name}**';
249+
}
250+
188251
/// https://spec.commonmark.org/0.30/#inline-link
189252
///
190253
/// The "link text" is made by enclosing [visibleText] in square brackets.

lib/widgets/autocomplete.dart

Lines changed: 59 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,7 @@ class _AutocompleteFieldState<QueryT extends AutocompleteQuery, ResultT extends
4545
}
4646

4747
void _handleControllerChange() {
48-
var newQuery = widget.autocompleteIntent()?.query;
49-
if (newQuery is ChannelLinkAutocompleteQuery) newQuery = null; // TODO(#124)
48+
final newQuery = widget.autocompleteIntent()?.query;
5049
// First, tear down the old view-model if necessary.
5150
if (_viewModel != null
5251
&& (newQuery == null
@@ -227,8 +226,17 @@ class ComposeAutocomplete extends AutocompleteField<ComposeAutocompleteQuery, Co
227226
// TODO(#1805) language-appropriate space character; check active keyboard?
228227
// (maybe handle centrally in `controller`)
229228
replacementString = '${userGroupMention(userGroup.name, silent: query.silent)} ';
230-
case ChannelLinkAutocompleteResult():
231-
throw UnimplementedError(); // TODO(#124)
229+
case ChannelLinkAutocompleteResult(:final channelId):
230+
if (query is! ChannelLinkAutocompleteQuery) {
231+
return; // Shrug; similar to `intent == null` case above.
232+
}
233+
final channel = store.streams[channelId];
234+
if (channel == null) {
235+
// Don't crash on theoretical race between async results-filtering
236+
// and losing data for the channel.
237+
return;
238+
}
239+
replacementString = '${channelLinkSyntax(channel, store: store)} ';
232240
}
233241

234242
controller.value = intent.textEditingValue.replaced(
@@ -246,7 +254,7 @@ class ComposeAutocomplete extends AutocompleteField<ComposeAutocompleteQuery, Co
246254
final child = switch (option) {
247255
MentionAutocompleteResult() => MentionAutocompleteItem(
248256
option: option, narrow: narrow),
249-
ChannelLinkAutocompleteResult() => throw UnimplementedError(), // TODO(#124)
257+
ChannelLinkAutocompleteResult() => _ChannelLinkAutocompleteItem(option: option),
250258
EmojiAutocompleteResult() => _EmojiAutocompleteItem(option: option),
251259
};
252260
return InkWell(
@@ -361,6 +369,52 @@ class MentionAutocompleteItem extends StatelessWidget {
361369
}
362370
}
363371

372+
class _ChannelLinkAutocompleteItem extends StatelessWidget {
373+
const _ChannelLinkAutocompleteItem({required this.option});
374+
375+
final ChannelLinkAutocompleteResult option;
376+
377+
@override
378+
Widget build(BuildContext context) {
379+
final store = PerAccountStoreWidget.of(context);
380+
final zulipLocalizations = ZulipLocalizations.of(context);
381+
final designVariables = DesignVariables.of(context);
382+
383+
final channel = store.streams[option.channelId];
384+
385+
// A null [Icon.icon] makes a blank space.
386+
IconData? icon;
387+
Color? iconColor;
388+
String label;
389+
if (channel != null) {
390+
icon = iconDataForStream(channel);
391+
iconColor = colorSwatchFor(context, store.subscriptions[channel.streamId])
392+
.iconOnPlainBackground;
393+
label = channel.name;
394+
} else {
395+
icon = null;
396+
iconColor = null;
397+
label = zulipLocalizations.unknownChannelName;
398+
}
399+
400+
final labelWidget = Text(label,
401+
overflow: TextOverflow.ellipsis,
402+
style: TextStyle(
403+
fontSize: 18, height: 20 / 18,
404+
color: designVariables.contextMenuItemLabel,
405+
).merge(weightVariableTextStyle(context, wght: 600)));
406+
407+
return Padding(
408+
padding: EdgeInsetsDirectional.fromSTEB(12, 4, 10, 4),
409+
child: Row(spacing: 10, children: [
410+
SizedBox.square(dimension: 24,
411+
child: Icon(size: 18, color: iconColor, icon)),
412+
// TODO(#1945): show channel description
413+
Expanded(child: labelWidget),
414+
]));
415+
}
416+
}
417+
364418
class _EmojiAutocompleteItem extends StatelessWidget {
365419
const _EmojiAutocompleteItem({required this.option});
366420

test/model/compose_test.dart

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'package:checks/checks.dart';
22
import 'package:test/scaffolding.dart';
33
import 'package:zulip/api/model/events.dart';
4+
import 'package:zulip/api/model/model.dart';
45
import 'package:zulip/model/compose.dart';
56
import 'package:zulip/model/localizations.dart';
67
import 'package:zulip/model/store.dart';
@@ -334,6 +335,80 @@ hello
334335
});
335336
});
336337

338+
test('fallbackMarkdownLink', () async {
339+
final store = eg.store();
340+
final channels = [
341+
eg.stream(streamId: 1, name: '`code`'),
342+
eg.stream(streamId: 2, name: 'score > 90'),
343+
eg.stream(streamId: 3, name: 'A*'),
344+
eg.stream(streamId: 4, name: 'R&D'),
345+
eg.stream(streamId: 5, name: 'UI [v2]'),
346+
eg.stream(streamId: 6, name: r'Save $$'),
347+
];
348+
await store.addStreams(channels);
349+
350+
check(fallbackMarkdownLink(store: store,
351+
channel: channels[1 - 1]))
352+
.equals('[&#96;code&#96;](#narrow/channel/1-.60code.60)');
353+
check(fallbackMarkdownLink(store: store,
354+
channel: channels[2 - 1], topic: TopicName('topic')))
355+
.equals('[score &gt; 90 > topic](#narrow/channel/2-score-.3E-90/topic/topic)');
356+
check(fallbackMarkdownLink(store: store,
357+
channel: channels[3 - 1], topic: TopicName('R&D')))
358+
.equals('[A&#42; > R&amp;D](#narrow/channel/3-A*/topic/R.26D)');
359+
check(fallbackMarkdownLink(store: store,
360+
channel: channels[4 - 1], topic: TopicName('topic'), nearMessageId: 10))
361+
.equals('[R&amp;D > topic @ 💬](#narrow/channel/4-R.26D/topic/topic/near/10)');
362+
check(fallbackMarkdownLink(store: store,
363+
channel: channels[5 - 1], topic: TopicName(r'Save $$'), nearMessageId: 10))
364+
.equals('[UI &#91;v2&#93; > Save &#36;&#36; @ 💬](#narrow/channel/5-UI-.5Bv2.5D/topic/Save.20.24.24/near/10)');
365+
check(() => fallbackMarkdownLink(store: store,
366+
channel: channels[6 - 1], nearMessageId: 10))
367+
.throws<AssertionError>();
368+
});
369+
370+
group('channel link syntax', () {
371+
test('channels with normal names', () async {
372+
final store = eg.store();
373+
final channels = [
374+
eg.stream(name: 'mobile'),
375+
eg.stream(name: 'dev-ops'),
376+
eg.stream(name: 'ui/ux'),
377+
eg.stream(name: 'api_v3'),
378+
eg.stream(name: 'build+test'),
379+
eg.stream(name: 'init()'),
380+
];
381+
await store.addStreams(channels);
382+
383+
check(channelLinkSyntax(channels[0], store: store)).equals('#**mobile**');
384+
check(channelLinkSyntax(channels[1], store: store)).equals('#**dev-ops**');
385+
check(channelLinkSyntax(channels[2], store: store)).equals('#**ui/ux**');
386+
check(channelLinkSyntax(channels[3], store: store)).equals('#**api_v3**');
387+
check(channelLinkSyntax(channels[4], store: store)).equals('#**build+test**');
388+
check(channelLinkSyntax(channels[5], store: store)).equals('#**init()**');
389+
});
390+
391+
test('channels with names containing faulty characters', () async {
392+
final store = eg.store();
393+
final channels = [
394+
eg.stream(streamId: 1, name: '`code`'),
395+
eg.stream(streamId: 2, name: 'score > 90'),
396+
eg.stream(streamId: 3, name: 'A*'),
397+
eg.stream(streamId: 4, name: 'R&D'),
398+
eg.stream(streamId: 5, name: 'UI [v2]'),
399+
eg.stream(streamId: 6, name: r'Save $$'),
400+
];
401+
await store.addStreams(channels);
402+
403+
check(channelLinkSyntax(channels[1 - 1], store: store)).equals('[&#96;code&#96;](#narrow/channel/1-.60code.60)');
404+
check(channelLinkSyntax(channels[2 - 1], store: store)).equals('[score &gt; 90](#narrow/channel/2-score-.3E-90)');
405+
check(channelLinkSyntax(channels[3 - 1], store: store)).equals('[A&#42;](#narrow/channel/3-A*)');
406+
check(channelLinkSyntax(channels[4 - 1], store: store)).equals('[R&amp;D](#narrow/channel/4-R.26D)');
407+
check(channelLinkSyntax(channels[5 - 1], store: store)).equals('[UI &#91;v2&#93;](#narrow/channel/5-UI-.5Bv2.5D)');
408+
check(channelLinkSyntax(channels[6 - 1], store: store)).equals('[Save &#36;&#36;](#narrow/channel/6-Save-.24.24)');
409+
});
410+
});
411+
337412
test('inlineLink', () {
338413
check(inlineLink('CZO', 'https://chat.zulip.org/')).equals('[CZO](https://chat.zulip.org/)');
339414
check(inlineLink('Uploading file.txt…', '')).equals('[Uploading file.txt…]()');

test/widgets/autocomplete_test.dart

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import 'package:zulip/model/store.dart';
1616
import 'package:zulip/model/typing_status.dart';
1717
import 'package:zulip/widgets/autocomplete.dart';
1818
import 'package:zulip/widgets/compose_box.dart';
19+
import 'package:zulip/widgets/icons.dart';
1920
import 'package:zulip/widgets/message_list.dart';
2021
import 'package:zulip/widgets/user.dart';
2122

@@ -354,6 +355,58 @@ void main() {
354355
});
355356
});
356357

358+
group('#channel link', () {
359+
void checkChannelShown(ZulipStream channel, {required bool expected}) {
360+
check(find.byIcon(iconDataForStream(channel))).findsAtLeast(expected ? 1 : 0);
361+
check(find.text(channel.name)).findsExactly(expected ? 1 : 0);
362+
}
363+
364+
testWidgets('user options appear, disappear, and change correctly', (tester) async {
365+
final channel1 = eg.stream(name: 'mobile');
366+
final channel2 = eg.stream(name: 'mobile design');
367+
final channel3 = eg.stream(name: 'mobile dev help');
368+
final composeInputFinder = await setupToComposeInput(tester,
369+
channels: [channel1, channel2, channel3]);
370+
final store = await testBinding.globalStore.perAccount(eg.selfAccount.id);
371+
372+
// Options are filtered correctly for query.
373+
// TODO(#226): Remove this extra edit when this bug is fixed.
374+
await tester.enterText(composeInputFinder, 'check #mobile ');
375+
await tester.enterText(composeInputFinder, 'check #mobile de');
376+
await tester.pumpAndSettle(); // async computation; options appear
377+
378+
checkChannelShown(channel1, expected: false);
379+
checkChannelShown(channel2, expected: true);
380+
checkChannelShown(channel3, expected: true);
381+
382+
// Finishing autocomplete updates compose box; causes options to disappear.
383+
await tester.tap(find.text('mobile design'));
384+
await tester.pump();
385+
check(tester.widget<TextField>(composeInputFinder).controller!.text)
386+
.contains(channelLinkSyntax(channel2, store: store));
387+
checkChannelShown(channel1, expected: false);
388+
checkChannelShown(channel2, expected: false);
389+
checkChannelShown(channel3, expected: false);
390+
391+
// Then a new autocomplete intent brings up options again.
392+
// TODO(#226): Remove this extra edit when this bug is fixed.
393+
await tester.enterText(composeInputFinder, 'check #mobile de');
394+
await tester.enterText(composeInputFinder, 'check #mobile dev');
395+
await tester.pumpAndSettle(); // async computation; options appear
396+
checkChannelShown(channel3, expected: true);
397+
398+
// Removing autocomplete intent causes options to disappear.
399+
// TODO(#226): Remove one of these edits when this bug is fixed.
400+
await tester.enterText(composeInputFinder, 'check ');
401+
await tester.enterText(composeInputFinder, 'check');
402+
checkChannelShown(channel1, expected: false);
403+
checkChannelShown(channel2, expected: false);
404+
checkChannelShown(channel3, expected: false);
405+
406+
debugNetworkImageHttpClientProvider = null;
407+
});
408+
});
409+
357410
group('emoji', () {
358411
void checkEmojiShown(ExpectedEmoji option, {required bool expected}) {
359412
final (label, display) = option;

0 commit comments

Comments
 (0)