HPCC-35927 ECL Watch Activities page allows for expanding block displays

[kunalaswani]

Activities page now allows for expanding of block displays.

Type of change:

• This change is a bug fix (non-breaking change which fixes an issue).
• This change is a new feature (non-breaking change which adds functionality).
• This change improves the code (refactor or other change that does not change the functionality)
• This change fixes warnings (the fix does not alter the functionality or the generated code)
• This change is a breaking change (fix or feature that will cause existing behavior to change).
• This change alters the query API (existing queries will have to be recompiled)

Checklist:

• My code follows the code style of this project.
  • My code does not create any new warnings from compiler, build system, or lint.
• The commit message is properly formatted and free of typos.
  • The commit message title makes sense in a changelog, by itself.
  • The commit is signed.
• My change requires a change to the documentation.
  • I have updated the documentation accordingly, or...
  • I have created a JIRA ticket to update the documentation.
  • Any new interfaces or exported functions are appropriately commented.
• I have read the CONTRIBUTORS document.
• The change has been fully tested:
  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • I have checked that this change does not introduce memory leaks.
  • I have used Valgrind or similar tools to check for potential issues.
• I have given due consideration to all of the following potential concerns:
  • Scalability
  • Performance
  • Security
  • Thread-safety
  • Cloud-compatibility
  • Premature optimization
  • Existing deployed queries will not be broken
  • This change fixes the problem, not just the symptom
  • The target branch of this pull request is appropriate for such a change.
• There are no similar instances of the same problem that should be addressed
  • I have addressed them here
  • I have raised JIRA issues to address them separately
• This is a user interface / front-end modification
  • I have tested my changes in multiple modern browsers
  • The component(s) render as expected

Smoketest:

• Send notifications about my Pull Request position in Smoketest queue.
• Test my draft Pull Request.

Testing:

[github-actions]

Jira Issue: https://hpccsystems.atlassian.net//browse/HPCC-35927

Jirabot Action Result:
Workflow Transition To: Merge Pending
Updated PR

[Copilot]

Pull request overview

Adds a user-toggleable “list mode” to the Activities page so queue/workunit “blocks” can be viewed in an expandable, full-width row layout.

Changes:

• Introduces a list/grid toggle in the Activities toolbar persisted via useUserStore.
• Adds list-mode rendering for queue workunits with a column header row and grid-based row layout.
• Updates NLS strings to include “Grid” and “List”.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
esp/src/src-react/components/cards/QueueCard.tsx	Adds listMode prop plumbing and introduces list-mode header + grid row layout for workunits.
esp/src/src-react/components/ActivitiesCards.tsx	Adds toolbar toggle to switch between grid and list modes, persists preference, passes listMode to QueueCards.
esp/src/src-dojo/nls/hpcc.ts	Adds localized strings for new toolbar toggle labels (“Grid”, “List”).

---

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

The gridTemplateColumns value is a long string that must stay in sync between the header and row grids (it’s duplicated again in jobRowGrid). Consider extracting it into a shared constant (or a const columns = ...) and referencing it from both style blocks to avoid accidental drift.

[Copilot]

There are extra spaces in the closing JSX tags (</div >, </ListItem >). This is likely to trip formatting/lint rules and should be corrected to standard </div> / </ListItem>.

Suggested change

	</div >
	</ListItem >;
	</div>
	</ListItem>;

[Copilot]

The click handler uses setListMode(!listMode), which can read a stale value if updates are batched. Prefer the functional form so the toggle is derived from the latest state (e.g., setListMode(prev => !prev)).

Suggested change

	<ToolbarButton appearance="subtle" icon={listMode ? <Grid20Regular /> : <TextAlignLeft20Regular />} aria-label={listMode ? nlsHPCC.Grid : nlsHPCC.List} onClick={() => setListMode(!listMode)}>
	<ToolbarButton appearance="subtle" icon={listMode ? <Grid20Regular /> : <TextAlignLeft20Regular />} aria-label={listMode ? nlsHPCC.Grid : nlsHPCC.List} onClick={() => setListMode(prev => !prev)}>

[Copilot]

In list mode, the header row includes empty header cells for the icon/actions columns. For screen readers, these columns should have an accessible label (e.g., visually-hidden text like “Status” / “Actions”, or aria-label/role=\"columnheader\" as appropriate) so the header semantics aren’t incomplete.

Suggested change

	<div></div>{/* Icon column */}
	<div>{nlsHPCC.JobName}</div>
	<div>{nlsHPCC.Graph}</div>
	<div>{nlsHPCC.State}</div>
	<div>{nlsHPCC.Owner}</div>
	<div></div>{/* Actions column */}
	<div role="columnheader" aria-label="Status"></div>{/* Icon column */}
	<div>{nlsHPCC.JobName}</div>
	<div>{nlsHPCC.Graph}</div>
	<div>{nlsHPCC.State}</div>
	<div>{nlsHPCC.Owner}</div>
	<div role="columnheader" aria-label="Actions"></div>{/* Actions column */}

[Copilot]

In list mode, the header row includes empty header cells for the icon/actions columns. For screen readers, these columns should have an accessible label (e.g., visually-hidden text like “Status” / “Actions”, or aria-label/role=\"columnheader\" as appropriate) so the header semantics aren’t incomplete.

Suggested change

	<div></div>{/* Icon column */}
	<div>{nlsHPCC.JobName}</div>
	<div>{nlsHPCC.Graph}</div>
	<div>{nlsHPCC.State}</div>
	<div>{nlsHPCC.Owner}</div>
	<div></div>{/* Actions column */}
	<div role="columnheader" aria-label="Status"></div>{/* Icon column */}
	<div>{nlsHPCC.JobName}</div>
	<div>{nlsHPCC.Graph}</div>
	<div>{nlsHPCC.State}</div>
	<div>{nlsHPCC.Owner}</div>
	<div role="columnheader" aria-label="Actions"></div>{/* Actions column */}