@red-hat-developer-hub/backstage-plugin-global-header 0.0.4 → 0.2.0

package/dist/components/SearchComponent/SearchBar.esm.js

@@ -1,24 +1,32 @@
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { SearchResultState } from '@backstage/plugin-search-react';
 import Autocomplete from '@mui/material/Autocomplete';
 import { createSearchLink } from '../../utils/stringUtils.esm.js';
 import { useNavigate } from 'react-router-dom';
 import { SearchInput } from './SearchInput.esm.js';
 import { SearchOption } from './SearchOption.esm.js';
+import { useTheme } from '@mui/material/styles';
 
 const SearchBar = (props) => {
   const { query, setSearchTerm } = props;
   const navigate = useNavigate();
+  const theme = useTheme();
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const highlightedIndexRef = useRef(highlightedIndex);
+  useEffect(() => {
+    highlightedIndexRef.current = highlightedIndex;
+  }, [highlightedIndex]);
   return /* @__PURE__ */ React.createElement(SearchResultState, { ...props }, ({ loading, error, value }) => {
     const results = query?.term ? value?.results ?? [] : [];
     let options = [];
+    if (query?.term && results.length === 0) {
+      options = ["No results found"];
+    }
     if (results.length > 0) {
       options = [
         ...results.map((result) => result.document.title),
         `${query?.term}`
       ];
-    } else if (query?.term) {
-      options = ["No results found"];
     }
     const searchLink = createSearchLink(query?.term ?? "");
     return /* @__PURE__ */ React.createElement(
@@ -27,17 +35,39 @@ const SearchBar = (props) => {
         freeSolo: true,
         options,
         loading,
+        value: query?.term ?? "",
         getOptionLabel: (option) => option ?? "",
         onInputChange: (_, inputValue) => setSearchTerm(inputValue),
-        sx: { width: "100%" },
+        onHighlightChange: (_, option) => setHighlightedIndex(options.indexOf(option ?? "")),
+        componentsProps: {
+          paper: {
+            sx: {
+              borderRadius: "4px",
+              outline: "unset",
+              border: `1px solid ${theme.palette.divider}`,
+              boxShadow: theme.palette.mode === "dark" ? `0 2px 6px 2px rgba(0, 0, 0, 0.50), 0 1px 2px 0 rgba(0, 0, 0, 0.50)` : "0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)"
+            }
+          }
+        },
+        sx: {
+          width: "100%",
+          '& [class*="MuiAutocomplete-clearIndicator"]': {
+            visibility: query?.term ? "visible" : "hidden"
+          }
+        },
         filterOptions: (x) => x,
-        getOptionDisabled: (option) => option === "No results found",
         onKeyDown: (event) => {
+          const currentHighlight = highlightedIndexRef.current;
           if (event.key === "Enter") {
             event.preventDefault();
-            if (query?.term) {
+            if (currentHighlight === -1 && query?.term) {
               navigate(searchLink);
+            } else if (currentHighlight !== -1) {
+              navigate(
+                results[highlightedIndex]?.document?.location ?? searchLink
+              );
             }
+            setHighlightedIndex(-1);
           }
         },
         renderInput: (params) => /* @__PURE__ */ React.createElement(
@@ -61,7 +91,7 @@ const SearchBar = (props) => {
           }
         ),
         ListboxProps: {
-          style: { maxHeight: 600 }
+          sx: { maxHeight: "60vh" }
         }
       }
     );

package/dist/components/SearchComponent/SearchBar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.esm.js","sources":["../../../src/components/SearchComponent/SearchBar.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport {\n  SearchResultState,\n  SearchResultProps,\n} from '@backstage/plugin-search-react';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport { createSearchLink } from '../../utils/stringUtils';\nimport { useNavigate } from 'react-router-dom';\nimport { SearchInput } from './SearchInput';\nimport { SearchOption } from './SearchOption';\n\ninterface SearchBarProps {\n  query: SearchResultProps['query'];\n  setSearchTerm: (term: string) => void;\n}\nexport const SearchBar = (props: SearchBarProps) => {\n  const { query, setSearchTerm } = props;\n  const navigate = useNavigate();\n\n  return (\n    <SearchResultState {...props}>\n      {({ loading, error, value }) => {\n        const results = query?.term ? value?.results ?? [] : [];\n        let options: string[] = [];\n        if (results.length > 0) {\n          options = [\n            ...results.map(result => result.document.title),\n            `${query?.term}`,\n          ];\n        } else if (query?.term) {\n          options = ['No results found'];\n        }\n        const searchLink = createSearchLink(query?.term ?? '');\n\n        return (\n          <Autocomplete\n            freeSolo\n            options={options}\n            loading={loading}\n            getOptionLabel={option => option ?? ''}\n            onInputChange={(_, inputValue) => setSearchTerm(inputValue)}\n            sx={{ width: '100%' }}\n            filterOptions={x => x}\n            getOptionDisabled={option => option === 'No results found'}\n            onKeyDown={event => {\n              if (event.key === 'Enter') {\n                event.preventDefault();\n                if (query?.term) {\n                  navigate(searchLink);\n                }\n              }\n            }}\n            renderInput={params => (\n              <SearchInput\n                params={params}\n                error={!!error}\n                helperText={error ? 'Error fetching results' : ''}\n              />\n            )}\n            renderOption={(renderProps, option, { index }) => (\n              <SearchOption\n                option={option}\n                index={index}\n                options={options}\n                query={query}\n                results={results}\n                renderProps={renderProps}\n                searchLink={searchLink}\n              />\n            )}\n            ListboxProps={{\n              style: { maxHeight: 600 },\n            }}\n          />\n        );\n      }}\n    </SearchResultState>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA+Ba,MAAA,SAAA,GAAY,CAAC,KAA0B,KAAA;AAClD,EAAM,MAAA,EAAE,KAAO,EAAA,aAAA,EAAkB,GAAA,KAAA;AACjC,EAAA,MAAM,WAAW,WAAY,EAAA;AAE7B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,qBAAmB,GAAG,KAAA,EAAA,EACpB,CAAC,EAAE,OAAA,EAAS,KAAO,EAAA,KAAA,EAAY,KAAA;AAC9B,IAAA,MAAM,UAAU,KAAO,EAAA,IAAA,GAAO,OAAO,OAAW,IAAA,KAAK,EAAC;AACtD,IAAA,IAAI,UAAoB,EAAC;AACzB,IAAI,IAAA,OAAA,CAAQ,SAAS,CAAG,EAAA;AACtB,MAAU,OAAA,GAAA;AAAA,QACR,GAAG,OAAQ,CAAA,GAAA,CAAI,CAAU,MAAA,KAAA,MAAA,CAAO,SAAS,KAAK,CAAA;AAAA,QAC9C,CAAA,EAAG,OAAO,IAAI,CAAA;AAAA,OAChB;AAAA,KACF,MAAA,IAAW,OAAO,IAAM,EAAA;AACtB,MAAA,OAAA,GAAU,CAAC,kBAAkB,CAAA;AAAA;AAE/B,IAAA,MAAM,UAAa,GAAA,gBAAA,CAAiB,KAAO,EAAA,IAAA,IAAQ,EAAE,CAAA;AAErD,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAQ,EAAA,IAAA;AAAA,QACR,OAAA;AAAA,QACA,OAAA;AAAA,QACA,cAAA,EAAgB,YAAU,MAAU,IAAA,EAAA;AAAA,QACpC,aAAe,EAAA,CAAC,CAAG,EAAA,UAAA,KAAe,cAAc,UAAU,CAAA;AAAA,QAC1D,EAAA,EAAI,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,QACpB,eAAe,CAAK,CAAA,KAAA,CAAA;AAAA,QACpB,iBAAA,EAAmB,YAAU,MAAW,KAAA,kBAAA;AAAA,QACxC,WAAW,CAAS,KAAA,KAAA;AAClB,UAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,YAAA,KAAA,CAAM,cAAe,EAAA;AACrB,YAAA,IAAI,OAAO,IAAM,EAAA;AACf,cAAA,QAAA,CAAS,UAAU,CAAA;AAAA;AACrB;AACF,SACF;AAAA,QACA,aAAa,CACX,MAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,KAAA,EAAO,CAAC,CAAC,KAAA;AAAA,YACT,UAAA,EAAY,QAAQ,wBAA2B,GAAA;AAAA;AAAA,SACjD;AAAA,QAEF,cAAc,CAAC,WAAA,EAAa,MAAQ,EAAA,EAAE,OACpC,qBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,KAAA;AAAA,YACA,OAAA;AAAA,YACA,KAAA;AAAA,YACA,OAAA;AAAA,YACA,WAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,QAEF,YAAc,EAAA;AAAA,UACZ,KAAA,EAAO,EAAE,SAAA,EAAW,GAAI;AAAA;AAC1B;AAAA,KACF;AAAA,GAGN,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SearchBar.esm.js","sources":["../../../src/components/SearchComponent/SearchBar.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport {\n  SearchResultState,\n  SearchResultProps,\n} from '@backstage/plugin-search-react';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport { createSearchLink } from '../../utils/stringUtils';\nimport { useNavigate } from 'react-router-dom';\nimport { SearchInput } from './SearchInput';\nimport { SearchOption } from './SearchOption';\nimport { useTheme } from '@mui/material/styles';\n\ninterface SearchBarProps {\n  query: SearchResultProps['query'];\n  setSearchTerm: (term: string) => void;\n}\nexport const SearchBar = (props: SearchBarProps) => {\n  const { query, setSearchTerm } = props;\n  const navigate = useNavigate();\n  const theme = useTheme();\n  const [highlightedIndex, setHighlightedIndex] = useState(-1);\n  const highlightedIndexRef = useRef(highlightedIndex);\n\n  useEffect(() => {\n    highlightedIndexRef.current = highlightedIndex;\n  }, [highlightedIndex]);\n\n  return (\n    <SearchResultState {...props}>\n      {({ loading, error, value }) => {\n        const results = query?.term ? value?.results ?? [] : [];\n        let options: string[] = [];\n        if (query?.term && results.length === 0) {\n          options = ['No results found'];\n        }\n        if (results.length > 0) {\n          options = [\n            ...results.map(result => result.document.title),\n            `${query?.term}`,\n          ];\n        }\n        const searchLink = createSearchLink(query?.term ?? '');\n\n        return (\n          <Autocomplete\n            freeSolo\n            options={options}\n            loading={loading}\n            value={query?.term ?? ''}\n            getOptionLabel={option => option ?? ''}\n            onInputChange={(_, inputValue) => setSearchTerm(inputValue)}\n            onHighlightChange={(_, option) =>\n              setHighlightedIndex(options.indexOf(option ?? ''))\n            }\n            componentsProps={{\n              paper: {\n                sx: {\n                  borderRadius: '4px',\n                  outline: 'unset',\n                  border: `1px solid ${theme.palette.divider}`,\n                  boxShadow:\n                    theme.palette.mode === 'dark'\n                      ? `0 2px 6px 2px rgba(0, 0, 0, 0.50), 0 1px 2px 0 rgba(0, 0, 0, 0.50)`\n                      : '0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)',\n                },\n              },\n            }}\n            sx={{\n              width: '100%',\n              '& [class*=\"MuiAutocomplete-clearIndicator\"]': {\n                visibility: query?.term ? 'visible' : 'hidden',\n              },\n            }}\n            filterOptions={x => x}\n            onKeyDown={event => {\n              const currentHighlight = highlightedIndexRef.current;\n              if (event.key === 'Enter') {\n                event.preventDefault();\n                if (currentHighlight === -1 && query?.term) {\n                  navigate(searchLink);\n                } else if (currentHighlight !== -1) {\n                  navigate(\n                    results[highlightedIndex]?.document?.location ?? searchLink,\n                  );\n                }\n                setHighlightedIndex(-1);\n              }\n            }}\n            renderInput={params => (\n              <SearchInput\n                params={params}\n                error={!!error}\n                helperText={error ? 'Error fetching results' : ''}\n              />\n            )}\n            renderOption={(renderProps, option, { index }) => (\n              <SearchOption\n                option={option}\n                index={index}\n                options={options}\n                query={query}\n                results={results}\n                renderProps={renderProps}\n                searchLink={searchLink}\n              />\n            )}\n            ListboxProps={{\n              sx: { maxHeight: '60vh' },\n            }}\n          />\n        );\n      }}\n    </SearchResultState>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAgCa,MAAA,SAAA,GAAY,CAAC,KAA0B,KAAA;AAClD,EAAM,MAAA,EAAE,KAAO,EAAA,aAAA,EAAkB,GAAA,KAAA;AACjC,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAS,CAAE,CAAA,CAAA;AAC3D,EAAM,MAAA,mBAAA,GAAsB,OAAO,gBAAgB,CAAA;AAEnD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,mBAAA,CAAoB,OAAU,GAAA,gBAAA;AAAA,GAChC,EAAG,CAAC,gBAAgB,CAAC,CAAA;AAErB,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,qBAAmB,GAAG,KAAA,EAAA,EACpB,CAAC,EAAE,OAAA,EAAS,KAAO,EAAA,KAAA,EAAY,KAAA;AAC9B,IAAA,MAAM,UAAU,KAAO,EAAA,IAAA,GAAO,OAAO,OAAW,IAAA,KAAK,EAAC;AACtD,IAAA,IAAI,UAAoB,EAAC;AACzB,IAAA,IAAI,KAAO,EAAA,IAAA,IAAQ,OAAQ,CAAA,MAAA,KAAW,CAAG,EAAA;AACvC,MAAA,OAAA,GAAU,CAAC,kBAAkB,CAAA;AAAA;AAE/B,IAAI,IAAA,OAAA,CAAQ,SAAS,CAAG,EAAA;AACtB,MAAU,OAAA,GAAA;AAAA,QACR,GAAG,OAAQ,CAAA,GAAA,CAAI,CAAU,MAAA,KAAA,MAAA,CAAO,SAAS,KAAK,CAAA;AAAA,QAC9C,CAAA,EAAG,OAAO,IAAI,CAAA;AAAA,OAChB;AAAA;AAEF,IAAA,MAAM,UAAa,GAAA,gBAAA,CAAiB,KAAO,EAAA,IAAA,IAAQ,EAAE,CAAA;AAErD,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAQ,EAAA,IAAA;AAAA,QACR,OAAA;AAAA,QACA,OAAA;AAAA,QACA,KAAA,EAAO,OAAO,IAAQ,IAAA,EAAA;AAAA,QACtB,cAAA,EAAgB,YAAU,MAAU,IAAA,EAAA;AAAA,QACpC,aAAe,EAAA,CAAC,CAAG,EAAA,UAAA,KAAe,cAAc,UAAU,CAAA;AAAA,QAC1D,iBAAA,EAAmB,CAAC,CAAG,EAAA,MAAA,KACrB,oBAAoB,OAAQ,CAAA,OAAA,CAAQ,MAAU,IAAA,EAAE,CAAC,CAAA;AAAA,QAEnD,eAAiB,EAAA;AAAA,UACf,KAAO,EAAA;AAAA,YACL,EAAI,EAAA;AAAA,cACF,YAAc,EAAA,KAAA;AAAA,cACd,OAAS,EAAA,OAAA;AAAA,cACT,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,OAAO,CAAA,CAAA;AAAA,cAC1C,SACE,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,SACnB,CACA,kEAAA,CAAA,GAAA;AAAA;AACR;AACF,SACF;AAAA,QACA,EAAI,EAAA;AAAA,UACF,KAAO,EAAA,MAAA;AAAA,UACP,6CAA+C,EAAA;AAAA,YAC7C,UAAA,EAAY,KAAO,EAAA,IAAA,GAAO,SAAY,GAAA;AAAA;AACxC,SACF;AAAA,QACA,eAAe,CAAK,CAAA,KAAA,CAAA;AAAA,QACpB,WAAW,CAAS,KAAA,KAAA;AAClB,UAAA,MAAM,mBAAmB,mBAAoB,CAAA,OAAA;AAC7C,UAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,YAAA,KAAA,CAAM,cAAe,EAAA;AACrB,YAAI,IAAA,gBAAA,KAAqB,CAAM,CAAA,IAAA,KAAA,EAAO,IAAM,EAAA;AAC1C,cAAA,QAAA,CAAS,UAAU,CAAA;AAAA,aACrB,MAAA,IAAW,qBAAqB,CAAI,CAAA,EAAA;AAClC,cAAA,QAAA;AAAA,gBACE,OAAQ,CAAA,gBAAgB,CAAG,EAAA,QAAA,EAAU,QAAY,IAAA;AAAA,eACnD;AAAA;AAEF,YAAA,mBAAA,CAAoB,CAAE,CAAA,CAAA;AAAA;AACxB,SACF;AAAA,QACA,aAAa,CACX,MAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,KAAA,EAAO,CAAC,CAAC,KAAA;AAAA,YACT,UAAA,EAAY,QAAQ,wBAA2B,GAAA;AAAA;AAAA,SACjD;AAAA,QAEF,cAAc,CAAC,WAAA,EAAa,MAAQ,EAAA,EAAE,OACpC,qBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,KAAA;AAAA,YACA,OAAA;AAAA,YACA,KAAA;AAAA,YACA,OAAA;AAAA,YACA,WAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,QAEF,YAAc,EAAA;AAAA,UACZ,EAAA,EAAI,EAAE,SAAA,EAAW,MAAO;AAAA;AAC1B;AAAA,KACF;AAAA,GAGN,CAAA;AAEJ;;;;"}

package/dist/components/SearchComponent/SearchComponent.esm.js

@@ -14,8 +14,7 @@ const SearchComponent = () => {
         display: "flex",
         flexDirection: "row",
         justifyContent: "start",
-        direction: "ltr",
-        mr: 4
+        direction: "ltr"
       }
     },
     /* @__PURE__ */ React.createElement(SearchBar, { query: { term: searchTerm }, setSearchTerm })

package/dist/components/SearchComponent/SearchComponent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchComponent.esm.js","sources":["../../../src/components/SearchComponent/SearchComponent.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useState } from 'react';\nimport Box from '@mui/material/Box';\nimport { SearchBar } from './SearchBar';\nimport { SearchContextProvider } from '@backstage/plugin-search-react';\n\nexport const SearchComponent = () => {\n  const [searchTerm, setSearchTerm] = useState<string>('');\n\n  return (\n    <SearchContextProvider>\n      <Box\n        sx={{\n          position: 'relative',\n          flexGrow: 1,\n          display: 'flex',\n          flexDirection: 'row',\n          justifyContent: 'start',\n          direction: 'ltr',\n          mr: 4,\n        }}\n      >\n        <SearchBar query={{ term: searchTerm }} setSearchTerm={setSearchTerm} />\n      </Box>\n    </SearchContextProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;AAqBO,MAAM,kBAAkB,MAAM;AACnC,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAiB,EAAE,CAAA;AAEvD,EAAA,2CACG,qBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,QAAU,EAAA,UAAA;AAAA,QACV,QAAU,EAAA,CAAA;AAAA,QACV,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,KAAA;AAAA,QACf,cAAgB,EAAA,OAAA;AAAA,QAChB,SAAW,EAAA,KAAA;AAAA,QACX,EAAI,EAAA;AAAA;AACN,KAAA;AAAA,wCAEC,SAAU,EAAA,EAAA,KAAA,EAAO,EAAE,IAAM,EAAA,UAAA,IAAc,aAA8B,EAAA;AAAA,GAE1E,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SearchComponent.esm.js","sources":["../../../src/components/SearchComponent/SearchComponent.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useState } from 'react';\nimport Box from '@mui/material/Box';\nimport { SearchBar } from './SearchBar';\nimport { SearchContextProvider } from '@backstage/plugin-search-react';\n\nexport const SearchComponent = () => {\n  const [searchTerm, setSearchTerm] = useState<string>('');\n\n  return (\n    <SearchContextProvider>\n      <Box\n        sx={{\n          position: 'relative',\n          flexGrow: 1,\n          display: 'flex',\n          flexDirection: 'row',\n          justifyContent: 'start',\n          direction: 'ltr',\n        }}\n      >\n        <SearchBar query={{ term: searchTerm }} setSearchTerm={setSearchTerm} />\n      </Box>\n    </SearchContextProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;AAqBO,MAAM,kBAAkB,MAAM;AACnC,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAiB,EAAE,CAAA;AAEvD,EAAA,2CACG,qBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,QAAU,EAAA,UAAA;AAAA,QACV,QAAU,EAAA,CAAA;AAAA,QACV,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,KAAA;AAAA,QACf,cAAgB,EAAA,OAAA;AAAA,QAChB,SAAW,EAAA;AAAA;AACb,KAAA;AAAA,wCAEC,SAAU,EAAA,EAAA,KAAA,EAAO,EAAE,IAAM,EAAA,UAAA,IAAc,aAA8B,EAAA;AAAA,GAE1E,CAAA;AAEJ;;;;"}

package/dist/components/SearchComponent/SearchInput.esm.js

@@ -21,7 +21,6 @@ const SearchInput = ({
       startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, { style: { color: "#fff" } }))
     },
     sx: {
-      pt: "6px",
       input: { color: "#fff" },
       button: { color: "#fff" },
       "& fieldset": { border: "none" }

package/dist/components/SearchComponent/SearchInput.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.esm.js","sources":["../../../src/components/SearchComponent/SearchInput.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport TextField from '@mui/material/TextField';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport SearchIcon from '@mui/icons-material/Search';\n\ninterface SearchInputProps {\n  params: any;\n  error: boolean;\n  helperText: string;\n}\n\nexport const SearchInput = ({\n  params,\n  error,\n  helperText,\n}: SearchInputProps) => (\n  <TextField\n    {...params}\n    placeholder=\"Search...\"\n    variant=\"standard\"\n    error={error}\n    helperText={helperText}\n    InputProps={{\n      ...params.InputProps,\n      disableUnderline: true,\n      startAdornment: (\n        <InputAdornment position=\"start\">\n          <SearchIcon style={{ color: '#fff' }} />\n        </InputAdornment>\n      ),\n    }}\n    sx={{\n      pt: '6px',\n      input: { color: '#fff' },\n      button: { color: '#fff' },\n      '& fieldset': { border: 'none' },\n    }}\n  />\n);\n"],"names":[],"mappings":";;;;;AA2BO,MAAM,cAAc,CAAC;AAAA,EAC1B,MAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CACE,qBAAA,KAAA,CAAA,aAAA;AAAA,EAAC,SAAA;AAAA,EAAA;AAAA,IACE,GAAG,MAAA;AAAA,IACJ,WAAY,EAAA,WAAA;AAAA,IACZ,OAAQ,EAAA,UAAA;AAAA,IACR,KAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAY,EAAA;AAAA,MACV,GAAG,MAAO,CAAA,UAAA;AAAA,MACV,gBAAkB,EAAA,IAAA;AAAA,MAClB,cACE,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAS,OACvB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAO,EAAE,KAAA,EAAO,MAAO,EAAA,EAAG,CACxC;AAAA,KAEJ;AAAA,IACA,EAAI,EAAA;AAAA,MACF,EAAI,EAAA,KAAA;AAAA,MACJ,KAAA,EAAO,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,MACvB,MAAA,EAAQ,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,MACxB,YAAA,EAAc,EAAE,MAAA,EAAQ,MAAO;AAAA;AACjC;AACF;;;;"}
+{"version":3,"file":"SearchInput.esm.js","sources":["../../../src/components/SearchComponent/SearchInput.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport TextField from '@mui/material/TextField';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport SearchIcon from '@mui/icons-material/Search';\n\ninterface SearchInputProps {\n  params: any;\n  error: boolean;\n  helperText: string;\n}\n\nexport const SearchInput = ({\n  params,\n  error,\n  helperText,\n}: SearchInputProps) => (\n  <TextField\n    {...params}\n    placeholder=\"Search...\"\n    variant=\"standard\"\n    error={error}\n    helperText={helperText}\n    InputProps={{\n      ...params.InputProps,\n      disableUnderline: true,\n      startAdornment: (\n        <InputAdornment position=\"start\">\n          <SearchIcon style={{ color: '#fff' }} />\n        </InputAdornment>\n      ),\n    }}\n    sx={{\n      input: { color: '#fff' },\n      button: { color: '#fff' },\n      '& fieldset': { border: 'none' },\n    }}\n  />\n);\n"],"names":[],"mappings":";;;;;AA2BO,MAAM,cAAc,CAAC;AAAA,EAC1B,MAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CACE,qBAAA,KAAA,CAAA,aAAA;AAAA,EAAC,SAAA;AAAA,EAAA;AAAA,IACE,GAAG,MAAA;AAAA,IACJ,WAAY,EAAA,WAAA;AAAA,IACZ,OAAQ,EAAA,UAAA;AAAA,IACR,KAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAY,EAAA;AAAA,MACV,GAAG,MAAO,CAAA,UAAA;AAAA,MACV,gBAAkB,EAAA,IAAA;AAAA,MAClB,cACE,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAS,OACvB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAO,EAAE,KAAA,EAAO,MAAO,EAAA,EAAG,CACxC;AAAA,KAEJ;AAAA,IACA,EAAI,EAAA;AAAA,MACF,KAAA,EAAO,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,MACvB,MAAA,EAAQ,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,MACxB,YAAA,EAAc,EAAE,MAAA,EAAQ,MAAO;AAAA;AACjC;AACF;;;;"}

package/dist/components/SearchComponent/SearchOption.esm.js

@@ -24,7 +24,7 @@ const SearchOption = ({
         sx: { my: 0 },
         className: "allResultsOption"
       },
-      /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React.createElement(Typography, { sx: { flexGrow: 1, mr: 1 } }, "All results"), /* @__PURE__ */ React.createElement(ArrowForwardIcon, { fontSize: "small" }))
+      /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React.createElement(Typography, { sx: { flexGrow: 1 } }, "All results"), /* @__PURE__ */ React.createElement(ArrowForwardIcon, { fontSize: "small" }))
     )));
   }
   const result = results.find((r) => r.document.title === option);

package/dist/components/SearchComponent/SearchOption.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchOption.esm.js","sources":["../../../src/components/SearchComponent/SearchOption.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\nimport { Link } from '@backstage/core-components';\nimport ListItem from '@mui/material/ListItem';\nimport Typography from '@mui/material/Typography';\nimport ArrowForwardIcon from '@mui/icons-material/ArrowForward';\nimport { SearchResultItem } from './SearchResultItem';\nimport { Result, SearchDocument } from '@backstage/plugin-search-common';\nimport { SearchResultProps } from '@backstage/plugin-search-react';\n\ninterface SearchOptionProps {\n  option: string;\n  index: number;\n  options: string[];\n  query: SearchResultProps['query'];\n  results: Result<SearchDocument>[];\n  renderProps: any;\n  searchLink: string;\n}\n\nexport const SearchOption = ({\n  option,\n  index,\n  options,\n  query,\n  results,\n  renderProps,\n  searchLink,\n}: SearchOptionProps) => {\n  if (option === query?.term && index === options.length - 1) {\n    return (\n      <Box key=\"all-results\" id=\"all-results\">\n        <Divider sx={{ my: 0.5 }} />\n        <Link to={searchLink} underline=\"none\">\n          <ListItem\n            {...renderProps}\n            sx={{ my: 0 }}\n            className=\"allResultsOption\"\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center' }}>\n              <Typography sx={{ flexGrow: 1, mr: 1 }}>All results</Typography>\n              <ArrowForwardIcon fontSize=\"small\" />\n            </Box>\n          </ListItem>\n        </Link>\n      </Box>\n    );\n  }\n\n  const result = results.find(r => r.document.title === option);\n  return (\n    <SearchResultItem\n      key={index}\n      option={option}\n      query={query}\n      result={result}\n      renderProps={renderProps}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAqCO,MAAM,eAAe,CAAC;AAAA,EAC3B,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAA,IAAI,WAAW,KAAO,EAAA,IAAA,IAAQ,KAAU,KAAA,OAAA,CAAQ,SAAS,CAAG,EAAA;AAC1D,IAAA,2CACG,GAAI,EAAA,EAAA,GAAA,EAAI,eAAc,EAAG,EAAA,aAAA,EAAA,sCACvB,OAAQ,EAAA,EAAA,EAAA,EAAI,EAAE,EAAI,EAAA,GAAA,IAAO,CAC1B,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,EAAI,EAAA,UAAA,EAAY,WAAU,MAC9B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,WAAA;AAAA,QACJ,EAAA,EAAI,EAAE,EAAA,EAAI,CAAE,EAAA;AAAA,QACZ,SAAU,EAAA;AAAA,OAAA;AAAA,sBAEV,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,OAAA,EAAS,QAAQ,UAAY,EAAA,QAAA,EACtC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAI,EAAE,QAAU,EAAA,CAAA,EAAG,EAAI,EAAA,CAAA,EAAK,EAAA,EAAA,aAAW,mBAClD,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAiB,QAAS,EAAA,OAAA,EAAQ,CACrC;AAAA,KAEJ,CACF,CAAA;AAAA;AAIJ,EAAA,MAAM,SAAS,OAAQ,CAAA,IAAA,CAAK,OAAK,CAAE,CAAA,QAAA,CAAS,UAAU,MAAM,CAAA;AAC5D,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,KAAA;AAAA,MACL,MAAA;AAAA,MACA,KAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"SearchOption.esm.js","sources":["../../../src/components/SearchComponent/SearchOption.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\nimport { Link } from '@backstage/core-components';\nimport ListItem from '@mui/material/ListItem';\nimport Typography from '@mui/material/Typography';\nimport ArrowForwardIcon from '@mui/icons-material/ArrowForward';\nimport { SearchResultItem } from './SearchResultItem';\nimport { Result, SearchDocument } from '@backstage/plugin-search-common';\nimport { SearchResultProps } from '@backstage/plugin-search-react';\n\ninterface SearchOptionProps {\n  option: string;\n  index: number;\n  options: string[];\n  query: SearchResultProps['query'];\n  results: Result<SearchDocument>[];\n  renderProps: any;\n  searchLink: string;\n}\n\nexport const SearchOption = ({\n  option,\n  index,\n  options,\n  query,\n  results,\n  renderProps,\n  searchLink,\n}: SearchOptionProps) => {\n  if (option === query?.term && index === options.length - 1) {\n    return (\n      <Box key=\"all-results\" id=\"all-results\">\n        <Divider sx={{ my: 0.5 }} />\n        <Link to={searchLink} underline=\"none\">\n          <ListItem\n            {...renderProps}\n            sx={{ my: 0 }}\n            className=\"allResultsOption\"\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center' }}>\n              <Typography sx={{ flexGrow: 1 }}>All results</Typography>\n              <ArrowForwardIcon fontSize=\"small\" />\n            </Box>\n          </ListItem>\n        </Link>\n      </Box>\n    );\n  }\n\n  const result = results.find(r => r.document.title === option);\n  return (\n    <SearchResultItem\n      key={index}\n      option={option}\n      query={query}\n      result={result}\n      renderProps={renderProps}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAqCO,MAAM,eAAe,CAAC;AAAA,EAC3B,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAA,IAAI,WAAW,KAAO,EAAA,IAAA,IAAQ,KAAU,KAAA,OAAA,CAAQ,SAAS,CAAG,EAAA;AAC1D,IAAA,2CACG,GAAI,EAAA,EAAA,GAAA,EAAI,eAAc,EAAG,EAAA,aAAA,EAAA,sCACvB,OAAQ,EAAA,EAAA,EAAA,EAAI,EAAE,EAAI,EAAA,GAAA,IAAO,CAC1B,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,EAAI,EAAA,UAAA,EAAY,WAAU,MAC9B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,WAAA;AAAA,QACJ,EAAA,EAAI,EAAE,EAAA,EAAI,CAAE,EAAA;AAAA,QACZ,SAAU,EAAA;AAAA,OAAA;AAAA,sBAEV,KAAA,CAAA,aAAA,CAAC,OAAI,EAAI,EAAA,EAAE,SAAS,MAAQ,EAAA,UAAA,EAAY,QAAS,EAAA,EAAA,kBAC9C,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,IAAI,EAAE,QAAA,EAAU,GAAK,EAAA,EAAA,aAAW,mBAC3C,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAiB,QAAS,EAAA,OAAA,EAAQ,CACrC;AAAA,KAEJ,CACF,CAAA;AAAA;AAIJ,EAAA,MAAM,SAAS,OAAQ,CAAA,IAAA,CAAK,OAAK,CAAE,CAAA,QAAA,CAAS,UAAU,MAAM,CAAA;AAC5D,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,KAAA;AAAA,MACL,MAAA;AAAA,MACA,KAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/SearchComponent/SearchResultItem.esm.js

@@ -10,7 +10,19 @@ const SearchResultItem = ({
   query,
   result,
   renderProps
-}) => /* @__PURE__ */ React.createElement(Link, { to: result?.document.location ?? "#", underline: "none" }, /* @__PURE__ */ React.createElement(ListItem, { key: option, ...renderProps, sx: { cursor: "pointer", py: 2 } }, /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", width: "100%" } }, /* @__PURE__ */ React.createElement(Typography, { sx: { color: "text.primary", py: 0.5, flexGrow: 1 } }, option === "No results found" ? option : highlightMatch(option, query?.term ?? "")))));
+}) => {
+  const isNoResultsFound = option === "No results found";
+  return /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      component: isNoResultsFound ? "div" : Link,
+      to: result?.document.location,
+      underline: "none",
+      sx: { width: "100%", ...isNoResultsFound ? {} : { cursor: "pointer" } }
+    },
+    /* @__PURE__ */ React.createElement(ListItem, { ...renderProps, sx: { py: 1 } }, /* @__PURE__ */ React.createElement(Typography, { sx: { color: "text.primary", flexGrow: 1 } }, isNoResultsFound ? option : highlightMatch(option, query?.term ?? "")))
+  );
+};
 
 export { SearchResultItem };
 //# sourceMappingURL=SearchResultItem.esm.js.map

package/dist/components/SearchComponent/SearchResultItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResultItem.esm.js","sources":["../../../src/components/SearchComponent/SearchResultItem.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { Link } from '@backstage/core-components';\nimport ListItem from '@mui/material/ListItem';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport { highlightMatch } from '../../utils/stringUtils';\nimport { SearchResultProps } from '@backstage/plugin-search-react';\nimport { Result, SearchDocument } from '@backstage/plugin-search-common';\n\ninterface SearchResultItemProps {\n  option: string;\n  query: SearchResultProps['query'];\n  result: Result<SearchDocument> | undefined;\n  renderProps: any;\n}\n\nexport const SearchResultItem = ({\n  option,\n  query,\n  result,\n  renderProps,\n}: SearchResultItemProps) => (\n  <Link to={result?.document.location ?? '#'} underline=\"none\">\n    <ListItem key={option} {...renderProps} sx={{ cursor: 'pointer', py: 2 }}>\n      <Box sx={{ display: 'flex', width: '100%' }}>\n        <Typography sx={{ color: 'text.primary', py: 0.5, flexGrow: 1 }}>\n          {option === 'No results found'\n            ? option\n            : highlightMatch(option, query?.term ?? '')}\n        </Typography>\n      </Box>\n    </ListItem>\n  </Link>\n);\n"],"names":[],"mappings":";;;;;;;AAgCO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,MAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CACE,qBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,EAAA,EAAI,MAAQ,EAAA,QAAA,CAAS,YAAY,GAAK,EAAA,SAAA,EAAU,MACpD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,GAAA,EAAK,QAAS,GAAG,WAAA,EAAa,EAAI,EAAA,EAAE,MAAQ,EAAA,SAAA,EAAW,IAAI,CAAE,EAAA,EAAA,kBACpE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,EAAE,SAAS,MAAQ,EAAA,KAAA,EAAO,MAAO,EAAA,EAAA,kBACvC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,IAAI,EAAE,KAAA,EAAO,cAAgB,EAAA,EAAA,EAAI,GAAK,EAAA,QAAA,EAAU,GACzD,EAAA,EAAA,MAAA,KAAW,kBACR,GAAA,MAAA,GACA,cAAe,CAAA,MAAA,EAAQ,KAAO,EAAA,IAAA,IAAQ,EAAE,CAC9C,CACF,CACF,CACF;;;;"}
+{"version":3,"file":"SearchResultItem.esm.js","sources":["../../../src/components/SearchComponent/SearchResultItem.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { Link } from '@backstage/core-components';\nimport ListItem from '@mui/material/ListItem';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport { highlightMatch } from '../../utils/stringUtils';\nimport { SearchResultProps } from '@backstage/plugin-search-react';\nimport { Result, SearchDocument } from '@backstage/plugin-search-common';\n\ninterface SearchResultItemProps {\n  option: string;\n  query: SearchResultProps['query'];\n  result: Result<SearchDocument> | undefined;\n  renderProps: any;\n}\n\nexport const SearchResultItem = ({\n  option,\n  query,\n  result,\n  renderProps,\n}: SearchResultItemProps) => {\n  const isNoResultsFound = option === 'No results found';\n  return (\n    <Box\n      component={isNoResultsFound ? 'div' : Link}\n      to={result?.document.location}\n      underline=\"none\"\n      sx={{ width: '100%', ...(isNoResultsFound ? {} : { cursor: 'pointer' }) }}\n    >\n      <ListItem {...renderProps} sx={{ py: 1 }}>\n        <Typography sx={{ color: 'text.primary', flexGrow: 1 }}>\n          {isNoResultsFound\n            ? option\n            : highlightMatch(option, query?.term ?? '')}\n        </Typography>\n      </ListItem>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAgCO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,MAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAA6B,KAAA;AAC3B,EAAA,MAAM,mBAAmB,MAAW,KAAA,kBAAA;AACpC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,mBAAmB,KAAQ,GAAA,IAAA;AAAA,MACtC,EAAA,EAAI,QAAQ,QAAS,CAAA,QAAA;AAAA,MACrB,SAAU,EAAA,MAAA;AAAA,MACV,EAAA,EAAI,EAAE,KAAA,EAAO,MAAQ,EAAA,GAAI,gBAAmB,GAAA,EAAK,GAAA,EAAE,MAAQ,EAAA,SAAA,EAAa;AAAA,KAAA;AAAA,oBAExE,KAAA,CAAA,aAAA,CAAC,QAAU,EAAA,EAAA,GAAG,WAAa,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,CAAE,EAAA,EAAA,kBACpC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,EAAI,EAAA,EAAE,OAAO,cAAgB,EAAA,QAAA,EAAU,CAAE,EAAA,EAAA,EAClD,gBACG,GAAA,MAAA,GACA,cAAe,CAAA,MAAA,EAAQ,KAAO,EAAA,IAAA,IAAQ,EAAE,CAC9C,CACF;AAAA,GACF;AAEJ;;;;"}

package/dist/components/Spacer/Spacer.esm.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Spacer = ({
+  growFactor = 1,
+  minWidth = 1,
+  layout
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        flexGrow: growFactor,
+        minWidth: typeof minWidth === "number" ? minWidth * 8 : minWidth,
+        ...layout
+      }
+    }
+  );
+};
+
+export { Spacer };
+//# sourceMappingURL=Spacer.esm.js.map

package/dist/components/Spacer/Spacer.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.esm.js","sources":["../../../src/components/Spacer/Spacer.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\n/**\n * @public\n */\nexport interface SpacerProps {\n  growFactor?: number;\n  minWidth?: number | string;\n  layout?: React.CSSProperties;\n}\n\n/**\n * @public\n */\nexport const Spacer = ({\n  growFactor = 1,\n  minWidth = 1,\n  layout,\n}: SpacerProps) => {\n  return (\n    <div\n      style={{\n        flexGrow: growFactor,\n        minWidth: typeof minWidth === 'number' ? minWidth * 8 : minWidth,\n        ...layout,\n      }}\n    />\n  );\n};\n"],"names":[],"mappings":";;AA8BO,MAAM,SAAS,CAAC;AAAA,EACrB,UAAa,GAAA,CAAA;AAAA,EACb,QAAW,GAAA,CAAA;AAAA,EACX;AACF,CAAmB,KAAA;AACjB,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,QAAU,EAAA,UAAA;AAAA,QACV,QAAU,EAAA,OAAO,QAAa,KAAA,QAAA,GAAW,WAAW,CAAI,GAAA,QAAA;AAAA,QACxD,GAAG;AAAA;AACL;AAAA,GACF;AAEJ;;;;"}

package/dist/components/SupportButton/SupportButton.esm.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useApiHolder, configApiRef } from '@backstage/core-plugin-api';
+import { Link as Link$1 } from '@backstage/core-components';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import HelpIcon from '@mui/icons-material/HelpOutline';
+
+const Link = (props) => /* @__PURE__ */ React.createElement(Link$1, { ...props, color: "inherit", externalLinkIcon: false });
+const SupportButton = ({
+  title = "Support",
+  tooltip,
+  color = "inherit",
+  size = "small",
+  to,
+  layout
+}) => {
+  const apiHolder = useApiHolder();
+  const config = apiHolder.get(configApiRef);
+  const supportUrl = to ?? config?.getOptionalString("app.support.url");
+  if (!supportUrl) {
+    return null;
+  }
+  const isExternalLink = supportUrl.startsWith("http") || supportUrl.startsWith("https");
+  return /* @__PURE__ */ React.createElement(Box, { sx: layout }, /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      title: tooltip ?? `${title}${isExternalLink ? " (external link)" : ""}`
+    },
+    /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        component: Link,
+        color,
+        size,
+        to: supportUrl,
+        "aria-label": title
+      },
+      /* @__PURE__ */ React.createElement(HelpIcon, { fontSize: size })
+    ))
+  ));
+};
+
+export { SupportButton };
+//# sourceMappingURL=SupportButton.esm.js.map

package/dist/components/SupportButton/SupportButton.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupportButton.esm.js","sources":["../../../src/components/SupportButton/SupportButton.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\nimport { configApiRef, useApiHolder } from '@backstage/core-plugin-api';\nimport { Link as BackstageLink } from '@backstage/core-components';\n\nimport Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport HelpIcon from '@mui/icons-material/HelpOutline';\n\n/**\n * @public\n */\nexport interface SupportButtonProps {\n  title?: string;\n  tooltip?: string;\n  color?:\n    | 'inherit'\n    | 'default'\n    | 'primary'\n    | 'secondary'\n    | 'error'\n    | 'info'\n    | 'success'\n    | 'warning';\n  size?: 'small' | 'medium' | 'large';\n  to?: string;\n  layout?: React.CSSProperties;\n}\n\n// Backstage Link automatically detects external links and emits analytic events.\nconst Link = (props: any) => (\n  <BackstageLink {...props} color=\"inherit\" externalLinkIcon={false} />\n);\n\n/**\n * @public\n */\nexport const SupportButton = ({\n  title = 'Support',\n  tooltip,\n  color = 'inherit',\n  size = 'small',\n  to,\n  layout,\n}: SupportButtonProps) => {\n  const apiHolder = useApiHolder();\n  const config = apiHolder.get(configApiRef);\n  const supportUrl = to ?? config?.getOptionalString('app.support.url');\n\n  if (!supportUrl) {\n    return null;\n  }\n\n  const isExternalLink =\n    supportUrl.startsWith('http') || supportUrl.startsWith('https');\n\n  return (\n    <Box sx={layout}>\n      <Tooltip\n        title={tooltip ?? `${title}${isExternalLink ? ' (external link)' : ''}`}\n      >\n        <div>\n          <IconButton\n            component={Link}\n            color={color}\n            size={size}\n            to={supportUrl}\n            aria-label={title}\n          >\n            <HelpIcon fontSize={size} />\n          </IconButton>\n        </div>\n      </Tooltip>\n    </Box>\n  );\n};\n"],"names":["BackstageLink"],"mappings":";;;;;;;;AA+CA,MAAM,IAAA,GAAO,CAAC,KAAA,qBACX,KAAA,CAAA,aAAA,CAAAA,MAAA,EAAA,EAAe,GAAG,KAAO,EAAA,KAAA,EAAM,SAAU,EAAA,gBAAA,EAAkB,KAAO,EAAA,CAAA;AAM9D,MAAM,gBAAgB,CAAC;AAAA,EAC5B,KAAQ,GAAA,SAAA;AAAA,EACR,OAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,IAAO,GAAA,OAAA;AAAA,EACP,EAAA;AAAA,EACA;AACF,CAA0B,KAAA;AACxB,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,GAAA,CAAI,YAAY,CAAA;AACzC,EAAA,MAAM,UAAa,GAAA,EAAA,IAAM,MAAQ,EAAA,iBAAA,CAAkB,iBAAiB,CAAA;AAEpE,EAAA,IAAI,CAAC,UAAY,EAAA;AACf,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,iBACJ,UAAW,CAAA,UAAA,CAAW,MAAM,CAAK,IAAA,UAAA,CAAW,WAAW,OAAO,CAAA;AAEhE,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,MACP,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,OAAO,OAAW,IAAA,CAAA,EAAG,KAAK,CAAG,EAAA,cAAA,GAAiB,qBAAqB,EAAE,CAAA;AAAA,KAAA;AAAA,wCAEpE,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,QACX,KAAA;AAAA,QACA,IAAA;AAAA,QACA,EAAI,EAAA,UAAA;AAAA,QACJ,YAAY,EAAA;AAAA,OAAA;AAAA,sBAEZ,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,QAAA,EAAU,IAAM,EAAA;AAAA,KAE9B;AAAA,GAEJ,CAAA;AAEJ;;;;"}

package/dist/defaultMountPoints/defaultMountPoints.esm.js

@@ -0,0 +1,107 @@
+import { LogoutButton } from '../components/LogoutButton/LogoutButton.esm.js';
+import { CreateDropdown } from '../components/HeaderDropdownComponent/CreateDropdown.esm.js';
+import { ProfileDropdown } from '../components/HeaderDropdownComponent/ProfileDropdown.esm.js';
+import { RegisterAComponentSection } from '../components/HeaderDropdownComponent/RegisterAComponentSection.esm.js';
+import { SoftwareTemplatesSection } from '../components/HeaderDropdownComponent/SoftwareTemplatesSection.esm.js';
+import { SearchComponent } from '../components/SearchComponent/SearchComponent.esm.js';
+import { SupportButton } from '../components/SupportButton/SupportButton.esm.js';
+import { NotificationButton } from '../components/NotificationButton/NotificationButton.esm.js';
+import { Divider } from '../components/Divider/Divider.esm.js';
+import { MenuItemLink } from '../components/MenuItemLink/MenuItemLink.esm.js';
+import { Spacer } from '../components/Spacer/Spacer.esm.js';
+
+const defaultGlobalHeaderComponentsMountPoints = [
+  {
+    Component: SearchComponent,
+    config: {
+      priority: 100
+      // the greater the number, the more to the left it will be
+    }
+  },
+  {
+    Component: Spacer,
+    config: {
+      priority: 99,
+      // the greater the number, the more to the left it will be
+      props: {
+        growFactor: 0
+      }
+    }
+  },
+  // Notice: 1.5 ships with a Create link instead of a dropdown!!!
+  {
+    Component: CreateDropdown,
+    config: {
+      priority: 90,
+      layout: {
+        display: {
+          sm: "none",
+          md: "block"
+        },
+        mr: 1.5
+      }
+      // I don't used MUI v5 specific `sx` types here to allow us changing the implementation later
+    }
+  },
+  {
+    Component: SupportButton,
+    config: {
+      priority: 80
+    }
+  },
+  {
+    Component: NotificationButton,
+    config: {
+      priority: 70
+    }
+  },
+  {
+    Component: Divider,
+    config: {
+      priority: 50
+    }
+  },
+  {
+    Component: ProfileDropdown,
+    config: {
+      priority: 10
+      // the greater the number, the more to the left it will be
+    }
+  }
+];
+const defaultCreateDropdownMountPoints = [
+  {
+    Component: SoftwareTemplatesSection,
+    config: {
+      priority: 200
+    }
+  },
+  {
+    Component: RegisterAComponentSection,
+    config: {
+      priority: 100
+    }
+  }
+];
+const defaultProfileDropdownMountPoints = [
+  {
+    Component: MenuItemLink,
+    config: {
+      priority: 200,
+      props: {
+        title: "Settings",
+        icon: "manageAccounts",
+        link: "/settings"
+      }
+    }
+  },
+  {
+    Component: LogoutButton,
+    config: {
+      priority: 100
+    }
+  }
+];
+
+export { defaultCreateDropdownMountPoints, defaultGlobalHeaderComponentsMountPoints, defaultProfileDropdownMountPoints };
+//# sourceMappingURL=defaultMountPoints.esm.js.map

package/dist/defaultMountPoints/defaultMountPoints.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultMountPoints.esm.js","sources":["../../src/defaultMountPoints/defaultMountPoints.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { LogoutButton } from '../components/LogoutButton/LogoutButton';\nimport { CreateDropdown } from '../components/HeaderDropdownComponent/CreateDropdown';\nimport { ProfileDropdown } from '../components/HeaderDropdownComponent/ProfileDropdown';\nimport { RegisterAComponentSection } from '../components/HeaderDropdownComponent/RegisterAComponentSection';\nimport { SoftwareTemplatesSection } from '../components/HeaderDropdownComponent/SoftwareTemplatesSection';\nimport { SearchComponent } from '../components/SearchComponent/SearchComponent';\nimport { SupportButton } from '../components/SupportButton/SupportButton';\nimport {\n  CreateDropdownMountPoint,\n  GlobalHeaderComponentMountPoint,\n  ProfileDropdownMountPoint,\n} from '../types';\nimport { NotificationButton } from '../components/NotificationButton/NotificationButton';\nimport { Divider } from '../components/Divider/Divider';\nimport { MenuItemLink } from '../components/MenuItemLink/MenuItemLink';\nimport { Spacer } from '../components/Spacer/Spacer';\n\n/**\n * default Global Header Components mount points\n *\n * @public\n */\nexport const defaultGlobalHeaderComponentsMountPoints: GlobalHeaderComponentMountPoint[] =\n  [\n    {\n      Component: SearchComponent,\n      config: {\n        priority: 100, // the greater the number, the more to the left it will be\n      },\n    },\n    {\n      Component: Spacer,\n      config: {\n        priority: 99, // the greater the number, the more to the left it will be\n        props: {\n          growFactor: 0,\n        },\n      },\n    },\n    // Notice: 1.5 ships with a Create link instead of a dropdown!!!\n    {\n      Component: CreateDropdown,\n      config: {\n        priority: 90,\n        layout: {\n          display: {\n            sm: 'none',\n            md: 'block',\n          },\n          mr: 1.5,\n        } as any as React.CSSProperties, // I don't used MUI v5 specific `sx` types here to allow us changing the implementation later\n      },\n    },\n    {\n      Component: SupportButton,\n      config: {\n        priority: 80,\n      },\n    },\n    {\n      Component: NotificationButton,\n      config: {\n        priority: 70,\n      },\n    },\n    {\n      Component: Divider,\n      config: {\n        priority: 50,\n      },\n    },\n    {\n      Component: ProfileDropdown,\n      config: {\n        priority: 10, // the greater the number, the more to the left it will be\n      },\n    },\n  ];\n\nexport const defaultCreateDropdownMountPoints: CreateDropdownMountPoint[] = [\n  {\n    Component: SoftwareTemplatesSection as React.ComponentType,\n    config: {\n      priority: 200,\n    },\n  },\n  {\n    Component: RegisterAComponentSection as React.ComponentType,\n    config: {\n      priority: 100,\n    },\n  },\n];\n\nexport const defaultProfileDropdownMountPoints: ProfileDropdownMountPoint[] = [\n  {\n    Component: MenuItemLink as React.ComponentType,\n    config: {\n      priority: 200,\n      props: {\n        title: 'Settings',\n        icon: 'manageAccounts',\n        link: '/settings',\n      },\n    },\n  },\n  {\n    Component: LogoutButton,\n    config: {\n      priority: 100,\n    },\n  },\n];\n"],"names":[],"mappings":";;;;;;;;;;;;AAqCO,MAAM,wCACX,GAAA;AAAA,EACE;AAAA,IACE,SAAW,EAAA,eAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AAAA;AACZ,GACF;AAAA,EACA;AAAA,IACE,SAAW,EAAA,MAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA,EAAA;AAAA;AAAA,MACV,KAAO,EAAA;AAAA,QACL,UAAY,EAAA;AAAA;AACd;AACF,GACF;AAAA;AAAA,EAEA;AAAA,IACE,SAAW,EAAA,cAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA,EAAA;AAAA,MACV,MAAQ,EAAA;AAAA,QACN,OAAS,EAAA;AAAA,UACP,EAAI,EAAA,MAAA;AAAA,UACJ,EAAI,EAAA;AAAA,SACN;AAAA,QACA,EAAI,EAAA;AAAA;AACN;AAAA;AACF,GACF;AAAA,EACA;AAAA,IACE,SAAW,EAAA,aAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ,GACF;AAAA,EACA;AAAA,IACE,SAAW,EAAA,kBAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ,GACF;AAAA,EACA;AAAA,IACE,SAAW,EAAA,OAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ,GACF;AAAA,EACA;AAAA,IACE,SAAW,EAAA,eAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AAAA;AACZ;AAEJ;AAEK,MAAM,gCAA+D,GAAA;AAAA,EAC1E;AAAA,IACE,SAAW,EAAA,wBAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ,GACF;AAAA,EACA;AAAA,IACE,SAAW,EAAA,yBAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ;AAEJ;AAEO,MAAM,iCAAiE,GAAA;AAAA,EAC5E;AAAA,IACE,SAAW,EAAA,YAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA,GAAA;AAAA,MACV,KAAO,EAAA;AAAA,QACL,KAAO,EAAA,UAAA;AAAA,QACP,IAAM,EAAA,gBAAA;AAAA,QACN,IAAM,EAAA;AAAA;AACR;AACF,GACF;AAAA,EACA;AAAA,IACE,SAAW,EAAA,YAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ;AAEJ;;;;"}

package/dist/hooks/useCreateDropdownMountPoints.esm.js

@@ -1,8 +1,12 @@
+import { defaultCreateDropdownMountPoints } from '../defaultMountPoints/defaultMountPoints.esm.js';
 import { useScalprum } from '@scalprum/react-core';
 
 const useCreateDropdownMountPoints = () => {
   const scalprum = useScalprum();
   const createDropdownMountPoints = scalprum?.api?.dynamicRootConfig?.mountPoints?.["global.header/create"];
+  if (Object.keys(scalprum?.api || {}).length === 0) {
+    return defaultCreateDropdownMountPoints;
+  }
   return createDropdownMountPoints ?? [];
 };
 

package/dist/hooks/useCreateDropdownMountPoints.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCreateDropdownMountPoints.esm.js","sources":["../../src/hooks/useCreateDropdownMountPoints.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { CreateDropdownMountPoint, ScalprumState } from '../types';\nimport { useScalprum } from '@scalprum/react-core';\n\nexport const useCreateDropdownMountPoints = ():\n  | CreateDropdownMountPoint[]\n  | undefined => {\n  const scalprum = useScalprum<ScalprumState>();\n\n  const createDropdownMountPoints =\n    scalprum?.api?.dynamicRootConfig?.mountPoints?.['global.header/create'];\n\n  return createDropdownMountPoints ?? [];\n};\n"],"names":[],"mappings":";;AAmBO,MAAM,+BAA+B,MAE3B;AACf,EAAA,MAAM,WAAW,WAA2B,EAAA;AAE5C,EAAA,MAAM,yBACJ,GAAA,QAAA,EAAU,GAAK,EAAA,iBAAA,EAAmB,cAAc,sBAAsB,CAAA;AAExE,EAAA,OAAO,6BAA6B,EAAC;AACvC;;;;"}
+{"version":3,"file":"useCreateDropdownMountPoints.esm.js","sources":["../../src/hooks/useCreateDropdownMountPoints.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defaultCreateDropdownMountPoints } from '../defaultMountPoints/defaultMountPoints';\nimport { CreateDropdownMountPoint, ScalprumState } from '../types';\nimport { useScalprum } from '@scalprum/react-core';\n\nexport const useCreateDropdownMountPoints = ():\n  | CreateDropdownMountPoint[]\n  | undefined => {\n  const scalprum = useScalprum<ScalprumState>();\n\n  const createDropdownMountPoints =\n    scalprum?.api?.dynamicRootConfig?.mountPoints?.['global.header/create'];\n\n  // default profile dropdown components for dev env\n  if (Object.keys(scalprum?.api || {}).length === 0) {\n    return defaultCreateDropdownMountPoints;\n  }\n\n  return createDropdownMountPoints ?? [];\n};\n"],"names":[],"mappings":";;;AAoBO,MAAM,+BAA+B,MAE3B;AACf,EAAA,MAAM,WAAW,WAA2B,EAAA;AAE5C,EAAA,MAAM,yBACJ,GAAA,QAAA,EAAU,GAAK,EAAA,iBAAA,EAAmB,cAAc,sBAAsB,CAAA;AAGxE,EAAI,IAAA,MAAA,CAAO,KAAK,QAAU,EAAA,GAAA,IAAO,EAAE,CAAA,CAAE,WAAW,CAAG,EAAA;AACjD,IAAO,OAAA,gCAAA;AAAA;AAGT,EAAA,OAAO,6BAA6B,EAAC;AACvC;;;;"}

package/dist/hooks/useDropdownManager.esm.js

@@ -1,15 +1,16 @@
 import React from 'react';
 
 const useDropdownManager = () => {
-  const [menuStates, setMenuStates] = React.useState({});
-  const handleOpen = (key) => (event) => {
-    setMenuStates((prev) => ({ ...prev, [key]: event.currentTarget }));
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const handleOpen = (event) => {
+    setAnchorEl(event.currentTarget);
   };
-  const handleClose = (key) => () => {
-    setMenuStates((prev) => ({ ...prev, [key]: null }));
+  const handleClose = () => {
+    setAnchorEl(null);
   };
   return {
-    menuStates,
+    anchorEl,
+    open: !!anchorEl,
     handleOpen,
     handleClose
   };

package/dist/hooks/useDropdownManager.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDropdownManager.esm.js","sources":["../../src/hooks/useDropdownManager.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\nexport const useDropdownManager = () => {\n  const [menuStates, setMenuStates] = React.useState<\n    Record<string, HTMLElement | null>\n  >({});\n\n  const handleOpen =\n    (key: string) => (event: React.MouseEvent<HTMLElement>) => {\n      setMenuStates(prev => ({ ...prev, [key]: event.currentTarget }));\n    };\n\n  const handleClose = (key: string) => () => {\n    setMenuStates(prev => ({ ...prev, [key]: null }));\n  };\n\n  return {\n    menuStates,\n    handleOpen,\n    handleClose,\n  };\n};\n"],"names":[],"mappings":";;AAkBO,MAAM,qBAAqB,MAAM;AACtC,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,IAAI,KAAM,CAAA,QAAA,CAExC,EAAE,CAAA;AAEJ,EAAA,MAAM,UACJ,GAAA,CAAC,GAAgB,KAAA,CAAC,KAAyC,KAAA;AACzD,IAAc,aAAA,CAAA,CAAA,IAAA,MAAS,EAAE,GAAG,IAAA,EAAM,CAAC,GAAG,GAAG,KAAM,CAAA,aAAA,EAAgB,CAAA,CAAA;AAAA,GACjE;AAEF,EAAM,MAAA,WAAA,GAAc,CAAC,GAAA,KAAgB,MAAM;AACzC,IAAc,aAAA,CAAA,CAAA,IAAA,MAAS,EAAE,GAAG,IAAA,EAAM,CAAC,GAAG,GAAG,MAAO,CAAA,CAAA;AAAA,GAClD;AAEA,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useDropdownManager.esm.js","sources":["../../src/hooks/useDropdownManager.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\nexport const useDropdownManager = () => {\n  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);\n\n  const handleOpen = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  return {\n    anchorEl,\n    open: !!anchorEl,\n    handleOpen,\n    handleClose,\n  };\n};\n"],"names":[],"mappings":";;AAkBO,MAAM,qBAAqB,MAAM;AACtC,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,KAAA,CAAM,SAA6B,IAAI,CAAA;AAEvE,EAAM,MAAA,UAAA,GAAa,CAAC,KAAyC,KAAA;AAC3D,IAAA,WAAA,CAAY,MAAM,aAAa,CAAA;AAAA,GACjC;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,WAAA,CAAY,IAAI,CAAA;AAAA,GAClB;AAEA,EAAO,OAAA;AAAA,IACL,QAAA;AAAA,IACA,IAAA,EAAM,CAAC,CAAC,QAAA;AAAA,IACR,UAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist/hooks/useNotificationCount.esm.js

@@ -0,0 +1,51 @@
+import { useState, useEffect } from 'react';
+import { useApiHolder } from '@backstage/core-plugin-api';
+import { notificationsApiRef } from '@backstage/plugin-notifications';
+import { useSignal } from '@backstage/plugin-signals-react';
+
+const useNotificationCount = () => {
+  const apiHolder = useApiHolder();
+  const { lastSignal } = useSignal("notifications");
+  const [available, setAvailable] = useState(false);
+  const [unreadCount, setUnreadCount] = useState(0);
+  useEffect(() => {
+    const notificationsApi = apiHolder.get(notificationsApiRef);
+    if (!notificationsApi) {
+      return;
+    }
+    if (!available) {
+      setAvailable(true);
+    }
+    const fetchUnreadCount = async () => {
+      try {
+        const { notifications } = await notificationsApi.getNotifications({
+          read: false
+        });
+        setUnreadCount(notifications.length);
+      } catch (error) {
+        console.error("Failed to fetch unread notifications:", error);
+      }
+    };
+    fetchUnreadCount();
+  }, [apiHolder]);
+  useEffect(() => {
+    if (!lastSignal) return;
+    switch (lastSignal.action) {
+      case "notification_read":
+        setUnreadCount(
+          (prev) => Math.max(0, prev - lastSignal.notification_ids.length)
+        );
+        break;
+      case "notification_unread":
+        setUnreadCount((prev) => prev + lastSignal.notification_ids.length);
+        break;
+      case "new_notification":
+        setUnreadCount((prev) => prev + 1);
+        break;
+    }
+  }, [lastSignal]);
+  return { available, unreadCount };
+};
+
+export { useNotificationCount };
+//# sourceMappingURL=useNotificationCount.esm.js.map

package/dist/hooks/useNotificationCount.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNotificationCount.esm.js","sources":["../../src/hooks/useNotificationCount.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useEffect, useState } from 'react';\nimport { useApiHolder } from '@backstage/core-plugin-api';\nimport { notificationsApiRef } from '@backstage/plugin-notifications';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { NotificationSignal } from '@backstage/plugin-notifications-common';\n\nexport const useNotificationCount = () => {\n  const apiHolder = useApiHolder();\n  const { lastSignal } = useSignal<NotificationSignal>('notifications');\n  const [available, setAvailable] = useState(false);\n  const [unreadCount, setUnreadCount] = useState(0);\n\n  useEffect(() => {\n    const notificationsApi = apiHolder.get(notificationsApiRef);\n    if (!notificationsApi) {\n      return;\n    }\n    if (!available) {\n      setAvailable(true);\n    }\n\n    const fetchUnreadCount = async () => {\n      try {\n        const { notifications } = await notificationsApi.getNotifications({\n          read: false,\n        });\n        setUnreadCount(notifications.length);\n      } catch (error) {\n        // eslint-disable-next-line no-console\n        console.error('Failed to fetch unread notifications:', error);\n      }\n    };\n\n    fetchUnreadCount();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [apiHolder]);\n\n  useEffect(() => {\n    if (!lastSignal) return;\n\n    switch (lastSignal.action) {\n      case 'notification_read':\n        setUnreadCount(prev =>\n          Math.max(0, prev - lastSignal.notification_ids.length),\n        );\n        break;\n      case 'notification_unread':\n        setUnreadCount(prev => prev + lastSignal.notification_ids.length);\n        break;\n      case 'new_notification':\n        setUnreadCount(prev => prev + 1);\n        break;\n      default:\n        break;\n    }\n  }, [lastSignal]);\n\n  return { available, unreadCount };\n};\n"],"names":[],"mappings":";;;;;AAsBO,MAAM,uBAAuB,MAAM;AACxC,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAA8B,eAAe,CAAA;AACpE,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,CAAC,CAAA;AAEhD,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,gBAAA,GAAmB,SAAU,CAAA,GAAA,CAAI,mBAAmB,CAAA;AAC1D,IAAA,IAAI,CAAC,gBAAkB,EAAA;AACrB,MAAA;AAAA;AAEF,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAA,YAAA,CAAa,IAAI,CAAA;AAAA;AAGnB,IAAA,MAAM,mBAAmB,YAAY;AACnC,MAAI,IAAA;AACF,QAAA,MAAM,EAAE,aAAA,EAAkB,GAAA,MAAM,iBAAiB,gBAAiB,CAAA;AAAA,UAChE,IAAM,EAAA;AAAA,SACP,CAAA;AACD,QAAA,cAAA,CAAe,cAAc,MAAM,CAAA;AAAA,eAC5B,KAAO,EAAA;AAEd,QAAQ,OAAA,CAAA,KAAA,CAAM,yCAAyC,KAAK,CAAA;AAAA;AAC9D,KACF;AAEA,IAAiB,gBAAA,EAAA;AAAA,GAEnB,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,UAAY,EAAA;AAEjB,IAAA,QAAQ,WAAW,MAAQ;AAAA,MACzB,KAAK,mBAAA;AACH,QAAA,cAAA;AAAA,UAAe,UACb,IAAK,CAAA,GAAA,CAAI,GAAG,IAAO,GAAA,UAAA,CAAW,iBAAiB,MAAM;AAAA,SACvD;AACA,QAAA;AAAA,MACF,KAAK,qBAAA;AACH,QAAA,cAAA,CAAe,CAAQ,IAAA,KAAA,IAAA,GAAO,UAAW,CAAA,gBAAA,CAAiB,MAAM,CAAA;AAChE,QAAA;AAAA,MACF,KAAK,kBAAA;AACH,QAAe,cAAA,CAAA,CAAA,IAAA,KAAQ,OAAO,CAAC,CAAA;AAC/B,QAAA;AAEA;AACJ,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAO,OAAA,EAAE,WAAW,WAAY,EAAA;AAClC;;;;"}

package/dist/hooks/useProfileDropdownMountPoints.esm.js

@@ -1,8 +1,12 @@
+import { defaultProfileDropdownMountPoints } from '../defaultMountPoints/defaultMountPoints.esm.js';
 import { useScalprum } from '@scalprum/react-core';
 
 const useProfileDropdownMountPoints = () => {
   const scalprum = useScalprum();
   const profileDropdownMountPoints = scalprum?.api?.dynamicRootConfig?.mountPoints?.["global.header/profile"];
+  if (Object.keys(scalprum?.api || {}).length === 0) {
+    return defaultProfileDropdownMountPoints;
+  }
   return profileDropdownMountPoints ?? [];
 };
 

package/dist/hooks/useProfileDropdownMountPoints.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useProfileDropdownMountPoints.esm.js","sources":["../../src/hooks/useProfileDropdownMountPoints.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ProfileDropdownMountPoint, ScalprumState } from '../types';\nimport { useScalprum } from '@scalprum/react-core';\n\nexport const useProfileDropdownMountPoints = ():\n  | ProfileDropdownMountPoint[]\n  | undefined => {\n  const scalprum = useScalprum<ScalprumState>();\n\n  const profileDropdownMountPoints =\n    scalprum?.api?.dynamicRootConfig?.mountPoints?.['global.header/profile'];\n\n  return profileDropdownMountPoints ?? [];\n};\n"],"names":[],"mappings":";;AAmBO,MAAM,gCAAgC,MAE5B;AACf,EAAA,MAAM,WAAW,WAA2B,EAAA;AAE5C,EAAA,MAAM,0BACJ,GAAA,QAAA,EAAU,GAAK,EAAA,iBAAA,EAAmB,cAAc,uBAAuB,CAAA;AAEzE,EAAA,OAAO,8BAA8B,EAAC;AACxC;;;;"}
+{"version":3,"file":"useProfileDropdownMountPoints.esm.js","sources":["../../src/hooks/useProfileDropdownMountPoints.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defaultProfileDropdownMountPoints } from '../defaultMountPoints/defaultMountPoints';\nimport { ProfileDropdownMountPoint, ScalprumState } from '../types';\nimport { useScalprum } from '@scalprum/react-core';\n\nexport const useProfileDropdownMountPoints = ():\n  | ProfileDropdownMountPoint[]\n  | undefined => {\n  const scalprum = useScalprum<ScalprumState>();\n\n  const profileDropdownMountPoints =\n    scalprum?.api?.dynamicRootConfig?.mountPoints?.['global.header/profile'];\n\n  // default profile dropdown components for dev env\n  if (Object.keys(scalprum?.api || {}).length === 0) {\n    return defaultProfileDropdownMountPoints;\n  }\n\n  return profileDropdownMountPoints ?? [];\n};\n"],"names":[],"mappings":";;;AAoBO,MAAM,gCAAgC,MAE5B;AACf,EAAA,MAAM,WAAW,WAA2B,EAAA;AAE5C,EAAA,MAAM,0BACJ,GAAA,QAAA,EAAU,GAAK,EAAA,iBAAA,EAAmB,cAAc,uBAAuB,CAAA;AAGzE,EAAI,IAAA,MAAA,CAAO,KAAK,QAAU,EAAA,GAAA,IAAO,EAAE,CAAA,CAAE,WAAW,CAAG,EAAA;AACjD,IAAO,OAAA,iCAAA;AAAA;AAGT,EAAA,OAAO,8BAA8B,EAAC;AACxC;;;;"}