From 8df398c3c706369f6990719603a357c161606f81 Mon Sep 17 00:00:00 2001 From: Meier Lukas Date: Tue, 24 Dec 2024 14:16:24 +0100 Subject: [PATCH] feat(apps): remove url variables (#1771) --- .../src/app/[locale]/manage/apps/page.tsx | 5 +-- packages/common/package.json | 3 +- packages/common/src/app-url/base.ts | 23 ------------ packages/common/src/app-url/client.ts | 6 --- packages/common/src/app-url/server.ts | 8 ---- packages/common/src/client.ts | 1 - packages/common/src/server.ts | 1 - packages/widgets/src/app/component.tsx | 37 ++++++++++--------- .../widgets/src/app/ping/ping-indicator.tsx | 5 +-- packages/widgets/src/bookmarks/component.tsx | 29 ++++++++------- pnpm-lock.yaml | 3 -- 11 files changed, 41 insertions(+), 80 deletions(-) delete mode 100644 packages/common/src/app-url/base.ts delete mode 100644 packages/common/src/app-url/client.ts delete mode 100644 packages/common/src/app-url/server.ts diff --git a/apps/nextjs/src/app/[locale]/manage/apps/page.tsx b/apps/nextjs/src/app/[locale]/manage/apps/page.tsx index 78a3474a4..f95882a56 100644 --- a/apps/nextjs/src/app/[locale]/manage/apps/page.tsx +++ b/apps/nextjs/src/app/[locale]/manage/apps/page.tsx @@ -6,7 +6,6 @@ import { IconBox, IconPencil } from "@tabler/icons-react"; import type { RouterOutputs } from "@homarr/api"; import { api } from "@homarr/api/server"; import { auth } from "@homarr/auth/next"; -import { parseAppHrefWithVariablesServer } from "@homarr/common/server"; import { getI18n, getScopedI18n } from "@homarr/translation/server"; import { ManageContainer } from "~/components/manage/manage-container"; @@ -82,8 +81,8 @@ const AppCard = async ({ app }: AppCardProps) => { )} {app.href && ( - - {parseAppHrefWithVariablesServer(app.href)} + + {app.href} )} diff --git a/packages/common/package.json b/packages/common/package.json index 8312506ae..fca390d00 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -28,8 +28,7 @@ "@homarr/log": "workspace:^0.1.0", "dayjs": "^1.11.13", "next": "^14.2.21", - "react": "^19.0.0", - "tldts": "^6.1.69" + "react": "^19.0.0" }, "devDependencies": { "@homarr/eslint-config": "workspace:^0.2.0", diff --git a/packages/common/src/app-url/base.ts b/packages/common/src/app-url/base.ts deleted file mode 100644 index b189c9352..000000000 --- a/packages/common/src/app-url/base.ts +++ /dev/null @@ -1,23 +0,0 @@ -import * as tldts from "tldts"; - -const safeParseTldts = (url: string) => { - try { - return tldts.parse(url); - } catch { - return null; - } -}; - -export const parseAppHrefWithVariables = (url: TInput, currentHref: string): TInput => { - if (!url || url.length === 0) return url; - - const tldtsResult = safeParseTldts(currentHref); - - const urlObject = new URL(currentHref); - - return url - .replaceAll("[homarr_base]", `${urlObject.protocol}//${urlObject.hostname}`) - .replaceAll("[homarr_hostname]", tldtsResult?.hostname ?? "") - .replaceAll("[homarr_domain]", tldtsResult?.domain ?? "") - .replaceAll("[homarr_protocol]", urlObject.protocol.replace(":", "")) as TInput; -}; diff --git a/packages/common/src/app-url/client.ts b/packages/common/src/app-url/client.ts deleted file mode 100644 index 92d16a028..000000000 --- a/packages/common/src/app-url/client.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { parseAppHrefWithVariables } from "./base"; - -export const parseAppHrefWithVariablesClient = (url: TInput): TInput => { - if (typeof window === "undefined") return url; - return parseAppHrefWithVariables(url, window.location.href); -}; diff --git a/packages/common/src/app-url/server.ts b/packages/common/src/app-url/server.ts deleted file mode 100644 index 1f4ff363d..000000000 --- a/packages/common/src/app-url/server.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { headers } from "next/headers"; - -import { extractBaseUrlFromHeaders } from "../url"; -import { parseAppHrefWithVariables } from "./base"; - -export const parseAppHrefWithVariablesServer = (url: TInput): TInput => { - return parseAppHrefWithVariables(url, extractBaseUrlFromHeaders(headers())); -}; diff --git a/packages/common/src/client.ts b/packages/common/src/client.ts index 1a9fcaadf..88fd136c4 100644 --- a/packages/common/src/client.ts +++ b/packages/common/src/client.ts @@ -1,2 +1 @@ -export * from "./app-url/client"; export * from "./revalidate-path-action"; diff --git a/packages/common/src/server.ts b/packages/common/src/server.ts index 136ecfc84..6979f7b10 100644 --- a/packages/common/src/server.ts +++ b/packages/common/src/server.ts @@ -1,3 +1,2 @@ -export * from "./app-url/server"; export * from "./security"; export * from "./encryption"; diff --git a/packages/widgets/src/app/component.tsx b/packages/widgets/src/app/component.tsx index 989de06c3..33edf9f19 100644 --- a/packages/widgets/src/app/component.tsx +++ b/packages/widgets/src/app/component.tsx @@ -7,7 +7,6 @@ import { IconLoader } from "@tabler/icons-react"; import combineClasses from "clsx"; import { clientApi } from "@homarr/api/client"; -import { parseAppHrefWithVariablesClient } from "@homarr/common/client"; import { useRegisterSpotlightContextResults } from "@homarr/spotlight"; import { useI18n } from "@homarr/translation/client"; @@ -31,26 +30,30 @@ export default function AppWidget({ options, isEditMode }: WidgetComponentProps< ); useRegisterSpotlightContextResults( `app-${app.id}`, - [ - { - id: app.id, - name: app.name, - icon: app.iconUrl, - interaction() { - return { - type: "link", - href: parseAppHrefWithVariablesClient(app.href ?? ""), - newTab: options.openInNewTab, - }; - }, - }, - ], + app.href + ? [ + { + id: app.id, + name: app.name, + icon: app.iconUrl, + interaction() { + return { + type: "link", + // We checked above that app.href is defined + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + href: app.href!, + newTab: options.openInNewTab, + }; + }, + }, + ] + : [], [app, options.openInNewTab], ); return ( @@ -88,7 +91,7 @@ export default function AppWidget({ options, isEditMode }: WidgetComponentProps< } interface AppLinkProps { - href: string; + href: string | undefined; openInNewTab: boolean; enabled: boolean; } diff --git a/packages/widgets/src/app/ping/ping-indicator.tsx b/packages/widgets/src/app/ping/ping-indicator.tsx index 1bf781427..b96841376 100644 --- a/packages/widgets/src/app/ping/ping-indicator.tsx +++ b/packages/widgets/src/app/ping/ping-indicator.tsx @@ -3,7 +3,6 @@ import { IconCheck, IconX } from "@tabler/icons-react"; import type { RouterOutputs } from "@homarr/api"; import { clientApi } from "@homarr/api/client"; -import { parseAppHrefWithVariablesClient } from "@homarr/common/client"; import { PingDot } from "./ping-dot"; @@ -14,7 +13,7 @@ interface PingIndicatorProps { export const PingIndicator = ({ href }: PingIndicatorProps) => { const [ping] = clientApi.widget.app.ping.useSuspenseQuery( { - url: parseAppHrefWithVariablesClient(href), + url: href, }, { refetchOnMount: false, @@ -25,7 +24,7 @@ export const PingIndicator = ({ href }: PingIndicatorProps) => { const [pingResult, setPingResult] = useState(ping); clientApi.widget.app.updatedPing.useSubscription( - { url: parseAppHrefWithVariablesClient(href) }, + { url: href }, { onData(data) { setPingResult(data); diff --git a/packages/widgets/src/bookmarks/component.tsx b/packages/widgets/src/bookmarks/component.tsx index cfc874661..b4383fb42 100644 --- a/packages/widgets/src/bookmarks/component.tsx +++ b/packages/widgets/src/bookmarks/component.tsx @@ -4,7 +4,6 @@ import { Anchor, Box, Card, Divider, Flex, Group, Stack, Text, Title, UnstyledBu import type { RouterOutputs } from "@homarr/api"; import { clientApi } from "@homarr/api/client"; -import { parseAppHrefWithVariablesClient } from "@homarr/common/client"; import { useRegisterSpotlightContextResults } from "@homarr/spotlight"; import type { WidgetComponentProps } from "../definition"; @@ -19,18 +18,22 @@ export default function BookmarksWidget({ options, width, height, itemId }: Widg useRegisterSpotlightContextResults( `bookmark-${itemId}`, - data.map((app) => ({ - id: app.id, - name: app.name, - icon: app.iconUrl, - interaction() { - return { - type: "link", - href: parseAppHrefWithVariablesClient(app.href ?? ""), - newTab: false, - }; - }, - })), + data + .filter((app) => app.href !== null) + .map((app) => ({ + id: app.id, + name: app.name, + icon: app.iconUrl, + interaction() { + return { + type: "link", + // We checked above that app.href is defined + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + href: app.href!, + newTab: false, + }; + }, + })), [data], ); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a05aa9958..c3eb2e2ba 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -707,9 +707,6 @@ importers: react: specifier: ^19.0.0 version: 19.0.0 - tldts: - specifier: ^6.1.69 - version: 6.1.69 devDependencies: '@homarr/eslint-config': specifier: workspace:^0.2.0