[PR #3567] [MERGED] Refactor ScriptItem and Buttons components to enhance layout and integrate dropdown for links. Update InterFaces component for improved styling and structure. #4413

Closed
opened 2026-02-26 14:30:54 +03:00 by kerem · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/community-scripts/ProxmoxVE/pull/3567
Author: @BramSuurdje
Created: 4/1/2025
Status: Merged
Merged: 4/1/2025
Merged by: @MickLesk

Base: mainHead: website-fix-buttons


📝 Commits (5)

  • bc6a013 Refactor ScriptItem and Buttons components to enhance layout and integrate dropdown for links. Update InterFaces component for improved styling and structure.
  • 9b68dbb Add React Query integration and enhance component structure
  • d1c02ca Remove bun.lock file to streamline dependency management and prevent potential conflicts.
  • 9db26cd Update dependencies in package.json and package-lock.json
  • 12550cf Update dependencies in package.json and package-lock.json

📊 Changes

16 files changed (+1365 additions, -1317 deletions)

View changed files

📝 frontend/package-lock.json (+1000 -931)
📝 frontend/package.json (+41 -40)
📝 frontend/src/app/layout.tsx (+7 -21)
frontend/src/app/scripts/_components/ResourceDisplay.tsx (+42 -0)
📝 frontend/src/app/scripts/_components/ScriptItem.tsx (+118 -227)
📝 frontend/src/app/scripts/_components/ScriptItems/Alerts.tsx (+1 -1)
📝 frontend/src/app/scripts/_components/ScriptItems/Buttons.tsx (+37 -29)
📝 frontend/src/app/scripts/_components/ScriptItems/DefaultPassword.tsx (+4 -9)
📝 frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx (+10 -32)
📝 frontend/src/app/scripts/_components/ScriptItems/InterFaces.tsx (+6 -26)
frontend/src/app/scripts/_components/VersionBadge.tsx (+13 -0)
📝 frontend/src/app/scripts/page.tsx (+1 -1)
frontend/src/components/icons/resource-icons.tsx (+48 -0)
frontend/src/components/query-provider.tsx (+9 -0)
frontend/src/hooks/useVersions.ts (+21 -0)
frontend/src/lib/utils/resource-utils.ts (+7 -0)

📄 Description

✍️ Description

This pull request includes several updates to the frontend package, primarily focusing on dependency updates and improvements to the layout.tsx and ResourceDisplay.tsx components. Below are the most important changes:

Dependency Updates:

  • Added @tanstack/react-query version ^5.71.1 to dependencies in frontend/package.json and frontend/package-lock.json. [1] [2]
  • Added @tanstack/eslint-plugin-query version ^5.68.0 to devDependencies in frontend/package.json and frontend/package-lock.json. [1] [2]
  • Updated typescript to include dev: true in frontend/package-lock.json.
  • Updated prettier to include dev: true in frontend/package-lock.json.

Component Enhancements:

  • Added QueryProvider to frontend/src/app/layout.tsx to wrap the main application component, enabling React Query functionality. [1] [2]
  • Simplified the metadata keywords and script tags in frontend/src/app/layout.tsx. [1] [2]

New Component:

  • Introduced ResourceDisplay component in frontend/src/app/scripts/_components/ResourceDisplay.tsx to display CPU, RAM, and HDD resources with icons.

These changes improve the overall functionality and maintainability of the frontend application by incorporating new dependencies and enhancing existing components.

Link: #

Prerequisites (X in brackets)

  • Self-review completed – Code follows project standards.
  • Tested thoroughly – Changes work as expected.
  • No breaking changes – Existing functionality remains intact.
  • No security risks – No hardcoded secrets, unnecessary privilege escalations, or permission issues.

🛠️ Type of Change (X in brackets)

  • 🐞 Bug fix – Resolves an issue without breaking functionality.
  • New feature – Adds new, non-breaking functionality.
  • 💥 Breaking change – Alters existing functionality in a way that may require updates.
  • 🆕 New script – A fully functional and tested script or script set.
  • 🌍 Website update – Changes to website-related JSON files or metadata.
  • 🔧 Refactoring / Code Cleanup – Improves readability or maintainability without changing functionality.
  • 📝 Documentation update – Changes to README, AppName.md, CONTRIBUTING.md, or other docs.

🔍 Code & Security Review (X in brackets)

  • Follows Code_Audit.md & CONTRIBUTING.md guidelines

📋 Additional Information (optional)

image

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/community-scripts/ProxmoxVE/pull/3567 **Author:** [@BramSuurdje](https://github.com/BramSuurdje) **Created:** 4/1/2025 **Status:** ✅ Merged **Merged:** 4/1/2025 **Merged by:** [@MickLesk](https://github.com/MickLesk) **Base:** `main` ← **Head:** `website-fix-buttons` --- ### 📝 Commits (5) - [`bc6a013`](https://github.com/community-scripts/ProxmoxVE/commit/bc6a0139f743651b1fcbd5818b160ba4507f01df) Refactor ScriptItem and Buttons components to enhance layout and integrate dropdown for links. Update InterFaces component for improved styling and structure. - [`9b68dbb`](https://github.com/community-scripts/ProxmoxVE/commit/9b68dbbd64695e9d0747911ada949e384493a699) Add React Query integration and enhance component structure - [`d1c02ca`](https://github.com/community-scripts/ProxmoxVE/commit/d1c02caf4434aeac0e8082d5b13259f52a134ccf) Remove bun.lock file to streamline dependency management and prevent potential conflicts. - [`9db26cd`](https://github.com/community-scripts/ProxmoxVE/commit/9db26cd1492f2f273c365857670f3881c06e388c) Update dependencies in package.json and package-lock.json - [`12550cf`](https://github.com/community-scripts/ProxmoxVE/commit/12550cf7bd822354531ea6575cbc90ad2061c69c) Update dependencies in package.json and package-lock.json ### 📊 Changes **16 files changed** (+1365 additions, -1317 deletions) <details> <summary>View changed files</summary> 📝 `frontend/package-lock.json` (+1000 -931) 📝 `frontend/package.json` (+41 -40) 📝 `frontend/src/app/layout.tsx` (+7 -21) ➕ `frontend/src/app/scripts/_components/ResourceDisplay.tsx` (+42 -0) 📝 `frontend/src/app/scripts/_components/ScriptItem.tsx` (+118 -227) 📝 `frontend/src/app/scripts/_components/ScriptItems/Alerts.tsx` (+1 -1) 📝 `frontend/src/app/scripts/_components/ScriptItems/Buttons.tsx` (+37 -29) 📝 `frontend/src/app/scripts/_components/ScriptItems/DefaultPassword.tsx` (+4 -9) 📝 `frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx` (+10 -32) 📝 `frontend/src/app/scripts/_components/ScriptItems/InterFaces.tsx` (+6 -26) ➕ `frontend/src/app/scripts/_components/VersionBadge.tsx` (+13 -0) 📝 `frontend/src/app/scripts/page.tsx` (+1 -1) ➕ `frontend/src/components/icons/resource-icons.tsx` (+48 -0) ➕ `frontend/src/components/query-provider.tsx` (+9 -0) ➕ `frontend/src/hooks/useVersions.ts` (+21 -0) ➕ `frontend/src/lib/utils/resource-utils.ts` (+7 -0) </details> ### 📄 Description <!--🛑 New scripts must first be submitted to [ProxmoxVED](https://github.com/community-scripts/ProxmoxVED) for testing. PRs for new scripts that skip this process will be closed. --> ## ✍️ Description This pull request includes several updates to the `frontend` package, primarily focusing on dependency updates and improvements to the `layout.tsx` and `ResourceDisplay.tsx` components. Below are the most important changes: ### Dependency Updates: * Added `@tanstack/react-query` version `^5.71.1` to dependencies in `frontend/package.json` and `frontend/package-lock.json`. [[1]](diffhunk://#diff-da6498268e99511d9ba0df3c13e439d10556a812881c9d03955b2ef7c6c1c655R36) [[2]](diffhunk://#diff-4a2d9aa3e849b134993936ca81b83fb139edd2b0218077ab0f403b8c4803c62aR25) * Added `@tanstack/eslint-plugin-query` version `^5.68.0` to devDependencies in `frontend/package.json` and `frontend/package-lock.json`. [[1]](diffhunk://#diff-da6498268e99511d9ba0df3c13e439d10556a812881c9d03955b2ef7c6c1c655R68) [[2]](diffhunk://#diff-4a2d9aa3e849b134993936ca81b83fb139edd2b0218077ab0f403b8c4803c62aR57) * Updated `typescript` to include `dev: true` in `frontend/package-lock.json`. * Updated `prettier` to include `dev: true` in `frontend/package-lock.json`. ### Component Enhancements: * Added `QueryProvider` to `frontend/src/app/layout.tsx` to wrap the main application component, enabling React Query functionality. [[1]](diffhunk://#diff-f3bfc5eb8ab49540cf25bb4422d423fac9a4e15f744eb2e2d3b2e1a1b03e441fR3) [[2]](diffhunk://#diff-f3bfc5eb8ab49540cf25bb4422d423fac9a4e15f744eb2e2d3b2e1a1b03e441fL62-R69) * Simplified the metadata keywords and script tags in `frontend/src/app/layout.tsx`. [[1]](diffhunk://#diff-f3bfc5eb8ab49540cf25bb4422d423fac9a4e15f744eb2e2d3b2e1a1b03e441fL18-R19) [[2]](diffhunk://#diff-f3bfc5eb8ab49540cf25bb4422d423fac9a4e15f744eb2e2d3b2e1a1b03e441fL62-R69) ### New Component: * Introduced `ResourceDisplay` component in `frontend/src/app/scripts/_components/ResourceDisplay.tsx` to display CPU, RAM, and HDD resources with icons. These changes improve the overall functionality and maintainability of the frontend application by incorporating new dependencies and enhancing existing components. ## 🔗 Related PR / Issue Link: # ## ✅ Prerequisites (**X** in brackets) - [x] **Self-review completed** – Code follows project standards. - [x] **Tested thoroughly** – Changes work as expected. - [x] **No breaking changes** – Existing functionality remains intact. - [x] **No security risks** – No hardcoded secrets, unnecessary privilege escalations, or permission issues. --- ## 🛠️ Type of Change (**X** in brackets) - [ ] 🐞 **Bug fix** – Resolves an issue without breaking functionality. - [x] ✨ **New feature** – Adds new, non-breaking functionality. - [ ] 💥 **Breaking change** – Alters existing functionality in a way that may require updates. - [ ] 🆕 **New script** – A fully functional and tested script or script set. - [x] 🌍 **Website update** – Changes to website-related JSON files or metadata. - [x] 🔧 **Refactoring / Code Cleanup** – Improves readability or maintainability without changing functionality. - [ ] 📝 **Documentation update** – Changes to `README`, `AppName.md`, `CONTRIBUTING.md`, or other docs. --- ## 🔍 Code & Security Review (**X** in brackets) - [ ] **Follows `Code_Audit.md` & `CONTRIBUTING.md` guidelines** ## 📋 Additional Information (optional) <!-- Add any extra context, screenshots, or references. --> <img width="991" alt="image" src="https://github.com/user-attachments/assets/1b7b12a3-2177-4445-b9f3-072f7a166800" /> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
kerem 2026-02-26 14:30:54 +03:00
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/ProxmoxVE#4413
No description provided.