feat(global-header): implemented searchBar

workspaces/global-header/packages/app/src/components/Root/Root.tsx

@@ -66,7 +66,7 @@ const SidebarLogo = () => {
   );
 };
 
-export const Root = ({ children }: PropsWithChildren<{}>) => (
+export const Root = ({ children = null }: PropsWithChildren<{}>) => (
   <SidebarPage>
     <GlobalHeader />
     <Sidebar>

workspaces/global-header/plugins/global-header/package.json

@@ -35,6 +35,12 @@
   "dependencies": {
     "@backstage/core-components": "^0.16.1",
     "@backstage/core-plugin-api": "^1.10.1",
+    "@backstage/plugin-search": "1.4.21",
+    "@backstage/plugin-search-backend": "^1.8.0",
+    "@backstage/plugin-search-backend-module-catalog": "^0.2.6",
+    "@backstage/plugin-search-backend-module-pg": "^0.5.39",
+    "@backstage/plugin-search-backend-module-techdocs": "^0.3.4",
+    "@backstage/plugin-search-react": "1.8.4",
     "@backstage/theme": "^0.6.2",
     "@mui/icons-material": "5.16.13",
     "@mui/material": "5.16.13",

workspaces/global-header/plugins/global-header/src/components/ExampleComponent/ExampleComponent.test.tsx

@@ -19,13 +19,33 @@ import { ExampleComponent } from './ExampleComponent';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { screen } from '@testing-library/react';
-import { registerMswTestHooks, renderInTestApp } from '@backstage/test-utils';
+import {
+  registerMswTestHooks,
+  renderInTestApp,
+  TestApiProvider,
+} from '@backstage/test-utils';
+import { searchApiRef } from '@backstage/plugin-search-react';
 
 describe('ExampleComponent', () => {
   const server = setupServer();
   // Enable sane handlers for network requests
   registerMswTestHooks(server);
 
+  // Mock the search API response
+  const mockSearchApi = {
+    query: jest.fn().mockResolvedValue({
+      results: [
+        {
+          type: 'software-catalog',
+          document: {
+            title: 'Example Result',
+            location: '/catalog/default/component/example',
+          },
+        },
+      ],
+    }),
+  };
+
   // setup mock response
   beforeEach(() => {
     server.use(
@@ -34,7 +54,11 @@ describe('ExampleComponent', () => {
   });
 
   it('should render', async () => {
-    await renderInTestApp(<ExampleComponent />);
+    await renderInTestApp(
+      <TestApiProvider apis={[[searchApiRef, mockSearchApi]]}>
+        <ExampleComponent />
+      </TestApiProvider>,
+    );
     expect(screen.getByText('Global Header Example')).toBeInTheDocument();
   });
 });

workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/CreateDropdown.tsx

@@ -54,21 +54,6 @@ const models = [
   },
 ];
 
-const menuSections = [
-  {
-    sectionKey: 'templates',
-    sectionLabel: 'Use a template',
-    optionalLinkLabel: 'All templates',
-    optionalLink: '/create',
-    items: models.map(m => ({
-      itemKey: m.key,
-      label: m.label,
-      link: `/create/templates/default/${m.value}`,
-    })),
-    handleClose: () => {},
-  },
-];
-
 const menuBottomItems: MenuItemConfig[] = [
   {
     itemKey: 'custom',
@@ -83,19 +68,33 @@ const CreateDropdown: React.FC<CreateButtonProps> = ({
   anchorEl,
   setAnchorEl,
 }) => {
+  const menuSections = [
+    {
+      sectionKey: 'templates',
+      sectionLabel: 'Use a template',
+      optionalLinkLabel: 'All templates',
+      optionalLink: '/create',
+      items: models.map(m => ({
+        itemKey: m.key,
+        label: m.label,
+        link: `/create/templates/default/${m.value}`,
+      })),
+      handleClose: () => setAnchorEl(null),
+    },
+  ];
   return (
     <HeaderDropdownComponent
       buttonContent={
         <>
-          Create <ArrowDropDownOutlinedIcon style={{ marginLeft: '0.5rem' }} />
+          Create <ArrowDropDownOutlinedIcon sx={{ ml: 1 }} />
         </>
       }
       menuSections={menuSections}
       menuBottomItems={menuBottomItems}
       buttonProps={{
         color: 'primary',
         variant: 'contained',
-        sx: { marginRight: '1rem' },
+        sx: { mr: 2 },
       }}
       buttonClick={handleMenu}
       anchorEl={anchorEl}

workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/HeaderDropdownComponent.tsx

@@ -115,7 +115,7 @@ const HeaderDropdownComponent: React.FC<HeaderDropdownProps> = ({
             <MenuSection
               key={`menu-section-${section.sectionKey}`}
               {...{ hideDivider: shouldHideDivider(index), ...section }}
-              handleClose={() => setAnchorEl(null)}
+              handleClose={section.handleClose}
             />
           ))}
           {menuBottomItems.map(

workspaces/global-header/plugins/global-header/src/components/SearchComponent/SearchBar.module.css

@@ -0,0 +1,12 @@
+/* SearchBar.module.css */
+.allResultsOption {
+  background-color: transparent !important;
+}
+
+.allResultsOption:hover {
+  background-color: transparent !important;
+}
+
+.allResultsOption:focus {
+  background-color: transparent !important;
+}

workspaces/global-header/plugins/global-header/src/components/SearchComponent/SearchBar.tsx

@@ -0,0 +1,152 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import {
+  SearchResultState,
+  SearchResultProps,
+} from '@backstage/plugin-search-react';
+import Typography from '@mui/material/Typography';
+import { Link } from '@backstage/core-components';
+import ListItem from '@mui/material/ListItem';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import SearchIcon from '@mui/icons-material/Search';
+import { createSearchLink, highlightMatch } from '../../utils/stringUtils';
+import styles from './SearchBar.module.css';
+import { useNavigate } from 'react-router-dom';
+
+interface SearchBarProps {
+  query: SearchResultProps['query'];
+  setSearchTerm: (term: string) => void;
+}
+export const SearchBar = (props: SearchBarProps) => {
+  const { query, setSearchTerm } = props;
+  const navigate = useNavigate();
+
+  return (
+    <SearchResultState {...props}>
+      {({ loading, error, value }) => {
+        const results = query?.term ? value?.results ?? [] : [];
+        let options: string[] = [];
+        if (results.length > 0) {
+          options = [
+            ...results.slice(0, 5).map(result => result.document.title),
+            `${query?.term}`,
+          ];
+        } else if (query?.term) {
+          options = ['No results found'];
+        }
+        const searchLink = createSearchLink(query?.term ?? '');
+
+        return (
+          <Autocomplete
+            freeSolo
+            options={options}
+            loading={loading}
+            getOptionLabel={option => option ?? ''}
+            onInputChange={(_, inputValue) => setSearchTerm(inputValue)}
+            sx={{ width: '100%' }}
+            filterOptions={x => x}
+            getOptionDisabled={option => option === 'No results found'}
+            onKeyDown={event => {
+              if (event.key === 'Enter') {
+                event.preventDefault();
+                if (query?.term) {
+                  navigate(searchLink);
+                }
+              }
+            }}
+            renderInput={params => (
+              <TextField
+                {...params}
+                placeholder="Search..."
+                variant="standard"
+                error={!!error}
+                helperText={error ? 'Error fetching results' : ''}
+                InputProps={{
+                  ...params.InputProps,
+                  disableUnderline: true,
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <SearchIcon style={{ color: '#fff' }} />
+                    </InputAdornment>
+                  ),
+                }}
+                sx={{
+                  pt: '6px',
+                  input: { color: '#fff' },
+                  button: { color: '#fff' },
+                }}
+              />
+            )}
+            renderOption={(renderProps, option, { index }) => {
+              if (option === query?.term && index === options.length - 1) {
+                return (
+                  <Box key="all-results" id="all-results">
+                    <Divider sx={{ my: 0.5 }} />
+                    <Link to={searchLink} underline="none">
+                      <ListItem
+                        {...renderProps}
+                        sx={{ my: 0 }}
+                        className={styles.allResultsOption}
+                      >
+                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                          <Typography sx={{ flexGrow: 1, mr: 1 }}>
+                            All results
+                          </Typography>
+                          <ArrowForwardIcon fontSize="small" />
+                        </Box>
+                      </ListItem>
+                    </Link>
+                  </Box>
+                );
+              }
+
+              const result = results.find(r => r.document.title === option);
+              return (
+                <Link
+                  to={result?.document.location ?? '#'}
+                  underline="none"
+                  key={option}
+                >
+                  <ListItem {...renderProps} sx={{ cursor: 'pointer', py: 2 }}>
+                    <Box sx={{ display: 'flex', width: '100%' }}>
+                      <Typography
+                        sx={{ color: 'text.primary', py: 0.5, flexGrow: 1 }}
+                      >
+                        {option === 'No results found'
+                          ? option
+                          : highlightMatch(option, query?.term ?? '')}
+                      </Typography>
+                    </Box>
+                  </ListItem>
+                </Link>
+              );
+            }}
+            ListboxProps={{
+              style: { maxHeight: 600 },
+            }}
+          />
+        );
+      }}
+    </SearchResultState>
+  );
+};

workspaces/global-header/plugins/global-header/src/components/SearchComponent/SearchComponent.tsx

@@ -14,32 +14,29 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import Box from '@mui/material/Box';
-import SearchIcon from '@mui/icons-material/Search';
-import InputBase from '@mui/material/InputBase';
+import { SearchBar } from './SearchBar';
+import { SearchContextProvider } from '@backstage/plugin-search-react';
 
 export const SearchComponent = () => {
+  const [searchTerm, setSearchTerm] = useState<string>('');
+
   return (
-    <Box
-      sx={{
-        position: 'relative',
-        paddingTop: '4px',
-        flexGrow: 1,
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'start',
-        direction: 'ltr',
-      }}
-    >
-      <Box sx={{ pointerEvents: 'none', alignSelf: 'end' }}>
-        <SearchIcon />
+    <SearchContextProvider>
+      <Box
+        sx={{
+          position: 'relative',
+          flexGrow: 1,
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'start',
+          direction: 'ltr',
+          mr: 4,
+        }}
+      >
+        <SearchBar query={{ term: searchTerm }} setSearchTerm={setSearchTerm} />
       </Box>
-      <InputBase
-        sx={{ padding: '0 0.5rem', color: 'inherit', width: '100%' }}
-        placeholder="Search…"
-        inputProps={{ 'aria-label': 'search' }}
-      />
-    </Box>
+    </SearchContextProvider>
   );
 };