diff --git a/apps/docs/docs/widgets/downloads/index.mdx b/apps/docs/docs/widgets/downloads/index.mdx index 85bace5e3..fefd416c1 100644 --- a/apps/docs/docs/widgets/downloads/index.mdx +++ b/apps/docs/docs/widgets/downloads/index.mdx @@ -135,7 +135,8 @@ are enabled, the shared menu provides widget-level actions such as advanced view - **Right-click** any download to copy its name or ID; pause, resume, and delete are available only with Interact access - **Click** any row to expand it and see full download details inline - **Hover** a download name for a quick stats tooltip -- **Stats toggle** — show or hide the global stats bar in compact mode; advanced view always shows the stats bar +- **Stats toggle** — show or hide the global stats bar in compact mode; advanced view always shows the stats bar without + changing the compact choice - **Pause / Resume** actionable queues using the footer controls - **Filter** rows by integration or status using the filter button in the footer - **Sort** by clicking sortable column headers; the default sort is configured per widget, while header changes apply to the current view diff --git a/packages/widgets/src/downloads/component.tsx b/packages/widgets/src/downloads/component.tsx index dcfe40d29..aa3b1e765 100644 --- a/packages/widgets/src/downloads/component.tsx +++ b/packages/widgets/src/downloads/component.tsx @@ -64,6 +64,7 @@ import { filterDownloadItemsByStatus, getAvailableDownloadStates, getDownloadColumnAccessors, + getDownloadsStatsDisplay, } from "./helpers"; dayjs.extend(relativeTime); @@ -327,6 +328,7 @@ export default function DownloadClientsWidget({ const [contextMenu, setContextMenu] = useState(null); const [showStats, { toggle: toggleStats }] = useDisclosure(false); const isAdvanced = displayMode === "advanced"; + const statsDisplay = getDownloadsStatsDisplay(showStats, isAdvanced); const utils = clientApi.useUtils(); const mutationOptions = { @@ -751,7 +753,7 @@ export default function DownloadClientsWidget({ return ( - {(showStats || isAdvanced) && ( + {statsDisplay.visible && ( )} @@ -1185,7 +1187,7 @@ interface WidgetFooterProps { pauseQueue: (args: { integrationIds: string[] }) => void; resumeQueue: (args: { integrationIds: string[] }) => void; showStats: boolean; - toggleStats: () => void; + toggleStats?: () => void; } function WidgetFooter({ @@ -1323,11 +1325,13 @@ function WidgetFooter({ - - - - - + {toggleStats ? ( + + + + + + ) : null} {clients.map(({ integration }) => ( diff --git a/packages/widgets/src/downloads/helpers.spec.ts b/packages/widgets/src/downloads/helpers.spec.ts index 8782bf4bb..6a0cbf4b8 100644 --- a/packages/widgets/src/downloads/helpers.spec.ts +++ b/packages/widgets/src/downloads/helpers.spec.ts @@ -5,6 +5,7 @@ import { filterDownloadItemsByStatus, getAvailableDownloadStates, getDownloadColumnAccessors, + getDownloadsStatsDisplay, } from "./helpers"; describe("downloads filters", () => { @@ -29,3 +30,22 @@ describe("downloads advanced columns", () => { expect(getDownloadColumnAccessors(["name"], false)).toEqual(["name"]); }); }); + +describe("downloads stats display", () => { + test("keeps advanced stats independent from the compact toggle", () => { + const compactStatsVisible = false; + + expect( + [true, false, true, false].map((isAdvanced) => getDownloadsStatsDisplay(compactStatsVisible, isAdvanced)), + ).toEqual([ + { visible: true, canToggle: false }, + { visible: false, canToggle: true }, + { visible: true, canToggle: false }, + { visible: false, canToggle: true }, + ]); + }); + + test("preserves an explicitly enabled compact stats bar", () => { + expect(getDownloadsStatsDisplay(true, false)).toEqual({ visible: true, canToggle: true }); + }); +}); diff --git a/packages/widgets/src/downloads/helpers.ts b/packages/widgets/src/downloads/helpers.ts index ec77c9892..99a670f46 100644 --- a/packages/widgets/src/downloads/helpers.ts +++ b/packages/widgets/src/downloads/helpers.ts @@ -22,6 +22,13 @@ export const DOWNLOAD_COLUMN_ACCESSORS = [ type DownloadColumnAccessor = (typeof DOWNLOAD_COLUMN_ACCESSORS)[number]; +export function getDownloadsStatsDisplay(showCompactStats: boolean, isAdvanced: boolean) { + return { + visible: showCompactStats || isAdvanced, + canToggle: !isAdvanced, + }; +} + export function getDownloadColumnAccessors( configuredColumns: readonly DownloadColumnAccessor[], isAdvanced: boolean,