[exampleapp] smart select

apps/exampleapp/apiserver.config.js

@@ -12,11 +12,15 @@ const apiServer = require("./apiserver.config")
 */
 
 let peaksData = require("./public/peaks.json")
+let secretOptions = require("./public/secretOptions.json")
 const bodyParser = require("body-parser")
 
 module.exports = {
   getHandlers: () => {
     return (devServer) => {
+      devServer.app.get("/secrets", function (req, res) {
+        res.json(secretOptions)
+      })
       devServer.app.get("/peaks", function (req, res) {
         res.json(peaksData)
       })

apps/exampleapp/package.json

@@ -8,6 +8,7 @@
     "@babel/core": "^7.20.2",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
+    "@floating-ui/react": "^0.17.0",
     "@svgr/webpack": "^6.2.1",
     "@testing-library/dom": "^8.19.0",
     "@testing-library/jest-dom": "^5.16.5",

apps/exampleapp/public/secretOptions.json

@@ -0,0 +1,222 @@
+[
+  {
+    "label": "HN_TEST_1 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/7a03c517-df7e-48c1-aca2-5c700d5382b6)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/7a03c517-df7e-48c1-aca2-5c700d5382b6"
+  },
+  {
+    "label": "HN_TEST_4 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/da2c2f70-e11a-4e8a-ba90-7ecf02858342)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/da2c2f70-e11a-4e8a-ba90-7ecf02858342"
+  },
+  {
+    "label": "HN_TEST_2 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e876b43f-987f-40ee-82c9-e024e55c34e5)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e876b43f-987f-40ee-82c9-e024e55c34e5"
+  },
+  {
+    "label": "HN_TEST_1 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d26555aa-7f7a-4c22-ad2d-edd8d10b9b28)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d26555aa-7f7a-4c22-ad2d-edd8d10b9b28"
+  },
+  {
+    "label": "i331795-testserver.crt (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/fe558d24-db7e-455a-8ad4-819eb5a45c9e)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/fe558d24-db7e-455a-8ad4-819eb5a45c9e"
+  },
+  {
+    "label": "tls_secret1 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e094d766-fd20-461c-8a95-23174d4ed412)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e094d766-fd20-461c-8a95-23174d4ed412"
+  },
+  {
+    "label": "testSecret_9997 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/ec31b126-f2d3-47a5-8cdc-3eb316f22afd)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/ec31b126-f2d3-47a5-8cdc-3eb316f22afd"
+  },
+  {
+    "label": "testSecret_9992 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d3a4e12e-c231-4edb-8ba2-51ed1e25e027)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d3a4e12e-c231-4edb-8ba2-51ed1e25e027"
+  },
+  {
+    "label": "testSecret_9989 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d1ae4f8b-d0b0-4347-a6a0-e06d1d62ad1b)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d1ae4f8b-d0b0-4347-a6a0-e06d1d62ad1b"
+  },
+  {
+    "label": "testSecret_9987 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f32a151d-7d98-4cec-915e-f7287d67b133)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f32a151d-7d98-4cec-915e-f7287d67b133"
+  },
+  {
+    "label": "testSecret_9976 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/cb8ee9d1-8f75-4fab-be12-136d18cc5e61)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/cb8ee9d1-8f75-4fab-be12-136d18cc5e61"
+  },
+  {
+    "label": "testSecret_9972 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f359d462-89d2-47e3-b7a5-42b412d287ae)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f359d462-89d2-47e3-b7a5-42b412d287ae"
+  },
+  {
+    "label": "testSecret_9967 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e0d9f463-926f-41ba-ab37-8c40a8eb8f05)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e0d9f463-926f-41ba-ab37-8c40a8eb8f05"
+  },
+  {
+    "label": "testSecret_9966 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/cc8bf2d7-8bc1-4197-8ec0-b29a5135cb6a)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/cc8bf2d7-8bc1-4197-8ec0-b29a5135cb6a"
+  },
+  {
+    "label": "testSecret_9964 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e0a07c84-eaa4-418c-ab0b-5eaf066937fa)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e0a07c84-eaa4-418c-ab0b-5eaf066937fa"
+  },
+  {
+    "label": "testSecret_9961 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f78af18f-7ddc-4510-9cbc-073867adce21)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f78af18f-7ddc-4510-9cbc-073867adce21"
+  },
+  {
+    "label": "testSecret_9960 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f5b872b9-b57b-4629-a582-2c9bd9c83dc0)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f5b872b9-b57b-4629-a582-2c9bd9c83dc0"
+  },
+  {
+    "label": "testSecret_9958 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f4c7d455-bd3b-4fb8-8e45-5226e3fce5bd)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f4c7d455-bd3b-4fb8-8e45-5226e3fce5bd"
+  },
+  {
+    "label": "testSecret_9956 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f9640ac6-a206-4c0d-9831-068a91c91028)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f9640ac6-a206-4c0d-9831-068a91c91028"
+  },
+  {
+    "label": "testSecret_9949 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e2ff0cf2-be5b-4bca-891b-e7c76e67614c)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e2ff0cf2-be5b-4bca-891b-e7c76e67614c"
+  },
+  {
+    "label": "testSecret_9947 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d7fc6d91-9e21-4dac-90db-3310230286a4)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d7fc6d91-9e21-4dac-90db-3310230286a4"
+  },
+  {
+    "label": "testSecret_9944 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d4fc4e89-1cb2-4295-933b-101dacc9025a)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d4fc4e89-1cb2-4295-933b-101dacc9025a"
+  },
+  {
+    "label": "testSecret_9933 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e845a090-fe3f-45a2-938d-e4cb01120674)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e845a090-fe3f-45a2-938d-e4cb01120674"
+  },
+  {
+    "label": "testSecret_9925 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/ebea20d7-d1ab-4f9f-9519-bf76c568f834)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/ebea20d7-d1ab-4f9f-9519-bf76c568f834"
+  },
+  {
+    "label": "testSecret_9924 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f43d1f8c-d621-4b5f-8a60-e7871d59ee49)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f43d1f8c-d621-4b5f-8a60-e7871d59ee49"
+  },
+  {
+    "label": "testSecret_9919 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/feb40d4f-f93f-42be-8d6c-bb28fbd292ef)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/feb40d4f-f93f-42be-8d6c-bb28fbd292ef"
+  },
+  {
+    "label": "testSecret_9917 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/cd65e6c9-e28a-45c1-9f33-ad8b2d1ce2a5)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/cd65e6c9-e28a-45c1-9f33-ad8b2d1ce2a5"
+  },
+  {
+    "label": "testSecret_9912 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d9e0e87d-774d-4f87-8246-3bfba84d57cb)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d9e0e87d-774d-4f87-8246-3bfba84d57cb"
+  },
+  {
+    "label": "testSecret_9910 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e0d52bbe-60db-4f80-b11d-38c0c1b72f80)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e0d52bbe-60db-4f80-b11d-38c0c1b72f80"
+  },
+  {
+    "label": "testSecret_9906 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f5421539-7942-4e0c-939a-510e1f8e47e9)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f5421539-7942-4e0c-939a-510e1f8e47e9"
+  },
+  {
+    "label": "testSecret_9904 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e84852cf-fa78-40fd-b0ac-4d4b3dcb29a6)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e84852cf-fa78-40fd-b0ac-4d4b3dcb29a6"
+  },
+  {
+    "label": "testSecret_9899 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/fc4c3f04-8862-4c80-974c-37d088202975)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/fc4c3f04-8862-4c80-974c-37d088202975"
+  },
+  {
+    "label": "testSecret_9897 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/c90eb4dc-654e-44e4-bfbb-bb4446361ac9)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/c90eb4dc-654e-44e4-bfbb-bb4446361ac9"
+  },
+  {
+    "label": "testSecret_9888 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f1674486-c6e7-4545-9b8f-bb78b255b147)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f1674486-c6e7-4545-9b8f-bb78b255b147"
+  },
+  {
+    "label": "testSecret_9887 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e7f1e72a-74f8-4452-a6df-6abf39f7d619)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e7f1e72a-74f8-4452-a6df-6abf39f7d619"
+  },
+  {
+    "label": "testSecret_9881 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/cf7745fb-e41f-422a-a982-154def92ccf3)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/cf7745fb-e41f-422a-a982-154def92ccf3"
+  },
+  {
+    "label": "testSecret_9879 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d3d872b4-ed0b-430e-aa64-c47aaddbe75b)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d3d872b4-ed0b-430e-aa64-c47aaddbe75b"
+  },
+  {
+    "label": "testSecret_9877 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e9042ce0-dc0b-47c9-a5f0-a083730d2526)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e9042ce0-dc0b-47c9-a5f0-a083730d2526"
+  },
+  {
+    "label": "testSecret_9874 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e0315199-a824-471b-aed9-ffb4ca95095b)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e0315199-a824-471b-aed9-ffb4ca95095b"
+  },
+  {
+    "label": "testSecret_9870 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/c9d570fc-a274-4919-ba68-bac93cfa2d72)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/c9d570fc-a274-4919-ba68-bac93cfa2d72"
+  },
+  {
+    "label": "testSecret_9867 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d0a62685-c9dc-49bb-8c40-98b9ea7a5d22)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d0a62685-c9dc-49bb-8c40-98b9ea7a5d22"
+  },
+  {
+    "label": "testSecret_9866 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d67c6ef4-040e-495e-8a90-32aee1c3b380)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d67c6ef4-040e-495e-8a90-32aee1c3b380"
+  },
+  {
+    "label": "testSecret_9862 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/cbccb5ff-e771-48b6-8f25-ca871a9dea80)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/cbccb5ff-e771-48b6-8f25-ca871a9dea80"
+  },
+  {
+    "label": "testSecret_9857 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/eb47b161-6f2b-4b1e-97ec-3f5721f392eb)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/eb47b161-6f2b-4b1e-97ec-3f5721f392eb"
+  },
+  {
+    "label": "testSecret_9847 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f5202eb2-9548-424e-8b6c-af60e68bfcaa)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f5202eb2-9548-424e-8b6c-af60e68bfcaa"
+  },
+  {
+    "label": "testSecret_9840 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/efd2b227-e106-456e-8ced-28d6f1bcaead)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/efd2b227-e106-456e-8ced-28d6f1bcaead"
+  },
+  {
+    "label": "testSecret_9837 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e099b4ed-d92e-4408-a4fe-dc8be3edd101)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e099b4ed-d92e-4408-a4fe-dc8be3edd101"
+  },
+  {
+    "label": "testSecret_9834 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/ed86278b-b614-4830-81ed-3ea8cb17df42)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/ed86278b-b614-4830-81ed-3ea8cb17df42"
+  },
+  {
+    "label": "testSecret_9824 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f9c62b2f-8b17-443c-b77c-d9633f45a81d)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/f9c62b2f-8b17-443c-b77c-d9633f45a81d"
+  },
+  {
+    "label": "testSecret_9823 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/cef7e105-4663-40bb-885a-b200ab55a946)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/cef7e105-4663-40bb-885a-b200ab55a946"
+  },
+  {
+    "label": "testSecret_9821 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/eb6a3bad-e01b-46e5-84bb-419df7b06bd3)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/eb6a3bad-e01b-46e5-84bb-419df7b06bd3"
+  },
+  {
+    "label": "testSecret_9818 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e53ab67a-c55a-4d99-8e1e-a9c429bea420)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/e53ab67a-c55a-4d99-8e1e-a9c429bea420"
+  },
+  {
+    "label": "testSecret_9814 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/df3569c9-84df-4024-acee-885af99d6698)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/df3569c9-84df-4024-acee-885af99d6698"
+  },
+  {
+    "label": "testSecret_9810 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d7cb0080-77c1-4fee-b132-ef196ae0c640)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d7cb0080-77c1-4fee-b132-ef196ae0c640"
+  },
+  {
+    "label": "testSecret_9809 (https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d04eecd0-b4fb-4196-90d9-d103b27f99d1)",
+    "value": "https://keymanager-3.qa-de-1.cloud.sap:443/v1/secrets/d04eecd0-b4fb-4196-90d9-d103b27f99d1"
+  }
+]

apps/exampleapp/src/AppContent.js

@@ -17,6 +17,7 @@ import PanelManager from "./components/PanelManager"
 import { useQuery } from "react-query"
 import { fetchPeaks } from "./actions"
 import PeaksList from "./components/PeaksList/PeaksList"
+import TabPanelTwo from "./components/TabPanelTwo"
 
 const AppContent = (props) => {
   const endpoint = useStore((state) => state.endpoint)
@@ -99,6 +100,7 @@ const AppContent = (props) => {
           <Container py>
             Content Panel two. Normally you will probably want to put the
             TabPanel content into separate components.
+            <TabPanelTwo />
           </Container>
         </TabPanel>
       </MainTabs>

apps/exampleapp/src/actions.js

@@ -29,7 +29,22 @@ const checkStatus = (response) => {
   }
 }
 
-// Example fetch call. Adjust as needed for your API
+export const fetchSecretOptions = ({ queryKey }) => {
+  const [_key, endpoint, options] = queryKey
+  const query = encodeUrlParamsFromObject(options)
+  return fetch(`${endpoint}/secrets?${query}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+  })
+    .then(checkStatus)
+    .then((response) => {
+      return response.json()
+    })
+}
+
 export const fetchPeaks = ({ queryKey }) => {
   const [_key, endpoint, options] = queryKey
   const query = encodeUrlParamsFromObject(options)