feat: Improve usability and layout of canvas and elements

[mtrezza]

Pull Request

• Report security issues confidentially.
• Any contribution is under this license.

Summary by CodeRabbit

• New Features

  • Added keyboard shortcuts: Cmd/Ctrl+E to edit the selected element and Cmd/Ctrl+R to reload all elements.

• Style

  • Canvas background changed to light gray.
  • Element chrome simplified; resize restricted to the bottom-right corner and handles repositioned for clearer interaction.
  • Refresh buttons hidden by default and fade in on element hover.
  • Static text vertically centered and layout improved.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[parse-github-assistant]

🚀 Thanks for opening this pull request!

[parseplatformorg]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a selection wrapper class and restricts resize handles on canvas elements; refactors element styling and refresh-button hover behavior; changes canvas background color; and introduces Cmd/Ctrl+E and Cmd/Ctrl+R global shortcuts for editing and reloading dashboard elements.

Changes

Cohort / File(s)	Summary
Canvas wrapper & Rnd src/dashboard/Data/CustomDashboard/CanvasElement.react.js	Adds canvasElementWrapper class to Rnd wrapper when selected; disables most resize directions leaving only bottom-right; updates resize-handle class mapping.
Canvas element styles src/dashboard/Data/CustomDashboard/CanvasElement.scss	Removes visual chrome from .canvasElement, moves border/hover/selected visuals into .elementContent, adjusts .dragHandle positioning, and introduces .resizeHandleVisible styling.
Dashboard shortcuts & hints src/dashboard/Data/CustomDashboard/CustomDashboard.react.js	Adds global shortcuts: Cmd/Ctrl+E to edit selected element (when focus not in editable) and Cmd/Ctrl+R to reload all element data; updates UI hint text/title for these actions.
Canvas background src/dashboard/Data/CustomDashboard/CustomDashboard.scss	Changes canvas background from #ffffff to #f5f5f7.
Refresh button visibility src/dashboard/Data/CustomDashboard/elements/DataTableElement.scss, src/dashboard/Data/CustomDashboard/elements/GraphElement.scss, src/dashboard/Data/CustomDashboard/elements/ViewElement.scss	Sets .refreshButton initial opacity: 0, adds opacity to transitions, and reveals button (opacity: 1) when parent .canvasElementWrapper is hovered.
Static text layout src/dashboard/Data/CustomDashboard/elements/StaticTextElement.scss	Makes .staticText full-height flex container with vertical centering and top padding.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Browser
    participant CustomDashboard
    participant CanvasElement
    participant DataLoader
    User->>Browser: press Ctrl/Cmd+E or Ctrl/Cmd+R
    Browser->>CustomDashboard: key event handler
    alt Ctrl/Cmd+E (edit) AND selection exists AND focus not editable
        CustomDashboard->>CanvasElement: request enter edit mode
        CanvasElement->>CanvasElement: open inline editor
    else Ctrl/Cmd+R (reload)
        CustomDashboard->>CanvasElement: request reload for each element
        CanvasElement->>DataLoader: fetch/reload element data
        DataLoader-->>CanvasElement: return updated data
        CanvasElement-->>CustomDashboard: update rendered content
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: Add custom dashboard canvas with graphs and data tables #3126: Modifies CanvasElement.react.js (selection wrapper & resize-handle behavior) — strong overlap with wrapper and handle changes.
• feat: Add more customization options for graphs in canvas #3134: Adjusts graph element SCSS and refresh-button behavior — related to refresh-button visibility changes.
• feat: Allow adding View elements to canvas #3133: Extends element reload behavior in CustomDashboard.react.js — closely related to the new Cmd/Ctrl+R reload shortcut.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is largely incomplete, missing the Issue, Approach, and Tasks sections required by the template.	Fill in the 'Closes' issue link, describe the approach and changes made, and check off applicable tasks (documentation and tests).

✅ Passed checks (2 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately captures the main changes: improving usability through keyboard shortcuts and visual refinements, plus layout adjustments across canvas and element components.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/dashboard/Data/CustomDashboard/elements/DataTableElement.scss (1)

34-50: Make the refresh button visible on keyboard focus (a11y).

With opacity: 0 on Line 45 and only hover-driven reveal, keyboard users can land on an invisible control. Please reveal it on focus as well.

✅ Suggested fix

 .refreshButton {
   margin-left: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   background: transparent;
   border: none;
   cursor: pointer;
   border-radius: 4px;
   opacity: 0;
   transition: background-color 0.15s ease, opacity 0.15s ease;

-  :global(.canvasElementWrapper):hover & {
+  :global(.canvasElementWrapper):hover &,
+  :global(.canvasElementWrapper):focus-within &,
+  &:focus-visible {
     opacity: 1;
   }

🤖 Fix all issues with AI agents

In `@src/dashboard/Data/CustomDashboard/CanvasElement.scss`:
- Around line 3-6: The rule .canvasElement currently sets user-select: none
which prevents selecting/copying any text inside the element; change the
stylesheet so that selection is only disabled for interactive handles and not
for content by removing or narrowing user-select: none on .canvasElement and
instead applying it to the handle selector(s) (e.g., .handle, .resize-handle) or
explicitly re-enabling selection inside the content region (e.g.,
.elementContent { user-select: text }) so text inside .elementContent remains
selectable while handles remain non-selectable.

[parseplatformorg]

🎉 This change has been released in version 8.3.0-alpha.29