fix(grid): move total row count refresh into the total label
Refs: #7520
This commit is contained in:
11 files changed
+34
-20
No files matched your search
@@ -14109,26 +14109,30 @@ function openGridSnapshot() {
|
||||
count: result.rows.length,
|
||||
})
|
||||
}}
|
||||
<span v-if="typeof displayedTotalRowCount === 'number' && displayedTotalRowCount >= 0" class="text-muted-foreground/70">{{ t(totalRowCountLabelKey, { count: displayedTotalRowCount }) }}</span>
|
||||
<i18n-t v-if="showRerunTotalCountAction && !(totalRowCountBusy && !manualTotalRowCountLoading)" keypath="grid.totalRowCountWithAction" tag="span" class="text-muted-foreground/70">
|
||||
<template #button>
|
||||
<button
|
||||
type="button"
|
||||
class="mr-1 inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm align-middle text-muted-foreground/70 hover:bg-gray-200 hover:text-foreground disabled:pointer-events-none disabled:opacity-50 dark:hover:bg-gray-800"
|
||||
:disabled="manualTotalRowCountLoading"
|
||||
:aria-busy="manualTotalRowCountLoading ? 'true' : undefined"
|
||||
:title="manualTotalRowCountLoading ? t('grid.totalRowCountLoading') : t('grid.calculateTotalRows')"
|
||||
:aria-label="manualTotalRowCountLoading ? t('grid.totalRowCountLoading') : t('grid.calculateTotalRows')"
|
||||
@click="calculateTotalRowCount"
|
||||
>
|
||||
<Loader2 v-if="manualTotalRowCountLoading" aria-hidden="true" class="h-3 w-3 animate-spin" />
|
||||
<RefreshCcw v-else aria-hidden="true" class="h-3 w-3" />
|
||||
</button>
|
||||
</template>
|
||||
<template #count>{{ displayedTotalRowCount }}</template>
|
||||
</i18n-t>
|
||||
<span v-else-if="typeof displayedTotalRowCount === 'number' && displayedTotalRowCount >= 0" class="text-muted-foreground/70">{{ t(totalRowCountLabelKey, { count: displayedTotalRowCount }) }}</span>
|
||||
<span v-if="totalRowCountBusy && !(showRerunTotalCountAction && manualTotalRowCountLoading)" class="text-muted-foreground/70">
|
||||
{{ t("grid.totalRowCountLoading") }}
|
||||
</span>
|
||||
<button v-else-if="showExactTotalCountAction" type="button" class="text-muted-foreground/70 underline underline-offset-2 hover:text-foreground disabled:pointer-events-none" :disabled="manualTotalRowCountLoading" @click="calculateTotalRowCount">
|
||||
{{ t("grid.calculateTotalRowsInline") }}
|
||||
</button>
|
||||
<button
|
||||
v-else-if="showRerunTotalCountAction"
|
||||
type="button"
|
||||
class="ml-1 inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm align-middle text-muted-foreground/70 hover:bg-gray-200 hover:text-foreground disabled:pointer-events-none disabled:opacity-50 dark:hover:bg-gray-800"
|
||||
:disabled="manualTotalRowCountLoading"
|
||||
:aria-busy="manualTotalRowCountLoading ? 'true' : undefined"
|
||||
:title="manualTotalRowCountLoading ? t('grid.totalRowCountLoading') : t('grid.calculateTotalRows')"
|
||||
:aria-label="manualTotalRowCountLoading ? t('grid.totalRowCountLoading') : t('grid.calculateTotalRows')"
|
||||
@click="calculateTotalRowCount"
|
||||
>
|
||||
<Loader2 v-if="manualTotalRowCountLoading" aria-hidden="true" class="h-3 w-3 animate-spin" />
|
||||
<RefreshCcw v-else aria-hidden="true" class="h-3 w-3" />
|
||||
</button>
|
||||
</span>
|
||||
<span v-if="showTruncationWarning" class="shrink-0 text-amber-500 text-xs">(truncated)</span>
|
||||
<span v-if="!hasData" class="shrink-0">{{ t("grid.rowsAffected", { count: result.affected_rows }) }}</span>
|
||||
|
||||
@@ -12,7 +12,7 @@ const statusRenderSource = (() => {
|
||||
})();
|
||||
|
||||
const rerunBranch = (() => {
|
||||
const start = statusRenderSource.indexOf("} else if ($setup.showRerunTotalCountAction) {");
|
||||
const start = statusRenderSource.indexOf("$setup.showRerunTotalCountAction && !($setup.totalRowCountBusy && !$setup.manualTotalRowCountLoading)");
|
||||
return start === -1 ? "" : statusRenderSource.slice(start, statusRenderSource.indexOf("</button>", start));
|
||||
})();
|
||||
|
||||
@@ -48,19 +48,21 @@ describe("DataGrid rerun total row count action", () => {
|
||||
expect(showDataGridRerunTotalCountAction({ canCalculateTotalRowCount: true, displayedTotalRowCount: NaN, totalRowCountIsExact: true })).toBe(false);
|
||||
});
|
||||
|
||||
it("keeps the numeric total outside the action chain and orders busy, inline link, then rerun icon", () => {
|
||||
it("places the rerun icon before the numeric total and keeps the other actions ordered", () => {
|
||||
const numericTotal = statusRenderSource.indexOf('typeof $setup.displayedTotalRowCount === "number" && $setup.displayedTotalRowCount >= 0');
|
||||
const rerunAction = statusRenderSource.indexOf("$setup.showRerunTotalCountAction && !($setup.totalRowCountBusy && !$setup.manualTotalRowCountLoading)");
|
||||
const busyBranch = statusRenderSource.indexOf("if ($setup.totalRowCountBusy && !($setup.showRerunTotalCountAction && $setup.manualTotalRowCountLoading)) {");
|
||||
const inlineLink = statusRenderSource.indexOf("} else if ($setup.showExactTotalCountAction) {");
|
||||
const rerunAction = statusRenderSource.indexOf("} else if ($setup.showRerunTotalCountAction) {");
|
||||
expect(numericTotal).toBeGreaterThan(-1);
|
||||
expect(rerunAction).toBeGreaterThan(-1);
|
||||
expect(rerunAction).toBeLessThan(numericTotal);
|
||||
expect(busyBranch).toBeGreaterThan(numericTotal);
|
||||
expect(inlineLink).toBeGreaterThan(busyBranch);
|
||||
expect(rerunAction).toBeGreaterThan(inlineLink);
|
||||
});
|
||||
|
||||
it("renders a spaced rerun icon labelled for the total-count action and disabled while counting", () => {
|
||||
expect(rerunBranch).toContain('<button type="button" class="ml-1 inline-flex h-3.5 w-3.5');
|
||||
expect(statusRenderSource).toContain('keypath: "grid.totalRowCountWithAction"');
|
||||
expect(rerunBranch).toContain('<button type="button" class="mr-1 inline-flex h-3.5 w-3.5');
|
||||
expect(rerunBranch).toContain("disabled:pointer-events-none");
|
||||
expect(rerunBranch).toContain("disabled:opacity-50");
|
||||
// title/aria-label toggle between idle and busy copy
|
||||
|
||||
Reference in new issue
Block a user