Merge pull request #9401 from NuGet/dev

src/AccountDeleter/EmptyFeatureFlagService.cs

@@ -301,6 +301,11 @@ public bool IsDisplayUploadWarningV2Enabled(User user)
             throw new NotImplementedException();
         }
 
+        public bool IsDisplayPackageReadmeWarningEnabled(User user)
+        {
+            throw new NotImplementedException();
+        }
+
         public bool IsFrameworkFilteringEnabled(User user) {
             throw new NotImplementedException();
         }

src/Bootstrap/less/theme/common-readme.less

@@ -2,8 +2,7 @@
   .readme-container {
     display: block;
     padding: 10.5px;
-    background-color: @pre-bg;
-    border: 1px solid #ccc;
+    border: 2px solid #ccc;
     word-break: normal;
     margin-bottom: @default-margin-bottom;
     overflow: auto;
@@ -44,7 +43,7 @@
 
   pre {
     code.hljs {
-      background-color: #f6f8fa;
+      background-color: @pre-bg;
       color: #24292e; 
 
       .hljs-doctag,
@@ -92,7 +91,7 @@
       .hljs-comment,
       .hljs-code,
       .hljs-formula {
-        color: #6a737d;
+        color: #646d76;
       }
 
       .hljs-name,

src/Bootstrap/less/theme/page-display-package.less

@@ -423,6 +423,10 @@
       margin-bottom: -1px;
     }
 
+    .nav-tabs > li.active > a.body-warning-tab > {
+      background-color: #fff4ce;
+    }
+
     .nav-tabs > li > a {
       border-left: 0px;
       border-right: 0px;

src/Bootstrap/less/theme/page-list-packages.less

@@ -121,6 +121,7 @@
     }
 
     .tfmTab {
+      display: none;
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.1s ease-out;

src/GitHubVulnerabilities2Db/Fakes/FakeFeatureFlagService.cs

@@ -135,6 +135,11 @@ public bool IsDisplayUploadWarningV2Enabled(User user)
             throw new NotImplementedException();
         }
 
+        public bool IsDisplayPackageReadmeWarningEnabled(User user)
+        {
+            throw new NotImplementedException();
+        }
+
         public bool IsODataDatabaseReadOnlyEnabled()
         {
             throw new NotImplementedException();

src/NuGetGallery.Services/Configuration/FeatureFlagService.cs

@@ -48,6 +48,7 @@ public class FeatureFlagService : IFeatureFlagService
         private const string MarkdigMdRenderingFlightName = GalleryPrefix + "MarkdigMdRendering";
         private const string MarkdigMdSyntaxHighlightFlightName = GalleryPrefix + "MarkdigMdSyntaxHighlight";
         private const string DisplayUploadWarningV2FlightName = GalleryPrefix + "DisplayUploadWarningV2";
+        private const string DisplayPackageReadmeWarningFlightName = GalleryPrefix + "DisplayPackageReadmeWarning";
         private const string DeletePackageApiFlightName = GalleryPrefix + "DeletePackageApi";
         private const string ImageAllowlistFlightName = GalleryPrefix + "ImageAllowlist";
         private const string DisplayBannerFlightName = GalleryPrefix + "Banner";
@@ -354,6 +355,11 @@ public bool IsDisplayUploadWarningV2Enabled(User user)
             return _client.IsEnabled(DisplayUploadWarningV2FlightName, user, defaultValue: false);
         }
 
+        public bool IsDisplayPackageReadmeWarningEnabled(User user)
+        {
+            return _client.IsEnabled(DisplayPackageReadmeWarningFlightName, user, defaultValue: false);
+        }
+
         public bool IsDeletePackageApiEnabled(User user)
         {
             return _client.IsEnabled(DeletePackageApiFlightName, user, defaultValue: false);

src/NuGetGallery.Services/Configuration/IFeatureFlagService.cs

@@ -278,6 +278,11 @@ public interface IFeatureFlagService
         /// </summary>
         bool IsDisplayUploadWarningV2Enabled(User user);
 
+        /// <summary>
+        /// Whether the new warning of the missing readme is displayed to package authors
+        /// </summary>
+        bool IsDisplayPackageReadmeWarningEnabled(User user);
+
         /// <summary>
         /// Whether or not the user can delete a package through the API.
         /// </summary>

src/NuGetGallery/App_Data/Files/Content/Trusted-Image-Domains.json

@@ -15,6 +15,7 @@
         "badges.gitter.im",
         "bettercodehub.com",
         "buildstats.info",
+        "caniuse.bitsofco.de",
         "cdn.jsdelivr.net",
         "cdn.syncfusion.com",
         "ci.appveyor.com",

src/NuGetGallery/App_Data/Files/Content/flags.json

@@ -120,6 +120,12 @@
       "SiteAdmins": false,
       "Accounts": [],
       "Domains": []
+    },
+    "NuGetGallery.DisplayPackageReadmeWarning": {
+      "All": true,
+      "SiteAdmins": false,
+      "Accounts": [],
+      "Domains": []
     }
   }
 }

src/NuGetGallery/Controllers/PackagesController.cs

@@ -941,6 +941,8 @@ public virtual async Task<ActionResult> DisplayPackage(string id, string version
                 packageRenames,
                 readme);
 
+            var canDisplayReadmeWarning = _featureFlagService.IsDisplayPackageReadmeWarningEnabled(currentUser) && !model.HasEmbeddedReadmeFile && model.ReadMeHtml == null;
+
             model.ValidatingTooLong = _validationService.IsValidatingTooLong(package);
             model.PackageValidationIssues = _validationService.GetLatestPackageValidationIssues(package);
             model.SymbolsPackageValidationIssues = _validationService.GetLatestPackageValidationIssues(model.LatestSymbolsPackage);
@@ -956,6 +958,7 @@ public virtual async Task<ActionResult> DisplayPackage(string id, string version
             model.IsDisplayTargetFrameworkEnabled = _featureFlagService.IsDisplayTargetFrameworkEnabled(currentUser);
             model.IsComputeTargetFrameworkEnabled = _featureFlagService.IsComputeTargetFrameworkEnabled();
             model.IsMarkdigMdSyntaxHighlightEnabled = _featureFlagService.IsMarkdigMdSyntaxHighlightEnabled();
+            model.CanDisplayReadmeWarning = canDisplayReadmeWarning;
 
             if (model.IsComputeTargetFrameworkEnabled || model.IsDisplayTargetFrameworkEnabled)
             {
@@ -1363,8 +1366,6 @@ public virtual async Task<ActionResult> ListPackages(PackageListSearchViewModel
 
             // If the experience hasn't been cached, it means it's not the default experienced, therefore, show the panel
             viewModel.IsAdvancedSearchFlightEnabled = searchService.SupportsAdvancedSearch && isAdvancedSearchFlightEnabled;
-            viewModel.ShouldDisplayAdvancedSearchPanel = !shouldCacheAdvancedSearch || !includePrerelease;
-
             viewModel.IsFrameworkFilteringEnabled = isFrameworkFilteringEnabled;
 
             ViewBag.SearchTerm = q;

src/NuGetGallery/Scripts/gallery/page-list-packages.js

@@ -36,12 +36,6 @@ $(function() {
         framework.indeterminate = checkedCount !== 0;
     }
 
-    // Submit the form when a user changes the selected 'sortBy' option
-    searchForm.sortby.addEventListener('change', (e) => {
-        searchForm.sortby.value = e.target.value;
-        submitSearchForm();
-    });
-
     // Accordion/collapsible logic
     const collapsibles = document.querySelectorAll('.collapsible');
 
@@ -59,25 +53,16 @@ $(function() {
         expandButton.classList.toggle('ms-Icon--ChevronUp');
 
         if (this.classList.contains('active')) {
+            dataTab.style.display = 'block';
             dataTab.style.maxHeight = dataTab.scrollHeight + "px";
-
-            for (const tfm of tfmCheckboxes) {
-                tfm.setAttribute('tabindex', '0');
-                tfm.tabindex = "0";
-            }
         }
         else {
+            dataTab.style.display = 'none';
             dataTab.style.maxHeight = 0;
-
-            for (const tfm of tfmCheckboxes) {
-                tfm.setAttribute('tabindex', '-1');
-                tfm.tabindex = "-1";
-            }
         }
     }
 
-    searchForm.addEventListener('submit', submitSearchForm);
-
+    // Update query params before submitting the form
     function submitSearchForm() {
         constructFilterParameter(searchForm.frameworks, allFrameworks);
         constructFilterParameter(searchForm.tfms, allTfms);
@@ -101,7 +86,6 @@ $(function() {
     // Initialize state for Framework and Tfm checkboxes
     // NOTE: We first click on all selected Framework checkboxes and then on the selected Tfm checkboxes, which
     // allows us to correctly handle cases where a Framework AND one of its child Tfms is present in the query
-    initializeFrameworkAndTfmCheckboxes();
     function initializeFrameworkAndTfmCheckboxes() {
         var inputFrameworkFilters = searchForm.frameworks.value.split(',').map(f => f.trim()).filter(f => f);
         var inputTfmFilters = searchForm.tfms.value.split(',').map(f => f.trim()).filter(f => f);
@@ -118,4 +102,14 @@ $(function() {
             }
         });
     }
+
+    // The /profiles pages use this js file too, but some code needs to be applied only to the search page
+    if (searchForm) {
+        searchForm.sortby.addEventListener('change', (e) => {
+            searchForm.sortby.value = e.target.value;
+            submitSearchForm();
+        });
+        searchForm.addEventListener('submit', submitSearchForm);
+        initializeFrameworkAndTfmCheckboxes();
+    }
 });

src/NuGetGallery/ViewModels/DisplayPackageViewModel.cs

@@ -44,6 +44,7 @@ public class DisplayPackageViewModel : ListPackageItemViewModel
         public bool IsPackageDependentsEnabled { get; set; }
         public bool IsRecentPackagesNoIndexEnabled { get; set; }
         public bool IsMarkdigMdSyntaxHighlightEnabled { get; set; }
+        public bool CanDisplayReadmeWarning { get; set; }
         public NuGetPackageGitHubInformation GitHubDependenciesInformation { get; set; }
         public bool HasEmbeddedIcon { get; set; }
         public bool HasEmbeddedReadmeFile { get; set; }

src/NuGetGallery/ViewModels/PackageListViewModel.cs

@@ -78,8 +78,6 @@ public PackageListViewModel(
 
         public string SortBy { get; set; }
 
-        public bool ShouldDisplayAdvancedSearchPanel { get; set; }
-
         public bool IsAdvancedSearchFlightEnabled { get; set; }
 
         public bool IsFrameworkFilteringEnabled {  get; set; }

src/NuGetGallery/Views/Packages/DisplayPackage.cshtml

@@ -143,7 +143,7 @@
                 CommandPrefix = "> ",
                 InstallPackageCommands = new [] { string.Format("#r \"nuget: {0}, {1}\"", Model.Id, Model.Version) },
                 AlertLevel = AlertLevel.Info,
-                AlertMessage = "#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package."
+                AlertMessage = "#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package."
             },
 
             new ThirdPartyPackageManagerViewModel("Cake", "https://cakebuild.net/support/nuget")
@@ -530,12 +530,19 @@
                                role="tab"
                                data-toggle="tab"
                                id="readme-body-tab"
-                               class="body-tab"
+                               class="body-@(Model.CanDisplayReadmeWarning && Model.CanDisplayPrivateMetadata? "warning-" : "")tab"
                                aria-controls="readme-tab"
                                aria-expanded="@(activeBodyTab == "readme" ? "true" : "false")"
                                aria-selected="@(activeBodyTab == "readme" ? "true" : "false")"
                                tabindex="@(activeBodyTab == "readme" ? "0" : "-1")">
-                                <i class="ms-Icon ms-Icon--Dictionary" aria-hidden="true"></i>
+                                @if (Model.CanDisplayReadmeWarning && Model.CanDisplayPrivateMetadata)
+                                {
+                                    <i class="ms-Icon ms-Icon--Warning" aria-hidden="true"></i>
+                                } 
+                                else
+                                {
+                                    <i class="ms-Icon ms-Icon--Dictionary" aria-hidden="true"></i>
+                                }
                                 README
                             </a>
                         </li>
@@ -670,7 +677,11 @@
                         }
                         else
                         {
-                            if (Model.CanDisplayPrivateMetadata)
+                            if (Model.CanDisplayPrivateMetadata && Model.CanDisplayReadmeWarning)
+                            {
+                                @ViewHelpers.AlertWarning(@<text>Your package is missing a README. Please update your package to <a href='https://aka.ms/nuget-include-readme'>include a README</a> or <a href=@Url.ManagePackage(Model)>add a README here</a>.</text>);
+                            }
+                            else if (Model.CanDisplayPrivateMetadata)
                             {
                                 @ViewHelpers.AlertWarning(@<text>The package description is shown below. Please update your package to <a href='https://docs.microsoft.com/nuget/nuget-org/package-readme-on-nuget-org'>include a README</a>.</text>);
                             }

src/NuGetGallery/Views/Packages/UploadPackage.cshtml

@@ -27,7 +27,7 @@
             else
             {
                 <div class="text-left">
-                    <p class="message">Your package file will be uploaded and on the @(Config.Current.Brand) server (@(Config.Current.SiteRoot)).</p>
+                    <p class="message">Your package file will be uploaded and hosted on the @(Config.Current.Brand) server (@(Config.Current.SiteRoot)).</p>
                     <p class="message">
                         To learn more about authoring great packages, view our
                         <a href="https://docs.microsoft.com/nuget/create-packages/package-authoring-best-practices" alt="Best Practices" aria-label="Read here about publishing packages">Best Practices</a> page.

src/NuGetGallery/Views/Shared/ListPackages.cshtml

@@ -12,11 +12,6 @@
     @AddRadioGroupOption("Package Type", "packagetype", optionName, optionValue, Model.PackageType, isDefault);
 }
 
-@helper AddSortByOption(string optionName, string optionValue, bool isDefault = false)
-{
-    @AddRadioGroupOption("Sort By", "sortby", optionName, optionValue, Model.SortBy, isDefault);
-}
-
 @helper AddRadioGroupOption(string ariaSectionLabel, string radioGroupName, string optionName, string optionValue, string optionCompareValue, bool isDefault = false)
 {
     <div style="display: flex;">
@@ -37,9 +32,10 @@
         </button>
         <div class="tfmTab" id="@(frameworkShortName)tab">
             <ul>
-                @foreach (var tfm in tfms) {
+                @foreach (var tfm in tfms)
+                {
                     <li>
-                        <input type="checkbox" id="@(tfm)" class="tfm" tabindex="-1" parent="@(frameworkShortName)">
+                        <input type="checkbox" id="@(tfm)" class="tfm" parent="@(frameworkShortName)">
                         <label for="@(tfm)">@(tfm)</label>
                     </li>
                 }
@@ -195,7 +191,7 @@
                 {
                     <div class="row">
                         <div class="col-xs-12 clearfix">
-                            <div class="panel panel-default" aria-expanded="true">
+                            <div class="panel panel-default">
                                 <div class="panel-body">
                                     NuGet package search works the same on nuget.org, from the NuGet CLI, and within the NuGet Package Manager extension in Visual Studio. <br />
                                     Check out our <strong><a href="https://docs.microsoft.com/nuget/consume-packages/finding-and-choosing-packages#search-syntax">Search Syntax</a></strong>.

src/NuGetGallery/Views/Shared/_ListPackage.cshtml

@@ -93,6 +93,7 @@
                 </li>
                 @if (Model.Tags.AnySafe())
                 {
+                    <br/>
                     <li class="package-tags">
                         <span class="icon-text">
                             <i class="ms-Icon ms-Icon--Tag" aria-hidden="true"></i>

src/VerifyMicrosoftPackage/Fakes/FakeFeatureFlagService.cs

@@ -129,6 +129,8 @@ public class FakeFeatureFlagService : IFeatureFlagService
 
         public bool IsDisplayUploadWarningV2Enabled(User user) => throw new NotImplementedException();
 
+        public bool IsDisplayPackageReadmeWarningEnabled(User user) => throw new NotImplementedException();
+
         public bool IsFrameworkFilteringEnabled(User user) => throw new NotImplementedException();
     }
 }