Commit eb621016 authored by Mahdi Mahmoudy's avatar Mahdi Mahmoudy
Browse files

Merge branch 'status-update'

parents d929c465 2c648cbb
{
"presets": ["env", "react", "stage-0"],
"plugins": ["transform-class-properties", "transform-object-rest-spread", "emotion"]
"presets": [
["@babel/preset-env", {
"modules": 'commonjs',
}],
"@babel/react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-modules-commonjs",
"@babel/plugin-syntax-dynamic-import",
"emotion"
]
}
\ No newline at end of file
......@@ -10,15 +10,11 @@ exports[`SearchField component should render 1`] = `
placeholder="ENST00000620613, A7E2Y1, ..."
type="text"
/>
<div
className="input-group-button"
<button
className="button"
type="submit"
>
<button
className="button"
type="submit"
>
Submit
</button>
</div>
Submit
</button>
</form>
`;
......@@ -20,16 +20,12 @@ exports[`HomePage component should render 1`] = `
placeholder="ENST00000620613, A7E2Y1, ..."
type="text"
/>
<div
className="input-group-button"
<button
className="button"
type="submit"
>
<button
className="button"
type="submit"
>
Submit
</button>
</div>
Submit
</button>
</form>
<div
className="home-banner__actions"
......
......@@ -32,58 +32,65 @@
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js"
},
"transformIgnorePatterns": [
"/!node_modules\\/lodash-es/"
],
"globals": {
"API_URL": "http://193.62.52.185:5000/gifts",
"AUTH_CALLBACK_URL": "http%3A%2F%2Flocalhost%3A39093%2Flogin"
},
"testURL": "http://localhost"
"testURL": "http://localhost",
"transformIgnorePatterns": [
"node_modules/?!(lodash-es)"
],
"testEnvironment": "node"
},
"dependencies": {
"@babel/polyfill": "^7.0.0",
"ajv": "^6.5.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"franklin-sites": "^0.0.71",
"jsonwebtoken": "^8.5.1",
"lodash-es": "^4.17.10",
"lodash": "^4.17.15",
"path": "^0.12.7",
"prop-types": "15.7.2",
"query-string": "^6.1.0",
"react": "^16.4.0",
"react": "^16.9.0",
"react-cookie": "^2.1.6",
"react-dom": "^16.4.0",
"react-dom": "^16.9.0",
"react-markdown": "^3.3.4",
"react-paginate": "^5.2.3",
"react-router-dom": "^4.2.2",
"react-router-dom": "^5.1.2",
"react-select": "^3.0.8",
"react-spinners": "^0.3.3",
"simplemde": "^1.11.2",
"uuid": "^3.3.2"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.2",
"babel-jest": "^22.4.4",
"babel-loader": "^7.1.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-react-native": "4.0.0",
"babel-preset-stage-0": "^6.24.1",
"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/plugin-proposal-object-rest-spread": "^7.6.2",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-modules-commonjs": "^7.8.3",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"@testing-library/react": "^9.1.4",
"babel-core": "^7.0.0-0",
"babel-eslint": "^10.0.1",
"babel-jest": "25.1.0",
"babel-loader": "^8.0.4",
"babel-plugin-dynamic-import-node": "^2.3.0",
"browser-sync": "^2.23.6",
"browser-sync-webpack-plugin": "^2.0.1",
"css-loader": "^0.28.10",
"eslint": "^5.16.0",
"eslint-config-airbnb": "17.1.0",
"eslint-plugin-import": "2.16.0",
"eslint-plugin-jest": "22.4.1",
"eslint-plugin-jest": "23.0.3",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.12.4",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.0.3",
"jest": "^22.4.4",
"jest": "25.1.0",
"node-sass": "^4.7.2",
"node-sass-chokidar": "^1.1.0",
"npm-run-all": "^4.1.2",
......
.window {
&__content {
.row {
margin: 0;
}
}
}
.status-wrapper {
display: table;
display: flex;
margin-left: auto;
align-items: center
}
.status-wrapper > .status {
......
.send-notification-ui-wrapper {
display: flex;
margin-bottom: 1rem;
.label {
height: 2.5rem;
line-height: 2.5rem;
margin-right: 1rem;
font-size: 1rem;
}
.react-select-wrapper {
width: 100%;
z-index: 100;
}
}
.react-select {
&__input {
input,
input:focus {
margin: 0;
box-shadow: none;
}
}
&__menu {
z-index: 5000;
}
}
.status-change-form {
display: flex;
display: inline-flex;
// display: flex;
// display: inline-flex;
flex-grow: 1;
}
.status-change-form select {
flex-grow: 1;
width: 200px;
// flex-grow: 1;
// width: 200px;
}
......@@ -7,6 +7,10 @@
-webkit-border-radius: 50%;
margin-right: 1rem;
margin-left: auto;
&--edit-mode {
margin: 0.7rem 1rem;
}
}
.status--unreviewed {
......
.status-section {
display: inline-block;
}
\ No newline at end of file
......@@ -2,6 +2,29 @@ body {
margin: 0;
padding: 0;
font-family: sans-serif;
&.active-modal {
overflow: hidden;
#modal {
display: block;
}
}
}
#content {
position: relative;
}
#modal {
background: var(--secondary-color);
position: fixed;
width: 200%;
height: 300%;
opacity: .7;
z-index: 999;
top: -50%;
display: none;
}
#main-content-area {
......
......@@ -49,6 +49,7 @@ class App extends Component {
selectedFilters: {},
frontendVersion: `${FRONTEND_VERSION}`,
backendVersion: null,
statusValues: {},
};
constructor(props) {
......@@ -60,10 +61,14 @@ class App extends Component {
this.setAuthState();
axios
.get(`${API_URL}/version/?format=json`)
.then(({ data }) => {
.all([
axios.get(`${API_URL}/version/?format=json`),
axios.get(`${API_URL}/mappings/statuses/?format=json`),
])
.then((response) => {
this.setState({
backendVersion: data.version,
backendVersion: response[0].data.version,
statusValues: response[1].data,
});
});
}
......
......@@ -7,6 +7,7 @@ const Layout = (props) => {
return (
<div id="content">
<div id="modal" />
<Header {...props} />
{/* <!-- Suggested layout containers --> */}
<section id="main-content-area" role="main">
......
......@@ -11,7 +11,7 @@ class Login extends Component {
componentDidMount() {
window.addEventListener('message', this.onElixirResponse);
this.windowRef = window
.open(`${authConfig.aap.url}/sso?from=${AUTH_CALLBACK_URL}`, 'elixir')
.open(`${authConfig.aap.url}/sso?from=${AUTH_CALLBACK_URL}&ttl=180`, 'elixir')
.focus();
}
......
......@@ -9,11 +9,12 @@ import Alignment from './components/alignment/Alignment';
import LabelsSection from './components/label/LabelsSection';
import RelatedMappingsSection from './components/RelatedMappingsSection';
import MappingHeader from './components/MappingHeader';
import MappingStatusSection from './components/MappingStatusControl';
import StatusIcon from './components/status/StatusIcon';
import StatusText from './components/status/StatusText';
import MappingComments from './components/comments/MappingComments';
import { statusesList } from './util/util';
import '../styles/Mapping.scss';
import '../../node_modules/simplemde/dist/simplemde.min.css';
class Mapping extends Component {
defaultState = {
......@@ -23,6 +24,7 @@ class Mapping extends Component {
mappingId: null,
labels: null,
showAlignment: true,
originalStatus: null,
};
constructor(props) {
......@@ -95,6 +97,7 @@ class Mapping extends Component {
status,
labels,
comments: comments.reverse(),
originalStatus: status,
});
}))
.catch(() => {
......@@ -119,6 +122,7 @@ class Mapping extends Component {
const {
details,
status,
originalStatus,
comments,
labels,
showAlignment,
......@@ -135,12 +139,8 @@ class Mapping extends Component {
<Fragment>
<div className="row column medium-12">
<div className="status-wrapper">
<MappingStatusSection
id={mappingId}
isLoggedIn={isLoggedIn}
status={status}
onChange={this.onStatusChange}
/>
<StatusIcon status={status} />
<StatusText value={status} labels={statusesList} />
</div>
<MappingHeader mapping={mapping} taxonomy={taxonomy} />
</div>
......@@ -177,13 +177,16 @@ class Mapping extends Component {
<div className="row mapping__comments__wrapper">
<div className="column medium-12">
<MappingComments
id={mappingId}
isLoggedIn={isLoggedIn}
comments={comments}
mappingStatus={status}
originalMappingStatus={originalStatus}
afterSaveCallback={this.getMappingDetails}
onMappingStatusChange={this.onStatusChange}
notificationsList={details.emailRecipientsList}
/>
</div>
</div>
......
......@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import axios from 'axios';
import isEqual from 'lodash-es/isEqual';
import isEqual from 'lodash/isEqual';
import LoadingSpinner from './components/LoadingSpinner';
import ResultsTable from './components/ResultsTable';
......
......@@ -6,8 +6,10 @@ import { withCookies } from 'react-cookie';
import LoadingSpinner from './components/LoadingSpinner';
import UnmappedHeader from './components/UnmappedHeader';
import UnmappedStatusControl from './components/UnmappedStatusControl';
import UnmappedComments from './components/comments/UnmappedComments';
import StatusIcon from './components/status/StatusIcon';
import StatusText from './components/status/StatusText';
import { statusesList } from './util/util';
import '../styles/Unmapped.scss';
import '../../node_modules/simplemde/dist/simplemde.min.css';
......@@ -19,6 +21,7 @@ class Unmapped extends Component {
comments: null,
id: null,
labels: null,
originalStatus: null,
};
constructor(props) {
......@@ -86,8 +89,9 @@ class Unmapped extends Component {
this.setState({
details,
status: status || 'NOT_REVIEWED',
status,
comments: comments.reverse(),
originalStatus: status,
});
}))
.catch(() => {
......@@ -104,6 +108,7 @@ class Unmapped extends Component {
const {
details,
status,
originalStatus,
comments,
} = this.state;
......@@ -118,12 +123,8 @@ class Unmapped extends Component {
<Fragment>
<div className="row column medium-12">
<div className="status-wrapper">
<UnmappedStatusControl
id={id}
isLoggedIn={isLoggedIn}
status={status}
onChange={this.onStatusChange}
/>
<StatusIcon status={status} />
<StatusText value={status} labels={statusesList} />
</div>
<UnmappedHeader unmapped={details} />
</div>
......@@ -134,8 +135,10 @@ class Unmapped extends Component {
isLoggedIn={isLoggedIn}
comments={comments}
mappingStatus={status}
originalMappingStatus={originalStatus}
afterSaveCallback={this.getUnmappedDetails}
onMappingStatusChange={this.onStatusChange}
notificationsList={details.emailRecipientsList}
/>
</div>
</div>
......
......@@ -29,7 +29,7 @@ const MappingHeader = (props) => {
rel="noopener noreferrer"
>
<ReviewStatus entryType={mapping.ensemblTranscript.select ? 'Ensembl' : ''} />
{mapping.ensemblTranscript.enstId}
{`${mapping.ensemblTranscript.enstId}.${mapping.ensemblTranscript.enstVersion}`}
</Link>
</h2>
<div>
......
import React from 'react';
import PropTypes from 'prop-types';
import StatusSection from './StatusSection';
const MappingStatusControl = (props) => {
const { id } = props;
const apiUri = `${API_URL}/mapping/${id}/status/`;
return (
<StatusSection
id={id}
apiUri={apiUri}
{...props}
/>
);
};
MappingStatusControl.propTypes = {
id: PropTypes.number.isRequired,
};
export default MappingStatusControl;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment