feat: added new and cloned panel at the bottom of the page

[SagarRajput-7]

Summary

Related Issues / PR's

• New panel should be added at the end of the dashboard #5642

Screenshots

Screen.Recording.2025-01-31.at.10.56.16.AM.mov

Screen.Recording.2025-01-31.at.11.00.14.AM.mov

Affected Areas and Manually Tested Areas

---

Important

Adds placeWidgetAtBottom function to position widgets at the bottom of the layout, updating WidgetGraphComponent.tsx and NewWidget/index.tsx for consistent widget placement.

• Behavior:
  • Adds placeWidgetAtBottom function in utils.ts to position widgets at the bottom of the layout.
  • Updates WidgetGraphComponent.tsx to use placeWidgetAtBottom for cloned panel positioning.
  • Updates index.tsx in NewWidget to use placeWidgetAtBottom for new widget positioning.
• Functions:
  • placeWidgetAtBottom calculates the position based on available space in the last row or places the widget at the bottom.
• Misc:
  • Refactors layout update logic in hooks/dashboard/utils.ts to use placeWidgetAtBottom.

^{This description was created by for 9abeb0c. It will automatically update as commits are pushed.}

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to 3a8c8df in 1 minute and 3 seconds

More details

• Looked at 92 lines of code in 3 files
• Skipped 0 files when reviewing.
• Skipped posting 1 drafted comments based on config settings.

1. frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx:135

• Draft comment:
  Consider extracting the reduce logic for calculating maxY into a utility function to avoid code duplication. This pattern is repeated in multiple files.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The code uses a reduce function to calculate maxY, which is a common pattern in the PR. This pattern is repeated in multiple files, and it is a good practice to extract such logic into a utility function to avoid code duplication and improve maintainability.

Workflow ID: wflow_NzFDmu0WkDlOqDlo

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

👍 Looks good to me! Incremental review on bf8beb0 in 56 seconds

More details

• Looked at 158 lines of code in 3 files
• Skipped 0 files when reviewing.
• Skipped posting 3 drafted comments based on config settings.

1. frontend/src/container/NewWidget/utils.ts:618

• Draft comment:
  The y coordinate should be maxY instead of maxY - (widgetHeight || 6) to correctly place the widget at the bottom.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  The current code subtracts the widget height to align the new widget with existing widgets in the last row. This makes sense because maxY represents the bottom of the last row (y + height), so we need to subtract the height to align the tops of the widgets. If we used just maxY, the new widget would be placed below the last row instead of aligned with it. The current implementation appears correct.
  The comment author might be thinking that maxY represents the top of the last row rather than the bottom. Or they might have a different mental model of how the grid coordinates work.
  The current implementation correctly aligns widgets in the last row by accounting for widget height. The comment's suggestion would break this alignment.
  The comment should be deleted because it suggests a change that would break the widget alignment functionality. The current implementation is correct.

2. frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx:133

• Draft comment:
  Avoid using inline styles in React components. Move styles to external stylesheets or styled components. This is also applicable at lines 238 and 248 in other files.
• Reason this comment was not posted:
  Comment was on unchanged code.

3. frontend/src/container/NewWidget/index.tsx:364

• Draft comment:
  Avoid using inline styles in React components. Move styles to external stylesheets or styled components. This is also applicable at lines 238 and 248 in other files.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_GfV1jCQHpCMKGl7S

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

👍 Looks good to me! Incremental review on 9abeb0c in 32 seconds

More details

• Looked at 44 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 2 drafted comments based on config settings.

1. frontend/src/hooks/dashboard/utils.ts:3

• Draft comment:
  Ensure that the placeWidgetAtBottom function is correctly implemented to place the widget at the bottom of the layout. This is crucial for the intended functionality of this PR.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The import statement for placeWidgetAtBottom suggests a new utility function is being used. It's important to verify its implementation to ensure it correctly places the widget at the bottom.

2. frontend/src/hooks/dashboard/utils.ts:3

• Draft comment:
  Avoid using the component/index.tsx file structure approach, as it makes it difficult to debug and find components using global search tools like VS Code. This is applicable to the import from 'container/NewWidget/utils'.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:

1. The comment seems to misunderstand the actual import - it's from a utils.ts file, not an index.tsx file. 2. The comment is trying to enforce a file structure rule but is doing so incorrectly in this case. 3. Even if the rule is valid in general, this specific import doesn't violate it. 4. The import is part of the changes in the diff.
   The import could theoretically be from an index.tsx file that re-exports from utils.ts. I can't see the full file structure.
   Even if that were true, the comment is specifically complaining about index.tsx files, which this import statement doesn't directly reference. The comment is making assumptions without evidence.
   The comment should be deleted because it appears to be incorrect about the file structure being used, and even if there was an underlying index.tsx file, the comment isn't providing actionable feedback about the actual changed code.

Workflow ID: wflow_auzzUxLvzqwmvPy7

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.