Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[exampleapp] smart select #246

Draft
wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

[exampleapp] smart select #246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6e41569
[exampleapp] playing with the select
ArtieReus Dec 5, 2022
c0150b2
[example] working basic select
ArtieReus Dec 20, 2022
3185ba9
[example]: added filter to smart select
ArtieReus Dec 20, 2022
5bde27d
[exampleapp]: smart select options container width
ArtieReus Dec 20, 2022
d7f0300
[exampleapp]: sticky filter
ArtieReus Dec 20, 2022
5648617
[exampleapp] prevent close dropdown on click reference
ArtieReus Dec 21, 2022
dcdf367
Merge branch 'main' into exampleapp-smart-select
ArtieReus Jan 11, 2023
0f83a10
[example-app] reinstall floating ui
ArtieReus Jan 11, 2023
672e037
synch with elektra implementation
ArtieReus Jan 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions apps/exampleapp/apiserver.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
})
Expand Down
1 change: 1 addition & 0 deletions apps/exampleapp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
222 changes: 222 additions & 0 deletions apps/exampleapp/public/secretOptions.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
]
2 changes: 2 additions & 0 deletions apps/exampleapp/src/AppContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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>
Expand Down
17 changes: 16 additions & 1 deletion apps/exampleapp/src/actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
Loading