forked from farhoodlabs/paperclip
Revert "fix(ui): improve routine properties panel and history UX" (#5723)
## Thinking Path > - Paperclip orchestrates AI agents through visible, governable task and routine workflows. > - The routines UI includes the routine detail page, properties panel, history tab, and shared sidebar components. > - PR #5703 changed that workflow by widening the routine properties panel and moving revision inspection/comparison into dialogs. > - The product direction for that change is being paused for now, so the safest path is a direct revert instead of partial edits. > - This pull request reverts merge commit `74cb560c41305ac3283067d1ec8d3060ffdc28cb` from #5703. > - The benefit is restoring the prior routines UI behavior while keeping the revert easy to review and re-apply later if needed. ## What Changed - Reverted #5703: `fix(ui): improve routine properties panel and history UX`. - Restored the previous routine properties panel sizing, panel context API, routine detail layout, and routine history rendering behavior. - Removed the reverted sidebar pane test additions and restored the previous focused routine history test expectations. ## Verification - `git diff --check origin/master..HEAD` - `pnpm vitest run ui/src/components/RoutineHistoryTab.test.tsx` - `pnpm --filter @paperclipai/ui typecheck` ### Screenshots This is a direct revert of #5703. The visual state after this PR corresponds to the "Before" screenshots from #5703, and the state being removed corresponds to the "After" screenshots from #5703. #### Trigger Panel Width | Before this revert | After this revert | | --- | --- | | <img width="1742" height="1288" alt="triggers-before-this-revert" src="https://github.com/user-attachments/assets/9e818978-283c-49a3-9401-879be550c67b" /> | <img width="1741" height="1289" alt="triggers-after-this-revert" src="https://github.com/user-attachments/assets/2a391769-c355-4219-8da3-d1ea18698430" /> | #### History Panel | Before this revert | After this revert | | --- | --- | | <img width="1741" height="1290" alt="history-before-this-revert" src="https://github.com/user-attachments/assets/4c139238-8494-4438-89e1-4277d05bc3aa" /> | <img width="1739" height="1289" alt="history-after-this-revert" src="https://github.com/user-attachments/assets/eaea4f3d-bb65-4af6-b67f-3ba3026fe0c9" /> | ## Risks - Low technical risk: this is a clean Git revert of a recently merged UI-only PR. - Product risk: the routine properties panel and revision history return to the older, narrower workflow that #5703 was improving. - Re-application risk: future work that wants the #5703 behavior back should re-apply it deliberately rather than cherry-picking around this revert. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used - OpenAI Codex, GPT-5 coding agent, tool-enabled with local shell and GitHub CLI access. Context window size was not exposed in this session. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
@@ -17,10 +17,8 @@ function pointerEvent(type: string, clientX: number) {
|
||||
describe("ResizableSidebarPane", () => {
|
||||
let container: HTMLDivElement;
|
||||
let root: Root;
|
||||
let originalInnerWidth: number;
|
||||
|
||||
beforeEach(() => {
|
||||
originalInnerWidth = window.innerWidth;
|
||||
window.localStorage.clear();
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
@@ -33,8 +31,6 @@ describe("ResizableSidebarPane", () => {
|
||||
});
|
||||
container.remove();
|
||||
window.localStorage.clear();
|
||||
document.documentElement.style.removeProperty("--test-sidebar-width");
|
||||
setInnerWidth(originalInnerWidth);
|
||||
});
|
||||
|
||||
function pane() {
|
||||
@@ -45,14 +41,6 @@ describe("ResizableSidebarPane", () => {
|
||||
return container.querySelector('[role="separator"]') as HTMLDivElement | null;
|
||||
}
|
||||
|
||||
function setInnerWidth(width: number) {
|
||||
Object.defineProperty(window, "innerWidth", {
|
||||
configurable: true,
|
||||
writable: true,
|
||||
value: width,
|
||||
});
|
||||
}
|
||||
|
||||
it("uses a persisted width when open", () => {
|
||||
window.localStorage.setItem("test.sidebar.width", "320");
|
||||
|
||||
@@ -130,135 +118,4 @@ describe("ResizableSidebarPane", () => {
|
||||
expect(handle()).toBeNull();
|
||||
expect(pane().style.width).toBe("240px");
|
||||
});
|
||||
|
||||
it("supports custom defaults and bounds", () => {
|
||||
act(() => {
|
||||
root.render(
|
||||
<ResizableSidebarPane
|
||||
open
|
||||
resizable
|
||||
storageKey="test.properties.width"
|
||||
defaultWidth={400}
|
||||
minWidth={320}
|
||||
maxWidth={640}
|
||||
>
|
||||
<div>Properties</div>
|
||||
</ResizableSidebarPane>,
|
||||
);
|
||||
});
|
||||
|
||||
expect(pane().style.width).toBe("400px");
|
||||
expect(handle()?.getAttribute("aria-valuemin")).toBe("320");
|
||||
expect(handle()?.getAttribute("aria-valuemax")).toBe("640");
|
||||
});
|
||||
|
||||
it("uses right-side drag and keyboard semantics", () => {
|
||||
act(() => {
|
||||
root.render(
|
||||
<ResizableSidebarPane
|
||||
open
|
||||
resizable
|
||||
side="right"
|
||||
storageKey="test.properties.width"
|
||||
defaultWidth={400}
|
||||
minWidth={320}
|
||||
maxWidth={640}
|
||||
>
|
||||
<div>Properties</div>
|
||||
</ResizableSidebarPane>,
|
||||
);
|
||||
});
|
||||
|
||||
const separator = handle();
|
||||
expect(separator).not.toBeNull();
|
||||
separator!.setPointerCapture = vi.fn();
|
||||
|
||||
act(() => {
|
||||
separator!.dispatchEvent(pointerEvent("pointerdown", 400));
|
||||
separator!.dispatchEvent(pointerEvent("pointermove", 360));
|
||||
separator!.dispatchEvent(pointerEvent("pointerup", 360));
|
||||
});
|
||||
|
||||
expect(pane().style.width).toBe("440px");
|
||||
expect(window.localStorage.getItem("test.properties.width")).toBe("440");
|
||||
|
||||
act(() => {
|
||||
separator?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }));
|
||||
});
|
||||
|
||||
expect(pane().style.width).toBe("456px");
|
||||
expect(window.localStorage.getItem("test.properties.width")).toBe("456");
|
||||
});
|
||||
|
||||
it("exposes the visible width as a CSS variable", () => {
|
||||
act(() => {
|
||||
root.render(
|
||||
<ResizableSidebarPane
|
||||
open
|
||||
resizable
|
||||
storageKey="test.properties.width"
|
||||
defaultWidth={400}
|
||||
minWidth={320}
|
||||
maxWidth={640}
|
||||
widthVariable="--test-sidebar-width"
|
||||
>
|
||||
<div>Properties</div>
|
||||
</ResizableSidebarPane>,
|
||||
);
|
||||
});
|
||||
|
||||
expect(document.documentElement.style.getPropertyValue("--test-sidebar-width")).toBe("400px");
|
||||
|
||||
act(() => {
|
||||
root.render(
|
||||
<ResizableSidebarPane
|
||||
open={false}
|
||||
resizable
|
||||
storageKey="test.properties.width"
|
||||
defaultWidth={400}
|
||||
minWidth={320}
|
||||
maxWidth={640}
|
||||
widthVariable="--test-sidebar-width"
|
||||
>
|
||||
<div>Properties</div>
|
||||
</ResizableSidebarPane>,
|
||||
);
|
||||
});
|
||||
|
||||
expect(document.documentElement.style.getPropertyValue("--test-sidebar-width")).toBe("0px");
|
||||
});
|
||||
|
||||
it("clamps to compact width below the configured viewport without overwriting the stored wide width", () => {
|
||||
window.localStorage.setItem("test.properties.width", "520");
|
||||
setInnerWidth(900);
|
||||
|
||||
act(() => {
|
||||
root.render(
|
||||
<ResizableSidebarPane
|
||||
open
|
||||
resizable
|
||||
storageKey="test.properties.width"
|
||||
defaultWidth={400}
|
||||
minWidth={320}
|
||||
maxWidth={640}
|
||||
compactBelowViewport={1024}
|
||||
compactMaxWidth={320}
|
||||
>
|
||||
<div>Properties</div>
|
||||
</ResizableSidebarPane>,
|
||||
);
|
||||
});
|
||||
|
||||
expect(pane().style.width).toBe("320px");
|
||||
expect(handle()).toBeNull();
|
||||
expect(window.localStorage.getItem("test.properties.width")).toBe("520");
|
||||
|
||||
act(() => {
|
||||
setInnerWidth(1200);
|
||||
window.dispatchEvent(new Event("resize"));
|
||||
});
|
||||
|
||||
expect(pane().style.width).toBe("520px");
|
||||
expect(handle()?.getAttribute("aria-valuemax")).toBe("640");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user