stackchain/stackchain-dashboard
1
0
Fork 0
Code Issues 9 Pull Requests 1 Actions Packages Projects Releases 713 Wiki Activity

Preserve mobile My Work queue truth through hydration #1404

Merged
rockachopa merged 1 commits from timmy/1403-progressive-queue-handoff into main 2026-08-25 18:14:33 +00:00
Conversation 0 Commits 1 Files Changed 3 +131 -11
3 changed files with 131 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/dashboard.js
View File

@ -1,6 +1,7 @@
(async function(){
const workspaceLifecycle = await (window.stackchainWorkspaceLifecycle || loadWorkspace({ document, window }));
await workspaceLifecycle.optionalReady;
const progressiveWorkHandoff = window.stackchainProgressiveMyWork?.handoff?.();
window.stackchainProgressiveMyWork?.stop();
const qs = (s, el=document) => el.querySelector(s);
const announceWork = message => qs('#my-work-action-status').textContent = message;
@ -322,15 +323,17 @@
let offlineWorkMode = false;
const WORK_FILTER_KEY = 'stackchain.my-work-filter.v1';
const WORK_MILESTONE_KEY = 'stackchain.my-work-milestone.v1';
let selectedWorkFilter = 'all';
const WORK_FILTERS = ['all', 'today', 'agenda', 'attention', 'filed', 'authored', 'issue', 'pull', 'review', 'update', 'later', 'draft'];
const hasProgressiveWorkFilter = WORK_FILTERS.includes(progressiveWorkHandoff?.selectedFilter);
let selectedWorkFilter = hasProgressiveWorkFilter ? progressiveWorkHandoff.selectedFilter : 'all';
let selectedFiledView = 'needs-review';
let selectedWorkMilestone = 'all';
let queueFindQuery = '';
let savedWorkFilter = null;
let launchFilterResolved = false;
let launchFilterResolved = hasProgressiveWorkFilter;
try {
const savedFilter = sessionStorage.getItem(WORK_FILTER_KEY);
if (['all', 'today', 'agenda', 'attention', 'filed', 'authored', 'issue', 'pull', 'review', 'update', 'later', 'draft'].includes(savedFilter)) {
if (!hasProgressiveWorkFilter && ['all', 'today', 'agenda', 'attention', 'filed', 'authored', 'issue', 'pull', 'review', 'update', 'later', 'draft'].includes(savedFilter)) {
selectedWorkFilter = savedFilter;
savedWorkFilter = savedFilter;
launchFilterResolved = true;

33
frontend/progressive-my-work.js
View File

@ -6,6 +6,10 @@ function createProgressiveMyWork({ document, fetchSnapshot }) {
let items = [];
let active = 'all';
let stopped = false;
let selectedByUser = false;
const deferredQueues = {
today:'Today', agenda:'Agenda', later:'Later', draft:'Drafts',
};
const escapeHtml = value => String(value || '').replace(/[&<>"']/g, character => ({
'&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;',
@ -16,15 +20,26 @@ function createProgressiveMyWork({ document, fetchSnapshot }) {
return ['http:', 'https:'].includes(url.protocol) ? url.href : '';
} catch (_error) { return ''; }
};
const visibleItems = () => active === 'all' ? items : items.filter(item =>
active === 'review' ? item.is_review :
active === 'update' ? item.has_update :
active === 'attention' ? item.needs_attention : item.kind === active
);
const matches = (item, filter) =>
filter === 'review' ? item.is_review :
filter === 'update' ? item.has_update :
filter === 'attention' ? item.needs_attention :
filter === 'filed' ? item.is_filed :
filter === 'authored' ? item.is_authored :
filter === 'pull' ? item.kind === 'pull' && !item.is_review : item.kind === filter;
const visibleItems = () => active === 'all' ? items : items.filter(item => matches(item, active));
const updateCounts = () => {
['all','attention','filed','authored','issue','pull','review','update'].forEach(filter => {
const count = filter === 'all' ? items.length : items.filter(item => matches(item, filter)).length;
const element = document.querySelector('[data-work-count="' + filter + '"]');
if (element) element.textContent = String(count);
});
};
const render = () => {
if (stopped || !list) return;
const visible = visibleItems();
list.innerHTML = visible.length ? visible.map(item => {
list.innerHTML = deferredQueues[active] ?
'<div class="muted">' + deferredQueues[active] + ' is still loading…</div>' : visible.length ? visible.map(item => {
const href = safeUrl(item.url);
const title = escapeHtml(item.title || item.key || 'Untitled work');
const context = escapeHtml(item.key || '');
@ -37,12 +52,15 @@ function createProgressiveMyWork({ document, fetchSnapshot }) {
filters.forEach(button => button.setAttribute('aria-pressed', String(button.dataset.workFilter === active)));
};
filters.forEach(button => {
const listener = () => { active = button.dataset.workFilter || 'all'; render(); };
const listener = () => { active = button.dataset.workFilter || 'all'; selectedByUser = true; render(); };
button.addEventListener('click', listener);
listeners.push([button, listener]);
});
return {
handoff() {
return { selectedFilter:selectedByUser ? active : null };
},
async start() {
if (status) status.textContent = 'Loading assigned work…';
try {
@ -50,6 +68,7 @@ function createProgressiveMyWork({ document, fetchSnapshot }) {
if (stopped) return false;
const context = snapshot?.context || snapshot || {};
items = buildMyWork({ ...context, notifications:snapshot?.notifications || context.notifications || [] });
updateCounts();
render();
const assigned = items.filter(item => item.is_assigned).length;
if (status) status.textContent = assigned + ' assigned work item' + (assigned === 1 ? '' : 's') + ' ready.';

100
tests/test_progressive_my_work.py
View File

@ -5,6 +5,7 @@ from pathlib import Path
MODULE = Path(__file__).parents[1] / "frontend" / "progressive-my-work.js"
MY_WORK = Path(__file__).parents[1] / "frontend" / "my-work.js"
DASHBOARD = Path(__file__).parents[1] / "frontend" / "dashboard.js"
def test_progressive_my_work_renders_and_filters_assigned_work_before_full_workspace():
@ -35,4 +36,101 @@ const flow=createProgressiveMyWork({{document,fetchSnapshot:async()=>({{
assert state["status"] == "1 assigned work item ready."
assert "Fix mobile queue" in state["rendered"]
assert 'href="https://forge.example/issues/7"' in state["rendered"]
assert state["pressed"] == ["false", "true"]
assert state["pressed"] == ["false", "true"]
def test_progressive_my_work_keeps_supported_queues_truthful_while_planning_loads():
harness = f"""
const fs=require('fs'); const vm=require('vm');
const names=['all','today','agenda','attention','filed','authored','issue','pull','review','update','later','draft'];
const counts=Object.fromEntries(names.map(name=>[name,{{textContent:'0'}}]));
const buttons=names.map(name=>({{
dataset:{{workFilter:name}},attrs:{{}},
addEventListener(_name,cb){{this.cb=cb;}},
removeEventListener(){{}},
setAttribute(key,value){{this.attrs[key]=value;}},
}}));
const list={{innerHTML:''}}; const status={{textContent:''}};
const document={{
querySelector(selector){{
if(selector==='#my-work-list')return list;
if(selector==='#my-work-status')return status;
const match=selector.match(/^\\[data-work-count="(.+)"\\]$/);
return match?counts[match[1]]:null;
}},
querySelectorAll:()=>buttons,
}};
const context={{module:{{exports:{{}}}},exports:{{}},console,URL,document}}; vm.createContext(context);
vm.runInContext(fs.readFileSync({json.dumps(str(MY_WORK))},'utf8'),context);
context.buildMyWork=context.module.exports; context.module={{exports:{{}}}};
vm.runInContext(fs.readFileSync({json.dumps(str(MODULE))},'utf8'),context);
const flow=context.module.exports({{document,fetchSnapshot:async()=>({{
user:{{login:'timmy'}},
issues:[{{number:7,title:'Filed from phone',repository:'stackchain/dashboard',assignees:[],work_reasons:['created_by_me'],url:'https://forge.example/issues/7'}}],
pull_requests:[{{number:8,title:'Authored release',repository:'stackchain/dashboard',assignees:[],work_reasons:['authored_by_me'],url:'https://forge.example/pulls/8'}}],
}})}});
(async()=>{{
await flow.start();
buttons[names.indexOf('filed')].cb(); const filed=list.innerHTML;
buttons[names.indexOf('authored')].cb(); const authored=list.innerHTML;
buttons[names.indexOf('today')].cb(); const today=list.innerHTML;
console.log(JSON.stringify({{filed,authored,today,counts:Object.fromEntries(names.map(name=>[name,counts[name].textContent]))}}));
}})().catch(error=>{{console.error(error);process.exit(1);}});
"""
result = subprocess.run(["node", "-e", harness], check=True, capture_output=True, text=True)
state = json.loads(result.stdout)
assert "Filed from phone" in state["filed"]
assert "Authored release" in state["authored"]
assert "Today is still loading" in state["today"]
assert "No work" not in state["today"]
assert state["counts"] == {
"all": "2",
"today": "0",
"agenda": "0",
"attention": "0",
"filed": "1",
"authored": "1",
"issue": "1",
"pull": "1",
"review": "0",
"update": "0",
"later": "0",
"draft": "0",
}
def test_progressive_queue_selection_is_handed_to_the_hydrated_workspace():
harness = f"""
const fs=require('fs'); const vm=require('vm');
const buttons=['all','filed'].map(name=>({{
dataset:{{workFilter:name}},attrs:{{}},removed:false,
addEventListener(_name,cb){{this.cb=cb;}},
removeEventListener(_name,cb){{if(cb===this.cb)this.removed=true;}},
setAttribute(key,value){{this.attrs[key]=value;}},
}}));
const document={{
querySelector:selector=>selector==='#my-work-list'?{{innerHTML:''}}:selector==='#my-work-status'?{{textContent:''}}:null,
querySelectorAll:()=>buttons,
}};
const context={{module:{{exports:{{}}}},exports:{{}},console,URL,document}}; vm.createContext(context);
vm.runInContext(fs.readFileSync({json.dumps(str(MY_WORK))},'utf8'),context);
context.buildMyWork=context.module.exports; context.module={{exports:{{}}}};
vm.runInContext(fs.readFileSync({json.dumps(str(MODULE))},'utf8'),context);
const flow=context.module.exports({{document,fetchSnapshot:async()=>({{user:{{login:'timmy'}},issues:[],pull_requests:[]}})}});
(async()=>{{
await flow.start(); buttons[1].cb();
const before=flow.handoff(); flow.stop(); const after=flow.handoff();
console.log(JSON.stringify({{before,after,removed:buttons.map(button=>button.removed)}}));
}})().catch(error=>{{console.error(error);process.exit(1);}});
"""
result = subprocess.run(["node", "-e", harness], check=True, capture_output=True, text=True)
state = json.loads(result.stdout)
assert state == {
"before": {"selectedFilter": "filed"},
"after": {"selectedFilter": "filed"},
"removed": [True, True],
}
dashboard = DASHBOARD.read_text()
assert "const progressiveWorkHandoff = window.stackchainProgressiveMyWork?.handoff?.();" in dashboard
assert "progressiveWorkHandoff?.selectedFilter" in dashboard