From 195fd9847b97fb94c7d4eae5005269517c8b8d24 Mon Sep 17 00:00:00 2001 From: Luke Hagar Date: Mon, 16 Oct 2023 15:51:15 -0500 Subject: [PATCH] Search Page --- docusaurus.config.js | 2 + package-lock.json | 489 +++++++++++++++++++++++--- package.json | 6 +- src/components/Search/Panel.tsx | 19 + src/components/Search/Refresh.css | 33 ++ src/components/Search/Refresh.tsx | 33 ++ src/components/Search/layout/Tabs.css | 44 +++ src/components/Search/layout/Tabs.tsx | 87 +++++ src/css/custom.css | 18 +- src/pages/search.css | 86 +++++ src/pages/search.tsx | 182 ++++++++++ 11 files changed, 950 insertions(+), 49 deletions(-) create mode 100644 src/components/Search/Panel.tsx create mode 100644 src/components/Search/Refresh.css create mode 100644 src/components/Search/Refresh.tsx create mode 100644 src/components/Search/layout/Tabs.css create mode 100644 src/components/Search/layout/Tabs.tsx create mode 100644 src/pages/search.css create mode 100644 src/pages/search.tsx diff --git a/docusaurus.config.js b/docusaurus.config.js index a3e11aaf5..b7dbd2be5 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -79,6 +79,8 @@ const config = { darkTheme: darkCodeTheme, additionalLanguages: ['http', 'java', 'ruby', 'php', 'csharp'], }, + // Optional: path for search page that enabled by default (`false` to disable it) + searchPagePath: 'search', }), plugins: plugins, diff --git a/package-lock.json b/package-lock.json index cbe9b77d2..cdec8fb81 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,12 +18,16 @@ "clsx": "^1.1.1", "docusaurus-plugin-openapi-docs": "^1.5.1", "docusaurus-theme-openapi-docs": "^1.5.1", + "instantsearch.css": "^8.0.0", + "instantsearch.js": "^4.56.10", "prism-react-renderer": "^1.3.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-instantsearch": "^7.0.1", "react-markdown": "^8.0.7", "react-spinners": "^0.13.8", - "react-tabs": "^4.3.0" + "react-tabs": "^4.3.0", + "search-insights": "^2.8.2" }, "devDependencies": { "@docusaurus/core": "2.2.0", @@ -64,7 +68,6 @@ }, "node_modules/@algolia/cache-browser-local-storage": { "version": "4.14.3", - "dev": true, "license": "MIT", "dependencies": { "@algolia/cache-common": "4.14.3" @@ -72,12 +75,10 @@ }, "node_modules/@algolia/cache-common": { "version": "4.14.3", - "dev": true, "license": "MIT" }, "node_modules/@algolia/cache-in-memory": { "version": "4.14.3", - "dev": true, "license": "MIT", "dependencies": { "@algolia/cache-common": "4.14.3" @@ -85,7 +86,6 @@ }, "node_modules/@algolia/client-account": { "version": "4.14.3", - "dev": true, "license": "MIT", "dependencies": { "@algolia/client-common": "4.14.3", @@ -95,7 +95,6 @@ }, "node_modules/@algolia/client-analytics": { "version": "4.14.3", - "dev": true, "license": "MIT", "dependencies": { "@algolia/client-common": "4.14.3", @@ -106,7 +105,6 @@ }, "node_modules/@algolia/client-common": { "version": "4.14.3", - "dev": true, "license": "MIT", "dependencies": { "@algolia/requester-common": "4.14.3", @@ -115,7 +113,6 @@ }, "node_modules/@algolia/client-personalization": { "version": "4.14.3", - "dev": true, "license": "MIT", "dependencies": { "@algolia/client-common": "4.14.3", @@ -125,7 +122,6 @@ }, "node_modules/@algolia/client-search": { "version": "4.14.3", - "dev": true, "license": "MIT", "dependencies": { "@algolia/client-common": "4.14.3", @@ -135,17 +131,14 @@ }, "node_modules/@algolia/events": { "version": "4.0.1", - "dev": true, "license": "MIT" }, "node_modules/@algolia/logger-common": { "version": "4.14.3", - "dev": true, "license": "MIT" }, "node_modules/@algolia/logger-console": { "version": "4.14.3", - "dev": true, "license": "MIT", "dependencies": { "@algolia/logger-common": "4.14.3" @@ -153,7 +146,6 @@ }, "node_modules/@algolia/requester-browser-xhr": { "version": "4.14.3", - "dev": true, "license": "MIT", "dependencies": { "@algolia/requester-common": "4.14.3" @@ -161,12 +153,10 @@ }, "node_modules/@algolia/requester-common": { "version": "4.14.3", - "dev": true, "license": "MIT" }, "node_modules/@algolia/requester-node-http": { "version": "4.14.3", - "dev": true, "license": "MIT", "dependencies": { "@algolia/requester-common": "4.14.3" @@ -174,7 +164,6 @@ }, "node_modules/@algolia/transporter": { "version": "4.14.3", - "dev": true, "license": "MIT", "dependencies": { "@algolia/cache-common": "4.14.3", @@ -182,6 +171,20 @@ "@algolia/requester-common": "4.14.3" } }, + "node_modules/@algolia/ui-components-highlight-vdom": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@algolia/ui-components-highlight-vdom/-/ui-components-highlight-vdom-1.2.1.tgz", + "integrity": "sha512-IlYgIaCUEkz9ezNbwugwKv991oOHhveyq6nzL0F1jDzg1p3q5Yj/vO4KpNG910r2dwGCG3nEm5GtChcLnarhFA==", + "dependencies": { + "@algolia/ui-components-shared": "1.2.1", + "@babel/runtime": "^7.0.0" + } + }, + "node_modules/@algolia/ui-components-shared": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@algolia/ui-components-shared/-/ui-components-shared-1.2.1.tgz", + "integrity": "sha512-a7mYHf/GVQfhAx/HRiMveKkFvHspQv/REdG+C/FIOosiSmNZxX7QebDwJkrGSmDWdXO12D0Qv1xn3AytFcEDlQ==" + }, "node_modules/@ampproject/remapping": { "version": "2.2.0", "license": "Apache-2.0", @@ -3504,6 +3507,11 @@ "@types/ms": "*" } }, + "node_modules/@types/dom-speech-recognition": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/@types/dom-speech-recognition/-/dom-speech-recognition-0.0.1.tgz", + "integrity": "sha512-udCxb8DvjcDKfk1WTBzDsxFbLgYxmQGKrE/ricoMqHRNjSlSUCcamVTA5lIQqzY10mY5qCY0QDwBfFEwhfoDPw==" + }, "node_modules/@types/eslint": { "version": "8.4.10", "license": "MIT", @@ -3543,6 +3551,11 @@ "@types/range-parser": "*" } }, + "node_modules/@types/google.maps": { + "version": "3.54.0", + "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.54.0.tgz", + "integrity": "sha512-b1MBy2eGrZoEFLnzq1RrlHbfzuWHz+Nitgqbb5N+MFA0kAUv0kYPmAXtczpb4dHlFZyu58EYzcKXtWNqSInyXg==" + }, "node_modules/@types/hast": { "version": "2.3.4", "license": "MIT", @@ -3554,6 +3567,11 @@ "version": "4.7.11", "license": "MIT" }, + "node_modules/@types/hogan.js": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@types/hogan.js/-/hogan.js-3.0.1.tgz", + "integrity": "sha512-D03i/2OY7kGyMq9wdQ7oD8roE49z/ZCZThe/nbahtvuqCNZY9T2MfedOWyeBdbEpY2W8Gnh/dyJLdFtUCOkYbg==" + }, "node_modules/@types/hoist-non-react-statics": { "version": "3.3.1", "license": "MIT", @@ -3868,6 +3886,11 @@ "version": "4.2.2", "license": "Apache-2.0" }, + "node_modules/abbrev": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==" + }, "node_modules/accepts": { "version": "1.3.8", "license": "MIT", @@ -3928,7 +3951,6 @@ }, "node_modules/algoliasearch": { "version": "4.14.3", - "dev": true, "license": "MIT", "dependencies": { "@algolia/cache-browser-local-storage": "4.14.3", @@ -3948,9 +3970,9 @@ } }, "node_modules/algoliasearch-helper": { - "version": "3.11.3", - "dev": true, - "license": "MIT", + "version": "3.14.0", + "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.14.0.tgz", + "integrity": "sha512-gXDXzsSS0YANn5dHr71CUXOo84cN4azhHKUbg71vAWnH+1JBiR4jf7to3t3JHXknXkbV0F7f055vUSBKrltHLQ==", "dependencies": { "@algolia/events": "^4.0.1" }, @@ -4518,7 +4540,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001449", + "version": "1.0.30001532", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001532.tgz", + "integrity": "sha512-FbDFnNat3nMnrROzqrsg314zhqN5LGQ1kyyMk2opcrwGbVGpHRhgCWtAgD5YJUqNAiQ+dklreil/c3Qf1dfCTw==", "funding": [ { "type": "opencollective", @@ -4527,9 +4551,12 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } - ], - "license": "CC-BY-4.0" + ] }, "node_modules/ccount": { "version": "1.1.0", @@ -7735,6 +7762,18 @@ "value-equal": "^1.0.1" } }, + "node_modules/hogan.js": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/hogan.js/-/hogan.js-3.0.2.tgz", + "integrity": "sha512-RqGs4wavGYJWE07t35JQccByczmNUXQT0E12ZYV1VKYu5UiAU9lsos/yBAcf840+zrUQQxgVduCR5/B8nNtibg==", + "dependencies": { + "mkdirp": "0.3.0", + "nopt": "1.0.10" + }, + "bin": { + "hulk": "bin/hulk" + } + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "license": "BSD-3-Clause", @@ -7780,6 +7819,11 @@ "safe-buffer": "~5.1.0" } }, + "node_modules/htm": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/htm/-/htm-3.1.1.tgz", + "integrity": "sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==" + }, "node_modules/html-entities": { "version": "2.3.3", "license": "MIT" @@ -8095,6 +8139,45 @@ "version": "0.1.1", "license": "MIT" }, + "node_modules/instantsearch.css": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/instantsearch.css/-/instantsearch.css-8.0.0.tgz", + "integrity": "sha512-yU63cF9KdkyFFh7ynYQy39nh1MD1eVDHIaa/gdm8a/O9dTG/5P6hBF1ONoIbKTtjlxxsHS2S8MarCZZ0l31ajg==" + }, + "node_modules/instantsearch.js": { + "version": "4.56.10", + "resolved": "https://registry.npmjs.org/instantsearch.js/-/instantsearch.js-4.56.10.tgz", + "integrity": "sha512-ViW2JGUgxcDaQ9/3CRBPrw0fK63XalsZnZhohYgdVZLAdacgGUPO8txWLJ5g2477XHtMS1T4sTYlyCyDIcCQ8A==", + "dependencies": { + "@algolia/events": "^4.0.1", + "@algolia/ui-components-highlight-vdom": "^1.2.1", + "@algolia/ui-components-shared": "^1.2.1", + "@types/dom-speech-recognition": "^0.0.1", + "@types/google.maps": "^3.45.3", + "@types/hogan.js": "^3.0.0", + "@types/qs": "^6.5.3", + "algoliasearch-helper": "3.14.0", + "hogan.js": "^3.0.2", + "htm": "^3.0.0", + "preact": "^10.10.0", + "qs": "^6.5.1 < 6.10", + "search-insights": "^2.6.0" + }, + "peerDependencies": { + "algoliasearch": ">= 3.1 < 6" + } + }, + "node_modules/instantsearch.js/node_modules/qs": { + "version": "6.9.7", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz", + "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==", + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/internmap": { "version": "2.0.3", "license": "ISC", @@ -9464,6 +9547,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/mkdirp": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz", + "integrity": "sha512-OHsdUcVAQ6pOtg5JYWpCBo9W/GySVuwvP9hueRMW7UqshC0tbfzLv8wjySTPm3tfUZ/21CE9E1pJagOA91Pxew==", + "deprecated": "Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)", + "engines": { + "node": "*" + } + }, "node_modules/moment-mini": { "version": "2.24.0", "license": "MIT" @@ -9634,6 +9726,20 @@ "version": "2.0.8", "license": "MIT" }, + "node_modules/nopt": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz", + "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==", + "dependencies": { + "abbrev": "1" + }, + "bin": { + "nopt": "bin/nopt.js" + }, + "engines": { + "node": "*" + } + }, "node_modules/normalize-path": { "version": "3.0.0", "license": "MIT", @@ -10786,6 +10892,15 @@ "node": ">=10" } }, + "node_modules/preact": { + "version": "10.17.1", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.17.1.tgz", + "integrity": "sha512-X9BODrvQ4Ekwv9GURm9AKAGaomqXmip7NQTZgY7gcNmr7XE83adOMJvd3N42id1tMFU7ojiynRsYnY6/BRFxLA==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, "node_modules/prepend-http": { "version": "2.0.0", "license": "MIT", @@ -11221,6 +11336,104 @@ "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-instantsearch": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/react-instantsearch/-/react-instantsearch-7.0.1.tgz", + "integrity": "sha512-Xi09wk3mjJ2/8TPm2/hbWPJLr7VtPv18JY73NGzUsVY6d5m9oRhOyLHTZUfyfnq641G8ROupQo7Vum5Csm8CLw==", + "dependencies": { + "@babel/runtime": "^7.1.2", + "instantsearch.js": "4.56.9", + "react-instantsearch-core": "7.0.1" + }, + "peerDependencies": { + "algoliasearch": ">= 3.1 < 5", + "react": ">= 16.8.0 < 19", + "react-dom": ">= 16.8.0 < 19" + } + }, + "node_modules/react-instantsearch-core": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/react-instantsearch-core/-/react-instantsearch-core-7.0.1.tgz", + "integrity": "sha512-qKe8sV03kyoc3HjEYmpGF2k038uaBV5Mzdxgf3ZUP1B7OyCPnzeC7YPvjZFZV89rvcfxr0lwzdExKVFV1GMR7g==", + "dependencies": { + "@babel/runtime": "^7.1.2", + "algoliasearch-helper": "3.14.0", + "instantsearch.js": "4.56.9", + "use-sync-external-store": "^1.0.0" + }, + "peerDependencies": { + "algoliasearch": ">= 3.1 < 5", + "react": ">= 16.8.0 < 19" + } + }, + "node_modules/react-instantsearch-core/node_modules/instantsearch.js": { + "version": "4.56.9", + "resolved": "https://registry.npmjs.org/instantsearch.js/-/instantsearch.js-4.56.9.tgz", + "integrity": "sha512-jyRbByRUPm/ISVdRknCUDenZh65IDO2KE3GMP+RLSpcl3PV9TRfqFCbzoaSAwholbZW7sm3InBP7isCWyQMPlw==", + "dependencies": { + "@algolia/events": "^4.0.1", + "@algolia/ui-components-highlight-vdom": "^1.2.1", + "@algolia/ui-components-shared": "^1.2.1", + "@types/dom-speech-recognition": "^0.0.1", + "@types/google.maps": "^3.45.3", + "@types/hogan.js": "^3.0.0", + "@types/qs": "^6.5.3", + "algoliasearch-helper": "3.14.0", + "hogan.js": "^3.0.2", + "htm": "^3.0.0", + "preact": "^10.10.0", + "qs": "^6.5.1 < 6.10", + "search-insights": "^2.6.0" + }, + "peerDependencies": { + "algoliasearch": ">= 3.1 < 6" + } + }, + "node_modules/react-instantsearch-core/node_modules/qs": { + "version": "6.9.7", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz", + "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==", + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/react-instantsearch/node_modules/instantsearch.js": { + "version": "4.56.9", + "resolved": "https://registry.npmjs.org/instantsearch.js/-/instantsearch.js-4.56.9.tgz", + "integrity": "sha512-jyRbByRUPm/ISVdRknCUDenZh65IDO2KE3GMP+RLSpcl3PV9TRfqFCbzoaSAwholbZW7sm3InBP7isCWyQMPlw==", + "dependencies": { + "@algolia/events": "^4.0.1", + "@algolia/ui-components-highlight-vdom": "^1.2.1", + "@algolia/ui-components-shared": "^1.2.1", + "@types/dom-speech-recognition": "^0.0.1", + "@types/google.maps": "^3.45.3", + "@types/hogan.js": "^3.0.0", + "@types/qs": "^6.5.3", + "algoliasearch-helper": "3.14.0", + "hogan.js": "^3.0.2", + "htm": "^3.0.0", + "preact": "^10.10.0", + "qs": "^6.5.1 < 6.10", + "search-insights": "^2.6.0" + }, + "peerDependencies": { + "algoliasearch": ">= 3.1 < 6" + } + }, + "node_modules/react-instantsearch/node_modules/qs": { + "version": "6.9.7", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz", + "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==", + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/react-is": { "version": "16.13.1", "license": "MIT" @@ -12813,6 +13026,11 @@ "version": "0.4.1", "license": "MIT" }, + "node_modules/search-insights": { + "version": "2.8.2", + "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.8.2.tgz", + "integrity": "sha512-PxA9M5Q2bpBelVvJ3oDZR8nuY00Z6qwOxL53wNpgzV28M/D6u9WUbImDckjLSILBF8F1hn/mgyuUaOPtjow4Qw==" + }, "node_modules/section-matter": { "version": "1.0.0", "license": "MIT", @@ -14494,6 +14712,14 @@ } } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util": { "version": "0.10.4", "license": "MIT", @@ -15347,25 +15573,21 @@ }, "@algolia/cache-browser-local-storage": { "version": "4.14.3", - "dev": true, "requires": { "@algolia/cache-common": "4.14.3" } }, "@algolia/cache-common": { - "version": "4.14.3", - "dev": true + "version": "4.14.3" }, "@algolia/cache-in-memory": { "version": "4.14.3", - "dev": true, "requires": { "@algolia/cache-common": "4.14.3" } }, "@algolia/client-account": { "version": "4.14.3", - "dev": true, "requires": { "@algolia/client-common": "4.14.3", "@algolia/client-search": "4.14.3", @@ -15374,7 +15596,6 @@ }, "@algolia/client-analytics": { "version": "4.14.3", - "dev": true, "requires": { "@algolia/client-common": "4.14.3", "@algolia/client-search": "4.14.3", @@ -15384,7 +15605,6 @@ }, "@algolia/client-common": { "version": "4.14.3", - "dev": true, "requires": { "@algolia/requester-common": "4.14.3", "@algolia/transporter": "4.14.3" @@ -15392,7 +15612,6 @@ }, "@algolia/client-personalization": { "version": "4.14.3", - "dev": true, "requires": { "@algolia/client-common": "4.14.3", "@algolia/requester-common": "4.14.3", @@ -15401,7 +15620,6 @@ }, "@algolia/client-search": { "version": "4.14.3", - "dev": true, "requires": { "@algolia/client-common": "4.14.3", "@algolia/requester-common": "4.14.3", @@ -15409,47 +15627,54 @@ } }, "@algolia/events": { - "version": "4.0.1", - "dev": true + "version": "4.0.1" }, "@algolia/logger-common": { - "version": "4.14.3", - "dev": true + "version": "4.14.3" }, "@algolia/logger-console": { "version": "4.14.3", - "dev": true, "requires": { "@algolia/logger-common": "4.14.3" } }, "@algolia/requester-browser-xhr": { "version": "4.14.3", - "dev": true, "requires": { "@algolia/requester-common": "4.14.3" } }, "@algolia/requester-common": { - "version": "4.14.3", - "dev": true + "version": "4.14.3" }, "@algolia/requester-node-http": { "version": "4.14.3", - "dev": true, "requires": { "@algolia/requester-common": "4.14.3" } }, "@algolia/transporter": { "version": "4.14.3", - "dev": true, "requires": { "@algolia/cache-common": "4.14.3", "@algolia/logger-common": "4.14.3", "@algolia/requester-common": "4.14.3" } }, + "@algolia/ui-components-highlight-vdom": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@algolia/ui-components-highlight-vdom/-/ui-components-highlight-vdom-1.2.1.tgz", + "integrity": "sha512-IlYgIaCUEkz9ezNbwugwKv991oOHhveyq6nzL0F1jDzg1p3q5Yj/vO4KpNG910r2dwGCG3nEm5GtChcLnarhFA==", + "requires": { + "@algolia/ui-components-shared": "1.2.1", + "@babel/runtime": "^7.0.0" + } + }, + "@algolia/ui-components-shared": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@algolia/ui-components-shared/-/ui-components-shared-1.2.1.tgz", + "integrity": "sha512-a7mYHf/GVQfhAx/HRiMveKkFvHspQv/REdG+C/FIOosiSmNZxX7QebDwJkrGSmDWdXO12D0Qv1xn3AytFcEDlQ==" + }, "@ampproject/remapping": { "version": "2.2.0", "requires": { @@ -17500,6 +17725,11 @@ "@types/ms": "*" } }, + "@types/dom-speech-recognition": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/@types/dom-speech-recognition/-/dom-speech-recognition-0.0.1.tgz", + "integrity": "sha512-udCxb8DvjcDKfk1WTBzDsxFbLgYxmQGKrE/ricoMqHRNjSlSUCcamVTA5lIQqzY10mY5qCY0QDwBfFEwhfoDPw==" + }, "@types/eslint": { "version": "8.4.10", "requires": { @@ -17534,6 +17764,11 @@ "@types/range-parser": "*" } }, + "@types/google.maps": { + "version": "3.54.0", + "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.54.0.tgz", + "integrity": "sha512-b1MBy2eGrZoEFLnzq1RrlHbfzuWHz+Nitgqbb5N+MFA0kAUv0kYPmAXtczpb4dHlFZyu58EYzcKXtWNqSInyXg==" + }, "@types/hast": { "version": "2.3.4", "requires": { @@ -17543,6 +17778,11 @@ "@types/history": { "version": "4.7.11" }, + "@types/hogan.js": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@types/hogan.js/-/hogan.js-3.0.1.tgz", + "integrity": "sha512-D03i/2OY7kGyMq9wdQ7oD8roE49z/ZCZThe/nbahtvuqCNZY9T2MfedOWyeBdbEpY2W8Gnh/dyJLdFtUCOkYbg==" + }, "@types/hoist-non-react-statics": { "version": "3.3.1", "requires": { @@ -17808,6 +18048,11 @@ "@xtuc/long": { "version": "4.2.2" }, + "abbrev": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==" + }, "accepts": { "version": "1.3.8", "requires": { @@ -17842,7 +18087,6 @@ }, "algoliasearch": { "version": "4.14.3", - "dev": true, "requires": { "@algolia/cache-browser-local-storage": "4.14.3", "@algolia/cache-common": "4.14.3", @@ -17861,8 +18105,9 @@ } }, "algoliasearch-helper": { - "version": "3.11.3", - "dev": true, + "version": "3.14.0", + "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.14.0.tgz", + "integrity": "sha512-gXDXzsSS0YANn5dHr71CUXOo84cN4azhHKUbg71vAWnH+1JBiR4jf7to3t3JHXknXkbV0F7f055vUSBKrltHLQ==", "requires": { "@algolia/events": "^4.0.1" } @@ -18196,7 +18441,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001449" + "version": "1.0.30001532", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001532.tgz", + "integrity": "sha512-FbDFnNat3nMnrROzqrsg314zhqN5LGQ1kyyMk2opcrwGbVGpHRhgCWtAgD5YJUqNAiQ+dklreil/c3Qf1dfCTw==" }, "ccount": { "version": "1.1.0" @@ -20210,6 +20457,15 @@ "value-equal": "^1.0.1" } }, + "hogan.js": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/hogan.js/-/hogan.js-3.0.2.tgz", + "integrity": "sha512-RqGs4wavGYJWE07t35JQccByczmNUXQT0E12ZYV1VKYu5UiAU9lsos/yBAcf840+zrUQQxgVduCR5/B8nNtibg==", + "requires": { + "mkdirp": "0.3.0", + "nopt": "1.0.10" + } + }, "hoist-non-react-statics": { "version": "3.3.2", "requires": { @@ -20251,6 +20507,11 @@ } } }, + "htm": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/htm/-/htm-3.1.1.tgz", + "integrity": "sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==" + }, "html-entities": { "version": "2.3.3" }, @@ -20413,6 +20674,38 @@ "inline-style-parser": { "version": "0.1.1" }, + "instantsearch.css": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/instantsearch.css/-/instantsearch.css-8.0.0.tgz", + "integrity": "sha512-yU63cF9KdkyFFh7ynYQy39nh1MD1eVDHIaa/gdm8a/O9dTG/5P6hBF1ONoIbKTtjlxxsHS2S8MarCZZ0l31ajg==" + }, + "instantsearch.js": { + "version": "4.56.10", + "resolved": "https://registry.npmjs.org/instantsearch.js/-/instantsearch.js-4.56.10.tgz", + "integrity": "sha512-ViW2JGUgxcDaQ9/3CRBPrw0fK63XalsZnZhohYgdVZLAdacgGUPO8txWLJ5g2477XHtMS1T4sTYlyCyDIcCQ8A==", + "requires": { + "@algolia/events": "^4.0.1", + "@algolia/ui-components-highlight-vdom": "^1.2.1", + "@algolia/ui-components-shared": "^1.2.1", + "@types/dom-speech-recognition": "^0.0.1", + "@types/google.maps": "^3.45.3", + "@types/hogan.js": "^3.0.0", + "@types/qs": "^6.5.3", + "algoliasearch-helper": "3.14.0", + "hogan.js": "^3.0.2", + "htm": "^3.0.0", + "preact": "^10.10.0", + "qs": "^6.5.1 < 6.10", + "search-insights": "^2.6.0" + }, + "dependencies": { + "qs": { + "version": "6.9.7", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz", + "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==" + } + } + }, "internmap": { "version": "2.0.3" }, @@ -21134,6 +21427,11 @@ "minimist": { "version": "1.2.7" }, + "mkdirp": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz", + "integrity": "sha512-OHsdUcVAQ6pOtg5JYWpCBo9W/GySVuwvP9hueRMW7UqshC0tbfzLv8wjySTPm3tfUZ/21CE9E1pJagOA91Pxew==" + }, "moment-mini": { "version": "2.24.0" }, @@ -21241,6 +21539,14 @@ "node-releases": { "version": "2.0.8" }, + "nopt": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz", + "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==", + "requires": { + "abbrev": "1" + } + }, "normalize-path": { "version": "3.0.0" }, @@ -21865,6 +22171,11 @@ "punycode": "^2.1.1" } }, + "preact": { + "version": "10.17.1", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.17.1.tgz", + "integrity": "sha512-X9BODrvQ4Ekwv9GURm9AKAGaomqXmip7NQTZgY7gcNmr7XE83adOMJvd3N42id1tMFU7ojiynRsYnY6/BRFxLA==" + }, "prepend-http": { "version": "2.0.0" }, @@ -22136,6 +22447,81 @@ "shallowequal": "^1.1.0" } }, + "react-instantsearch": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/react-instantsearch/-/react-instantsearch-7.0.1.tgz", + "integrity": "sha512-Xi09wk3mjJ2/8TPm2/hbWPJLr7VtPv18JY73NGzUsVY6d5m9oRhOyLHTZUfyfnq641G8ROupQo7Vum5Csm8CLw==", + "requires": { + "@babel/runtime": "^7.1.2", + "instantsearch.js": "4.56.9", + "react-instantsearch-core": "7.0.1" + }, + "dependencies": { + "instantsearch.js": { + "version": "4.56.9", + "resolved": "https://registry.npmjs.org/instantsearch.js/-/instantsearch.js-4.56.9.tgz", + "integrity": "sha512-jyRbByRUPm/ISVdRknCUDenZh65IDO2KE3GMP+RLSpcl3PV9TRfqFCbzoaSAwholbZW7sm3InBP7isCWyQMPlw==", + "requires": { + "@algolia/events": "^4.0.1", + "@algolia/ui-components-highlight-vdom": "^1.2.1", + "@algolia/ui-components-shared": "^1.2.1", + "@types/dom-speech-recognition": "^0.0.1", + "@types/google.maps": "^3.45.3", + "@types/hogan.js": "^3.0.0", + "@types/qs": "^6.5.3", + "algoliasearch-helper": "3.14.0", + "hogan.js": "^3.0.2", + "htm": "^3.0.0", + "preact": "^10.10.0", + "qs": "^6.5.1 < 6.10", + "search-insights": "^2.6.0" + } + }, + "qs": { + "version": "6.9.7", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz", + "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==" + } + } + }, + "react-instantsearch-core": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/react-instantsearch-core/-/react-instantsearch-core-7.0.1.tgz", + "integrity": "sha512-qKe8sV03kyoc3HjEYmpGF2k038uaBV5Mzdxgf3ZUP1B7OyCPnzeC7YPvjZFZV89rvcfxr0lwzdExKVFV1GMR7g==", + "requires": { + "@babel/runtime": "^7.1.2", + "algoliasearch-helper": "3.14.0", + "instantsearch.js": "4.56.9", + "use-sync-external-store": "^1.0.0" + }, + "dependencies": { + "instantsearch.js": { + "version": "4.56.9", + "resolved": "https://registry.npmjs.org/instantsearch.js/-/instantsearch.js-4.56.9.tgz", + "integrity": "sha512-jyRbByRUPm/ISVdRknCUDenZh65IDO2KE3GMP+RLSpcl3PV9TRfqFCbzoaSAwholbZW7sm3InBP7isCWyQMPlw==", + "requires": { + "@algolia/events": "^4.0.1", + "@algolia/ui-components-highlight-vdom": "^1.2.1", + "@algolia/ui-components-shared": "^1.2.1", + "@types/dom-speech-recognition": "^0.0.1", + "@types/google.maps": "^3.45.3", + "@types/hogan.js": "^3.0.0", + "@types/qs": "^6.5.3", + "algoliasearch-helper": "3.14.0", + "hogan.js": "^3.0.2", + "htm": "^3.0.0", + "preact": "^10.10.0", + "qs": "^6.5.1 < 6.10", + "search-insights": "^2.6.0" + } + }, + "qs": { + "version": "6.9.7", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz", + "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==" + } + } + }, "react-is": { "version": "16.13.1" }, @@ -23099,6 +23485,11 @@ } } }, + "search-insights": { + "version": "2.8.2", + "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.8.2.tgz", + "integrity": "sha512-PxA9M5Q2bpBelVvJ3oDZR8nuY00Z6qwOxL53wNpgzV28M/D6u9WUbImDckjLSILBF8F1hn/mgyuUaOPtjow4Qw==" + }, "section-matter": { "version": "1.0.0", "requires": { @@ -24102,6 +24493,12 @@ "use-isomorphic-layout-effect": "^1.1.1" } }, + "use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "requires": {} + }, "util": { "version": "0.10.4", "requires": { diff --git a/package.json b/package.json index 5d559bc71..fef6b2be7 100644 --- a/package.json +++ b/package.json @@ -31,12 +31,16 @@ "clsx": "^1.1.1", "docusaurus-plugin-openapi-docs": "^1.5.1", "docusaurus-theme-openapi-docs": "^1.5.1", + "instantsearch.css": "^8.0.0", + "instantsearch.js": "^4.56.10", "prism-react-renderer": "^1.3.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-instantsearch": "^7.0.1", "react-markdown": "^8.0.7", "react-spinners": "^0.13.8", - "react-tabs": "^4.3.0" + "react-tabs": "^4.3.0", + "search-insights": "^2.8.2" }, "overrides": { "mermaid": "9.1.7" diff --git a/src/components/Search/Panel.tsx b/src/components/Search/Panel.tsx new file mode 100644 index 000000000..a33975f38 --- /dev/null +++ b/src/components/Search/Panel.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +export function Panel({ + children, + header, + footer, +}: { + children: React.ReactNode; + header?: React.ReactNode; + footer?: React.ReactNode; +}) { + return ( +
+ {header &&
{header}
} +
{children}
+ {footer &&
{footer}
} +
+ ); +} diff --git a/src/components/Search/Refresh.css b/src/components/Search/Refresh.css new file mode 100644 index 000000000..e277f8bbb --- /dev/null +++ b/src/components/Search/Refresh.css @@ -0,0 +1,33 @@ +.Refresh { + height: 100%; + padding: 0 1rem; + margin: 0; + font-family: inherit; + font-size: 0.875rem; + color: #23263b; + background: linear-gradient(-180deg, #fff, #fcfcfd); + border: 1px solid #d6d6e7; + border-radius: 3px; + box-shadow: 0 1px 0 0 rgb(35 38 59 / 5%); + line-height: 2rem; + cursor: pointer; + align-items: center; + justify-content: center; + display: flex; +} + +.Refresh:hover { + background: linear-gradient(-180deg, #fff, #f5f5fa); +} + +.Refresh:hover svg { + transform: rotate(-180deg); +} + +.Refresh svg { + transition: transform 0.5s ease-out; +} + +.Refresh:active svg { + transform: rotate(-360deg); +} diff --git a/src/components/Search/Refresh.tsx b/src/components/Search/Refresh.tsx new file mode 100644 index 000000000..cb3e30a50 --- /dev/null +++ b/src/components/Search/Refresh.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import {useInstantSearch} from 'react-instantsearch'; +import './Refresh.css'; + +export function Refresh() { + const {refresh} = useInstantSearch(); + + return ( + + ); +} diff --git a/src/components/Search/layout/Tabs.css b/src/components/Search/layout/Tabs.css new file mode 100644 index 000000000..78062afa3 --- /dev/null +++ b/src/components/Search/layout/Tabs.css @@ -0,0 +1,44 @@ +.Tabs-header { + display: flex; +} + +.Tabs-title { + padding: 0 1rem; + flex: 1; + font-family: inherit; + font-size: 0.875rem; + color: #23263b; + background: linear-gradient(-180deg, #fff, #fcfcfd); + border: 1px solid #d6d6e7; + box-shadow: 0 1px 0 0 rgb(35 38 59 / 5%); + text-align: center; + line-height: 2rem; + cursor: pointer; +} + +.Tabs-title:first-child { + border-radius: 3px 0 0 3px; +} + +.Tabs-title:last-child { + border-radius: 0 3px 3px 0; +} + +.Tabs-title:hover { + background: linear-gradient(-180deg, #fff, #f5f5fa); +} + +.Tabs-title + .Tabs-title { + margin-left: -1px; +} + +.Tabs-title--active { + font-weight: bold; + box-shadow: inset 0 1px 4px 0 rgb(119 122 175 / 40%), + inset 0 1px 1px 0 rgb(119 122 175 / 40%), 0 1px 0 0 rgb(35 38 59 / 5%); + z-index: 1; +} + +.Tabs-list { + margin-top: 1rem; +} diff --git a/src/components/Search/layout/Tabs.tsx b/src/components/Search/layout/Tabs.tsx new file mode 100644 index 000000000..3598a4a81 --- /dev/null +++ b/src/components/Search/layout/Tabs.tsx @@ -0,0 +1,87 @@ +import React, { useEffect, useRef, useState } from 'react'; + +function cx( + ...classNames: Array + ) { + return classNames.filter(Boolean).join(" "); + } + +import './Tabs.css'; + +export type TabProps = { + children: React.ReactNode; + title: string; +}; + +const getTabId = (index: number, suffix?: string) => + [`tab-${index}`, suffix].filter(Boolean).join('-'); + +export function Tabs({ children }: { children: React.ReactNode }) { + const firstRender = useRef(true); + const [currentTab, setCurrentTab] = useState(0); + const tabsRefs = useRef([]); + + useEffect(() => { + if (!firstRender.current && tabsRefs.current) { + tabsRefs.current[currentTab].focus(); + } + }, [currentTab]); + + useEffect(() => { + firstRender.current = false; + }, []); + + const onKeyDown = ({ key }: React.KeyboardEvent) => { + if (key === 'ArrowLeft') { + setCurrentTab(Math.max(0, currentTab - 1)); + } else if (key === 'ArrowRight') { + setCurrentTab( + Math.min(currentTab + 1, React.Children.count(children) - 1) + ); + } + }; + + return ( +
+
+ {React.Children.map(children, (child, index) => { + const isSelected = currentTab === index; + return ( + + ); + })} +
+
+ {React.Children.map(children, (child, index) => ( + + ))} +
+
+ ); +} + +export function Tab({ children }: TabProps) { + return <>{children}; +} diff --git a/src/css/custom.css b/src/css/custom.css index 8df9c31a9..e64c087ce 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -237,6 +237,15 @@ --ifm-color-secondary: #cc27b0; --ifm-link-color: #0188f7; + --white: #ffffff; + --cobalt: #0033a1; + --blue: #0071ce; + --aqua: #54c0e8; + --hotpink: #cc27b0; + --darkgray: #415364; + --lightgray: #dae1e9; + --neongreen: #93d500; + --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); --dev-text-color-cobalt: #0033a1; @@ -452,7 +461,12 @@ ul { } div[class^='announcementBar_'] { - background: repeating-linear-gradient(145deg,rgba(0,51,161,1),rgba(0,79,181,1),rgba(0,113,206,1)); + background: repeating-linear-gradient( + 145deg, + rgba(0, 51, 161, 1), + rgba(0, 79, 181, 1), + rgba(0, 113, 206, 1) + ); color: #ffffff; height: 35px; -} \ No newline at end of file +} diff --git a/src/pages/search.css b/src/pages/search.css new file mode 100644 index 000000000..8a138bc1f --- /dev/null +++ b/src/pages/search.css @@ -0,0 +1,86 @@ +main { + font-family: Poppins; + padding: 0.5rem; + max-width: 1300px; + margin: 0 auto; +} + +img { + max-width: 100%; +} + +.Container { + display: grid; + align-items: flex-start; + grid-template-columns: minmax(min-content, 200px) 1fr; + gap: 5rem; +} + +.Refinements { + padding-top: 3rem; + max-width: 300px; +} + +.Search { + display: grid; + gap: 0.5rem; +} + +.Search-header { + display: grid; + align-items: flex-start; + grid-template-columns: 1fr auto auto auto; + gap: 0.5rem; +} + +.CurrentRefinements { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.5em; +} + +.Hit-label { + flex: 1; + margin-right: 1rem; +} + +.Hit-price { + color: lightslategray; +} + +.Pagination { + display: flex; + justify-content: center; + padding: 1rem 0; + margin: 0 auto; +} + +.ais-CurrentRefinements-label { + text-transform: capitalize; +} + +.ais-PoweredBy { + margin-top: 0.5rem; +} + +.ais-PoweredBy-logo { + height: 1rem; +} + +.resultTags { + font-size: 0.7rem; + color: var(--darkgray); +} + +.resultLink { + font-size: 0.7rem; + opacity: 0.7; + color: var(--darkgray); +} + +.resultCategory { + font-weight: 600; + font-size: 0.9rem; + color: var(--darkgray); +} diff --git a/src/pages/search.tsx b/src/pages/search.tsx new file mode 100644 index 000000000..472bbb68d --- /dev/null +++ b/src/pages/search.tsx @@ -0,0 +1,182 @@ +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import Layout from '@theme/Layout'; +import algoliasearch from 'algoliasearch/lite'; +import React from 'react'; +import { + ClearRefinements, + Configure, + CurrentRefinements, + DynamicWidgets, + Highlight, + Hits, + HitsPerPage, + Index, + InstantSearch, + Pagination, + PoweredBy, + RefinementList, + SearchBox, +} from 'react-instantsearch'; + +import 'instantsearch.css/themes/satellite-min.css'; +import aa from 'search-insights'; +import {Panel} from '../components/Search/Panel'; +import {Refresh} from '../components/Search/Refresh'; +import './search.css'; + +function DocHit({hit}) { + console.log(hit); + return ( + <> + +
+ {hit.hierarchy.lvl0} + {hit.hierarchy.lvl1 == hit.hierarchy.lvl0 + ? '' + : ' | ' + hit.hierarchy.lvl1} +
+
{hit.hierarchy.lvl2}
+ +
{hit.tags.join(', ')}
+ +
{hit.url_without_anchor}
+ + + ); +} + +function ForumHit({hit}) { + return ( + <> + +
{hit.category.name}
+
{hit.topic.title}
+ {hit.topic.tags.join(', ')} + +
+ {'https://developer.sailpoint.com/discuss' + hit.url} +
+ + + ); +} + +export default function Search() { + const {siteConfig} = useDocusaurusContext(); + const {appId, apiKey, indexName} = siteConfig.themeConfig.algolia as { + appId: string; + apiKey: string; + indexName: string; + }; + const searchClient = algoliasearch(appId, apiKey); + aa('init', { + appId: appId, + apiKey: apiKey, + useCookie: true, + }); + + let anonymousUserToken; + + aa('getUserToken', {}, (err, userToken) => { + if (err) { + console.error(err); + return; + } + + anonymousUserToken = userToken; + }); + + if (anonymousUserToken) { + aa('setUserToken', anonymousUserToken); + } + + return ( + +
+ + + +
+
+ + + + + {/* + + */} + + + + +
+
+ +
+ + + + +
+ +
+ + + items.map((item) => { + const label = item.label + .toLowerCase() + .startsWith('hierarchy.lvl') + ? 'Hierarchy' + : item.label; + + return { + ...item, + attribute: label, + }; + }) + } + /> +
+ + + + + {/* + + */} + + +
+
+ +
+ + ); +}