Add Deprecation section of the Manage Package page (#6912)

Author: Scott Bommarito

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

@@ -4,6 +4,7 @@
 @import "common-high-contrast.less";
 @import "common-licenses.less";
 @import "common-list-packages.less";
+@import "common-multi-select-dropdown.less";
 @import "common-user-package-list.less";
 @import "page-about.less";
 @import "page-account-settings.less";
@@ -17,6 +18,7 @@
 @import "page-forgot-password.less";
 @import "page-home.less";
 @import "page-list-packages.less";
+@import "page-manage-deprecation.less";
 @import "page-manage-organizations.less";
 @import "page-manage-owners.less";
 @import "page-manage-packages.less";

src/Bootstrap/less/theme/all.less

@@ -273,6 +273,20 @@ h2, h3 {
 }
 
 @media screen and (max-width: @screen-sm) {
+  .container {
+    // Bootstrap doesn't set the container width when the screen is xs.
+    // This works fine when there are no elements in the container that are wider than the viewport,
+    // however, if there are elements in the container that are wider than the viewport, 
+    // their overflow properties will not work properly because they are not bound by the size of the container.
+    // To fix this, we need to set the container width to be the width of the viewport minus the row margin on xs screens.
+    // This way, those elements that are larger than the viewport are properly bound by the size of the container and overflow properly.
+    width: calc(100vw - 15px);
+  }
+
+  .navbar-toggle {
+    margin-right: 0;
+  }
+
   img.package-icon {
     max-width: 60px;
     max-height: 60px;

src/Bootstrap/less/theme/base.less

@@ -0,0 +1,45 @@
+.multi-select-dropdown {
+    position: relative;
+    display: block;
+
+    .dropdown-btn {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 5px;
+        margin-bottom: 0px;
+        background-color: white;
+        border-style: inset;
+        border: 1px solid #7f7f7f;
+
+        span {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+    
+    .dropdown-content {
+        position: absolute;
+        z-index: 1;
+        width: 100%;
+        border-top: 0px;
+
+        .dropdown-selector {
+            height: 300px;
+            overflow: auto;
+            
+            .dropdown-filter {
+                display: flex;
+                margin-bottom: 5px;
+
+                input {
+                    border: 0;
+                    margin-left: 10px;
+                    width: 100%;
+                }
+            }
+        }
+    }
+}

src/Bootstrap/less/theme/common-multi-select-dropdown.less

@@ -0,0 +1,70 @@
+.page-manage-deprecation {
+    .full-line {
+        display: block;
+        width: 100%;
+    }
+
+    .deprecation-section {
+        margin-top: 40px;
+
+        .deprecation-section-header {
+            margin-bottom: 15px;
+        }
+        
+        .unbolded-label {
+            label {
+                font-weight: normal;
+            }
+        }
+        
+        .deprecation-subsection {
+            margin: 25px;
+            
+            .security-detail {
+                padding: 10px;
+
+                .security-detail-input-label {
+                    display: block;
+                    margin-bottom: 0px;
+                    font-weight: normal;
+                }
+
+                .security-detail-input {
+                    margin-top: 10px;
+                
+                    .cvss-input {
+                        display: inline-block;
+                        width: 65px;
+                        margin-right: 15px;
+                    }
+                }
+                
+                .security-detail-list-input {
+                    display: flex;
+                    justify-content: space-between;
+
+                    button {
+                        margin-left: 15px;
+                    }
+                }
+
+                .security-detail-list {
+                    margin-top: 10px;
+
+                    .security-detail-list-item {
+                        display: flex;
+                        justify-content: space-between;
+                        padding: 10px;
+                        margin-top: 10px;
+                    }
+                }
+            }
+            
+            .alternate-package-container {
+                @media (max-width: @screen-sm-min) {
+                    margin-top: 40px;
+                }
+            }
+        }
+    }
+}

src/Bootstrap/less/theme/page-manage-deprecation.less

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

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

@@ -156,6 +156,10 @@ private static void BundlingPostStart()
                 .Include("~/Scripts/gallery/stats-dimensions.js");
             BundleTable.Bundles.Add(d3ScriptBundle);
 
+            var multiSelectDropdownBundle = new ScriptBundle("~/Scripts/gallery/common-multi-select-dropdown.min.js")
+                .Include("~/Scripts/gallery/common-multi-select-dropdown.js");
+            BundleTable.Bundles.Add(multiSelectDropdownBundle);
+
             var homeScriptBundle = new ScriptBundle("~/Scripts/gallery/page-home.min.js")
                 .Include("~/Scripts/gallery/page-home.js");
             BundleTable.Bundles.Add(homeScriptBundle);
@@ -177,6 +181,10 @@ private static void BundlingPostStart()
                 .Include("~/Scripts/gallery/page-manage-owners.js");
             BundleTable.Bundles.Add(manageOwnersScriptBundle);
 
+            var manageDeprecationScriptBundle = new ScriptBundle("~/Scripts/gallery/page-manage-deprecation.min.js")
+                .Include("~/Scripts/gallery/page-manage-deprecation.js");
+            BundleTable.Bundles.Add(manageDeprecationScriptBundle);
+
             var deletePackageScriptBundle = new ScriptBundle("~/Scripts/gallery/page-delete-package.min.js")
                 .Include("~/Scripts/gallery/page-delete-package.js");
             BundleTable.Bundles.Add(deletePackageScriptBundle);

src/NuGetGallery/App_Start/AppActivator.cs

@@ -216,6 +216,21 @@ protected override void Load(ContainerBuilder builder)
                 .As<IEntityRepository<SymbolPackage>>()
                 .InstancePerLifetimeScope();
 
+            builder.RegisterType<EntityRepository<PackageDeprecation>>()
+                .AsSelf()
+                .As<IEntityRepository<PackageDeprecation>>()
+                .InstancePerLifetimeScope();
+
+            builder.RegisterType<EntityRepository<Cve>>()
+               .AsSelf()
+               .As<IEntityRepository<Cve>>()
+               .InstancePerLifetimeScope();
+
+            builder.RegisterType<EntityRepository<Cwe>>()
+               .AsSelf()
+               .As<IEntityRepository<Cwe>>()
+               .InstancePerLifetimeScope();
+
             var supportDbConnectionFactory = CreateDbConnectionFactory(
                 diagnosticsService,
                 nameof(SupportRequestDbContext),
@@ -356,6 +371,10 @@ protected override void Load(ContainerBuilder builder)
                 .As<ILicenseExpressionSegmentator>()
                 .InstancePerLifetimeScope();
 
+            builder.RegisterType<PackageDeprecationService>()
+                .As<IPackageDeprecationService>()
+                .InstancePerLifetimeScope();
+
             RegisterFeatureFlagsService(builder, configuration);
             RegisterMessagingService(builder, configuration);
 

src/NuGetGallery/App_Start/DefaultDependenciesModule.cs

@@ -145,9 +145,9 @@ public static void RegisterUIRoutes(RouteCollection routes)
                 new { controller = "Packages", action = "VerifyPackage" });
 
             routes.MapRoute(
-                 RouteName.PreviewReadMe,
-                 "packages/manage/preview-readme",
-                 new { controller = "Packages", action = "PreviewReadMe" });
+                RouteName.PreviewReadMe,
+                "packages/manage/preview-readme",
+                new { controller = "Packages", action = "PreviewReadMe" });
 
             routes.MapRoute(
                 RouteName.CancelUpload,