diff --git a/.stylelintrc.json b/.stylelintrc.json index c131b774..36b3a372 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -4,9 +4,11 @@ "stylelint-config-prettier", "stylelint-config-standard-scss" ], + "plugins": ["stylelint-order"], "rules": { "declaration-block-trailing-semicolon": null, "no-descending-specificity": null, - "selector-class-pattern": null + "selector-class-pattern": null, + "order/properties-alphabetical-order": true } } \ No newline at end of file diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index dfdbe523..1f22f80a 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -1,14 +1,14 @@ -@import "colors"; +@import 'colors'; /* General */ @font-face { - font-family: "Proxima Nova Condensed Light"; - src: url("../fonts/proxima-light/Proxima Nova Condensed Light.otf"); + font-family: 'Proxima Nova Condensed Light'; + src: url('../fonts/proxima-light/Proxima Nova Condensed Light.otf'); } body { - font-family: "Proxima Nova Condensed Light", sans-serif; + font-family: 'Proxima Nova Condensed Light', sans-serif; &.waiting { cursor: wait; @@ -16,8 +16,8 @@ body { } .subtitle { - font-weight: bold; font-size: 18px; + font-weight: bold; } .small-text { @@ -65,11 +65,11 @@ a:hover { } .fully-centered { - position: absolute; - transform: translate(-50%, -50%); + left: 50%; margin: 0; + position: absolute; top: 50%; - left: 50%; + transform: translate(-50%, -50%); } .desm-col-header { @@ -186,13 +186,13 @@ a:hover { } .comment-dot { - position: relative; left: -10px; + position: relative; } .rounded-divider { - border-top: 2px solid #bbb; border-radius: 5px; + border-top: 2px solid #bbb; } .desm-rounded { @@ -226,7 +226,7 @@ a:hover { } .fit-content-height { - min-height: "fit-content"; + min-height: 'fit-content'; } .centered-width { @@ -238,13 +238,13 @@ a:hover { /* Scrollbar */ .has-scrollbar { - overflow-y: scroll; max-height: 45vw; + overflow-y: scroll; } .scrollbar::-webkit-scrollbar { - width: 6px; background-color: $background-color-dark; + width: 6px; } .scrollbar::-webkit-scrollbar-thumb { @@ -267,9 +267,9 @@ a:hover { } .box-title { + max-height: 40px; overflow: hidden; text-overflow: ellipsis; - max-height: 40px; } .border-top-dashboard-highlight { diff --git a/app/assets/stylesheets/customradio.scss b/app/assets/stylesheets/customradio.scss index b238f29d..499544aa 100644 --- a/app/assets/stylesheets/customradio.scss +++ b/app/assets/stylesheets/customradio.scss @@ -3,121 +3,120 @@ @import 'colors'; .desm-radio div { - clear: both; - overflow: hidden; + clear: both; + overflow: hidden; } -.desm-check-container-sm{ - height: 5rem; +.desm-check-container-sm { + height: 5rem; } .desm-radio label { - width: 100%; - border-radius: 3px; - border: 1px solid $primary-color-highlight; - font-weight: normal; + border: 1px solid $primary-color-highlight; + border-radius: 3px; + font-weight: normal; + width: 100%; } -.desm-radio input[type="radio"]:empty, -.desm-radio input[type="checkbox"]:empty { - left: -9999px; - position: absolute; +.desm-radio input[type='radio']:empty, +.desm-radio input[type='checkbox']:empty { + left: -9999px; + position: absolute; } -.desm-radio input[type="radio"]:empty~label, -.desm-radio input[type="checkbox"]:empty~label { - position: relative; - line-height: 2.5em; - text-indent: 3.25em; - cursor: pointer; - user-select: none; +.desm-radio input[type='radio']:empty ~ label, +.desm-radio input[type='checkbox']:empty ~ label { + cursor: pointer; + line-height: 2.5em; + position: relative; + text-indent: 3.25em; + user-select: none; } -.desm-radio input[type="radio"]:empty~label::before, -.desm-radio input[type="checkbox"]:empty~label::before { - position: absolute; - display: block; - top: 0; - bottom: 0; - left: 0; - content: ''; - width: 2.5em; - background: $primary-color-highlight; - ; - border-radius: 3px 0 0 3px; +.desm-radio input[type='radio']:empty ~ label::before, +.desm-radio input[type='checkbox']:empty ~ label::before { + background: $primary-color-highlight; + border-radius: 3px 0 0 3px; + bottom: 0; + content: ''; + display: block; + left: 0; + position: absolute; + top: 0; + width: 2.5em; } -.desm-radio > .has-spine input[type="radio"]:empty~label::before, -.desm-radio > .has-spine input[type="checkbox"]:empty~label::before { - background: green !important; +.desm-radio > .has-spine input[type='radio']:empty ~ label::before, +.desm-radio > .has-spine input[type='checkbox']:empty ~ label::before { + background: green !important; } -.desm-radio input[type="radio"]:hover:not(:checked)~label, -.desm-radio input[type="checkbox"]:hover:not(:checked)~label { - color: $on-primary-light; +.desm-radio input[type='radio']:hover:not(:checked) ~ label, +.desm-radio input[type='checkbox']:hover:not(:checked) ~ label { + color: $on-primary-light; } -.desm-radio input[type="radio"]:hover:not(:checked)~label::before, -.desm-radio input[type="checkbox"]:hover:not(:checked)~label::before { - content: '✓'; - color: $foreground-color; - font-weight: bolder; - text-indent: .9em; +.desm-radio input[type='radio']:hover:not(:checked) ~ label::before, +.desm-radio input[type='checkbox']:hover:not(:checked) ~ label::before { + color: $foreground-color; + content: '✓'; + font-weight: bolder; + text-indent: 0.9em; } -.desm-radio input[type="radio"]:checked~label, -.desm-radio input[type="checkbox"]:checked~label { - color: #777; +.desm-radio input[type='radio']:checked ~ label, +.desm-radio input[type='checkbox']:checked ~ label { + color: #777; } -.desm-radio input[type="radio"]:checked~label::before, -.desm-radio input[type="checkbox"]:checked~label::before { - content: '✓'; - background-color: #ccc; - color: #333; - font-weight: bolder; - text-indent: .9em; +.desm-radio input[type='radio']:checked ~ label::before, +.desm-radio input[type='checkbox']:checked ~ label::before { + background-color: #ccc; + color: #333; + content: '✓'; + font-weight: bolder; + text-indent: 0.9em; } -.desm-radio input[type="radio"]:focus~label::before, -.desm-radio input[type="checkbox"]:focus~label::before { - box-shadow: 0 0 0 3px #999; +.desm-radio input[type='radio']:focus ~ label::before, +.desm-radio input[type='checkbox']:focus ~ label::before { + box-shadow: 0 0 0 3px #999; } -.desm-radio-default input[type="radio"]:checked~label::before, -.desm-radio-default input[type="checkbox"]:checked~label::before { - color: #333; - background-color: #ccc; +.desm-radio-default input[type='radio']:checked ~ label::before, +.desm-radio-default input[type='checkbox']:checked ~ label::before { + background-color: #ccc; + color: #333; } .desm-radio-primary { - position: relative; + position: relative; } -.desm-radio-primary input[type="radio"]:checked~label::before, -.desm-radio-primary input[type="checkbox"]:checked~label::before { - color: #fff; - background-color: $on-primary; +.desm-radio-primary input[type='radio']:checked ~ label::before, +.desm-radio-primary input[type='checkbox']:checked ~ label::before { + background-color: $on-primary; + color: #fff; } /* CUSTOM CONTROLS */ -.desm-custom-control-input:focus~.custom-control-label::before { +.desm-custom-control-input:focus ~ .custom-control-label::before { border-color: $primary-color !important; - box-shadow: 0 0 0 0.2rem $primary-color-light !important; - opacity: 0.5; + box-shadow: 0 0 0 0.2rem $primary-color-light !important; + opacity: 0.5; } -.desm-custom-control-input:checked~.custom-control-label::before { - border-color: $primary-color !important; +.desm-custom-control-input:checked ~ .custom-control-label::before { background-color: $primary-color !important; + border-color: $primary-color !important; } -.desm-custom-control-input:focus:not(:checked)~.custom-control-label::before { +.desm-custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: $on-primary-light !important; } -.desm-custom-control-input:not(:disabled):active~.custom-control-label::before { +.desm-custom-control-input:not(:disabled):active ~ .custom-control-label::before { background-color: $primary-color-highlight !important; border-color: $primary-color-highlight !important; } diff --git a/app/assets/stylesheets/drag-n-drop.scss b/app/assets/stylesheets/drag-n-drop.scss index ad4d3c16..fe399bb8 100644 --- a/app/assets/stylesheets/drag-n-drop.scss +++ b/app/assets/stylesheets/drag-n-drop.scss @@ -2,35 +2,35 @@ /* Drag and Drop Classes */ -.dnd-active{ +.dnd-active { border: solid 3px $primary-color !important; color: $primary-color; font-weight: bold; } -.domain-drag-box{ +.domain-drag-box { min-height: 3.5vw; text-align: center; } -.mapping-term-drag-box{ +.mapping-term-drag-box { height: calc(1.5em + 1.8rem + 2px); text-align: center; } -.draggable{ +.draggable { cursor: move; } -.not-draggable{ +.not-draggable { cursor: not-allowed; } -.is-dragging{ +.is-dragging { opacity: 0.4; } -.terms-progress{ +.terms-progress { height: 0.5rem !important; margin-top: 10px; } @@ -38,4 +38,4 @@ .term-selected { border-color: $primary-color !important; border-width: 1px !important; -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss index 7d8410c5..8d16888c 100644 --- a/app/assets/stylesheets/forms.scss +++ b/app/assets/stylesheets/forms.scss @@ -7,8 +7,8 @@ } .domain-option { - padding-top: 0.2vw; padding-bottom: 0.2vw; + padding-top: 0.2vw; } .form-group { @@ -28,18 +28,18 @@ z-index: 5; &:focus { - box-shadow: 0 0 0 .3rem rgb(0 123 255 / 50%) !important; + box-shadow: 0 0 0 0.3rem rgb(0 123 255 / 50%) !important; } } -.react-codemirror2{ +.react-codemirror2 { height: 100%; max-height: 27rem; ::-webkit-scrollbar { + background-color: $primary-color-highlight; height: 6px; width: 6px; - background-color: $primary-color-highlight; } /* Handle */ @@ -59,11 +59,11 @@ } } -.CodeMirror{ +.CodeMirror { height: 100% !important; } -.custom-select:focus{ +.custom-select:focus { border-color: $primary-color !important; box-shadow: 0 0 0 0.2rem $background-color-dark !important; } diff --git a/app/assets/stylesheets/navbar.scss b/app/assets/stylesheets/navbar.scss index d033ac36..2fb0b009 100644 --- a/app/assets/stylesheets/navbar.scss +++ b/app/assets/stylesheets/navbar.scss @@ -1,5 +1,5 @@ /* Navbar Styles */ -@import "colors"; +@import 'colors'; .nav-container { padding-left: 0 !important; @@ -24,12 +24,12 @@ } #toggle-nav { - position: relative; bottom: -7px; + position: relative; } .brand-box { - background-image: url("../images/t3-logo.png"); + background-image: url('../images/t3-logo.png'); background-repeat: no-repeat; background-size: 12rem; } diff --git a/app/assets/stylesheets/stepper.scss b/app/assets/stylesheets/stepper.scss index ac29638c..3cf06126 100644 --- a/app/assets/stylesheets/stepper.scss +++ b/app/assets/stylesheets/stepper.scss @@ -1,17 +1,17 @@ /* Stepper (Inside the Navbar) */ @import 'colors'; -.indicator{ - padding-left: 7vw; - margin-left: -5rem !important; +.indicator { bottom: 0.5rem; + margin-left: -5rem !important; + padding-left: 7vw; position: relative; } .indicator > .indicator-step { + min-width: 7vw; position: relative; top: 0.5vw; - min-width: 7vw; } .indicator > .indicator-step .indicator-stepnum { @@ -24,25 +24,25 @@ } .indicator > .indicator-step > .indicator-dot { - position: absolute; - width: 0; - height: 0; - display: block; background: $primary-color-light; - top: 15px; - left: 0%; border-radius: 50%; + display: block; + height: 0; + left: 0%; + position: absolute; + top: 15px; + width: 0; } .indicator > .indicator-step > .indicator-dot::after { + background: $foreground-color; + border-radius: 50px; content: ' '; - width: 10px; height: 10px; - border-radius: 50px; - background: $foreground-color; + left: -1px; position: absolute; top: 5px; - left: -1px; + width: 10px; } .indicator-step.active > .indicator-dot::after { @@ -54,27 +54,27 @@ } .indicator > .indicator-step > .progress { - position: relative; border-radius: 0; - height: 3px; box-shadow: none; + height: 3px; + position: relative; } .indicator > .indicator-step > .progress > .progress-bar { - width:0; box-shadow: none; opacity: 0.2; + width: 0; } .indicator > .indicator-step.active > .progress > .progress-bar { background: $primary-color-light; - width:100% !important; + width: 100% !important; } .indicator > .indicator-step.complete > .progress > .progress-bar { background: $on-primary !important; - width:100% !important; opacity: 0.5; + width: 100% !important; } .indicator-step.active > .indicator-stepnum { @@ -82,11 +82,11 @@ } .indicator-step.complete > .indicator-stepnum { - color: $on-primary; + color: $on-primary; } .indicator > .indicator-step:first-child.active > .progress > .progress-bar { - width:0%; + width: 0%; } .indicator > .indicator-step:last-child.active > .progress > .progress-bar { @@ -102,6 +102,6 @@ opacity: 0; } -.indicator > .indicator-step.disabled a.indicator-dot{ +.indicator > .indicator-step.disabled a.indicator-dot { pointer-events: none; } diff --git a/app/javascript/actions/configurationProfiles.jsx b/app/javascript/actions/configurationProfiles.jsx index ebb7388e..8e87c16f 100644 --- a/app/javascript/actions/configurationProfiles.jsx +++ b/app/javascript/actions/configurationProfiles.jsx @@ -1,28 +1,28 @@ export const setStep = (step) => { return { - type: "SET_STEP", + type: 'SET_STEP', payload: step, }; }; export const setCurrentConfigurationProfile = (configurationProfile) => { return { - type: "SET_CURRENT_CP", + type: 'SET_CURRENT_CP', payload: configurationProfile, }; }; export const setCurrentDSOIndex = (index) => { return { - type: "SET_CURRENT_DSO_INDEX", + type: 'SET_CURRENT_DSO_INDEX', payload: index, }; }; export const setSavingCP = (value) => { - return { type: "SET_SAVING_CP", payload: value }; + return { type: 'SET_SAVING_CP', payload: value }; }; export const setEditCPErrors = (value) => { - return { type: "SET_EDIT_CP_ERRORS", payload: value }; + return { type: 'SET_EDIT_CP_ERRORS', payload: value }; }; diff --git a/app/javascript/actions/files.jsx b/app/javascript/actions/files.jsx index b902b32a..0bb8bc36 100644 --- a/app/javascript/actions/files.jsx +++ b/app/javascript/actions/files.jsx @@ -6,7 +6,7 @@ */ export const setFiles = (files) => { return { - type: "SET_FILES", + type: 'SET_FILES', payload: files, }; }; @@ -18,7 +18,7 @@ export const setFiles = (files) => { */ export const unsetFiles = () => { return { - type: "UNSET_FILES", + type: 'UNSET_FILES', }; }; @@ -29,7 +29,7 @@ export const unsetFiles = () => { */ export const setSpecToPreview = (specs) => { return { - type: "SET_PREVIEW_SPECS", + type: 'SET_PREVIEW_SPECS', payload: specs, }; }; @@ -41,7 +41,7 @@ export const setSpecToPreview = (specs) => { */ export const unsetSpecToPreview = (specs) => { return { - type: "UNSET_PREVIEW_SPECS", + type: 'UNSET_PREVIEW_SPECS', payload: specs, }; }; @@ -54,7 +54,7 @@ export const unsetSpecToPreview = (specs) => { */ export const setMergedFileId = (fileId) => { return { - type: "SET_MERGED_FILE", + type: 'SET_MERGED_FILE', payload: fileId, }; }; @@ -66,7 +66,7 @@ export const setMergedFileId = (fileId) => { */ export const unsetMergedFileId = () => { return { - type: "UNSET_MERGED_FILE", + type: 'UNSET_MERGED_FILE', }; }; @@ -77,7 +77,7 @@ export const unsetMergedFileId = () => { */ export const setFilteredFile = (fileContent) => { return { - type: "SET_FILTERED_FILE", + type: 'SET_FILTERED_FILE', payload: fileContent, }; }; @@ -89,6 +89,6 @@ export const setFilteredFile = (fileContent) => { */ export const unsetFilteredFile = () => { return { - type: "UNSET_FILTERED_FILE", + type: 'UNSET_FILTERED_FILE', }; -}; \ No newline at end of file +}; diff --git a/app/javascript/actions/mappingform.jsx b/app/javascript/actions/mappingform.jsx index 412f9706..65e9fee2 100644 --- a/app/javascript/actions/mappingform.jsx +++ b/app/javascript/actions/mappingform.jsx @@ -5,7 +5,7 @@ */ export const doSubmit = () => { return { - type: "SUBMIT", + type: 'SUBMIT', }; }; @@ -18,7 +18,7 @@ export const doSubmit = () => { */ export const doUnsubmit = () => { return { - type: "UNSUBMIT", + type: 'UNSUBMIT', }; }; @@ -30,7 +30,7 @@ export const doUnsubmit = () => { */ export const startProcessingFile = () => { return { - type: "START_PROCESSING_FILE", + type: 'START_PROCESSING_FILE', }; }; @@ -42,7 +42,7 @@ export const startProcessingFile = () => { */ export const stopProcessingFile = () => { return { - type: "STOP_PROCESSING_FILE", + type: 'STOP_PROCESSING_FILE', }; }; @@ -53,7 +53,7 @@ export const stopProcessingFile = () => { */ export const setMappingFormData = (data) => { return { - type: "SET_MAPPING_FORM_DATA", + type: 'SET_MAPPING_FORM_DATA', payload: data, }; }; @@ -65,7 +65,7 @@ export const setMappingFormData = (data) => { */ export const unsetMappingFormData = () => { return { - type: "UNSET_MAPPING_FORM_DATA", + type: 'UNSET_MAPPING_FORM_DATA', }; }; @@ -76,7 +76,7 @@ export const unsetMappingFormData = () => { */ export const setMappingFormErrors = (errors) => { return { - type: "SET_MAPPING_FORM_ERRORS", + type: 'SET_MAPPING_FORM_ERRORS', payload: errors, }; }; @@ -88,6 +88,6 @@ export const setMappingFormErrors = (errors) => { */ export const unsetMappingFormErrors = () => { return { - type: "UNSET_MAPPING_FORM_ERRORS", + type: 'UNSET_MAPPING_FORM_ERRORS', }; -}; \ No newline at end of file +}; diff --git a/app/javascript/actions/sessions.jsx b/app/javascript/actions/sessions.jsx index 472528a5..848e4aec 100644 --- a/app/javascript/actions/sessions.jsx +++ b/app/javascript/actions/sessions.jsx @@ -5,7 +5,7 @@ */ export const doLogin = () => { return { - type: "SIGN_IN", + type: 'SIGN_IN', }; }; @@ -16,7 +16,7 @@ export const doLogin = () => { */ export const doLogout = () => { return { - type: "SIGN_OUT", + type: 'SIGN_OUT', }; }; @@ -27,10 +27,10 @@ export const doLogout = () => { */ export const setUser = (user) => { return { - type: "SET_USER", - payload: user - } -} + type: 'SET_USER', + payload: user, + }; +}; /** * Represents setting the user to an empty object (remove the user from the session) @@ -39,6 +39,6 @@ export const setUser = (user) => { */ export const unsetUser = (user) => { return { - type: "UNSET_USER" - } -} \ No newline at end of file + type: 'UNSET_USER', + }; +}; diff --git a/app/javascript/actions/vocabularies.js b/app/javascript/actions/vocabularies.js index aa7b7e79..8c5c2f43 100644 --- a/app/javascript/actions/vocabularies.js +++ b/app/javascript/actions/vocabularies.js @@ -1,5 +1,5 @@ -import _ from "lodash"; -import { vocabName } from "../helpers/Vocabularies"; +import _ from 'lodash'; +import { vocabName } from '../helpers/Vocabularies'; /** * Represents setting the vocabularies when the user uploads the files @@ -7,14 +7,11 @@ import { vocabName } from "../helpers/Vocabularies"; * @returns {Array} */ export const setVocabularies = (vocabularies) => { - const uniqueVocabularies = _.uniqBy( - vocabularies, - v => vocabName(v["@graph"]) - ); + const uniqueVocabularies = _.uniqBy(vocabularies, (v) => vocabName(v['@graph'])); return { - type: "SET_VOCABULARIES", - payload: uniqueVocabularies + type: 'SET_VOCABULARIES', + payload: uniqueVocabularies, }; }; @@ -25,6 +22,6 @@ export const setVocabularies = (vocabularies) => { */ export const unsetVocabularies = () => { return { - type: "UNSET_VOCABULARIES", + type: 'UNSET_VOCABULARIES', }; }; diff --git a/app/javascript/channels/consumer.js b/app/javascript/channels/consumer.js index 0eceb59b..9dc0ceda 100644 --- a/app/javascript/channels/consumer.js +++ b/app/javascript/channels/consumer.js @@ -1,6 +1,6 @@ // Action Cable provides the framework to deal with WebSockets in Rails. // You can generate new channels where WebSocket features live using the `rails generate channel` command. -import { createConsumer } from "@rails/actioncable" +import { createConsumer } from '@rails/actioncable'; -export default createConsumer() +export default createConsumer(); diff --git a/app/javascript/channels/index.js b/app/javascript/channels/index.js index 0cfcf749..298a304d 100644 --- a/app/javascript/channels/index.js +++ b/app/javascript/channels/index.js @@ -1,5 +1,5 @@ // Load all the channels within this directory and all subdirectories. // Channel files must be named *_channel.js. -const channels = require.context('.', true, /_channel\.js$/) -channels.keys().forEach(channels) +const channels = require.context('.', true, /_channel\.js$/); +channels.keys().forEach(channels); diff --git a/app/javascript/components/App.jsx b/app/javascript/components/App.jsx index 591986c9..832b8d27 100644 --- a/app/javascript/components/App.jsx +++ b/app/javascript/components/App.jsx @@ -1,28 +1,28 @@ -import React, { useContext, useEffect, useState } from "react"; -import AlertNotice from "../components/shared/AlertNotice"; -import checkLoginStatus from "./../services/checkLoginStatus"; -import { useSelector } from "react-redux"; -import { doLogin, setUser } from "../actions/sessions"; -import { useDispatch } from "react-redux"; -import Routes from "./Routes"; -import Loader from "./shared/Loader"; -import ReduxToastr from "react-redux-toastr"; -import { toastr as toast } from "react-redux-toastr"; -import { AppContext } from "../contexts/AppContext"; +import React, { useContext, useEffect, useState } from 'react'; +import AlertNotice from '../components/shared/AlertNotice'; +import checkLoginStatus from './../services/checkLoginStatus'; +import { useSelector } from 'react-redux'; +import { doLogin, setUser } from '../actions/sessions'; +import { useDispatch } from 'react-redux'; +import Routes from './Routes'; +import Loader from './shared/Loader'; +import ReduxToastr from 'react-redux-toastr'; +import { toastr as toast } from 'react-redux-toastr'; +import { AppContext } from '../contexts/AppContext'; const App = () => { const { setLoggedIn } = useContext(AppContext); const isLoggedIn = useSelector((state) => state.loggedIn); const dispatch = useDispatch(); - const [errors, setErrors] = useState(""); + const [errors, setErrors] = useState(''); const [loading, setLoading] = useState(true); const handleLogin = (data) => { dispatch(doLogin()); dispatch(setUser(data)); setLoggedIn(true); - toast.info("Signed In"); + toast.info('Signed In'); }; const checkLoginStatusAPI = async () => { diff --git a/app/javascript/components/Routes.jsx b/app/javascript/components/Routes.jsx index df1d784c..a7c0a68a 100644 --- a/app/javascript/components/Routes.jsx +++ b/app/javascript/components/Routes.jsx @@ -1,35 +1,35 @@ -import React from "react"; -import UsersIndex from "./dashboard/users/UsersIndex"; -import EditUser from "./dashboard/users/EditUser"; -import Registration from "./auth/Registration"; -import OrganizationsIndex from "./dashboard/organizations/OrganizationsIndex"; -import EditOrganization from "./dashboard/organizations/EditOrganization"; -import CreateOrganization from "./dashboard/organizations/CreateOrganization"; -import Home from "./home/Home"; -import SignIn from "./auth/SignIn"; -import ProtectedRoute from "./auth/ProtectedRoute"; -import Mapping from "./mapping/Mapping"; -import MainDashboard from "./dashboard/MainDashboard"; -import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; -import SpecsList from "./specifications-list/SpecsList"; -import AlignAndFineTune from "./align-and-fine-tune/AlignAndFineTune"; -import MappingToDomains from "./mapping-to-domains/MappingToDomains"; -import EditSpecification from "./edit-specification/EditSpecification"; -import PropertyMappingList from "./property-mapping-list/PropertyMappingList"; -import ForgotPass from "./auth/ForgotPass"; -import ResetPass from "./auth/ResetPass"; -import ConfigurationProfilesIndex from "./dashboard/configuration-profiles/ConfigurationProfilesIndex"; -import EditConfigurationProfile from "./dashboard/configuration-profiles/edit/EditConfigurationProfile"; -import UploadConfigurationProfile from "./dashboard/configuration-profiles/UploadConfigurationProfile"; -import SelectConfigurationProfile from "./auth/SelectConfigurationProfile"; -import EditProfile from "./auth/EditProfile"; -import Admins from "../components/dashboard/admins/Admins"; +import React from 'react'; +import UsersIndex from './dashboard/users/UsersIndex'; +import EditUser from './dashboard/users/EditUser'; +import Registration from './auth/Registration'; +import OrganizationsIndex from './dashboard/organizations/OrganizationsIndex'; +import EditOrganization from './dashboard/organizations/EditOrganization'; +import CreateOrganization from './dashboard/organizations/CreateOrganization'; +import Home from './home/Home'; +import SignIn from './auth/SignIn'; +import ProtectedRoute from './auth/ProtectedRoute'; +import Mapping from './mapping/Mapping'; +import MainDashboard from './dashboard/MainDashboard'; +import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; +import SpecsList from './specifications-list/SpecsList'; +import AlignAndFineTune from './align-and-fine-tune/AlignAndFineTune'; +import MappingToDomains from './mapping-to-domains/MappingToDomains'; +import EditSpecification from './edit-specification/EditSpecification'; +import PropertyMappingList from './property-mapping-list/PropertyMappingList'; +import ForgotPass from './auth/ForgotPass'; +import ResetPass from './auth/ResetPass'; +import ConfigurationProfilesIndex from './dashboard/configuration-profiles/ConfigurationProfilesIndex'; +import EditConfigurationProfile from './dashboard/configuration-profiles/edit/EditConfigurationProfile'; +import UploadConfigurationProfile from './dashboard/configuration-profiles/UploadConfigurationProfile'; +import SelectConfigurationProfile from './auth/SelectConfigurationProfile'; +import EditProfile from './auth/EditProfile'; +import Admins from '../components/dashboard/admins/Admins'; // TODO: check if it'll work the same way if to move from webpacker -const adminRoleName = process.env.ADMIN_ROLE_NAME || "Super Admin"; // eslint-disable-line no-undef -const allRoles = [adminRoleName, "Mapper", "DSO Admin", "Profile Admin"]; +const adminRoleName = process.env.ADMIN_ROLE_NAME || 'Super Admin'; // eslint-disable-line no-undef +const allRoles = [adminRoleName, 'Mapper', 'DSO Admin', 'Profile Admin']; const onlySuperAdmin = [adminRoleName]; -const onlyMappers = ["Mapper"]; +const onlyMappers = ['Mapper']; const Routes = (props) => { const { handleLogin } = props; @@ -37,42 +37,33 @@ const Routes = (props) => { return ( - + } /> ( - - )} + path={'/forgot-password'} + render={(props) => } /> } /> ( - - )} + path={'/mappings-list'} + render={(props) => } /> - + { component={EditSpecification} /> - + { const { leadMapper, organization } = useContext(AppContext); @@ -48,9 +48,7 @@ const AlignAndFineTune = (props) => { /** * Controls displaying the removal confirmation dialog */ - const [confirmingRemoveAlignment, setConfirmingRemoveAlignment] = useState( - false - ); + const [confirmingRemoveAlignment, setConfirmingRemoveAlignment] = useState(false); /** * The date the mapping was marked as "mapped", which is "completed". */ @@ -83,10 +81,7 @@ const AlignAndFineTune = (props) => { * The value of the input that the user is typing in the search box * to filter the list of mapping terms */ - const [ - mappingSelectedTermsInputValue, - setMappingSelectedTermsInputValue, - ] = useState(""); + const [mappingSelectedTermsInputValue, setMappingSelectedTermsInputValue] = useState(''); /** * Represents the alignment that's going to be removed if the user confirms that action */ @@ -104,7 +99,7 @@ const AlignAndFineTune = (props) => { * The value of the input that the user is typing in the search box * to filter the list of spine terms */ - const [spineTermsInputValue, setSpineTermsInputValue] = useState(""); + const [spineTermsInputValue, setSpineTermsInputValue] = useState(''); const [scrollTop, setScrollTop] = useState(0); /** @@ -124,7 +119,7 @@ const AlignAndFineTune = (props) => { return term.selected; }); - const strongestMatchPredicate = predicates.find(p => p.strongest_match); + const strongestMatchPredicate = predicates.find((p) => p.strongest_match); /** * Manage to change values from mapping term inputs in the state @@ -168,9 +163,7 @@ const AlignAndFineTune = (props) => { .filter((term) => { return ( (options.pickSelected ? term.selected : !term.selected) && - term.name - .toLowerCase() - .includes(mappingSelectedTermsInputValue.toLowerCase()) + term.name.toLowerCase().includes(mappingSelectedTermsInputValue.toLowerCase()) ); }) .sort((a, b) => (a.name > b.name ? 1 : -1)); @@ -181,11 +174,9 @@ const AlignAndFineTune = (props) => { */ const filteredSpineTerms = _.sortBy( spineTerms.filter((term) => { - return term.name - .toLowerCase() - .includes(spineTermsInputValue.toLowerCase()); + return term.name.toLowerCase().includes(spineTermsInputValue.toLowerCase()); }), - [t => t.createdAt ? 1 : 0, t => t.name.toLowerCase()] + [(t) => (t.createdAt ? 1 : 0), (t) => t.name.toLowerCase()] ); /** @@ -193,11 +184,11 @@ const AlignAndFineTune = (props) => { */ const mappedSelectedTerms = mappingSelectedTerms.filter(selectedTermIsMapped); - const completeAlignments = alignments.filter(a => { - const predicate = predicates.find(p => p.id === a.predicateId); + const completeAlignments = alignments.filter((a) => { + const predicate = predicates.find((p) => p.id === a.predicateId); return ( - predicate?.source_uri?.toLowerCase()?.includes("nomatch") || + predicate?.source_uri?.toLowerCase()?.includes('nomatch') || (a.predicateId && a.mappedTerms.length) ); }); @@ -206,11 +197,11 @@ const AlignAndFineTune = (props) => { * Returns whether all the terms from the specification are already mapped. * For a term to be correctly mapped, we ensure to detect the predicate for it. */ - const noPartiallyMappedTerms = alignments.every(a => { - const predicate = predicates.find(p => p.id === a.predicateId); + const noPartiallyMappedTerms = alignments.every((a) => { + const predicate = predicates.find((p) => p.id === a.predicateId); return ( - predicate?.source_uri?.toLowerCase()?.includes("nomatch") || + predicate?.source_uri?.toLowerCase()?.includes('nomatch') || Boolean(a.mappedTerms.length) == Boolean(a.predicateId) ); }); @@ -236,9 +227,7 @@ const AlignAndFineTune = (props) => { * 2. The mapping term is already mapped in the backend (is one of the mapping terms mapped in DB). */ const spineTermIsMapped = (spineTerm) => { - let alg = alignments.find( - (alignment) => alignment.spineTermId === spineTerm.id - ); + let alg = alignments.find((alignment) => alignment.spineTermId === spineTerm.id); return alg.mappedTerms.length; }; @@ -273,9 +262,7 @@ const AlignAndFineTune = (props) => { */ const onPredicateSelected = (spineTerm, predicate) => { let tempAlignments = alignments; - let selectedAlignment = tempAlignments.find( - (alg) => alg.spineTermId === spineTerm.id - ); + let selectedAlignment = tempAlignments.find((alg) => alg.spineTermId === spineTerm.id); selectedAlignment.predicateId = predicate.id; selectedAlignment.changed = true; @@ -341,14 +328,8 @@ const AlignAndFineTune = (props) => { if (!anyError(response)) { /// Update the UI - setAlignments([ - ...alignments.filter((mt) => mt.id !== alignmentToRemove.id), - ]); - setSpineTerms([ - ...spineTerms.filter( - (sTerm) => sTerm.id !== alignmentToRemove.spineTermId - ), - ]); + setAlignments([...alignments.filter((mt) => mt.id !== alignmentToRemove.id)]); + setSpineTerms([...spineTerms.filter((sTerm) => sTerm.id !== alignmentToRemove.spineTermId)]); /// Close the modal confirmation window setConfirmingRemoveAlignment(false); @@ -358,7 +339,7 @@ const AlignAndFineTune = (props) => { setChangesPerformed(changesPerformed - 1); /// Communicate the operation result to the user - toast.success("Synthetic alignment successfully removed"); + toast.success('Synthetic alignment successfully removed'); } }; @@ -382,9 +363,7 @@ const AlignAndFineTune = (props) => { const handleRevertMapping = (alignment, mappedTerm) => { alignment.changed = true; alignment.previousMappedTerms = alignment.mappedTerms; - alignment.mappedTerms = alignment.mappedTerms.filter( - (mTerm) => mTerm.id !== mappedTerm.id - ); + alignment.mappedTerms = alignment.mappedTerms.filter((mTerm) => mTerm.id !== mappedTerm.id); /// If there's no mapped terms after removing the selected one (this was the last mapped /// term, and we removed it) remove the predicate @@ -418,13 +397,13 @@ const AlignAndFineTune = (props) => { data-toggle="tooltip" data-placement="bottom" title={ - "You can save the changes to continue mapping later" + - (changesPerformed ? "" : ". Try making a change!") + 'You can save the changes to continue mapping later' + + (changesPerformed ? '' : '. Try making a change!') } > Save - {leadMapper && mapping.status !== "mapped" && ( + {leadMapper && mapping.status !== 'mapped' && (