From e3de0d6708a217b118e402ef250b0887aba1a232 Mon Sep 17 00:00:00 2001
From: OJ Abba <phavorabba@gmail.com>
Date: Fri, 2 Jan 2026 17:47:36 +0000
Subject: [PATCH] [Bug] (SC-204212) Improve site name fallback handling in
 `Filters` component

---
 src/components/LinkDevice/blocks/Filters.tsx  | 13 ++++---
 .../blocks/__tests__/Filters.test.tsx         | 36 +++++++++++++++++++
 2 files changed, 44 insertions(+), 5 deletions(-)
 create mode 100644 src/components/LinkDevice/blocks/__tests__/Filters.test.tsx

diff --git a/src/components/LinkDevice/blocks/Filters.tsx b/src/components/LinkDevice/blocks/Filters.tsx
index d9387a0..01c75cf 100644
--- a/src/components/LinkDevice/blocks/Filters.tsx
+++ b/src/components/LinkDevice/blocks/Filters.tsx
@@ -1,9 +1,7 @@
-import { useMemo } from "react";
 import { Search, Select } from "@deskpro/app-sdk";
-import { getOptions } from "@/utils";
 import { Label } from "@/components/common";
 import type { FC } from "react";
-import type { Maybe,Option } from "@/types";
+import type { Maybe, Option } from "@/types";
 import type { Site } from "@/services/lansweeper/types";
 
 type Props = {
@@ -15,7 +13,12 @@ type Props = {
 };
 
 const Filters: FC<Props> = ({ sites, siteId, isFetching, onChangeSearchQuery, onChangeSite }) => {
-  const options = useMemo(() => getOptions(sites, "brandingName"), [sites]) as Array<Option>;
+  const siteOptions: Option[] = sites.map((site) => ({
+    value: site.id,
+    label: site.brandingName || site.name || `Unnamed Site (${site.id})`,
+    key: site.id,
+    type: "value",
+  }))
 
   return (
     <>
@@ -26,7 +29,7 @@ const Filters: FC<Props> = ({ sites, siteId, isFetching, onChangeSearchQuery, on
       <Label label="Site" required>
         <Select
           value={siteId}
-          options={options}
+          options={siteOptions}
           onChange={onChangeSite as () => void}
         />
       </Label>
diff --git a/src/components/LinkDevice/blocks/__tests__/Filters.test.tsx b/src/components/LinkDevice/blocks/__tests__/Filters.test.tsx
new file mode 100644
index 0000000..7f2954d
--- /dev/null
+++ b/src/components/LinkDevice/blocks/__tests__/Filters.test.tsx
@@ -0,0 +1,36 @@
+import { lightTheme } from "@deskpro/deskpro-ui";
+import { render } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+import { Filters } from "../Filters";
+
+function renderComponent(site: { id: string; name?: string; brandingName?: string }) {
+  return render(
+    <ThemeProvider theme={lightTheme}>
+      <Filters
+        isFetching={false}
+        sites={[
+          site,
+        ]}
+        siteId="dp-97"
+        onChangeSearchQuery={jest.fn()}
+        onChangeSite={jest.fn()}
+      />
+    </ThemeProvider>
+  )
+}
+
+
+describe("Filters", () => {
+  it.each([
+    [{ id: "dp-97" }, "Unnamed Site (dp-97)"],
+    [{ id: "dp-97", name: "Deskpro Site" }, "Deskpro Site"],
+    [
+      { id: "dp-97", name: "Deskpro Site", brandingName: "Deskpro Site (Branding)" },
+      "Deskpro Site (Branding)",
+    ],
+  ])("correctly handles site name fallbacks", (site, target) => {
+    const { getByText } = renderComponent(site)
+
+    expect(getByText(target)).toBeInTheDocument()
+  })
+})