Integrate Deprecate form with CVE/CWE autocomplete (#6944)

Author: Scott Bommarito

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

@@ -38,11 +38,60 @@
                         margin-right: 15px;
                     }
                 }
+
+                .security-detail-list-item {
+                    padding: 10px;
+
+                    span {
+                        text-decoration: none;
+                        color: black;
+                    }
+
+                    .security-detail-list-item-existing {
+                        color: @state-info-text;
+                    }
+
+                    .security-detail-list-item-missing {
+                        color: @state-danger-text;
+                    }
+
+                    .security-detail-list-item-header {
+                        display: flex;
+                        justify-content: space-between;
+                    }
+
+                    .security-detail-list-item-description {
+                        margin-top: 5px;
+                    }
+                }
 
                 .security-detail-list-input {
                     display: flex;
                     justify-content: space-between;
 
+                    .security-detail-list-autocomplete {
+                        width: 100%;
+                        position: relative;
+                        display: block;
+
+                        .security-detail-list-autocomplete-content {
+                            position: absolute;
+                            z-index: 1;
+                            width: 100%;
+                            border-top: 0px;
+
+                            .security-detail-list-item {
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                white-space: nowrap;
+
+                                &:focus, & > :focus, &:hover {
+                                    background-color: @alert-info-bg;
+                                }
+                            }
+                        }
+                    }
+
                     button {
                         margin-left: 15px;
                     }
@@ -52,9 +101,6 @@
                     margin-top: 10px;
 
                     .security-detail-list-item {
-                        display: flex;
-                        justify-content: space-between;
-                        padding: 10px;
                         margin-top: 10px;
                     }
                 }

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

@@ -0,0 +1,11 @@
+// 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.
+
+namespace NuGetGallery
+{
+    public static class ActionName
+    {
+        public const string GetCveIds = "CveIds";
+        public const string GetCweIds = "CweIds";
+    }
+}

src/NuGetGallery/ActionName.cs

@@ -45,7 +45,7 @@ public ManageDeprecationJsonApiController(
 
         [HttpGet]
         [UIAuthorize]
-        [ActionName("CveIds")]
+        [ActionName(ActionName.GetCveIds)]
         public JsonResult GetCveIds(string query)
         {
             // Get CVE data.
@@ -61,7 +61,7 @@ public JsonResult GetCveIds(string query)
 
         [HttpGet]
         [UIAuthorize]
-        [ActionName("CweIds")]
+        [ActionName(ActionName.GetCweIds)]
         public JsonResult GetCweIds(string query)
         {
             // Get CWE data.

src/NuGetGallery/Controllers/ManageDeprecationJsonApiController.cs

@@ -123,6 +123,7 @@
     <Reference Include="System.Xml" />
   </ItemGroup>
   <ItemGroup>
+    <Compile Include="ActionName.cs" />
     <Compile Include="App_Start\NuGetODataV2CuratedFeedConfig.cs" />
     <Compile Include="App_Start\NuGetODataV2FeedConfig.cs" />
     <Compile Include="App_Start\NuGetODataV1FeedConfig.cs" />

src/NuGetGallery/NuGetGallery.csproj

@@ -19,42 +19,11 @@ function MultiSelectDropdown(items, singularItemTitle, pluralItemTitle) {
         self.dropdownOpen(!self.dropdownOpen());
     };
 
-    this.isAncestor = function (element, ancestorSelector) {
-        var $target = $(element);
-        // '.closest' returns the list of ancestors between this element and the selector.
-        // If the selector is not an ancestor of the element, it returns an empty list.
-        return !!$target.closest(ancestorSelector).length;
-    };
-
-    this.isElementInsideDropdown = function (element) {
-        return self.isAncestor(element, self.dropdownSelector);
-    };
-
-    // If the user clicks outside of the dropdown, close it.
-    $(document).click(function (event) {
-        if (!self.isElementInsideDropdown(event.target)) {
-            self.dropdownOpen(false);
-        }
-    });
-
-    // If an element outside of the dropdown gains focus, close it.
-    $(document).focusin(function (event) {
-        if (!self.isElementInsideDropdown(event.target)) {
-            self.dropdownOpen(false);
-        }
-    });
-
-    $(document).keydown(function (event) {
-        var target = event.target;
-        if (self.isElementInsideDropdown(target)) {
-            // If we press escape while focus is inside the dropdown, close it
-            if (event.which === 27) { // Escape key
-                self.dropdownOpen(false);
-                event.preventDefault();
-                $(self.dropdownBtnSelector).focus();
-            }
-        }
-    });
+    window.nuget.configureDropdown(
+        self.dropdownSelector,
+        self.dropdownBtnSelector,
+        self.dropdownOpen,
+        false);
 
     // A filter to be applied to the items
     this.filter = ko.observable('');

src/NuGetGallery/Scripts/gallery/common-multi-select-dropdown.js

@@ -353,6 +353,49 @@
         return stringToFormat;
     };
 
+    nuget.isAncestor = function (element, ancestorSelector) {
+        var $target = $(element);
+        // '.closest' returns the list of ancestors between this element and the selector.
+        // If the selector is not an ancestor of the element, it returns an empty list.
+        return !!$target.closest(ancestorSelector).length;
+    };
+
+    nuget.configureDropdown = function (dropdownSelector, dropdownHeaderSelector, setDropdownOpen, openWhenFocused) {
+        var isElementInsideDropdown = function (element) {
+            return window.nuget.isAncestor(element, dropdownSelector);
+        };
+
+        // If the user clicks outside the dropdown, close it
+        $(document).click(function (event) {
+            if (!isElementInsideDropdown(event.target)) {
+                setDropdownOpen(false);
+            }
+        });
+
+        $(document).focusin(function (event) {
+            var isInsideDropdown = isElementInsideDropdown(event.target);
+            if (isInsideDropdown && openWhenFocused) {
+                // If an element inside the dropdown gains focus, open the dropdown if configured to
+                setDropdownOpen(true);
+            } else if (!isInsideDropdown) {
+                // If an element outside of the dropdown gains focus, close it
+                setDropdownOpen(false);
+            }
+        });
+
+        $(document).keydown(function (event) {
+            var target = event.target;
+            if (isElementInsideDropdown(target)) {
+                // If we press escape while focus is inside the dropdown, close it
+                if (event.which === 27) { // Escape key
+                    setDropdownOpen(false);
+                    event.preventDefault();
+                    $(dropdownHeaderSelector).focus();
+                }
+            }
+        });
+    };
+
     window.nuget = nuget;
 
     jQuery.extend(jQuery.expr[':'], {