Merge pull request #282 from InseeFr/acceptance

Change to version 3.0.17

.github/workflows/ci.yml

@@ -4,11 +4,14 @@ jobs:
   test-build:
     name: Test & build
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [ 14, 16 ]
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 14.17.0
+          node-version: ${{ matrix.node }}
       - run: yarn
       # Build modules
       - run: yarn build-insee

README.md

@@ -15,10 +15,21 @@ The documentation can be found in the [docs](https://github.com/InseeFr/Bauhaus/
 
 ## How to start
 
+The application is tested on Node.js 14 and 16.
+
 ```
 git clone [email protected]:InseeFr/Bauhaus.git
 cd Bauhaus
 yarn
 yarn build-insee
 yarn start
 ```
+
+## Issues
+
+If you are using, you should install the following dependency. 
+
+```
+yarn global add windows-build-tools
+
+```

app/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "Bauhaus",
-	"version": "3.0.16",
+	"version": "3.0.17",
 	"description": "Web application for the management of concepts, classifications and other statistical objects",
 	"repository": {
 		"type": "git",
@@ -21,7 +21,7 @@
 	},
 	"dependencies": {
 		"@inseefr/iam": "0.1.1",
-		"@inseefr/wilco": "0.0.5",
+		"@inseefr/wilco": "0.0.7",
 		"bauhaus-operations": "^0.0.0",
 		"bauhaus-structures": "^0.0.0",
 		"bootstrap": "3.4.1",

app/src/index.js

@@ -4,7 +4,7 @@ import { Provider } from 'react-redux';
 import Root from 'js/router';
 import configureStore from 'js/store/configure-store';
 import Api from 'js/remote-api/api';
-import { Error, I18NContext, BackToTop, getLang } from '@inseefr/wilco';
+import { I18NContext, BackToTop, getLang } from '@inseefr/wilco';
 import D from 'js/i18n';
 import ApplicationTitle from 'js/applications/shared/application-title';
 import { AppContext } from 'bauhaus-utilities';
@@ -17,6 +17,17 @@ import 'bauhaus-codelists/dist/index.css';
 
 import 'main.scss';
 
+const Error = ({ home }) => {
+	return (
+		<div>
+			<div className="container">
+				<h1 className="text-center">{D.errorTitle}</h1>
+				<p className="text-center">{D.errorBody}</p>
+			</div>
+		</div>
+	);
+};
+
 Api.getInit()
 	.then(
 		(res) => (res.ok ? res.json() : Promise.reject(res.statusText)),

app/src/js/applications/classifications/visualization/controls.js

@@ -1,15 +1,22 @@
 import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { goBack, ReturnButton, Button, ActionToolbar } from '@inseefr/wilco';
+import { ValidationButton, Auth } from 'bauhaus-utilities';
 import D from 'js/i18n';
 
-const ClassificationControls = props => {
+const ClassificationControls = (props) => {
 	const location = props.history.location.pathname;
 	const treeLocation = `${location}/tree`;
 
 	return (
 		<ActionToolbar>
 			<ReturnButton action={goBack(props, `/classifications`)} />
+			<Auth.AuthGuard roles={[Auth.ADMIN]}>
+				<ValidationButton
+					object={props.classification}
+					callback={props.publish}
+				/>
+			</Auth.AuthGuard>
 			<Button key={D.btnTree} action={treeLocation} label={D.btnTree} col={3} />
 		</ActionToolbar>
 	);

app/src/js/applications/classifications/visualization/controls.spec.js

@@ -1,10 +1,25 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Controls from './controls';
+import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import Controls from './controls';
+
+const mockStore = configureStore([]);
+const store = mockStore({
+	users: { results: { stamp: 'stamp' } },
+	app: { secondLang: true, auth: { type: '', user: { roles: [] } } },
+});
 
 describe('classification-visualization-controls', () => {
 	it('renders without crashing', () => {
-		render(<Controls />, { wrapper: MemoryRouter });
+		render(
+			<Provider store={store}>
+				<Controls classification={{}} publish={() => {}} />
+			</Provider>,
+			{
+				wrapper: MemoryRouter,
+			}
+		);
 	});
 });

app/src/js/applications/classifications/visualization/home-container.js

@@ -1,63 +1,72 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { PropTypes } from 'prop-types';
-import { connect } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 import ClassificationVisualization from './home';
-import { buildExtract, Loading } from '@inseefr/wilco';
-import loadClassification from 'js/actions/classifications/classification';
+import { Loading } from '@inseefr/wilco';
 import * as mainSelect from 'js/reducers';
-import * as select from 'js/reducers/classifications/classification';
-import { Stores } from 'bauhaus-utilities';
+import { Stores, Auth } from 'bauhaus-utilities';
+import api from 'js/remote-api/classifications-api';
 
-const extractId = buildExtract('id');
+const ClassificationVisualizationContainer = (props) => {
+	const { id } = useParams();
+	const [loading, setLoading] = useState(true);
+	const langs = useSelector((state) => mainSelect.getLangs(state));
+	const secondLang = useSelector((state) =>
+		Stores.SecondLang.getSecondLang(state)
+	);
+	const [classification, setClassification] = useState([]);
+	const permission = useSelector((state) => Auth.getPermission(state));
+	const [publishing, setPublishing] = useState(false);
+	const [serverSideError, setServerSideError] = useState();
 
-class ClassificationVisualizationContainer extends Component {
-	constructor(props) {
-		super();
-	}
-	componentWillMount() {
-		const { classification, id } = this.props;
-		if (!classification) this.props.loadClassification(id);
-	}
-	componentWillReceiveProps({ id }) {
-		if (id !== this.props.id) {
-			this.props.loadClassification(id);
-		}
-	}
-	render() {
-		const { classification, id, secondLang, langs } = this.props;
-		if (!classification) return <Loading />;
-		return (
-			<ClassificationVisualization
-				classification={classification}
-				classificationId={id}
-				secondLang={secondLang}
-				langs={langs}
-			/>
-		);
+	const getClassification = (id) => {
+		Promise.all([
+			api.getClassificationGeneral(id),
+			api.getClassificationLevels(id),
+		])
+			.then(([general, levels]) => {
+				setClassification({ general, levels });
+			})
+			.finally(() => setLoading(false));
+	};
+
+	const publish = useCallback(() => {
+		setPublishing(true);
+		api
+			.publishClassification(classification.general)
+			.then(() => {
+				return getClassification(id);
+			})
+			.catch((error) => setServerSideError(error))
+			.finally(() => setPublishing(false));
+	}, [id, classification.general]);
+
+	useEffect(() => {
+		getClassification(id);
+	}, [id]);
+
+	if (loading) {
+		return <Loading />;
 	}
-}
 
-const mapStateToProps = (state, ownProps) => {
-	const id = extractId(ownProps);
-	const classification = select.getClassification(state, id);
-	const secondLang = Stores.SecondLang.getSecondLang(state);
-	const langs = mainSelect.getLangs(state);
-	return {
-		id,
-		classification,
-		secondLang,
-		langs,
-	};
-};
+	if (publishing) return <Loading text="publishing" />;
 
-const mapDispatchToProps = {
-	loadClassification,
+	if (!classification) return <Loading />;
+	return (
+		<ClassificationVisualization
+			classification={classification}
+			classificationId={id}
+			secondLang={secondLang}
+			langs={langs}
+			permission={permission}
+			publish={publish}
+			serverSideError={serverSideError}
+		/>
+	);
 };
 
-ClassificationVisualizationContainer = connect(
-	mapStateToProps,
-	mapDispatchToProps
-)(ClassificationVisualizationContainer);
+export default ClassificationVisualizationContainer;
 
 ClassificationVisualizationContainer.propTypes = {
 	match: PropTypes.shape({
@@ -66,4 +75,3 @@ ClassificationVisualizationContainer.propTypes = {
 		}),
 	}),
 };
-export default ClassificationVisualizationContainer;

app/src/js/applications/classifications/visualization/home.js

@@ -1,19 +1,22 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { PageSubtitle, PageTitle } from '@inseefr/wilco';
+import { PageSubtitle, PageTitle, ErrorBloc } from '@inseefr/wilco';
 import Controls from './controls';
 import General from './general';
 import Notes from './notes';
 import Levels from './levels';
 import D from 'js/i18n';
 import { CheckSecondLang, useTitle } from 'bauhaus-utilities';
 
-const ClassificationVisualization = props => {
+const ClassificationVisualization = (props) => {
 	const {
 		classification: { general, levels },
 		classificationId,
 		secondLang,
 		langs,
+		permission,
+		publish,
+		serverSideError,
 	} = props;
 	useTitle(D.classificationsTitle, general?.prefLabelLg1);
 
@@ -25,6 +28,7 @@ const ClassificationVisualization = props => {
 		descriptionLg1: general.descriptionLg1,
 		descriptionLg2: general.descriptionLg2,
 	};
+
 	return (
 		<div className="container">
 			<PageTitle title={general.prefLabelLg1} />
@@ -41,8 +45,13 @@ const ClassificationVisualization = props => {
 					</Link>
 				</div>
 			</div>
-			<Controls />
+			<Controls
+				classification={general}
+				publish={publish}
+				permission={permission}
+			/>
 			<CheckSecondLang />
+			<ErrorBloc error={serverSideError} />
 			<General general={general} secondLang={secondLang} langs={langs} />
 			{notes.scopeNoteLg1 && (
 				<Notes notes={notes} secondLang={secondLang} langs={langs} />

app/src/js/applications/classifications/visualization/home.spec.js

@@ -7,9 +7,8 @@ import configureStore from 'redux-mock-store';
 
 const mockStore = configureStore([]);
 const store = mockStore({
-	app: {
-		secondLang: true,
-	},
+	users: { results: { stamp: 'stamp' } },
+	app: { secondLang: true, auth: { type: '', user: { roles: [] } } },
 });
 
 const classification = {
@@ -26,13 +25,16 @@ const classification = {
 const langs = { lg1: 'fr', lg2: 'en' };
 
 describe('classification-home', () => {
-	it('renders without crashing', () => {
+	it('renders without crashing', async () => {
 		render(
 			<Provider store={store}>
 				<Home
 					classification={classification}
+					classificationId={'classificationId'}
 					langs={langs}
 					secondLang={false}
+					publish={() => {}}
+					serverSideError={''}
 				/>
 			</Provider>,
 			{ wrapper: MemoryRouter }

app/src/js/applications/concepts/visualization/links.js

@@ -41,7 +41,7 @@ const LinksList = ({ links, lang, alone, Dictionnary = D1 }) => {
 				<InternalLinks links={links[REFERENCES]} title={Dictionnary.referencesTitle} labelProperty={labelProperty} />
 				<InternalLinks links={links[SUCCEED]} title={Dictionnary.replacesTitle} labelProperty={labelProperty} />
 				<InternalLinks links={links[RELATED]} title={Dictionnary.relatedTitle} labelProperty={labelProperty} />
-				<InternalLinks links={links[IS_REPLACED_BY]} title={Dictionnary.replacedBy} labelProperty={labelProperty} />
+				<InternalLinks links={links[IS_REPLACED_BY]} title={Dictionnary.replacedByMasc} labelProperty={labelProperty} />
 				<CloseMatchLinks links={links.closeMatch} Dictionnary={Dictionnary} />
 			</dl>
 		}

app/src/js/i18n/dictionary/app.js

@@ -1,5 +1,6 @@
 import btnD from './generic/btn';
 const dictionary = {
+	errorTitle: {fr:"Erreur",en:"Error"},
 	langs: {
 		fr: 'Français',
 		en: 'English',
@@ -80,8 +81,8 @@ const dictionary = {
 	},
 
 	errorBody: {
-		fr: 'Veuillez contacter :DR59-SINL-Equipe-maintenance-RMeS',
-		en: 'Please contact :DR59-SINL-Equipe-maintenance-RMeS',
+		fr: 'Veuillez contacter l\'équipe RMéS [email protected]',
+		en: 'Please contact the team RMéS [email protected]',
 	},
 	exportTitle: {
 		fr: 'Export',

app/src/js/i18n/dictionary/concepts.js

@@ -245,11 +245,10 @@ const dictionary = {
 			return `<p>Bonjour,</p>
           <p>Vous trouverez ci-joint la description du concept « <b>
           ${prefLabelLg1}
-          </b> » ${inseeText} extraite de la base RMéS-Concepts.</p>
+          </b> » ${inseeText} extraite de la base RMéS-Bauhaus Concepts.</p>
           ${validText}
-          <p>Pour toute demande concernant ce concept merci de répondre via la boîte fonctionnelle :DG75-Administration RMéS <a href="mailto:[email protected]">[email protected]<a>.</p>
+          <p>Pour toute demande concernant ce concept, merci d’utiliser la boîte fonctionnelle <a href="mailto:[email protected]">[email protected]<a>.</p>
           <p>L'équipe RMéS<br/>
-          Insee - DG<br/>
           DMCSI - Unité Qualité</p>`;
 		},
 		en: (params) => {
@@ -296,11 +295,10 @@ const dictionary = {
 			return `<p>Bonjour,</p>
 	          <p>Vous trouverez ci-joint la composition de la collection de concepts « <b>
 	          ${prefLabelLg1}
-	          </b> » ${inseeText} extraite de la base RMéS-Concepts.</p>
+	          </b> » ${inseeText} extraite de la base RMéS-Bauhaus Concepts.</p>
 	          ${validText}
-	          <p>Pour toute demande concernant cette collection merci de répondre via la boîte fonctionnelle :DG75 RMéS-Concepts et définitions.</p>
+	          <p>Pour toute demande concernant cette collection, merci d’utiliser la boîte fonctionnelle <a href="mailto:[email protected]">[email protected]<a>.</p>
 	          <p>L'équipe RMéS<br/>
-	          Insee - DG<br/>
 	          DMCSI - Unité Qualité</p>`;
 		},
 		en: (params) => {