From 61760839dc72299b93092c2c11808d337d283ec0 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Mon, 22 Oct 2018 15:33:00 +0000
Subject: [PATCH] =?UTF-8?q?Affichage=20du=20code=20source=20d'une=20r?=
 =?UTF-8?q?=C3=A8gle=20et=20ses=20filles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/rule/Rule.js                | 135 ++++++++++--------
 source/components/rule/RuleSource.js          |  28 ++++
 source/engine/rules.js                        |   2 +-
 source/sites/embauche.gouv.fr/pages/Source.js |  21 +--
 4 files changed, 108 insertions(+), 78 deletions(-)
 create mode 100644 source/components/rule/RuleSource.js

diff --git a/source/components/rule/Rule.js b/source/components/rule/Rule.js
index 064ef85e1..a51d607f6 100644
--- a/source/components/rule/Rule.js
+++ b/source/components/rule/Rule.js
@@ -27,6 +27,8 @@ import References from './References'
 import './Rule.css'
 import { AttachDictionary } from '../AttachDictionary'
 import knownMecanisms from 'Engine/known-mecanisms.yaml'
+import emoji from 'react-easy-emoji'
+import Source from './RuleSource'
 
 export default compose(
 	connect((state, props) => ({
@@ -41,6 +43,7 @@ export default compose(
 	withLanguage
 )(
 	class Rule extends Component {
+		state = { viewSource: false }
 		render() {
 			let {
 					dottedName,
@@ -60,70 +63,82 @@ export default compose(
 			let showValues = valuesToShow || currentExample
 
 			return (
-				<div id="rule" className="ui__ container">
-					<Helmet>
-						<title>{title}</title>
-						<meta name="description" content={description} />
-					</Helmet>
-					<RuleHeader
-						{...{
-							ns,
-							type,
-							description,
-							question,
-							flatRule,
-							flatRules,
-							name,
-							title,
-							icon
-						}}
-					/>
+				<>
+					<button
+						onClick={() =>
+							this.setState({ viewSource: !this.state.viewSource })
+						}>
+						{emoji('🔍')}
+					</button>
+					{this.state.viewSource ? (
+						<Source dottedName={dottedName} />
+					) : (
+						<div id="rule" className="ui__ container">
+							<Helmet>
+								<title>{title}</title>
+								<meta name="description" content={description} />
+							</Helmet>
+							<RuleHeader
+								{...{
+									ns,
+									type,
+									description,
+									question,
+									flatRule,
+									flatRules,
+									name,
+									title,
+									icon
+								}}
+							/>
 
-					<section id="rule-content">
-						{displayedRule.nodeValue ? (
-							<div id="ruleValue">
-								<i className="fa fa-calculator" aria-hidden="true" />{' '}
-								{displayedRule.format === 'euros' || displayedRule.formule
-									? Intl.NumberFormat(language, {
-											style: 'currency',
-											currency: 'EUR'
-									  }).format(displayedRule.nodeValue)
-									: typeof displayedRule.nodeValue !== 'object'
-									? displayedRule.nodeValue
-									: null}
-							</div>
-						) : null}
+							<section id="rule-content">
+								{displayedRule.nodeValue ? (
+									<div id="ruleValue">
+										<i className="fa fa-calculator" aria-hidden="true" />{' '}
+										{displayedRule.format === 'euros' || displayedRule.formule
+											? Intl.NumberFormat(language, {
+													style: 'currency',
+													currency: 'EUR'
+											  }).format(displayedRule.nodeValue)
+											: typeof displayedRule.nodeValue !== 'object'
+											? displayedRule.nodeValue
+											: null}
+									</div>
+								) : null}
 
-						{displayedRule.defaultValue != null &&
-						typeof displayedRule.defaultValue !== 'object' ? (
-							<div id="ruleDefault">
-								Valeur par défaut : {displayedRule.defaultValue}
-							</div>
-						) : null}
+								{displayedRule.defaultValue != null &&
+								typeof displayedRule.defaultValue !== 'object' ? (
+									<div id="ruleDefault">
+										Valeur par défaut : {displayedRule.defaultValue}
+									</div>
+								) : null}
 
-						{//flatRule.question &&
-						// Fonctionnalité intéressante, à implémenter correctement
-						false && <UserInput {...{ flatRules, dottedName }} />}
-						{flatRule.ns && (
-							<Algorithm rule={displayedRule} showValues={showValues} />
-						)}
-						{flatRule.note && (
-							<section id="notes">
-								<h3>Note: </h3>
-								{createMarkdownDiv(flatRule.note)}
+								{//flatRule.question &&
+								// Fonctionnalité intéressante, à implémenter correctement
+								false && <UserInput {...{ flatRules, dottedName }} />}
+								{flatRule.ns && (
+									<Algorithm rule={displayedRule} showValues={showValues} />
+								)}
+								{flatRule.note && (
+									<section id="notes">
+										<h3>Note: </h3>
+										{createMarkdownDiv(flatRule.note)}
+									</section>
+								)}
+								<Examples
+									currentExample={currentExample}
+									situationExists={valuesToShow}
+									rule={displayedRule}
+								/>
+								{!isEmpty(namespaceRules) && (
+									<NamespaceRulesList {...{ namespaceRules }} />
+								)}
+								{this.renderReferences(flatRule)}
 							</section>
-						)}
-						<Examples
-							currentExample={currentExample}
-							situationExists={valuesToShow}
-							rule={displayedRule}
-						/>
-						{!isEmpty(namespaceRules) && (
-							<NamespaceRulesList {...{ namespaceRules }} />
-						)}
-						{this.renderReferences(flatRule)}
-					</section>
-				</div>
+						</div>
+					)}
+				</>
 			)
 		}
 
diff --git a/source/components/rule/RuleSource.js b/source/components/rule/RuleSource.js
new file mode 100644
index 000000000..8037bfaaa
--- /dev/null
+++ b/source/components/rule/RuleSource.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import yaml from 'js-yaml'
+import rules from 'Règles/base.yaml'
+import emoji from 'react-easy-emoji'
+import MonacoEditor from 'react-monaco-editor'
+import { buildDottedName } from 'Engine/rules'
+
+export default class Source extends Component {
+	render() {
+		let { dottedName } = this.props,
+			source = rules.filter(rule => buildDottedName(rule).includes(dottedName))
+
+		return (
+			<div id="Source" className="ui__ container">
+				<h2>
+					{emoji('⛰️ ')}
+					Source de <code>{dottedName}</code>
+				</h2>
+				<MonacoEditor
+					height="800"
+					width="1000"
+					language={'yaml'}
+					value={yaml.safeDump(source)}
+				/>
+			</div>
+		)
+	}
+}
diff --git a/source/engine/rules.js b/source/engine/rules.js
index d2c7339b1..9414ab775 100644
--- a/source/engine/rules.js
+++ b/source/engine/rules.js
@@ -73,7 +73,7 @@ export let enrichRule = (rule, sharedData = {}) => {
 	}
 }
 
-let buildDottedName = rule =>
+export let buildDottedName = rule =>
 	rule['espace'] ? [rule['espace'], rule['nom']].join(' . ') : rule['nom']
 
 // les variables dans les tests peuvent être exprimées relativement à l'espace de nom de la règle,
diff --git a/source/sites/embauche.gouv.fr/pages/Source.js b/source/sites/embauche.gouv.fr/pages/Source.js
index 1ccad409a..522d993d2 100644
--- a/source/sites/embauche.gouv.fr/pages/Source.js
+++ b/source/sites/embauche.gouv.fr/pages/Source.js
@@ -2,29 +2,16 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { flatRulesSelector } from 'Selectors/analyseSelectors'
 import { render } from 'react-dom'
-import MonacoEditor from 'react-monaco-editor'
 import yaml from 'js-yaml'
-import rawRules from '!raw-loader!Règles/base.yaml'
+import rawRulesText from '!raw-loader!Règles/base.yaml'
+import rawRules from 'Règles/base.yaml'
 
-@connect(state => ({
-	flatRules: flatRulesSelector(state)
-}))
 export default class Source extends Component {
-	state = {
-		code: rawRules
-	}
 	render() {
-		let { flatRules } = this.props
 		return (
 			<div id="Source" className="ui__ container">
-				<h1>La source</h1>
-				<MonacoEditor
-					width="800"
-					height="600"
-					language="yaml"
-					theme="vs-dark"
-					value={this.state.code}
-				/>
+				<h1>La sourceee</h1>
+				<div style={{ whiteSpace: 'pre-line' }}>{yaml.safeDump(rawRules)}</div>
 			</div>
 		)
 	}