fix: remove object-hash dependency from home plugin

The object hash doesn't work if the component props include React
components such as icons. This is true for example the HomepageToolkit
component. Removed the hashing of the component props
completely as the hash is totally optional to be used as a key in the
CustomHomepageGrid.

Signed-off-by: Heikki Hellgren <heikki.hellgren@op.fi>

.changeset/chilly-taxis-shop.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home': patch
+---
+
+Remove object-hash dependency

packages/app/src/components/home/HomePage.tsx

@@ -21,12 +21,15 @@ import {
   ClockConfig,
   HomePageStarredEntities,
   CustomHomepageGrid,
+  HomePageToolkit,
+  HomePageCompanyLogo,
 } from '@backstage/plugin-home';
 import { Content, Header, Page } from '@backstage/core-components';
 import { HomePageSearchBar } from '@backstage/plugin-search';
 import { HomePageCalendar } from '@backstage/plugin-gcalendar';
 import { MicrosoftCalendarCard } from '@backstage/plugin-microsoft-calendar';
 import React from 'react';
+import HomeIcon from '@material-ui/icons/Home';
 
 const clockConfigs: ClockConfig[] = [
   {
@@ -55,12 +58,26 @@ const timeFormat: Intl.DateTimeFormatOptions = {
 
 const defaultConfig = [
   {
-    component: 'HomePageSearchBar',
+    component: 'CompanyLogo',
     x: 0,
     y: 0,
     width: 12,
     height: 1,
   },
+  {
+    component: 'WelcomeTitle',
+    x: 0,
+    y: 1,
+    width: 12,
+    height: 1,
+  },
+  {
+    component: 'HomePageSearchBar',
+    x: 0,
+    y: 2,
+    width: 12,
+    height: 1,
+  },
 ];
 
 export const homePage = (
@@ -78,6 +95,17 @@ export const homePage = (
         <HomePageCalendar />
         <MicrosoftCalendarCard />
         <HomePageStarredEntities />
+        <HomePageCompanyLogo />
+        <WelcomeTitle />
+        <HomePageToolkit
+          tools={[
+            {
+              url: 'https://backstage.io',
+              label: 'Backstage Homepage',
+              icon: <HomeIcon />,
+            },
+          ]}
+        />
       </CustomHomepageGrid>
     </Content>
   </Page>

plugins/home/package.json

@@ -48,7 +48,6 @@
     "@rjsf/validator-ajv8": "5.6.0",
     "@types/react": "^16.13.1 || ^17.0.0",
     "lodash": "^4.17.21",
-    "object-hash": "^3.0.0",
     "react-grid-layout": "^1.3.4",
     "react-resizable": "^3.0.4",
     "react-use": "^17.2.4",

plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx

@@ -46,7 +46,6 @@ import { CardConfig } from '../../extensions';
 
 // eslint-disable-next-line new-cap
 const ResponsiveGrid = WidthProvider(Responsive);
-const hash = require('object-hash');
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -336,14 +335,14 @@ export const CustomHomepageGrid = (props: CustomHomepageGridProps) => {
             ...widget.component.props,
             ...(w.settings ?? {}),
           };
-          const propsHash = hash(widgetProps, {});
+
           return (
             <div
               key={l.i}
               className={`${styles.widgetWrapper} ${editMode && 'edit'}`}
             >
               <ErrorBoundary>
-                <widget.component.type key={propsHash} {...widgetProps} />
+                <widget.component.type {...widgetProps} />
               </ErrorBoundary>
               {editMode && (
                 <WidgetSettingsOverlay

yarn.lock

@@ -6997,7 +6997,6 @@ __metadata:
     cross-fetch: ^3.1.5
     lodash: ^4.17.21
     msw: ^1.0.0
-    object-hash: ^3.0.0
     react-grid-layout: ^1.3.4
     react-resizable: ^3.0.4
     react-use: ^17.2.4