From acca8966465c418530549a3e8f43df7077bb62b2 Mon Sep 17 00:00:00 2001
From: Heikki Hellgren <heikki.hellgren@op.fi>
Date: Mon, 8 May 2023 08:41:22 +0300
Subject: [PATCH] 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               |  5 ++++
 packages/app/src/components/home/HomePage.tsx | 30 ++++++++++++++++++-
 plugins/home/package.json                     |  1 -
 .../CustomHomepage/CustomHomepageGrid.tsx     |  5 ++--
 yarn.lock                                     |  1 -
 5 files changed, 36 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/chilly-taxis-shop.md

diff --git a/.changeset/chilly-taxis-shop.md b/.changeset/chilly-taxis-shop.md
new file mode 100644
index 0000000000..9e2e73a5e3
--- /dev/null
+++ b/.changeset/chilly-taxis-shop.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home': patch
+---
+
+Remove object-hash dependency
diff --git a/packages/app/src/components/home/HomePage.tsx b/packages/app/src/components/home/HomePage.tsx
index 26a7ab60f3..da1d0d425c 100644
--- a/packages/app/src/components/home/HomePage.tsx
+++ b/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>
diff --git a/plugins/home/package.json b/plugins/home/package.json
index e8eb7f3ba9..607524147e 100644
--- a/plugins/home/package.json
+++ b/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",
diff --git a/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx b/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx
index 232fbd12c2..6af9044cbd 100644
--- a/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx
+++ b/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
diff --git a/yarn.lock b/yarn.lock
index 0cd30db248..37327ea6f3 100644
--- a/yarn.lock
+++ b/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