Add search side-by-side web page (#7177)

Address #7152

Author: joelverhagen

src/Bootstrap/Gruntfile.js

@@ -165,6 +165,23 @@ module.exports = function (grunt) {
         expand: true,
         src: 'fonts/**',
         dest: 'dist/'
+      },
+      gallerycss: {
+        expand: true,
+        cwd: 'dist/css/',
+        src: [
+          'bootstrap.css',
+          'bootstrap-theme.css'
+        ],
+        dest: '../NuGetGallery/Content/gallery/css/'
+      },
+      galleryjs: {
+        expand: true,
+        cwd: 'dist/js/',
+        src: [
+          'bootstrap.js'
+        ],
+        dest: '../NuGetGallery/Scripts/gallery/'
       }
     },
 
@@ -187,10 +204,10 @@ module.exports = function (grunt) {
   grunt.registerTask('dist-css', ['less:core', 'less:theme', 'postcss:core', 'postcss:theme', 'cssmin:core', 'cssmin:theme']);
 
   // Full distribution task.
-  grunt.registerTask('dist', ['clean:dist', 'dist-css', 'copy:fonts', 'dist-js']);
+  grunt.registerTask('dist', ['clean:dist', 'dist-css', 'copy:fonts', 'dist-js', 'copy:gallerycss', 'copy:galleryjs']);
 
   // Default task.
-  grunt.registerTask('default', ['clean:dist', 'copy:fonts', 'dist-css', 'dist-js']);
+  grunt.registerTask('default', ['clean:dist', 'copy:fonts', 'dist-css', 'dist-js', 'copy:gallerycss', 'copy:galleryjs']);
 
   grunt.registerTask('build-glyphicons-data', function () {
     generateGlyphiconsData.call(this, grunt);

src/Bootstrap/dist/css/bootstrap-theme.css

@@ -26,6 +26,7 @@
 @import "page-profile.less";
 @import "page-report-abuse.less";
 @import "page-reset-password.less";
+@import "page-search-sxs.less";
 @import "page-sign-in.less";
 @import "page-statistics-most-downloaded.less";
 @import "page-statistics-overview.less";

src/Bootstrap/less/theme/all.less

@@ -0,0 +1,70 @@
+.page-search-sxs {
+    h1 {
+        font-size: @font-size-h2;
+        border-bottom: 1px solid lightgray;
+    }
+    
+    h2 {
+        font-size: @font-size-h3;
+        margin-top: 0;
+    }
+
+    .list-packages .package {
+        padding-top: 0;
+    }
+
+    .list-packages .package .package-details,
+    .list-packages .package .package-list,
+    .list-packages .package .package-by {
+        line-height: 16px;
+        font-size: 13px;
+    }
+    
+    .list-packages .package .package-details,
+    .list-packages .package .package-list {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        li {
+          display: inline;
+        }
+    }
+
+    .list-packages .package .package-list {
+        margin-top: 4px;
+        margin-bottom: 4px;
+
+        li + li {
+            margin-left: @padding-small-horizontal;
+            padding-left: @padding-small-horizontal;
+            border-left-style: solid;
+            border-width: 1px;
+            border-color: @gray-lighter;
+        }
+    }
+
+    .list-packages .package .package-header .reserved-indicator {
+        width: 15px;
+    }
+
+    .radio label {
+        margin-right: 30px;
+    }
+
+    .list-packages .package .package-header .package-title {
+        font-size: 20px;
+    }
+
+    .col-package-icon {
+        padding-right: 0;
+    }
+
+    .package .package-legacy-title {
+        display: none;
+    }
+
+    .panel-body p:last-child {
+        margin-bottom: 0;
+    }
+}

src/Bootstrap/less/theme/page-search-sxs.less

@@ -2,6 +2,7 @@
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 using System.Web.Mvc;
 using System.Web.Routing;
+using NuGetGallery.Controllers;
 using RouteMagic;
 
 namespace NuGetGallery
@@ -562,6 +563,11 @@ public static void RegisterUIRoutes(RouteCollection routes)
                 "downloads",
                 new { controller = "Pages", action = "Downloads" });
 
+            routes.MapRoute(
+                RouteName.ExperimentsSearchSideBySide,
+                "experiments/search-sxs",
+                new { controller = "Experiments", action = nameof(ExperimentsController.SearchSideBySide) });
+
             // TODO : Most of the routes are essentially of the format api/v{x}/*. We should refactor the code to vary them by the version.
             // V1 Routes
             // If the push url is /api/v1 then NuGet.Core would ping the path to resolve redirection.

src/NuGetGallery/App_Start/Routes.cs

@@ -0,0 +1,56 @@
+// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+using System;
+using System.Threading.Tasks;
+using System.Web.Mvc;
+using NuGet.Services.Messaging.Email;
+
+namespace NuGetGallery.Controllers
+{
+    public class ExperimentsController : AppController
+    {
+        private readonly ISearchSideBySideService _searchSideBySideService;
+        private readonly IFeatureFlagService _featureFlagService;
+
+        public ExperimentsController(
+            ISearchSideBySideService searchSideBySideService,
+            IFeatureFlagService featureFlagService)
+        {
+            _searchSideBySideService = searchSideBySideService ?? throw new ArgumentNullException(nameof(searchSideBySideService));
+            _featureFlagService = featureFlagService ?? throw new ArgumentNullException(nameof(featureFlagService));
+        }
+
+        [HttpGet]
+        public async Task<ActionResult> SearchSideBySide(string q = null)
+        {
+            var currentUser = GetCurrentUser();
+            if (!_featureFlagService.IsSearchSideBySideEnabled(currentUser))
+            {
+                return new HttpNotFoundResult();
+            }
+
+            var viewModel = await _searchSideBySideService.SearchAsync(q, currentUser);
+
+            return View(viewModel);
+        }
+
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public async Task<ActionResult> SearchSideBySide(SearchSideBySideViewModel input)
+        {
+            var currentUser = GetCurrentUser();
+            if (!_featureFlagService.IsSearchSideBySideEnabled(currentUser))
+            {
+                return new HttpNotFoundResult();
+            }
+
+            var searchUrl = Url.SearchSideBySide(searchTerm: input.SearchTerm?.Trim(), relativeUrl: false);
+            await _searchSideBySideService.RecordFeedbackAsync(input, searchUrl);
+
+            TempData["Message"] = "Thank you for providing feedback! Feel free to try some other queries.";
+
+            return RedirectToAction(nameof(SearchSideBySide));
+        }
+    }
+}

src/NuGetGallery/Controllers/ExperimentsController.cs

@@ -229,6 +229,7 @@
     <Compile Include="Authentication\Providers\AzureActiveDirectoryV2\AzureActiveDirectoryV2AuthenticatorConfiguration.cs" />
     <Compile Include="Authentication\Providers\AzureActiveDirectory\AzureActiveDirectoryAuthenticator.cs" />
     <Compile Include="Authentication\Providers\AzureActiveDirectory\AzureActiveDirectoryAuthenticatorConfiguration.cs" />
+    <Compile Include="Controllers\ExperimentsController.cs" />
     <Compile Include="Controllers\ManageDeprecationJsonApiController.cs" />
     <Compile Include="Infrastructure\Lucene\Correlation\CorrelatingHttpClientHandler.cs" />
     <Compile Include="Infrastructure\Lucene\Correlation\WebApiCorrelationHandler.cs" />
@@ -1968,6 +1969,7 @@
     <Content Include="Views\Packages\_ManageDeprecation.cshtml" />
     <Content Include="Views\Shared\_MultiSelectDropdown.cshtml" />
     <Content Include="Views\Packages\_DisplayPackageDeprecation.cshtml" />
+    <Content Include="Views\Experiments\SearchSideBySide.cshtml" />
   </ItemGroup>
   <ItemGroup>
     <Service Include="{508349B6-6B84-4DF5-91F0-309BEEBAD82D}" />

src/NuGetGallery/NuGetGallery.csproj

@@ -105,5 +105,6 @@ public static class RouteName
         public const string ApiV2CuratedSimulateError = "api-v2curated-simulate-error";
         public const string PagesSimulateError = "PagesSimulateError";
         public const string ApiSimulateError = "ApiSimulateError";
+        public const string ExperimentsSearchSideBySide = "ExperimentsSearchSideBySide";
     }
 }

src/NuGetGallery/RouteName.cs

@@ -465,6 +465,21 @@ public static string Search(this UrlHelper url, string searchTerm, bool relative
                 });
         }
 
+        public static string SearchSideBySide(
+            this UrlHelper url,
+            string searchTerm = null,
+            bool relativeUrl = true)
+        {
+            return GetRouteLink(
+                url,
+                RouteName.ExperimentsSearchSideBySide,
+                relativeUrl,
+                routeValues: new RouteValueDictionary
+                {
+                    { "q", searchTerm }
+                });
+        }
+
         public static string UploadPackage(this UrlHelper url, bool relativeUrl = true)
         {
             return GetRouteLink(url, RouteName.UploadPackage, relativeUrl);

src/NuGetGallery/UrlHelperExtensions.cs

@@ -3,6 +3,7 @@
 
 using System.Collections.Generic;
 using System.ComponentModel.DataAnnotations;
+using System.Web.Mvc;
 
 namespace NuGetGallery
 {
@@ -34,6 +35,7 @@ public class SearchSideBySideViewModel
         public string ExpectedPackages { get; set; }
 
         [Display(Name = CommentsLabel)]
+        [AllowHtml]
         public string Comments { get; set; }
 
         [Display(Name = EmailLabel)]