From 94c08013690ff1b8270e8649b1d4e1714f876a19 Mon Sep 17 00:00:00 2001
From: Marius Oehler <marius.oehler@novatec-gmbh.de>
Date: Wed, 16 Mar 2022 11:02:59 +0100
Subject: [PATCH] feat(config-ui): [#1352] filterable list of agent mappings in
 configuration docs

---
 .../configuration/documentation/DocumentationView.js   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/inspectit-ocelot-configurationserver-ui/src/components/views/configuration/documentation/DocumentationView.js b/components/inspectit-ocelot-configurationserver-ui/src/components/views/configuration/documentation/DocumentationView.js
index 16664fbf03..5d026a9324 100644
--- a/components/inspectit-ocelot-configurationserver-ui/src/components/views/configuration/documentation/DocumentationView.js
+++ b/components/inspectit-ocelot-configurationserver-ui/src/components/views/configuration/documentation/DocumentationView.js
@@ -36,7 +36,12 @@ const DocumentationView = () => {
   );
 
   // derived variables
-  const agentMappingNames = agentMappings.map((mapping) => mapping.name);
+  const agentMappingOptions = _(agentMappings)
+    .sortBy((mapping) => mapping.name.toLowerCase())
+    .map((mapping) => {
+      return { label: mapping.name, value: mapping.name };
+    })
+    .value();
 
   // initially load the agent mappings
   useEffect(() => {
@@ -127,9 +132,10 @@ const DocumentationView = () => {
             <Dropdown
               id="agentMappingDd"
               placeholder="Select an Agent Mapping"
-              options={agentMappingNames}
+              options={agentMappingOptions}
               value={selectedAgentMapping}
               onChange={(e) => setSelectedAgentMapping(e.value)}
+              filter={true}
             />
           </div>