Merge pull request #2666 from appirio-tech/dev

Production Release 2.4.7

Author: RishiRajSahu

.nvmrc

@@ -1 +1 @@
-5
+8

README.md

@@ -1,6 +1,32 @@
-#### For folks working on this code base, we're organizing coding style and general guidelines [here](https://github.com/appirio-tech/connect-app/wiki/Community-Work-Read-Me-First!). 
+# Topcoder Connect App
 
-# TC Deployment Notes
+Topcoder Connect is client facing application of Topcoder. Customers use Topcoder Connect to input requirements of their projects, then managers and
+copilots take it from there.
+
+## Requirements
+
+- Node.js 8+
+- Npm 5+
+
+## Run locally for development
+
+Prior to running the application locally you should add into your `/etc/hosts` the line `127.0.0.1 local.topcoder-dev.com`.
+
+- `$ npm install` - Installs all dependencies.
+- `$ npm start` - Run application in development mode against Topcoder development environment using [dev](https://github.com/appirio-tech/connect-app/blob/dev/config/constants/dev.js) config. In this case the frontend is build in memory by webpack server and uses dev tools like redux-logger.
+
+Open browser with URL http://local.topcoder-dev.com:3000.
+
+## NPM commands
+
+- `$ npm start` - Run application in development mode against Topcoder development environment. In this case the frontend is build in memory by webpack server and uses dev tools like redux-logger.
+- `$ npm build` - Create build for production in `/dest` folder. In this case built app is configured to run against Topcoder production environment using [prod](https://github.com/appirio-tech/connect-app/blob/dev/config/constants/master.js) config. Files are being minimized and `gzipped`.
+- `$ npm run lint` - Check js code linting.
+- `$ npm run lint:fix` - Check js code linting and trying to fix errors automatically.
+- `$ npm run test` - Performs tests running. **Note** we don't really have tests, so we only keep this command run successfully.
+- `$ npm run test:watch` - Performs tests on files changes.
+
+## TC Deployment Notes
 _[TC Deployment Notes should always be kept up to date **on the default branch**. Update these notes when changes to this information occur]_
 
 **General Deployment:** This software is deployed to AWS S3 by CircleCI. It's ultimately delivered through AWS Cloudfront, which is fed from the S3 bucket. There are no EC2 systems involved in the delivery (althought Connect is fed from various micro-services).
@@ -18,47 +44,12 @@ _[TC Deployment Notes should always be kept up to date **on the default branch**
 * The _circle.yml_ file controls the build - see this file if you need to confirm if your commit will deploy anything
 * Circle-ci builds can be easily cancelled - please do so if you accidentally trigger an undesired build
 
-# Customer-App
-
-This repository houses new Customer pages, using React, Redux, and Webpack.
-
-## Installation
-
-We use node 8.9.x and npm 6.x, so you may need to download a new version of node. The easiest way is to download [nvm](https://github.com/creationix/nvm). We have a `.nvmrc` file in the root of the project, so you can just run `nvm use` to switch to the correct version of node.
-
-Install dependencies by running the following in the root of the project:
- - `npm i`
- - **Note:** You must use npm 6.x. Type `npm -v` to ensure you have the correct version.
-
-## NPM Commands
-- To run locally, run `npm start` and head to `http://localhost:3000/new_project`
-- Run tests with `npm test` or use `npm run test:watch` to rerun tests after files change
-- To make sure your code passes linting: `npm run lint`
-- To create the build: `npm run build`
-
-## Login
-
-During login, if your see `Invalid URL: http://localhost:3000` error in browser console, just browse http://localhost:3000 and it will show up.
-
-Or, you can add into your `/etc/hosts` the line `127.0.0.1 local.topcoder-dev.com`. And access the app with http://local.topcoder-dev.com:3000. It will prevent you from getting `Invalid URL: http://localhost:3000` and you will be redirected successfully after login.
-
 ## Contributing
 
 ### Pull Requests
 
 To contribute to the repository, please create a feature branch off of the dev branch. Once you're finished working on the feature, make a pull request to merge it into dev. Please make sure that every pull request has passed the build checks, which appear just before the "Merge pull request" button in github.
 
-### Updating npm-shrinkwrap.json
-
-General workflow to update `npm-shrinkwrap.json` would be:
-
-- `npm install --no-optional` -  with old npm-shrinkwrap (--no-optional to skip fsevents)
-- update `package.json` if you need to remove/update/add any packages
-- remove `npm-shrinkwrap.json`
-- `npm install --no-optional` with new `package.json`
-- `npm shrinkwrap` - to convert `package-lock.json` to `npm-shrinkwrap.json`
-- the new `npm-shrinkwrap.json` will have just the minimal diff
-
 ### Code Style
 
 ***Checkout the code and comments in `src/components/ExampleComponent` for an example React component, `.scss` file, and tests.***
@@ -107,12 +98,12 @@ SCSS Files
     }
   }
 SVG Icons
-  - This repository uses plugin babel-plugin-inline-react-svg 
+  - This repository uses plugin babel-plugin-inline-react-svg
   - The plugin is used to inline-embed svg icons inside the markup
-  
+
   Steps to adding new icons
-  - Insert the svg file in the ~/src/assets/images/ directory 
-  - Add a new icon component file in directory ~/src/components/Icons/Icon-Name.jsx and reference it on the global 
+  - Insert the svg file in the ~/src/assets/images/ directory
+  - Add a new icon component file in directory ~/src/components/Icons/Icon-Name.jsx and reference it on the global
     icon component in the ~/src/components/icons/ directory
   - Wrap the svg icon inside an object for caching to optimize on perfomance.
   ```

config/babel/webpack.js

@@ -0,0 +1,40 @@
+/**
+ * Babel config preset.
+ *
+ * Here we can update babel config which comes from `topcoder-react-utils` with Connect App specific things.
+ */
+const topCoderBabelConfig = require('topcoder-react-utils/config/babel/webpack')
+
+/*
+  Make sure that the list of plugins is defined
+ */
+topCoderBabelConfig.plugins = topCoderBabelConfig.plugins || []
+
+/*
+  Add babel-plugin-lodash to exclude full lodash lib and include only necessary methods
+*/
+topCoderBabelConfig.plugins.push('lodash')
+
+/*
+  Update options for `inline-react-svg` plugin.
+  We have to clean `data-color` and `data-cap` attributes in SVG files which are used in Connect App
+  because otherwise we will have `Warning: Unknown prop` from React
+*/
+topCoderBabelConfig.plugins = topCoderBabelConfig.plugins.map((plugin) => {
+  if (plugin === 'inline-react-svg') {
+    return ['inline-react-svg', {
+      svgo: {
+        plugins: [
+          {
+            removeAttrs: { attrs: '(data-color|data-cap)' }
+          }
+        ]
+
+      }
+    }]
+  }
+
+  return plugin
+})
+
+module.exports = topCoderBabelConfig

config/constants/dev.js

@@ -46,5 +46,7 @@ module.exports = {
   TC_NOTIFICATION_URL: 'https://api.topcoder-dev.com/v5/notifications',
   CONNECT_MESSAGE_API_URL: 'https://api.topcoder-dev.com/v5',
   TC_SYSTEM_USERID: process.env.DEV_TC_SYSTEM_USERID,
-  MAINTENANCE_MODE: process.env.DEV_MAINTENANCE_MODE
+  MAINTENANCE_MODE: process.env.DEV_MAINTENANCE_MODE,
+
+  RESET_PASSWORD_URL: 'https://accounts.topcoder-dev.com/connect/reset-password'
 }

config/constants/master.js

@@ -46,5 +46,7 @@ module.exports = {
   TC_NOTIFICATION_URL: 'https://api.topcoder.com/v5/notifications',
   CONNECT_MESSAGE_API_URL: 'https://api.topcoder.com/v5',
   TC_SYSTEM_USERID: process.env.PROD_TC_SYSTEM_USERID,
-  MAINTENANCE_MODE: process.env.PROD_MAINTENANCE_MODE
+  MAINTENANCE_MODE: process.env.PROD_MAINTENANCE_MODE,
+
+  RESET_PASSWORD_URL: 'https://accounts.topcoder.com/connect/reset-password'
 }

config/webpack/common-modifications.js

@@ -4,6 +4,9 @@
  * webpack merge.
  */
 
+const path = require('path')
+const dirname = path.resolve(__dirname, '../..')
+
 module.exports = function (config) {
   /*
     Exclude some folders from babel-loader
@@ -15,9 +18,10 @@ module.exports = function (config) {
   ]
 
   /*
-    Add babel-plugin-lodash to exclude full lodash lib and include only necessary methods
-   */
-  jsxRule.options.plugins = (jsxRule.options.plugins || []).concat(['lodash'])
+    Use Connect App preset file for babel config
+    It may contain some modifications of babel config which comes from `topcoder-react-utils`
+  */
+  jsxRule.options.presets = [path.resolve(dirname, './config/babel/webpack.js')]
 
   /*
     Include packages `appirio-tech-react-components` and `tc-ui`