fix(oncall): centre row actions under the Actions header

This commit is contained in:
ktx-abhay
2026-11-04 12:12:54 +05:30
parent f75f6b1e1b
commit fe91c74f0c
5 changed files with 35 additions and 8 deletions
@@ -75,7 +75,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
</template>
<template #cell-actions="{ row }">
<div class="flex items-center justify-end">
<div class="flex items-center justify-center">
<OButton
v-if="isEscalating(row.response_state)"
variant="ghost-warning"
@@ -220,7 +220,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</span>
</template>
<template #cell-row-actions="{ row }">
<div class="flex items-center justify-end">
<div class="flex items-center justify-center">
<!-- An open tooltip is the top dismissable layer, so it would take the menu's Escape. -->
<ODropdown
side="bottom"
+7
View File
@@ -328,6 +328,13 @@ describe("OnCallMine", () => {
expect(data.end_at).toBeGreaterThan(data.start_at);
});
it("centres the shift row's actions under the Actions header", async () => {
const wrapper = render();
await flushPromises();
const button = wrapper.find('[data-test="oncall-mine-test-page-team_1"]').element;
expect(button.parentElement!.classList).toContain("justify-center");
});
it("sends the team test page after a confirm", async () => {
service.testPage.mockResolvedValue({
data: {
+2 -2
View File
@@ -278,7 +278,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OText v-else variant="meta" as="span">{{ raw("—") }}</OText>
</template>
<template #cell-row-actions="{ row }">
<div class="flex items-center justify-end">
<div class="flex items-center justify-center">
<OButton
v-if="canCover(row)"
variant="ghost"
@@ -662,7 +662,7 @@ const shiftColumns = computed<OTableColumnDef<ShiftRow>[]>(() => [
header: t("oncall.actions"),
sortable: false,
size: 96,
meta: { align: "right" },
meta: { align: "center" },
},
]);
@@ -833,6 +833,18 @@ describe("OnCallResponses", () => {
expect(cell.querySelectorAll('[aria-hidden="true"]').length).toBeGreaterThan(0);
});
/// A ⋯-only row reserves no empty slots, so its menu centres under the Actions header.
it("centres a resolved row's lone ⋯ with no empty slots beside it", async () => {
const resolved = await withPages([
page({ state: "resolved", closed_at: Date.now() * 1000, acked_by: "ana@o2.ai" }),
]);
const cell = resolved
.find('[data-test="oncall-row-more-alert:al_ckt"]')
.element.closest(".justify-center")!;
expect(cell).not.toBeNull();
expect(cell.querySelectorAll(":scope > span.size-8[aria-hidden='true']").length).toBe(0);
});
/// Snoozing only makes sense while the ladder is still climbing, so a
/// handled row's menu must not offer it.
it("offers no snooze once nothing is escalating", async () => {
+12 -4
View File
@@ -607,9 +607,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div>
</template>
<!-- Three fixed slots, so icons line up down the column: acknowledge, resolve, then ⋯ on every row. -->
<!-- Slots stay fixed while a row has an inline action; a ⋯-only row drops them so it centres under the header. -->
<template #cell-actions="{ row }">
<div class="flex items-center justify-end">
<div class="flex items-center justify-center">
<template v-if="!row.latest.team_id">
<ODropdown>
<template #trigger>
@@ -654,7 +654,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OIcon name="check-circle" size="sm" aria-hidden="true" />
<OTooltip :content="ackTooltip(row)" />
</OButton>
<span v-else class="size-8 shrink-0 max-md:hidden" aria-hidden="true" />
<span
v-else-if="hasUnresolved(row)"
class="size-8 shrink-0 max-md:hidden"
aria-hidden="true"
/>
<OButton
v-if="hasUnresolved(row)"
variant="ghost-primary"
@@ -668,7 +672,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OIcon name="task-alt" size="sm" aria-hidden="true" />
<OTooltip :content="t('oncall.resolve')" />
</OButton>
<span v-else class="size-8 shrink-0 max-md:hidden" aria-hidden="true" />
<span
v-else-if="canAcknowledge(row)"
class="size-8 shrink-0 max-md:hidden"
aria-hidden="true"
/>
</template>
<!-- An open tooltip is the top dismissable layer, so it would take the menu's Escape. -->
<ODropdown