[OSDEV-1814] Add toggle switch for Additional data section#546
[OSDEV-1814] Add toggle switch for Additional data section#546VadimKovalenkoSNF merged 7 commits intomainfrom
Conversation
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
had a problem deploying
to
Quality Environment
GitHub Actions
Failure
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Dedupe Hub App | Unittest test suite - Code coverage reportTotal: 56.14%Your code coverage diff: 0.00% ▴ ✅ All code changes are covered |
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Contricleaner App | Unittest test suite - Code coverage reportTotal: 98.91%Your code coverage diff: 0.00% ▴ ✅ All code changes are covered |
Countries App | Unittest test suite - Code coverage reportTotal: 100%Your code coverage diff: 0.00% ▴ ✅ All code changes are covered |
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Django App | Unittest test suite - Code coverage reportTotal: 80.55%Your code coverage diff: 0.00% ▴ ✅ All code changes are covered |
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
React App | Jest test suite - Code coverage reportTotal: 32.27%Your code coverage diff: 0.67% ▴ ✅ All code changes are covered |
VadimKovalenkoSNF
force-pushed
the
OSDEV-1814-additional-info-toggle-switch
branch
from
7f43174 to
2d20a33
Compare
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
VadimKovalenkoSNF
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
📝 WalkthroughWalkthroughThe changes introduce a new section titled "What's new" in the release notes for version 1.32.0, highlighting the addition of a toggle switch button for the production location info page. This switch allows users to render additional data when activated. The Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant C as ProductionLocationInfo Component
U->>C: Toggle switch (on/off)
alt Switch turned ON
C->>C: Call fillAdditionalDataFields()
C-->>U: Render additional data fields
else Switch turned OFF
C->>C: Call resetAdditionalDataFields()
C-->>U: Hide additional data fields
end
Possibly related PRs
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (10)
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
doc/release/RELEASE-NOTES.md (1)
15-18: Minor inconsistency in header formatting.There's a trailing colon in the "Release instructions:" header that's inconsistent with other headers like "What's new" that don't use punctuation.
-### Release instructions: +### Release instructions🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
15-15: Trailing punctuation in heading
Punctuation: ':'(MD026, no-trailing-punctuation)
17-17: Unordered list indentation
Expected: 2; Actual: 4(MD007, ul-indent)
18-18: Unordered list indentation
Expected: 2; Actual: 4(MD007, ul-indent)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
doc/release/RELEASE-NOTES.md(1 hunks)src/react/src/__tests__/components/ProductionLocationInfo.test.js(6 hunks)src/react/src/components/Contribute/ProductionLocationInfo.jsx(5 hunks)src/react/src/util/styles.js(1 hunks)
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
doc/release/RELEASE-NOTES.md
15-15: Trailing punctuation in heading
Punctuation: ':'
(MD026, no-trailing-punctuation)
17-17: Unordered list indentation
Expected: 2; Actual: 4
(MD007, ul-indent)
18-18: Unordered list indentation
Expected: 2; Actual: 4
(MD007, ul-indent)
⏰ Context from checks skipped due to timeout of 90000ms (13)
- GitHub Check: run-integration-test-code-quality
- GitHub Check: run-flake8-linter
- GitHub Check: run-fe-code-quality
- GitHub Check: run-eslint-linter-and-prettier-formatter
- GitHub Check: run-django-code-quality
- GitHub Check: run-dd-code-quality
- GitHub Check: run-countries-code-quality
- GitHub Check: run-contricleaner-code-quality
- GitHub Check: get-base-branch-fe-cov
- GitHub Check: get-base-branch-django-cov
- GitHub Check: get-base-branch-dd-cov
- GitHub Check: get-base-branch-countries-cov
- GitHub Check: get-base-branch-contricleaner-cov
🔇 Additional comments (15)
src/react/src/util/styles.js (1)
1295-1297: The new switchButton style looks good for the toggle switch implementation.This style with a 10px top margin provides proper spacing for the new toggle switch component that replaces the previous icon button in the ProductionLocationInfo component.
doc/release/RELEASE-NOTES.md (1)
6-14: The new release section is well-structured and informative.The information about the new toggle switch button for conditional rendering of additional data is clearly documented along with the product name and release date.
src/react/src/__tests__/components/ProductionLocationInfo.test.js (7)
3-3: Import statement updated to include router components.The import statement now correctly includes
MemoryRouterandRoutefrom 'react-router-dom' for testing router-dependent functionality in the new test cases.
32-32: Test description clarified.The test description has been improved to clearly specify that this test suite is for testing input fields for POST requests to
v1/production-locations.
92-94: Updated test to use switch button instead of icon button.The test now correctly looks for the new switch component with data-testid "switch-additional-info-fields" instead of the previous icon button.
138-140: Tests updated to use switch button interaction.The test now properly targets the switch button for interaction testing, maintaining test coverage for the toggle functionality with the new UI component.
154-155: Click event maintained for toggling state.The test correctly maintains the same logic for testing the toggle functionality, with just the target element changed from icon button to switch.
180-185: Added switch state verification.Good addition of tests to verify the checked/unchecked state of the switch button, which ensures the switch visual state is correctly synchronized with the component's internal state.
209-290: Added new test suite for UPDATE requests with invalid data.This is a good addition that tests an important edge case: when a form contains invalid data in the additional fields, but those fields are hidden, the submit button should still be enabled. This test ensures the validation logic works correctly with the new toggle switch implementation.
src/react/src/components/Contribute/ProductionLocationInfo.jsx (6)
11-11: Added Switch component import.The Material-UI Switch component is correctly imported to replace the previous IconButton for toggling additional information.
108-130: New method to fill additional data fields.This method properly initializes the form's additional fields with data from the existing record when the switch is toggled on. Good implementation of the
convertRangeFieldutility for number of workers and consistent use ofupdateStateFromDatafor other fields.
132-139: New method to reset additional data fields.This method correctly resets all additional data fields to their default values when the switch is toggled off, ensuring no stale data remains in the form state.
224-235: New switch state handling implementation.The implementation for managing the switch state and toggling additional information fields is well-structured:
- Uses a boolean state variable for tracking visibility
- Updates the state with a functional state update (recommended pattern)
- Calls appropriate methods to fill or reset data fields based on the toggle state
This is a clean implementation that properly separates concerns.
589-599: Replaced icon button with Switch component.The Switch component implementation is well-configured:
- Color set to "primary" for consistent theming
- Proper event handler for toggle action
- State controlled via the
checkedprop- Test ID added for testing
- z-index style to prevent any potential layout issues
This is a more intuitive UI element for toggling visibility compared to the previous icon button.
609-609: Updated conditional rendering to use switch state.The conditional rendering now correctly uses the
showAdditionalInfostate variable to determine whether to display the additional information fields.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/react/src/__tests__/components/ProductionLocationInfo.test.js (1)
273-289: Consider adding an edge case test.While the current test verifies the basic toggle behavior, consider adding a test for the edge case where the user first expands the additional info section (disabling the update button due to invalid data), then collapses it again. The expected behavior would be that the update button becomes enabled again since the invalid fields are hidden.
test("update button should be enabled when number of workers invalid but additional info is hidden", () => { const { getByRole, getByText, getByTestId, getByPlaceholderText, queryByText } = renderComponent(); expect(queryByText("Enter the number of workers as a number or range")).not.toBeInTheDocument(); const updateButton = getByRole("button", { name: /Update/i }); expect(updateButton).toBeEnabled(); const switchButton = getByTestId("switch-additional-info-fields"); fireEvent.click(switchButton); const numberOfWorkersInput = getByPlaceholderText("Enter the number of workers as a number or range"); expect(numberOfWorkersInput).toHaveAttribute("aria-invalid", "true"); expect(getByText("Enter the number of workers as a number or range")).toBeInTheDocument(); expect(updateButton).toBeDisabled(); + + // Test that hiding the section re-enables the update button + fireEvent.click(switchButton); + expect(queryByText("Enter the number of workers as a number or range")).not.toBeInTheDocument(); + expect(updateButton).toBeEnabled(); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/react/src/__tests__/components/ProductionLocationInfo.test.js(6 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (13)
- GitHub Check: run-integration-test-code-quality
- GitHub Check: run-flake8-linter
- GitHub Check: run-fe-code-quality
- GitHub Check: run-eslint-linter-and-prettier-formatter
- GitHub Check: run-django-code-quality
- GitHub Check: run-dd-code-quality
- GitHub Check: run-countries-code-quality
- GitHub Check: run-contricleaner-code-quality
- GitHub Check: get-base-branch-fe-cov
- GitHub Check: get-base-branch-contricleaner-cov
- GitHub Check: get-base-branch-dd-cov
- GitHub Check: get-base-branch-countries-cov
- GitHub Check: get-base-branch-django-cov
🔇 Additional comments (6)
src/react/src/__tests__/components/ProductionLocationInfo.test.js (6)
3-3: Good update to the import statement.The addition of
MemoryRouterandRoutefromreact-router-domis appropriate for the new test suite that simulates URL-based routing with the osID parameter.
32-32: Clear test suite description.The updated description clearly specifies that this test suite focuses on POST requests to the production locations endpoint, which helps differentiate it from the new UPDATE request test suite added later.
92-94: Switch element correctly implemented in tests.The test correctly looks for the new switch component using the appropriate test ID, aligning with the PR objective of replacing the arrow dropdown icon with a toggle switch.
138-140: UI interaction correctly updated.The reference to the switch button and the click interaction properly match the updated component implementation.
180-185: Complete test coverage for switch functionality.The test now correctly verifies both the initial unchecked state of the switch button and the checked state after clicking, ensuring the toggle functionality works as expected.
209-290: Well-structured test for invalid update scenarios.This test suite effectively addresses a key PR objective: verifying that the Update button is disabled when the Additional data section is expanded and contains invalid fields (number of workers starting from zero). The test demonstrates that:
- The Update button is initially enabled with the additional info section hidden
- After expanding the section, invalid data causes the button to be disabled
The comprehensive test data setup with realistic production location data makes this test highly valuable.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/react/src/__tests__/components/ProductionLocationInfo.test.js (1)
209-294: Good test coverage for invalid input handling with the toggle.This new test suite effectively demonstrates the behavior specified in the PR objectives where:
- The Update button is enabled by default
- The Update button is disabled when additional fields are shown with invalid data
- The Update button becomes enabled again when additional fields are hidden
Consider adding more test cases for other validation scenarios mentioned in the PR objectives, such as testing that pre-filled values are sent to the server when the additional data section is expanded.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/react/src/__tests__/components/ProductionLocationInfo.test.js(6 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (13)
- GitHub Check: run-integration-test-code-quality
- GitHub Check: run-flake8-linter
- GitHub Check: run-eslint-linter-and-prettier-formatter
- GitHub Check: run-dd-code-quality
- GitHub Check: run-fe-code-quality
- GitHub Check: run-django-code-quality
- GitHub Check: run-countries-code-quality
- GitHub Check: run-contricleaner-code-quality
- GitHub Check: get-base-branch-dd-cov
- GitHub Check: get-base-branch-countries-cov
- GitHub Check: get-base-branch-contricleaner-cov
- GitHub Check: get-base-branch-django-cov
- GitHub Check: get-base-branch-fe-cov
🔇 Additional comments (7)
src/react/src/__tests__/components/ProductionLocationInfo.test.js (7)
3-3: Good addition of router components for testing.The addition of
MemoryRouterandRouteis appropriate for the new test suite that tests route-dependent behavior.
32-32: Improved test description clarity.The updated description clarifies the purpose of the test suite, making it more maintainable.
92-94: UI component change properly tested.The test has been correctly updated to check for the new switch button instead of the previous icon button implementation.
138-140: Testing click interaction with switch is appropriate.Good test for interaction with the switch button to toggle the additional information fields.
180-185: Good switch state verification.The test now properly verifies the state of the switch button (checked/unchecked), which is essential for confirming the toggle behavior functions correctly.
273-293: Comprehensive test for toggle behavior with invalid data.This test effectively verifies that:
- The Update button is initially enabled (when additional fields are hidden)
- When the additional fields are shown with invalid data, the Update button is disabled
- When the additional fields are hidden again, the Update button is re-enabled
This matches the PR objective of hiding the Additional data section by default and controlling the Update button state based on field validity.
235-240:Details
✅ Verification successful
Verify min value of zero is correctly identified as invalid.
The test data correctly includes an invalid number_of_workers range (starting from zero), which aligns with the PR objective stating "When the Additional data section is expanded, the Update button may be disabled if there are invalid incoming fields, such as a number of workers range starting from zero."
🌐 Web query:
Is zero an invalid value for minimum number of workers in manufacturing facilities?💡 Result:
The concept of a manufacturing facility operating with zero workers is not explicitly addressed in regulatory or industry standards as an "invalid" value, but practical and operational realities make it infeasible. Here’s the breakdown:
Workforce Requirements in Manufacturing
- Human Oversight and Maintenance: Even highly automated facilities require human intervention for maintenance, quality control, and system management. For example, collaborative robotics (mentioned in [9]) still necessitate human oversight for programming, troubleshooting, and safety checks.
- Regulatory and Safety Compliance: OSHA standards (referenced in [8]) mandate safety protocols, training, and emergency response measures, which inherently require human presence to implement and monitor.
- Employment Data: The Bureau of Labor Statistics ([10]) lists employment estimates for production roles across industries, indicating that even in highly automated sectors like motor vehicle manufacturing, workers are still present for operational roles.
Automation and Workforce Trends
- Zero-Based Factory Design: While BCG’s zero-based approach ([9]) emphasizes reimagining operations through digitization and automation, it does not advocate for eliminating all workers. Instead, it focuses on optimizing human roles alongside technology (e.g., using temporary workers or upskilling employees).
- Labor Gaps: Studies ([1][7]) highlight shortages in technical roles like maintenance technicians and engineers, underscoring the ongoing need for skilled human labor despite automation.
Conclusion
A manufacturing facility cannot realistically operate with zero workers due to the need for oversight, compliance, and roles that automation cannot fully replace. While automation reduces labor dependency, a minimal workforce remains essential for operational integrity.
Citations:
- 1: https://nam.org/study-manufacturing-in-u-s-could-need-up-to-3-8-million-workers-30626/
- 2: https://hipcv.com/guides/how-to-become-a-factory-worker
- 3: https://www.bls.gov/web/empsit/cesfaq.htm
- 4: https://www.jacksonlewis.com/insights/employment-law-developments-coming-soon-manufacturing-facility-near-you
- 5: https://www.indeed.com/hire/job-description/production-worker
- 6: https://www.simplilearn.com/concept-of-zero-defects-quality-management-article
- 7: https://www.supplychaindive.com/news/manufacturing-labor-shortage-2033-deloitte-mi-report-2024/713326/
- 8: https://www.hazmatschool.com/blog/what-are-the-training-requirements-to-become-a-manufacturer/
- 9: https://www.bcg.com/publications/2021/zero-based-approach-factory-operations
- 10: https://www.bls.gov/oes/2023/may/oes519199.htm
Invalid Minimum Worker Count Is Correctly Tested
The test data in
src/react/src/__tests__/components/ProductionLocationInfo.test.js(lines 235–240) appropriately setsnumber_of_workers.minto 0. Given that a manufacturing facility realistically requires at least one worker for oversight and operational integrity, using a zero minimum is an effective way to trigger the invalid state (and consequently disable the Update button) as intended by the PR objectives.
|
3 participants
Fix OSDEV-1814
contribute/single-location/{os_id}/info/), Update button is active by default.