fix(global-header): updated dependencies version and fixed UI issues (#275)

* fix(global-header): updated dependencies version and fixed UI issues

Signed-off-by: Yi Cai <[email protected]>

* yarn dedupe

Signed-off-by: Yi Cai <[email protected]>

---------

Signed-off-by: Yi Cai <[email protected]>

Author: ciiay

workspaces/global-header/.changeset/stupid-coats-decide.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-global-header': patch
+---
+
+Updated dependencies version to match rhdh, and fixed some UI issues

workspaces/global-header/plugins/global-header/dev/index.tsx

@@ -18,11 +18,30 @@ import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
 import { globalHeaderPlugin } from '../src/plugin';
 import { ExampleComponent } from '../src/components/ExampleComponent';
+import { TestApiProvider } from '@backstage/test-utils';
+import { MockSearchApi, searchApiRef } from '@backstage/plugin-search-react';
+
+const mockSearchApi = new MockSearchApi({
+  results: [
+    {
+      type: 'software-catalog',
+      document: {
+        title: 'example search result',
+        text: 'this is an example search result',
+        location: 'https://example.com',
+      },
+    },
+  ],
+});
 
 createDevApp()
   .registerPlugin(globalHeaderPlugin)
   .addPage({
-    element: <ExampleComponent />,
+    element: (
+      <TestApiProvider apis={[[searchApiRef, mockSearchApi]]}>
+        <ExampleComponent />
+      </TestApiProvider>
+    ),
     title: 'Global Header',
     path: '/global-header',
   })

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

@@ -33,29 +33,24 @@
     "postpack": "backstage-cli package postpack"
   },
   "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-common": "^1.2.16",
-    "@backstage/plugin-search-react": "1.8.4",
-    "@backstage/theme": "^0.6.2",
+    "@backstage/core-components": "^0.15.1",
+    "@backstage/core-plugin-api": "^1.10.0",
+    "@backstage/plugin-search": "1.4.18",
+    "@backstage/plugin-search-backend": "1.6.1",
+    "@backstage/plugin-search-backend-module-catalog": "^0.2.4",
+    "@backstage/plugin-search-backend-module-pg": "0.5.37",
+    "@backstage/plugin-search-backend-module-techdocs": "^0.3.1",
+    "@backstage/plugin-search-common": "^1.2.15",
+    "@backstage/plugin-search-react": "^1.8.1",
+    "@backstage/theme": "^0.6.0",
     "@mui/icons-material": "5.16.13",
     "@mui/material": "5.16.13",
     "@mui/styled-engine": "5.16.13",
-    "react-dom": "16.13.1 || ^17.0.0 || ^18.0.0",
-    "react-router-dom": "^6.3.0",
-    "react-use": "^17.2.4"
+    "react-dom": "18.3.1",
+    "react-router-dom": "^6.26.2",
+    "react-use": "^17.5.0"
   },
   "peerDependencies": {
-    "@backstage/core-components": "0.15.1",
-    "@backstage/core-plugin-api": "^1.10.0",
-    "@backstage/plugin-search": "1.4.18",
-    "@backstage/plugin-search-react": "1.8.1",
-    "@backstage/theme": "0.6.0",
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "react-router-dom": "^6.0.0"
   },

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

@@ -73,10 +73,7 @@ const MenuSection: React.FC<MenuSectionConfig> = ({
           '&:hover': { background: 'transparent' },
         }}
       >
-        <Typography
-          variant="body2"
-          sx={{ ml: 2, fontSize: '0.875em', color: 'text.disabled' }}
-        >
+        <Typography variant="body2" sx={{ pl: 2, color: 'text.disabled' }}>
           {sectionLabel}
         </Typography>
         <MenuItem

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

@@ -49,6 +49,7 @@ export const SearchInput = ({
       pt: '6px',
       input: { color: '#fff' },
       button: { color: '#fff' },
+      '& fieldset': { border: 'none' },
     }}
   />
 );