Adding autocomplete functionality to inline comment view, pull request review and conversation view comments

StanleyGoldman · StanleyGoldman · commit 25fbc2fe479d · 2019-04-08T17:28:49.000-04:00
diff --git a/src/GitHub.App/SampleData/CommentViewModelDesigner.cs b/src/GitHub.App/SampleData/CommentViewModelDesigner.cs
@@ -3,6 +3,7 @@
 using System.Reactive;
 using System.Threading.Tasks;
 using GitHub.Models;
+using GitHub.Services;
 using GitHub.ViewModels;
 using ReactiveUI;
 
@@ -37,6 +38,7 @@ public CommentViewModelDesigner()
         public ReactiveCommand<Unit, Unit> CommitEdit { get; }
         public ReactiveCommand<Unit, Unit> OpenOnGitHub { get; } = ReactiveCommand.Create(() => { });
         public ReactiveCommand<Unit, Unit> Delete { get; }
+        public IAutoCompleteAdvisor AutoCompleteAdvisor { get; }
 
         public Task InitializeAsync(ICommentThreadViewModel thread, ActorModel currentUser, CommentModel comment, CommentEditState state)
         {
diff --git a/src/GitHub.App/SampleData/PullRequestReviewAuthoringViewModelDesigner.cs b/src/GitHub.App/SampleData/PullRequestReviewAuthoringViewModelDesigner.cs
@@ -3,6 +3,7 @@
 using System.Reactive;
 using System.Threading.Tasks;
 using GitHub.Models;
+using GitHub.Services;
 using GitHub.ViewModels.GitHubPane;
 using ReactiveUI;
 
@@ -53,6 +54,7 @@ public PullRequestReviewAuthoringViewModelDesigner()
         public ReactiveCommand<Unit, Unit> Comment { get; }
         public ReactiveCommand<Unit, Unit> RequestChanges { get; }
         public ReactiveCommand<Unit, Unit> Cancel { get; }
+        public IAutoCompleteAdvisor AutoCompleteAdvisor { get; }
 
         public Task InitializeAsync(
             LocalRepositoryModel localRepository,
diff --git a/src/GitHub.App/ViewModels/CommentViewModel.cs b/src/GitHub.App/ViewModels/CommentViewModel.cs
@@ -41,11 +41,14 @@ public class CommentViewModel : ViewModelBase, ICommentViewModel
         /// Initializes a new instance of the <see cref="CommentViewModel"/> class.
         /// </summary>
         /// <param name="commentService">The comment service.</param>
+        /// <param name="autoCompleteAdvisor">The auto complete advisor.</param>
         [ImportingConstructor]
-        public CommentViewModel(ICommentService commentService)
+        public CommentViewModel(ICommentService commentService, IAutoCompleteAdvisor autoCompleteAdvisor)
         {
             Guard.ArgumentNotNull(commentService, nameof(commentService));
+            Guard.ArgumentNotNull(autoCompleteAdvisor, nameof(autoCompleteAdvisor));
 
+            AutoCompleteAdvisor = autoCompleteAdvisor;
             this.commentService = commentService;
 
             var canDeleteObservable = this.WhenAnyValue(
@@ -190,6 +193,9 @@ public ICommentThreadViewModel Thread
         /// <inheritdoc/>
         public ReactiveCommand<Unit, Unit> Delete { get; }
 
+        /// <inheritdoc/>
+        public IAutoCompleteAdvisor AutoCompleteAdvisor { get; }
+
         /// <inheritdoc/>
         public Task InitializeAsync(
             ICommentThreadViewModel thread,
diff --git a/src/GitHub.App/ViewModels/Documents/IssueishCommentViewModel.cs b/src/GitHub.App/ViewModels/Documents/IssueishCommentViewModel.cs
@@ -23,9 +23,10 @@ public sealed class IssueishCommentViewModel : CommentViewModel, IIssueishCommen
         /// Initializes a new instance of the <see cref="CommentViewModel"/> class.
         /// </summary>
         /// <param name="commentService">The comment service.</param>
+        /// <param name="autoCompleteAdvisor"></param>
         [ImportingConstructor]
-        public IssueishCommentViewModel(ICommentService commentService)
-            : base(commentService)
+        public IssueishCommentViewModel(ICommentService commentService, IAutoCompleteAdvisor autoCompleteAdvisor)
+            : base(commentService, autoCompleteAdvisor)
         {
             CloseOrReopen = ReactiveCommand.CreateFromTask(
                 DoCloseOrReopen,
diff --git a/src/GitHub.App/ViewModels/GitHubPane/PullRequestReviewAuthoringViewModel.cs b/src/GitHub.App/ViewModels/GitHubPane/PullRequestReviewAuthoringViewModel.cs
@@ -45,8 +45,9 @@ public PullRequestReviewAuthoringViewModel(
             IPullRequestEditorService editorService,
             IPullRequestSessionManager sessionManager,
             IMessageDraftStore draftStore,
-            IPullRequestFilesViewModel files)
-            : this(pullRequestService, editorService, sessionManager,draftStore, files, DefaultScheduler.Instance)
+            IPullRequestFilesViewModel files,
+            IAutoCompleteAdvisor autoCompleteAdvisor)
+            : this(pullRequestService, editorService, sessionManager,draftStore, files, autoCompleteAdvisor, DefaultScheduler.Instance)
         {
         }
 
@@ -56,12 +57,14 @@ public PullRequestReviewAuthoringViewModel(
             IPullRequestSessionManager sessionManager,
             IMessageDraftStore draftStore,
             IPullRequestFilesViewModel files,
+            IAutoCompleteAdvisor autoCompleteAdvisor,
             IScheduler timerScheduler)
         {
             Guard.ArgumentNotNull(editorService, nameof(editorService));
             Guard.ArgumentNotNull(sessionManager, nameof(sessionManager));
             Guard.ArgumentNotNull(draftStore, nameof(draftStore));
             Guard.ArgumentNotNull(files, nameof(files));
+            Guard.ArgumentNotNull(autoCompleteAdvisor, nameof(autoCompleteAdvisor));
             Guard.ArgumentNotNull(timerScheduler, nameof(timerScheduler));
 
             this.pullRequestService = pullRequestService;
@@ -77,6 +80,7 @@ public PullRequestReviewAuthoringViewModel(
                 .ToProperty(this, x => x.CanApproveRequestChanges);
 
             Files = files;
+            AutoCompleteAdvisor = autoCompleteAdvisor;
 
             var hasBodyOrComments = this.WhenAnyValue(
                 x => x.Body,
@@ -118,6 +122,9 @@ public PullRequestDetailModel PullRequestModel
         /// <inheritdoc/>
         public IPullRequestFilesViewModel Files { get; }
 
+        /// <inheritdoc/>
+        public IAutoCompleteAdvisor AutoCompleteAdvisor { get; }
+
         /// <inheritdoc/>
         public string Body
         {
diff --git a/src/GitHub.App/ViewModels/PullRequestReviewCommentViewModel.cs b/src/GitHub.App/ViewModels/PullRequestReviewCommentViewModel.cs
@@ -25,10 +25,12 @@ public class PullRequestReviewCommentViewModel : CommentViewModel, IPullRequestR
         /// <summary>
         /// Initializes a new instance of the <see cref="PullRequestReviewCommentViewModel"/> class.
         /// </summary>
-        /// <param name="commentService">The comment service</param>
+        /// <param name="commentService">The comment service.</param>
+        /// <param name="autoCompleteAdvisor">The auto complete advisor.</param>
         [ImportingConstructor]
-        public PullRequestReviewCommentViewModel(ICommentService commentService)
-            : base(commentService)
+        public PullRequestReviewCommentViewModel(ICommentService commentService,
+            IAutoCompleteAdvisor autoCompleteAdvisor)
+            : base(commentService, autoCompleteAdvisor)
         {
             canStartReview = this.WhenAnyValue(
                 x => x.IsPending,
diff --git a/src/GitHub.Exports.Reactive/ViewModels/GitHubPane/IPullRequestReviewAuthoringViewModel.cs b/src/GitHub.Exports.Reactive/ViewModels/GitHubPane/IPullRequestReviewAuthoringViewModel.cs
@@ -3,6 +3,7 @@
 using System.Reactive;
 using System.Threading.Tasks;
 using GitHub.Models;
+using GitHub.Services;
 using ReactiveUI;
 
 namespace GitHub.ViewModels.GitHubPane
@@ -87,6 +88,11 @@ public interface IPullRequestReviewAuthoringViewModel : IPanePageViewModel, IDis
         /// </summary>
         ReactiveCommand<Unit, Unit> Cancel { get; }
 
+        /// <summary>
+        /// Provides an AutoCompleteAdvisor.
+        /// </summary>
+        IAutoCompleteAdvisor AutoCompleteAdvisor { get; }
+
         /// <summary>
         /// Initializes the view model for creating a new review.
         /// </summary>
diff --git a/src/GitHub.Exports.Reactive/ViewModels/ICommentViewModel.cs b/src/GitHub.Exports.Reactive/ViewModels/ICommentViewModel.cs
@@ -1,5 +1,6 @@
 ﻿using System;
 using System.Reactive;
+using GitHub.Services;
 using ReactiveUI;
 
 namespace GitHub.ViewModels
@@ -119,5 +120,10 @@ public interface ICommentViewModel : IViewModel
         /// Deletes a comment.
         /// </summary>
         ReactiveCommand<Unit, Unit> Delete { get; }
+
+        /// <summary>
+        /// Provides an AutoCompleteAdvisor.
+        /// </summary>
+        IAutoCompleteAdvisor AutoCompleteAdvisor { get; }
     }
 }
diff --git a/src/GitHub.VisualStudio.UI/Views/Documents/IssueishCommentView.xaml b/src/GitHub.VisualStudio.UI/Views/Documents/IssueishCommentView.xaml
@@ -128,39 +128,53 @@
             <Separator Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="0" Margin="0 0 0 4" 
                        Background="{DynamicResource GitHubButtonBorderBrush}"/>
 
-            <ui:PromptTextBox Name="body"
-                              Grid.Column="2"
-                              Grid.Row="1"
-                              AcceptsReturn="True"
-                              AcceptsTab="True"
-                              IsReadOnly="{Binding IsReadOnly}"
-                              Margin="4 0 4 4"
-                              Text="{Binding Body, UpdateSourceTrigger=PropertyChanged}"
-                              TextWrapping="Wrap"
-                              VerticalAlignment="Center"
-                              GotFocus="ReplyPlaceholder_GotFocus"
-                              Loaded="body_Loaded"
-                              SpellCheck.IsEnabled="True">
-                <ui:PromptTextBox.Style>
-                    <Style TargetType="ui:PromptTextBox" BasedOn="{StaticResource GitHubVsPromptTextBox}">
-                        <Setter Property="Height" Value="28"/>
-                        <Setter Property="PromptText" Value="Reply..."/>
-
-                        <Style.Triggers>
-                            <DataTrigger Binding="{Binding EditState}" Value="Editing">
-                                <Setter Property="MinHeight" Value="100"/>
-                                <Setter Property="PromptText" Value="Leave a comment"/>
-                            </DataTrigger>
-                        </Style.Triggers>
-
-                        <Style.Resources>
-                            <Style TargetType="TextBlock">
-                                <Setter Property="Foreground" Value="{DynamicResource GitHubVsToolWindowText}" />
-                            </Style>
-                        </Style.Resources>
-                    </Style>
-                </ui:PromptTextBox.Style>
-            </ui:PromptTextBox>
+            <ghfvs:AutoCompleteBox
+                
+                Grid.Column="2"
+                Grid.Row="1"
+                Margin="4 0 4 4"
+                Advisor="{Binding AutoCompleteAdvisor}"
+            >
+                <ghfvs:AutoCompleteBox.ItemTemplate>
+                    <DataTemplate>
+                        <ghfvs:AutoCompleteSuggestionView ViewModel="{Binding}" />
+                    </DataTemplate>
+                </ghfvs:AutoCompleteBox.ItemTemplate>
+                <ghfvs:AutoCompleteBox.InputElement>
+                    <ghfvs:TextBoxAutoCompleteTextInput>
+                        <ui:PromptTextBox Name="body"
+                                          AcceptsReturn="True"
+                                          AcceptsTab="True"
+                                          IsReadOnly="{Binding IsReadOnly}"
+                                          Text="{Binding Body, UpdateSourceTrigger=PropertyChanged}"
+                                          TextWrapping="Wrap"
+                                          VerticalAlignment="Center"
+                                          GotFocus="ReplyPlaceholder_GotFocus"
+                                          Loaded="body_Loaded"
+                                          SpellCheck.IsEnabled="True">
+                            <ui:PromptTextBox.Style>
+                                <Style TargetType="ui:PromptTextBox" BasedOn="{StaticResource GitHubVsPromptTextBox}">
+                                    <Setter Property="Height" Value="28"/>
+                                    <Setter Property="PromptText" Value="Reply..."/>
+
+                                    <Style.Triggers>
+                                        <DataTrigger Binding="{Binding EditState}" Value="Editing">
+                                            <Setter Property="MinHeight" Value="100"/>
+                                            <Setter Property="PromptText" Value="Leave a comment"/>
+                                        </DataTrigger>
+                                    </Style.Triggers>
+
+                                    <Style.Resources>
+                                        <Style TargetType="TextBlock">
+                                            <Setter Property="Foreground" Value="{DynamicResource GitHubVsToolWindowText}" />
+                                        </Style>
+                                    </Style.Resources>
+                                </Style>
+                            </ui:PromptTextBox.Style>
+                        </ui:PromptTextBox>
+                    </ghfvs:TextBoxAutoCompleteTextInput>
+                </ghfvs:AutoCompleteBox.InputElement>
+            </ghfvs:AutoCompleteBox>
 
             <DockPanel Grid.Column="2" Grid.Row="2"
                        Margin="0 4"
diff --git a/src/GitHub.VisualStudio.UI/Views/GitHubPane/PullRequestReviewAuthoringView.xaml b/src/GitHub.VisualStudio.UI/Views/GitHubPane/PullRequestReviewAuthoringView.xaml
@@ -41,17 +41,30 @@
             </TextBlock>
             <TextBlock Foreground="{DynamicResource GitHubVsGrayText}" Text="{Binding PullRequestModel.Title}" TextWrapping="Wrap"/>
             <TextBlock Margin="0 12 0 4" Text="{x:Static ghfvs:Resources.YourReviewSummary}"/>
-            <TextBox AcceptsReturn="True"
-                     Background="{DynamicResource VsBrush.BrandedUIBackground}"
-                     Foreground="{DynamicResource VsBrush.BrandedUIText}"
-                     BorderBrush="{DynamicResource VsBrush.ActiveBorder}"
-                     Margin="0 4"
-                     MinHeight="120"
-                     Padding="0 4"
-                     TextWrapping="Wrap"
-                     Text="{Binding Body}"
-                     SpellCheck.IsEnabled="True"/>
             
+            <ui:AutoCompleteBox
+                    Padding="0 4"
+                    Margin="0 4"
+                    Advisor="{Binding AutoCompleteAdvisor}">
+                <ui:AutoCompleteBox.ItemTemplate>
+                    <DataTemplate>
+                        <ui:AutoCompleteSuggestionView ViewModel="{Binding}" />
+                    </DataTemplate>
+                </ui:AutoCompleteBox.ItemTemplate>
+                <ui:AutoCompleteBox.InputElement>
+                    <ui:TextBoxAutoCompleteTextInput>
+                        <TextBox AcceptsReturn="True"
+                                 Background="{DynamicResource VsBrush.BrandedUIBackground}"
+                                 Foreground="{DynamicResource VsBrush.BrandedUIText}"
+                                 BorderBrush="{DynamicResource VsBrush.ActiveBorder}"
+                                 MinHeight="120"
+                                 TextWrapping="Wrap"
+                                 Text="{Binding Body}"
+                                 SpellCheck.IsEnabled="True"/>
+                    </ui:TextBoxAutoCompleteTextInput>
+                </ui:AutoCompleteBox.InputElement>
+            </ui:AutoCompleteBox>
+
             <StackPanel Margin="0 4" Orientation="Horizontal">
                 <ui:DropDownButton AutoCloseOnClick="True" Foreground="{DynamicResource GHBlueLinkButtonTextBrush}">
                     <ui:GitHubActionLink>Submit review</ui:GitHubActionLink>
diff --git a/src/GitHub.VisualStudio.UI/Views/PullRequestReviewCommentView.xaml b/src/GitHub.VisualStudio.UI/Views/PullRequestReviewCommentView.xaml
@@ -161,39 +161,51 @@
             <Separator Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Margin="0 0 0 4" 
                        Background="{DynamicResource GitHubButtonBorderBrush}"/>
 
-            <ui:PromptTextBox Name="body"
-                              Grid.Column="1"
-                              Grid.Row="1"
-                              AcceptsReturn="True"
-                              AcceptsTab="True"
-                              IsReadOnly="{Binding IsReadOnly}"
-                              Margin="4 0 4 4"
-                              Text="{Binding Body, UpdateSourceTrigger=PropertyChanged}"
-                              TextWrapping="Wrap"
-                              VerticalAlignment="Center"
-                              GotFocus="ReplyPlaceholder_GotFocus"
-                              Loaded="body_Loaded"
-                              SpellCheck.IsEnabled="True">
-                <ui:PromptTextBox.Style>
-                    <Style TargetType="ui:PromptTextBox" BasedOn="{StaticResource GitHubVsPromptTextBox}">
-                        <Setter Property="Height" Value="28"/>
-                        <Setter Property="PromptText" Value="Reply..."/>
+            <ui:AutoCompleteBox
+                Grid.Column="1"
+                Grid.Row="1"
+                Margin="4 0 4 4"
+                Advisor="{Binding AutoCompleteAdvisor}">
+                <ui:AutoCompleteBox.ItemTemplate>
+                    <DataTemplate>
+                        <ui:AutoCompleteSuggestionView ViewModel="{Binding}" />
+                    </DataTemplate>
+                </ui:AutoCompleteBox.ItemTemplate>
+                <ui:AutoCompleteBox.InputElement>
+                    <ui:TextBoxAutoCompleteTextInput>
+                        <ui:PromptTextBox Name="body"
+                                          AcceptsReturn="True"
+                                          AcceptsTab="True"
+                                          IsReadOnly="{Binding IsReadOnly}"
+                                          Text="{Binding Body, UpdateSourceTrigger=PropertyChanged}"
+                                          TextWrapping="Wrap"
+                                          VerticalAlignment="Center"
+                                          GotFocus="ReplyPlaceholder_GotFocus"
+                                          Loaded="body_Loaded"
+                                          SpellCheck.IsEnabled="True">
+                            <ui:PromptTextBox.Style>
+                                <Style TargetType="ui:PromptTextBox" BasedOn="{StaticResource GitHubVsPromptTextBox}">
+                                    <Setter Property="Height" Value="28"/>
+                                    <Setter Property="PromptText" Value="Reply..."/>
 
-                        <Style.Triggers>
-                            <DataTrigger Binding="{Binding EditState}" Value="Editing">
-                                <Setter Property="MinHeight" Value="100"/>
-                                <Setter Property="PromptText" Value="Leave a comment"/>
-                            </DataTrigger>
-                        </Style.Triggers>
+                                    <Style.Triggers>
+                                        <DataTrigger Binding="{Binding EditState}" Value="Editing">
+                                            <Setter Property="MinHeight" Value="100"/>
+                                            <Setter Property="PromptText" Value="Leave a comment"/>
+                                        </DataTrigger>
+                                    </Style.Triggers>
 
-                        <Style.Resources>
-                            <Style TargetType="TextBlock">
-                                <Setter Property="Foreground" Value="{DynamicResource GitHubVsToolWindowText}" />
-                            </Style>
-                        </Style.Resources>
-                    </Style>
-                </ui:PromptTextBox.Style>
-            </ui:PromptTextBox>
+                                    <Style.Resources>
+                                        <Style TargetType="TextBlock">
+                                            <Setter Property="Foreground" Value="{DynamicResource GitHubVsToolWindowText}" />
+                                        </Style>
+                                    </Style.Resources>
+                                </Style>
+                            </ui:PromptTextBox.Style>
+                        </ui:PromptTextBox>
+                    </ui:TextBoxAutoCompleteTextInput>
+                </ui:AutoCompleteBox.InputElement>
+            </ui:AutoCompleteBox>
 
             <DockPanel Grid.Column="1" Grid.Row="2"
                        Margin="0 4"
diff --git a/test/GitHub.App.UnitTests/ViewModels/Documents/IssueishCommentViewModelTests.cs b/test/GitHub.App.UnitTests/ViewModels/Documents/IssueishCommentViewModelTests.cs
@@ -54,11 +54,13 @@ await target.InitializeAsync(
         }
 
         IssueishCommentViewModel CreateTarget(
-            ICommentService commentService = null)
+            ICommentService commentService = null,
+            IAutoCompleteAdvisor autoCompleteAdvisor = null)
         {
             commentService = commentService ?? Substitute.For<ICommentService>();
+            autoCompleteAdvisor = autoCompleteAdvisor ?? Substitute.For<IAutoCompleteAdvisor>();
 
-            return new IssueishCommentViewModel(commentService);
+            return new IssueishCommentViewModel(commentService, autoCompleteAdvisor);
         }
     }
 }
diff --git a/test/GitHub.App.UnitTests/ViewModels/PullRequestReviewCommentThreadViewModelTests.cs b/test/GitHub.App.UnitTests/ViewModels/PullRequestReviewCommentThreadViewModelTests.cs
diff --git a/test/GitHub.App.UnitTests/ViewModels/PullRequestReviewCommentViewModelTests.cs b/test/GitHub.App.UnitTests/ViewModels/PullRequestReviewCommentViewModelTests.cs
diff --git a/test/GitHub.InlineReviews.UnitTests/ViewModels/InlineCommentPeekViewModelTests.cs b/test/GitHub.InlineReviews.UnitTests/ViewModels/InlineCommentPeekViewModelTests.cs
