From 6a51a49a8100eee8aa4f5f901a284e7d194f7abf Mon Sep 17 00:00:00 2001
From: Boris Bera <bbera@coveo.com>
Date: Thu, 9 Mar 2023 11:18:49 -0500
Subject: [PATCH 1/2] Ensure `<Table />` component respects header styles in
 `columns[*].headerStyle`

Signed-off-by: Boris Bera <bbera@coveo.com>
---
 .changeset/tidy-pumpkins-clean.md             |  5 ++
 .../src/components/Table/Table.test.tsx       | 57 +++++++++++++++++++
 .../src/components/Table/Table.tsx            |  2 +-
 3 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tidy-pumpkins-clean.md

diff --git a/.changeset/tidy-pumpkins-clean.md b/.changeset/tidy-pumpkins-clean.md
new file mode 100644
index 0000000000..c5a067a98c
--- /dev/null
+++ b/.changeset/tidy-pumpkins-clean.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fix bug where `<Table />` component would not take into account header styles defined in `columns[*].headerStyle`.
diff --git a/packages/core-components/src/components/Table/Table.test.tsx b/packages/core-components/src/components/Table/Table.test.tsx
index ff17409502..8f27d7f280 100644
--- a/packages/core-components/src/components/Table/Table.test.tsx
+++ b/packages/core-components/src/components/Table/Table.test.tsx
@@ -17,6 +17,7 @@
 import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { Table } from './Table';
+import { prettyDOM } from '@testing-library/react';
 
 const column1 = {
   title: 'Column 1',
@@ -142,6 +143,62 @@ describe('<Table />', () => {
     });
   });
 
+  describe('with style headers', () => {
+    describe('with CSS properties object', () => {
+      it('renders styled headers', async () => {
+        const columns = [
+          column1,
+          {
+            ...column2,
+            headerStyle: {
+              backgroundColor: 'pink',
+            },
+          },
+        ];
+
+        const rendered = await renderInTestApp(
+          <Table data={minProps.data} columns={columns} />,
+        );
+
+        expect(rendered.getByText(column1.title).closest('th')).not.toHaveStyle(
+          {
+            backgroundColor: 'pink',
+          },
+        );
+        expect(rendered.getByText(column2.title).closest('th')).toHaveStyle({
+          backgroundColor: 'pink',
+        });
+      });
+
+      it('renders styled headers with highlight', async () => {
+        const columns = [
+          {
+            ...column1,
+            highlight: true,
+          },
+          {
+            ...column2,
+            highlight: true,
+            headerStyle: {
+              backgroundColor: 'pink',
+            },
+          },
+        ];
+
+        const rendered = await renderInTestApp(
+          <Table data={minProps.data} columns={columns} />,
+        );
+
+        const column1Header = rendered.getByText(column1.title).closest('th');
+        expect(column1Header?.style.backgroundColor).toBe('');
+        expect(column1Header?.style.color).toBe('rgb(0, 0, 0)');
+        const column2Header = rendered.getByText(column2.title).closest('th');
+        expect(column2Header?.style.backgroundColor).toBe('pink');
+        expect(column2Header?.style.color).toBe('rgb(0, 0, 0)');
+      });
+    });
+  });
+
   it('renders with subtitle', async () => {
     const rendered = await renderInTestApp(
       <Table subtitle="subtitle" {...minProps} />,
diff --git a/packages/core-components/src/components/Table/Table.tsx b/packages/core-components/src/components/Table/Table.tsx
index 89a1d69b96..c43345c9d2 100644
--- a/packages/core-components/src/components/Table/Table.tsx
+++ b/packages/core-components/src/components/Table/Table.tsx
@@ -169,7 +169,7 @@ function convertColumns<T extends object>(
   theme: BackstageTheme,
 ): TableColumn<T>[] {
   return columns.map(column => {
-    const headerStyle: React.CSSProperties = {};
+    const headerStyle: React.CSSProperties = column.headerStyle ?? {};
 
     let cellStyle = column.cellStyle || {};
 

From ab0e9546a99bf438da479a32c62f236403eed84b Mon Sep 17 00:00:00 2001
From: Boris Bera <bbera@coveo.com>
Date: Thu, 9 Mar 2023 11:22:37 -0500
Subject: [PATCH 2/2] Remove leftover import from testing

Signed-off-by: Boris Bera <bbera@coveo.com>
---
 packages/core-components/src/components/Table/Table.test.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/core-components/src/components/Table/Table.test.tsx b/packages/core-components/src/components/Table/Table.test.tsx
index 8f27d7f280..ffdca26d98 100644
--- a/packages/core-components/src/components/Table/Table.test.tsx
+++ b/packages/core-components/src/components/Table/Table.test.tsx
@@ -17,7 +17,6 @@
 import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { Table } from './Table';
-import { prettyDOM } from '@testing-library/react';
 
 const column1 = {
   title: 'Column 1',