feat(FN-4151): add mobile layout contract test for inline editing integrati
Adds a changeset documenting the GitHub tracking mobile layout work (FN-4151), accompanied by a mobile layout contract test for inline editing and integrations in the dashboard. Fusion-Task-Id: FN-4151
This commit is contained in:
5
.changeset/fn-4151-github-tracking-mobile-layout.md
Normal file
5
.changeset/fn-4151-github-tracking-mobile-layout.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@runfusion/fusion": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Fix mobile layout of the GitHub tracking enable button on the task detail modal so it stays before the disclosure toggle and no longer overflows narrow screens.
|
||||||
@@ -16,10 +16,56 @@ import {
|
|||||||
readDashboardStylesSource,
|
readDashboardStylesSource,
|
||||||
setupTaskDetailModalHooks,
|
setupTaskDetailModalHooks,
|
||||||
} from "./TaskDetailModal.test-helpers";
|
} from "./TaskDetailModal.test-helpers";
|
||||||
|
import { loadAllAppCss } from "../../test/cssFixture";
|
||||||
import { TaskDetailModal, TaskDetailContent } from "../TaskDetailModal";
|
import { TaskDetailModal, TaskDetailContent } from "../TaskDetailModal";
|
||||||
|
|
||||||
setupTaskDetailModalHooks();
|
setupTaskDetailModalHooks();
|
||||||
|
|
||||||
|
function getMediaBlocks(css: string, mediaQuery: string): string[] {
|
||||||
|
const blocks: string[] = [];
|
||||||
|
let searchFrom = 0;
|
||||||
|
|
||||||
|
while (searchFrom < css.length) {
|
||||||
|
const mediaStart = css.indexOf(mediaQuery, searchFrom);
|
||||||
|
if (mediaStart === -1) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
const blockStart = css.indexOf("{", mediaStart);
|
||||||
|
if (blockStart === -1) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
let depth = 1;
|
||||||
|
let index = blockStart + 1;
|
||||||
|
|
||||||
|
while (index < css.length && depth > 0) {
|
||||||
|
const char = css[index];
|
||||||
|
if (char === "{") {
|
||||||
|
depth += 1;
|
||||||
|
} else if (char === "}") {
|
||||||
|
depth -= 1;
|
||||||
|
}
|
||||||
|
index += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (depth === 0) {
|
||||||
|
blocks.push(css.slice(blockStart + 1, index - 1));
|
||||||
|
searchFrom = index;
|
||||||
|
} else {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return blocks;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRuleBlock(css: string, selector: string): string {
|
||||||
|
const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
||||||
|
const ruleMatch = css.match(new RegExp(`${escapedSelector}\\s*\\{([^}]*)\\}`));
|
||||||
|
return ruleMatch?.[1] ?? "";
|
||||||
|
}
|
||||||
|
|
||||||
describe("TaskDetailModal", () => {
|
describe("TaskDetailModal", () => {
|
||||||
describe("source issue metadata", () => {
|
describe("source issue metadata", () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
@@ -2382,6 +2428,20 @@ describe("TaskDetailModal", () => {
|
|||||||
expect(screen.getByRole("button", { name: "Expand GitHub tracking details" })).toBeInTheDocument();
|
expect(screen.getByRole("button", { name: "Expand GitHub tracking details" })).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("mobile layout keeps the enable button in source order without width forcing at the 768px breakpoint", () => {
|
||||||
|
const css = loadAllAppCss();
|
||||||
|
const mobileCss = getMediaBlocks(css, "@media (max-width: 768px)").join("\n");
|
||||||
|
const enableRule = getRuleBlock(mobileCss, ".detail-github-tracking-enable");
|
||||||
|
const headerRule = getRuleBlock(mobileCss, ".detail-source-header");
|
||||||
|
|
||||||
|
expect(mobileCss).toBeTruthy();
|
||||||
|
expect(enableRule).toBeTruthy();
|
||||||
|
expect(headerRule).toBeTruthy();
|
||||||
|
expect(enableRule).not.toMatch(/\border\s*:/);
|
||||||
|
expect(enableRule).not.toMatch(/\bwidth\s*:\s*100%/);
|
||||||
|
expect(headerRule).toMatch(/\bflex-wrap\s*:\s*wrap/);
|
||||||
|
});
|
||||||
|
|
||||||
it("hides section when tracking is disabled and task is not in an eligible column", () => {
|
it("hides section when tracking is disabled and task is not in an eligible column", () => {
|
||||||
render(
|
render(
|
||||||
<TaskDetailModal
|
<TaskDetailModal
|
||||||
|
|||||||
Reference in New Issue
Block a user