Merged
Conversation
…perDash Essentials Web Config App - Created a detailed UI Components Reference document covering navigation, debug console, configuration display, device management, and visual design system. - Added tutorials for Getting Started, Debug Console, and Device Management to guide users through essential features and troubleshooting techniques. - Included step-by-step instructions, learning objectives, and practical scenarios to enhance user understanding and application of the system.
- Deleted unused Prettier configuration file. - Removed semantic-release configuration file. - Updated apiSlice to dynamically set the base API path using PROGRAM_ID environment variable, defaulting to 'app02'.
…consistency across platforms
…configurations - Updated package.json to switch from react-scripts to Vite, including changes to scripts and dependencies. - Removed public/index.html as it's no longer needed with Vite's handling. - Refactored deviceList component for improved styling and functionality. - Updated react-app-env.d.ts to support Vite and SVG imports. - Modified reportWebVitals to use new web-vitals API. - Adjusted httpService to align with updated Redux Toolkit query imports. - Deleted setupProxy.js as Vite handles proxying differently. - Fixed SCSS import paths for Bootstrap. - Updated TypeScript configuration for ES2020 and Vite compatibility. - Added vite.config.ts for Vite configuration, including proxy setup and testing environment.
… changelog generation
…add device feedbacks querying
… and method execution functionality
- Deleted favicon.ico, index.html, logo192.png, logo512.png, manifest.json, and robots.txt from the dist directory as they are no longer needed. - Updated the DeviceDetail component to pass parameter values as an array to the executeMethod function. - Changed the params type in the setDeviceJsonCommand mutation from 'any' to 'unknown[]' for better type safety. - Updated tsconfig.tsbuildinfo to include new common UI hooks and selectors.
…dynamic appId dropdown
…ontrol functionality
…namic proxy plugin
…base path in Vite config
There was a problem hiding this comment.
Pull request overview
This PR modernizes the PepperDash Essentials Web Config App by migrating the build/runtime setup to Vite, adding SVG→React component support (SVGR) with a large icon set, and expanding the project’s documentation plus CI/release automation.
Changes:
- Migrate from Create React App to Vite/Vitest, update TS config, routing base, and proxy behavior.
- Add Redux-managed WebSocket debug session plumbing and app slot (
:appId) routing updates across features. - Introduce a large set of SVG icons and new documentation/CI/semantic-release configuration.
Reviewed changes
Copilot reviewed 66 out of 178 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Adds Vite config incl. SVGR and dev proxy behavior. |
| tsconfig.tsbuildinfo | Adds TS build info artifact (should not be committed). |
| tsconfig.json | Updates TS target/moduleResolution/types for Vite/Vitest. |
| src/styles.scss | Updates Bootstrap SCSS import path; adds flex utility class. |
| src/store/websocketSlice.ts | Adds Redux slice/actions for WebSocket message log + connection state. |
| src/store/websocketMiddleware.ts | Adds middleware to manage WebSocket lifecycle and dispatch incoming messages. |
| src/store/store.ts | Wires in websocket reducer/middleware; root reducer reset handling. |
| src/store/commonUi/commonUiSlice.ts | Minor formatting change in common UI slice. |
| src/store/commonUi/commonUiSelectors.ts | Adds selector for common UI roomId. |
| src/store/commonUi/commonUiHooks.ts | Adds hook wrapper for selecting roomId. |
| src/shared/icons/pd-icons/statuses/28_settings.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/25_refresh.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/24_check.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/23_question.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/22_alert.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/21_x.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/20_time.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/15_heart.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/14_star.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/13_lightning.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/11_arrow_up_down.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/10_arrow_down.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/09_arrow_up.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/08_progress_100.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/07_progress_75.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/06_progress_25.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/05_progress_0.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/04_face_sad.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/03_face_neutral.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/02_face_happy.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/statuses/01_face_elated.svg | Adds status icon asset. |
| src/shared/icons/pd-icons/objects/user.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/tool.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/today.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/system.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/system-template.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/question.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/punchlist.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/project.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/process.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/milestone.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/help.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/flag.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/files.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/file-category.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/device.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/device-template.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/dashboards.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/company.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/circleWarning.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/circleSent.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/circleReady.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/arrow_right.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/objects/actionItem.svg | Adds object icon asset. |
| src/shared/icons/pd-icons/dark/wrench.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/user.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/unlocked.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/trend_up_sm.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/trend_up_lg.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/trend_down_sm.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/trend_down_lg.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/trash.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/system-template.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/star-outline.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/star-filled.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/severity_medium.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/severity_low.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/severity_high.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/settings.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/search.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/schedule-status.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/project.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/priority-medium.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/priority-low.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/priority-high.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/plus.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/plus-circle.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/pencil.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/notes.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/minus.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/menu.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/locked.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/location-stairs.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/location-pin.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/location-building.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/list.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/link.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/light.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/info.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/help.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/filter.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/file-category.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/eye-shown.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/eye-hidden.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/ellipsis.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/ellipse.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/drag.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/download.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/door.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/dir-up-chevron.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/dir-right-chevron.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/dir-down-chevron.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/device-template-old.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/device-template-group.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/device-group-by.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/dart.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/close.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/clock.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/check.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/calendar.svg | Adds dark theme icon asset. |
| src/shared/icons/pd-icons/dark/alert.svg | Adds dark theme icon asset. |
| src/shared/icons/OtherIcons.ts | Adds typed ReactComponent imports/exports for dark icon set. |
| src/shared/icons/ObjectIcons.ts | Adds typed ReactComponent imports/exports for object icon set. |
| src/shared/icons/index.tsx | Exposes icon exports via a single barrel. |
| src/shared/hooks/useAppParams.ts | Adds typed wrapper around route params for :appId. |
| src/shared/FilterDropdownSearchParams.tsx | Switches dropdown chevron to the new SVG icon component. |
| src/setupProxy.js | Removes CRA proxy middleware setup (migrated to Vite proxy). |
| src/services/httpService.ts | Updates RTK Query BaseQuery import and argument typing. |
| src/reportWebVitals.ts | Updates web-vitals API usage to newer callbacks. |
| src/react-app-env.d.ts | Replaces CRA types with Vite client + SVG module typing. |
| src/index.tsx | Switches to BrowserRouter w/ basename and renders App directly. |
| src/features/Versions.tsx | Updates to :appId param + skipToken. |
| src/features/Types.tsx | Updates to :appId param + skipToken and table layout. |
| src/features/TopNav.tsx | Adds app-slot dropdown, connection indicator, and routes per :appId. |
| src/features/MobileControl.tsx | Adds Mobile Control feature view driven by :appId. |
| src/features/MainLayout.tsx | Introduces layout route wrapper with Outlet and TopNav. |
| src/features/DeviceList.tsx | Rewrites device list UI and scopes queries to :appId. |
| src/features/deviceList.tsx | Removes old DeviceList implementation (case-variant file). |
| src/features/DeviceDetail.tsx | Implements device detail view (properties/methods/feedbacks + execute modal). |
| src/features/DebugConsole/MinimumLogLevelDropdown.tsx | Scopes minimum log level query/mutation to :appId and adds chevron icon. |
| src/features/DebugConsole/hooks/useFilteredMessages.ts | Adjusts searchable fields for debug message filtering. |
| src/features/DebugConsole/DebugFilters.tsx | Scopes device filter query to :appId. |
| src/features/DebugConsole/debugConsts.ts | Updates log level constants/options (adds Fatal, removes Log). |
| src/features/DebugConsole/DebugConsole.tsx | Refactors to use Redux websocket state and app-scoped mutations; adds clear action. |
| src/features/DebugConsole/ConsoleWindow.tsx | Updates row styling/striping behavior for console list. |
| src/features/ConfigFile.tsx | Replaces <pre> with Monaco read-only JSON viewer. |
| src/App.tsx | Adds :appId routing, MainLayout nesting, and websocket connect/disconnect wiring. |
| README.old.md | Removes deprecated legacy README. |
| README.md | Comprehensive documentation rewrite (Diataxis structure + dev setup). |
| public/index.html | Removes CRA public template file. |
| prettierrc.json | Adds Prettier configuration. |
| package.json | Migrates scripts/deps to Vite/Vitest/React Router v7 + SVGR + Monaco. |
| index.html | Adds Vite entry HTML template. |
| docs/README.md | Adds documentation index following Diataxis framework. |
| docs/tutorials/README.md | Adds tutorials index. |
| docs/tutorials/getting-started.md | Adds getting started tutorial content. |
| docs/reference/README.md | Adds reference documentation index. |
| docs/how-to/README.md | Adds how-to documentation index. |
| docs/how-to/troubleshoot-connection.md | Adds connection troubleshooting guide. |
| docs/explanation/README.md | Adds explanation documentation index. |
| .releaserc.json | Adds semantic-release configuration. |
| .gitignore | Ignores Vite build output; adds a specific hashed asset ignore. |
| .github/workflows/ci.yaml | Adds CI workflow calling reusable build/version workflows. |
| .github/workflows/build.yaml | Adds reusable build workflow w/ build output summary + release packaging. |
Comments suppressed due to low confidence (1)
src/features/Versions.tsx:11
- With the new
:appIdrouting, an invalid/unloadedappIdwill cause the query to error; this component currently treatsdata === undefinedas "Loading..." and never shows an error state. Consider handlingerror/isErrorfrom RTK Query (and/or validatingappIdbefore querying) so the UI doesn’t get stuck on an indefinite loading screen when a slot isn’t available.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…roubleshooting guide, and refactor useAppParams import
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces major improvements to project documentation, continuous integration, and release automation for the PepperDash Essentials Web Config App. The most important changes include a complete rewrite and expansion of the
README.md, the addition of a structured documentation index, and the implementation of modern CI/CD workflows using GitHub Actions and semantic release.Documentation Improvements:
README.mdto provide clear project overview, quick start guides, feature highlights, development setup instructions, security considerations, browser compatibility, and contribution guidelines.docs/README.mdthat introduces the documentation structure based on the Diataxis framework, with links to tutorials, how-to guides, reference, and explanation sections.README.old.mdfile.CI/CD and Release Automation:
.github/workflows/ci.yamlto enable automatic builds on all branches, using reusable workflows for versioning and building the React app..github/workflows/build.yamlto define a reusable GitHub Actions workflow for building, versioning, and releasing the React application, including improved build output and error handling..releaserc.jsonto configure semantic-release for automated versioning, changelog generation, and release management across multiple branches and channels.