Register
Submit a solution
The challenge is finished.

Challenge Overview

BASIC REQUIREMENTS
  • Continue fix desktop native app by following challenge requirements
  • Fix issues from previous Bug Hunts and Code Quality feedback from client
  • Need remain support Sonarqube for Code quality
  • Must not breaking unit testing after updates based on Sonarqube result
  • Submit the updated Installer for required OS

CHALLENGE GOAL
The goal of this challenge is to build native desktop app that allows the user to configure a set of devices that are included in a particular customer order.

PROJECT BACKGROUND
  • This application is used to configure a set of devices that are included in a particular customer order.
  • The user starts by entering the order number.
  • The application queries the API and retrieves the order details.
  • These details include a list of individual devices that are used to populate the devices list. The details for each device are also fetched from the API.
  • Each of these devices needs to be configured before the order is complete.
  • Devices are configured by navigating to the device details page and clicking the Configure button.

CHALLENGE ASSETS
Technology Stack
OS Requirements
IMPORTANT: Your submission need build as desktop native app that will work on these required OS:
  • Windows 7
  • Windows 10
  • Mac

Submission Requirements

A). Issues from Bug Hunt
Functionalities Issues
  • After successfully configure the device. Click "Return to this order” button need go back to previous device list". Not to Locate Order page and need to re-enter order and item numbers.
  • Back arrow on device details page doesn't take me to previous device list.                                                          
  • When a user refresh the page via keyboard, page show blank error page. Need remain displayed the page. It look this problem related to the router
  • Change Search dropdown should not refresh the table. Only need trigger the search if user press enter after fill the values
  • Functionalities Issues from Bug Hunts: https://gitlab.com/eaton-topcoder/device-config-starter-frontend/issues?scope=all&utf8=%E2%9C%93&state=opened&label_name[]=Accepted&label_name[]=functionalities

Layout Issues
Material UI Issues
Typos Issues
B). Code Quality Updates

General
  • 3 Test Suites fail
    • Run “yarn test”, fix all the issues based on the Test unit report
  • Some typos in build file (others?)
    • /build.js has typos on “successful”…lines 51, 72
  • Shouldn’t need to import icons and fonts in index.html
    • Icons come with material-ui and typeface-open-sans should be required in index.jsx
  • Having all layouts implement the menu is weird as opposed to wrapping a single menu component around the router
  • shouldComponentUpdate lifecycle hook being used when componentDidUpdate is the more appropriate choice
  • Navigation drawer shouldn’t be expandable
  • Redux action names could be converted to constants
 
Login
  • Login title should use a larger variant instead of overriding size
  • Why using <Input> and <InputLabel> instead of <TextField>?
  • Don’t need a clear button for both inputs
  • This does not match PX Blue patterns
  • Forget Password should be Forgot Password
  • Placement and styling of error messages is inconsistent with Material design
 
Locate Order
  • Errors should be presented beneath the input fields (not a modal)
  • Do not hide the form when loading the devices
    • Make the preloader overlay displayed above the page
  • Seems like a convoluted way of setting the enabled state of the search button
    • why not just disabled={!this.state.orderNumber.length || !this.state.itemNumber.length}
  • Various typos in the code (occurred, appropriate)
    • Src/pages/Locate/index.jsx has typos on “occurred” (line 70) and “appropriate” (line 120)
    • Please check all pages
 
Devices Page  
DeviceListHeaderBar
  • Should not be overriding font sizes and weights in CSS. Choose a more appropriate Typography variant
    • This should be wrapped inside a Toolbar/Appbar
  • This will eliminate the need for custom styling for the sticky behavior
  • Why is getStructures defined in this file if it’s not used in this file?
  • StructureMenu should be using a <Select> component from material-ui instead of building a custom component
    • Don’t need to show the count of selected structures when a single item is selected
  • FilterMenu should be using a <Select> instead of a custom component
    • Selected indexes should be set to CONSTANT variables instead of hardcoding numeric values
    • Why not use a regex/replace to handle non-numeric input in the search field for device ID?
    • Search bar should not be a Paper it should just be a <TextField> with an adornment
    • This will allow you to eliminate majority of the custom styling for this component
  • Report an issue button doesn’t need to be abstracted to a component
    • It should be color={‘primary’} to avoid unnecessary styling rules
 
TopRightStats
  • We shouldn’t be storing an entire component in the redux store, just the values that support it
    • Makes more sense to store the list of devices and have the Stats component do the calculations for the various pieces
 
DeviceTable
  • Button statuses should be set as CONSTANTS for readability
  • shouldComponentUpdate logic feels messy
    • Can this be simplified?
  • All text should be in a Typography component
  • Font sizes in each column should match
    • Use the same typography variant
  • Lots of custom styles in the CSS. Can this be reduced?
Device Details
  • Configuration Details should be collapsible
  • Don’t do handleActionClick based on the CSS class of the element. Use proper onClick handlers on each element
  • Don’t do handleNextStepClick based on index in the list…this will break if we want to reorder the items
    • Consider an onclick function in the object for each item
  • Don’t use hardcoded strings for indexing into objects
  • Use a <Chip> for the status indicator
  • Don’t hardcode successful configuration message as default (line 294)
  • Lots of custom styling rules, what can be reduced/simplified/eliminated/inlined?
  • Next steps sidebar clickable areas should be full width of the container
 
ConfigurationDialog
  • Why is there a CustomStepConnector that just return a StepConnector?
  • All text elements should be in a <Typography> component
  • Blue text on light blue background is strange (steps), white on blue better?
  • Lots of custom styling rules, what can be reduced/simplified/eliminated/inlined?
 
C). Unit Testing and Sonarqube
  • As part of this challenge, you need to maintain code quality for unit testing and sonarqube
  • For unit testing please run “npx jest”. Fix any error displayed on the console.
  • For sonarqube, please follow the instruction to run Sonarqube on ReadMe.md
  • Let us know if you have any questions/clarifications about the Sonarqube.

You need to fix these types of Issues:
  • Bug
  • Vulnerability
  • Code Smell

You need to fix these type of Severity:
  • Blocker
  • Critical
  • Major


Final Submission Guidelines

Challenge Deliverables
  • Updated source code that implement the challenge requirements.
  • Include Windows and Mac installer in your submission, use different version ex: 0.0.3
  • Challenge winner need to send MR to our repo
  • Updated README in markup format contains all deployment detail steps (if any)

ELIGIBLE EVENTS:

2020 Topcoder(R) Open

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30103813