diff --git a/packages/widgets/src/wud/component.tsx b/packages/widgets/src/wud/component.tsx index 1c744d2cd..0895aeb2b 100644 --- a/packages/widgets/src/wud/component.tsx +++ b/packages/widgets/src/wud/component.tsx @@ -11,36 +11,49 @@ import type { WudContainerUpdate } from "@homarr/integrations"; import { useScopedI18n } from "@homarr/translation/client"; import { WidgetEmptyState } from "../common/empty-state"; +import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url"; +import { WidgetQueryErrorIndicator } from "../common/query-state-indicator"; import type { WidgetComponentProps } from "../definition"; import classes from "./component.module.css"; -export default function WudWidget({ integrationIds, options, width }: WidgetComponentProps<"wud">) { +export default function WudWidget({ integrationIds, options, width, displayMode }: WidgetComponentProps<"wud">) { const integrationId = integrationIds[0]; if (!integrationId) return null; - return ; + return ( + + ); } const WudWidgetContent = ({ integrationId, options, width, + isAdvanced, }: { integrationId: string; options: WidgetComponentProps<"wud">["options"]; width: number; + isAdvanced: boolean; }) => { const t = useScopedI18n("widget.wud"); - const [data] = clientApi.widget.wud.getStats.useSuspenseQuery({ integrationId }); + const [data, statsQuery] = clientApi.widget.wud.getStats.useSuspenseQuery({ integrationId }); const board = useRequiredBoard(); - const isTiny = width < 256; + const isTiny = !isAdvanced && width < 256; const stats = data.stats; if (stats.totalContainers === 0) return ; const updatePercentage = Math.round((stats.updatesAvailable / stats.totalContainers) * 100); const badgeColor = stats.updatesAvailable === 0 ? "green" : progressColor(updatePercentage); - const showUpdateList = options.showUpdateList && stats.updates.length > 0; + const showTitle = isAdvanced || options.showTitle; + const showRing = isAdvanced || options.showRing; + const showUpdateList = (isAdvanced || options.showUpdateList) && stats.updates.length > 0; const ring = ( ); - const tinyContent = options.showRing ? ( + const tinyContent = showRing ? ( @@ -102,7 +115,12 @@ const WudWidgetContent = ({ return ( - {options.showTitle && !isTiny && ( + {Boolean(statsQuery.error) && ( + + + + )} + {showTitle && !isTiny && ( @@ -122,12 +140,12 @@ const WudWidgetContent = ({ tinyContent ) : options.layout === "horizontal" ? ( - {options.showRing && ring} + {showRing && ring} {summary} ) : ( - {options.showRing && ring} + {showRing && ring} {summary} )} @@ -181,6 +199,7 @@ const UpdateCard = ({ className: string | undefined; }) => { const t = useScopedI18n("widget.wud"); + const href = getSafeApplicationUrl(update.link); const isDigestUpdate = isDigestVersion(update.newVersion); const fullVersionText = buildVersionText(update.currentVersion, update.newVersion); const versionText = isDigestUpdate @@ -201,12 +220,12 @@ const UpdateCard = ({ {showVersionTooltip ? {versionBadge} : versionBadge} - {update.link && ( + {href && (