diff --git a/.travis.yml b/.travis.yml index afeccdd6..8a8b9883 100644 --- a/.travis.yml +++ b/.travis.yml @@ -10,15 +10,16 @@ services: - mysql before_install: -- rvm use 2.2 --install --binary --fuzzy +- rvm use 2.3 --install --binary --fuzzy - ruby --version - mysql -e 'CREATE DATABASE development;' - nvm install 6.14.4 - npm install -g npm@6.1.0 -- npm install -g mocha@5.2.0 +- npm install -g mocha@6.2.0 - cd client - npm install - cd ../tests +- gem install bundler - bundle install - gem install bacon - cd ../server diff --git a/README.md b/README.md index e5be80e3..ddac8400 100644 --- a/README.md +++ b/README.md @@ -20,28 +20,25 @@ Here is a guide of how to set up the development environment in OpenSupports. - `curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -` - `sudo apt-get install -y nodejs` 4. Install npm: `sudo apt-get install npm` -5. Install gulp: `sudo npm install -g gulp` -6. Go to client: `cd opensupports/client` -7. Install dependencies: `npm install` -8. Rebuild node-sass: `npm rebuild node-sass` -9. Run: `gulp dev` +5. Go to client: `cd opensupports/client` +6. Install dependencies: `npm install` +7. Rebuild node-sass: `npm rebuild node-sass` +8. Run: `npm start` (PHP server api it must be running at :8080) 10. Go to the main app: `http://localhost:3000/app` or to the component demo `http://localhost:3000/demo` 11. Your browser will automatically be opened and directed to the browser-sync proxy address. -12. Use `gulp dev --api` to disable fixtures and use the real PHP server api (it must be running at :8080). +12. Use `npm start-fixtures` to enable fixtures and not require php server to be running. -Now that `gulp dev` is running, the server is up as well and serving files from the `/build` directory. Any changes in the `/src` directory will be automatically processed by Gulp and the changes will be injected to any open browsers pointed at the proxy address. - -OpenSupport uses by default the port 3000, but this port could already be used. If this is the case, you can modify this in the file: `client/gulp/config.js`. +OpenSupport uses by default the port 3000, but this port could already be used. If this is the case, you can modify this in the file: `client/webpack.config.js`. ##### Production Task -Just as there is a `gulp dev` task for development, there is also a `gulp prod` task for putting the project into a production-ready state. This will run each of the tasks, while also adding the image minification task discussed above. +Just as there is a task for development, there is also a `npm build` task for putting the project into a production-ready state. This will run each of the tasks, while also adding the image minification task discussed above and the result store in `dist/` folder. **Reminder:** Notice there is `index.html` and `index.php`. The first one searches the backend server where `config.js` says it, the second one uses `/api` to find the server. If you want to run OpenSupports in a single server, then use `index.php`. #### Frontend Unit Testing 1. Do the steps described before. -2. Install mocha: `sudo npm install -g mocha` +2. Install mocha: `npm install -g mocha@6.2.0` 3. Run `npm test` to run the tests. ### Getting up and running BACK-END (server folder) diff --git a/client/.babelrc b/client/.babelrc index 91246e4d..14d2ef3f 100644 --- a/client/.babelrc +++ b/client/.babelrc @@ -1,3 +1,4 @@ { - "optional": ["es7.classProperties"] -} \ No newline at end of file + "presets": ["@babel/preset-env", "@babel/preset-react"], + "plugins": ["@babel/plugin-proposal-class-properties", "add-module-exports"] +} diff --git a/client/package.json b/client/package.json index 0faea166..a53f832c 100644 --- a/client/package.json +++ b/client/package.json @@ -13,50 +13,61 @@ "npm": "^2.1.x" }, "scripts": { - "test": "export NODE_PATH=src && mocha src/lib-test/preprocessor.js --compilers js:babel-core/register --recursive src/**/**/__tests__/*-test.js" + "start": "webpack-dev-server", + "start-fixtures": "webpack-dev-server --env.FIXTURES=1", + "build": "rimraf build && NODE_ENV=production webpack -p --devtool none", + "test": "export NODE_PATH=src && mocha src/lib-test/preprocessor.js --require @babel/register --recursive src/**/**/__tests__/*-test.js" }, "devDependencies": { + "@babel/cli": "^7.5.5", + "@babel/core": "^7.5.5", + "@babel/node": "^7.5.5", + "@babel/plugin-proposal-class-properties": "^7.4.4", + "@babel/plugin-transform-modules-commonjs": "^7.5.0", + "@babel/preset-env": "^7.5.5", + "@babel/preset-react": "^7.0.0", + "@babel/register": "^7.5.5", "axios-mock-adapter": "^1.15.0", - "babel-core": "^5.8.22", - "babel-plugin-transform-class-properties": "^6.11.5", - "babel-register": "^6.7.2", - "babelify": "^6.1.x", + "babel-loader": "^8.0.6", + "babel-plugin-add-module-exports": "^1.0.2", "browser-sync": "^2.7.13", - "browserify": "^10.2.6", "chai": "^3.5.0", + "copy-webpack-plugin": "^5.0.3", + "css-loader": "^3.0.0", "debowerify": "^1.3.1", "del": "^1.2.0", + "eslint": "^5.16.0", + "eslint-loader": "^2.1.2", "express": "^4.13.1", "express-http-proxy": "^0.6.0", - "gulp": "^3.9.0", - "gulp-autoprefixer": "^2.3.1", - "gulp-connect-php": "0.0.5", - "gulp-if": "^1.2.5", - "gulp-imagemin": "^2.3.0", - "gulp-notify": "^2.2.0", - "gulp-plumber": "^1.2.0", - "gulp-rename": "^1.2.2", - "gulp-sass": "^4.0.1", - "gulp-sass-bulk-import": "^1.0.1", - "gulp-sourcemaps": "^2.6.4", - "gulp-streamify": "0.0.5", - "gulp-uglify": "^2.1.2", - "gulp-util": "^3.0.6", + "file-loader": "^4.0.0", + "html-webpack-plugin": "^3.2.0", "humps": "^0.6.0", "jsdom": "^8.4.1", + "mocha": "^6.2.0", "morgan": "^1.6.1", + "node-sass": "^4.12.0", + "nodemon": "^1.19.1", + "path": "^0.12.7", "proxyquire": "^1.7.4", "react-addons-test-utils": "^15.0.1", + "rimraf": "^2.6.3", "run-sequence": "^1.1.1", + "sass-loader": "^7.1.0", "sinon": "^1.17.3", "sinon-chai": "^2.8.0", + "style-loader": "^0.23.1", + "stylelint-webpack-plugin": "^0.10.5", "vinyl-source-stream": "^1.1.0", - "watchify": "^3.2.x" + "watchify": "^3.2.x", + "webpack": "^4.34.0", + "webpack-bundle-analyzer": "^3.3.2", + "webpack-cli": "^3.3.4", + "webpack-dev-server": "^3.7.1", + "webpack-import-glob": "^2.0.0" }, "dependencies": { - "app-module-path": "^1.0.3", "axios": "^0.18.0", - "chart.js": "^2.4.0", "classnames": "^2.2.5", "history": "^3.0.0", "html-to-text": "^4.0.0", @@ -68,10 +79,8 @@ "quill-image-resize-module-react": "^3.0.0", "random-string": "^0.2.0", "react": "^15.4.2", - "react-chartjs-2": "^2.0.0", "react-document-title": "^1.0.2", "react-dom": "^15.4.2", - "react-draft-wysiwyg": "^1.12.13", "react-google-recaptcha": "^0.5.2", "react-motion": "^0.4.7", "react-quill": "^1.3.1", diff --git a/client/src/actions/admin-data-actions.js b/client/src/actions/admin-data-actions.js index b1cccc20..3c75c82a 100644 --- a/client/src/actions/admin-data-actions.js +++ b/client/src/actions/admin-data-actions.js @@ -12,22 +12,22 @@ export default { }; }, - retrieveMyTickets(page, closed = 0) { + retrieveMyTickets(page, closed = 0, departmentId = 0) { return { type: 'MY_TICKETS', payload: API.call({ path: '/staff/get-tickets', - data: {page, closed} + data: {page, closed, departmentId} }) }; }, - retrieveNewTickets(page = 1) { + retrieveNewTickets(page = 1, departmentId = 0) { return { type: 'NEW_TICKETS', payload: API.call({ path: '/staff/get-new-tickets', - data: {page} + data: {page, departmentId} }) }; }, diff --git a/client/src/app-components/ticket-list.js b/client/src/app-components/ticket-list.js index 1a33be8c..d23ecf0f 100644 --- a/client/src/app-components/ticket-list.js +++ b/client/src/app-components/ticket-list.js @@ -26,7 +26,8 @@ class TicketList extends React.Component { 'secondary' ]), closedTicketsShown: React.PropTypes.bool, - onClosedTicketsShownChange: React.PropTypes.func + onClosedTicketsShownChange: React.PropTypes.func, + onDepartmentChange: React.PropTypes.func, }; static defaultProps = { @@ -72,9 +73,13 @@ class TicketList extends React.Component { return { departments: this.getDepartments(), onChange: (event) => { + const departmentId = event.index && this.props.departments[event.index - 1].id; this.setState({ - selectedDepartment: event.index && this.props.departments[event.index - 1].id + selectedDepartment: departmentId }); + if(this.props.onDepartmentChange) { + this.props.onDepartmentChange(departmentId || null); + } }, size: 'medium' }; diff --git a/client/src/app/App.js b/client/src/app/App.js index 053fd186..c62353cf 100644 --- a/client/src/app/App.js +++ b/client/src/app/App.js @@ -111,7 +111,7 @@ class App extends React.Component { history.push('/admin'); } - if(isProd && _.includes(props.location.pathname, '/components-demo')) { + if(process.env.NODE_ENV === 'production' && _.includes(props.location.pathname, '/components-demo')) { history.push('/'); } } diff --git a/client/src/app/admin/panel/articles/admin-panel-view-article.scss b/client/src/app/admin/panel/articles/admin-panel-view-article.scss index f3d8716d..9143ccd2 100644 --- a/client/src/app/admin/panel/articles/admin-panel-view-article.scss +++ b/client/src/app/admin/panel/articles/admin-panel-view-article.scss @@ -1,5 +1,9 @@ .admin-panel-view-article { + &__content { + word-break: break-word; + } + &__edit-buttons { text-align: left; margin-bottom: 20px; diff --git a/client/src/app/admin/panel/dashboard/admin-panel-stats.js b/client/src/app/admin/panel/dashboard/admin-panel-stats.js index 5da731fd..b9344dde 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.js @@ -1,18 +1,23 @@ import React from 'react'; import i18n from 'lib-app/i18n'; -import Stats from 'app-components/stats'; +// import Stats from 'app-components/stats'; import Header from 'core-components/header'; class AdminPanelStats extends React.Component { render() { + // return ( + //