13905956152

Committed 17 Mar 2025 05:29PM UTC coverage: 30.673%. Remained the same

Build # 13905956152

Build Type

push

github

Committed by

web-flow

Commit Message

feat: permet de basculer le formulaire des métadonnées en lecture seule (#1323)

* feat: permet de basculer le formulaire des métadonnées en lecture seule

* fix: active le mode readonly sur l'éditeur YAML

Run Details

454 of 669 branches covered (67.86%)

Branch coverage included in aggregate %.

5 of 20 new or added lines in 6 files covered. (25.0%)

3 existing lines in 2 files now uncovered.

4261 of 14703 relevant lines covered (28.98%)

2.15 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/front/src/components/Write/ArticleEditorMetadata.jsx

import { Toggle } from '@geist-ui/core'
import React, { useCallback, useMemo, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useTranslation } from 'react-i18next'
import YAML from 'js-yaml'
import { Sidebar } from 'react-feather'

import { toYaml } from './metadata/yaml.js'
import ArticleEditorMetadataForm from './yamleditor/ArticleEditorMetadataForm.jsx'
import MonacoYamlEditor from './providers/monaco/YamlEditor'

import styles from './articleEditorMetadata.module.scss'

/**
 * @param {object} props properties
 * @param {any} props.metadata
 * @param {boolean} props.readOnly
 * @param {(any) => void} props.onChange
 * @returns {Element}
 */
export default function ArticleEditorMetadata({
  onChange,
  readOnly,
  metadata,
}) {
  const { t } = useTranslation()
  const dispatch = useDispatch()
  const expanded = useSelector(
    (state) => state.articlePreferences.expandSidebarRight
  )
  const selector = useSelector(
    (state) => state.articlePreferences.metadataFormMode
  )
  const yaml = useMemo(() => toYaml(metadata), [metadata])
  const [rawYaml, setRawYaml] = useState(yaml)
  const [error, setError] = useState('')

  const toggleExpand = useCallback(
    () =>
      dispatch({
        type: 'ARTICLE_PREFERENCES_TOGGLE',
        key: 'expandSidebarRight',
      }),
    []
  )
  const setSelector = useCallback(
    (value) =>
      dispatch({
        type: 'ARTICLE_PREFERENCES_TOGGLE',
        key: 'metadataFormMode',
        value,
      }),
    []
  )

  const handleFormUpdate = useCallback(
    (metadata) => {
      if (readOnly) {
        return
      }
      setRawYaml(toYaml(metadata))
      onChange(metadata)
    },
    [readOnly, setRawYaml, onChange]
  )

  const handleRawYamlChange = useCallback(
    (yaml) => {
      try {
        const [metadata = {}] = YAML.loadAll(yaml)
        setError('')
        onChange(metadata)
      } catch (err) {
        setError(err.message)
      } finally {
        setRawYaml(yaml)
      }
    },
    [setRawYaml]
  )

  return (
    <nav className={`${expanded ? styles.expandRight : styles.retractRight}`}>
      <button
        onClick={toggleExpand}
        className={expanded ? styles.close : styles.open}
      >
        <Sidebar />{' '}
        {expanded
          ? t('write.sidebar.closeButton')
          : t('write.sidebar.metadataButton')}
      </button>
      {expanded && (
        <div className={styles.yamlEditor}>
          <header className={styles.header}>
            <h2>Metadonnées</h2>
            <div
              className={styles.toggle}
              onClick={() => setSelector(selector === 'raw' ? 'basic' : 'raw')}
            >
              <Toggle
                id="raw-mode"
                checked={selector === 'raw'}
                title={'Activer le mode YAML'}
                onChange={(e) => {
                  setSelector(e.target.checked ? 'raw' : 'basic')
                }}
              />
              <label htmlFor="raw-mode">YAML</label>
            </div>
          </header>
          {selector === 'raw' && (
            <>
              {error !== '' && <p className={styles.error}>{error}</p>}
              <MonacoYamlEditor
                readOnly={readOnly}
                height="calc(100vh - 280px)"
                fontSize="14"
                text={rawYaml}
                onTextUpdate={handleRawYamlChange}
              />
            </>
          )}
          {selector !== 'raw' && (
            <ArticleEditorMetadataForm
              readOnly={readOnly}
              metadata={metadata}
              error={(reason) => {
                setError(reason)
                if (reason !== '') {
                  setSelector('raw')
                }
              }}
              onChange={handleFormUpdate}
            />
          )}
        </div>
      )}
    </nav>
  )
}

1	import { Toggle } from '@geist-ui/core'	×
2	import React, { useCallback, useMemo, useState } from 'react'	×
3	import { useDispatch, useSelector } from 'react-redux'	×
4	import { useTranslation } from 'react-i18next'	×
5	import YAML from 'js-yaml'	×
6	import { Sidebar } from 'react-feather'	×
7
8	import { toYaml } from './metadata/yaml.js'	×
9	import ArticleEditorMetadataForm from './yamleditor/ArticleEditorMetadataForm.jsx'	×
10	import MonacoYamlEditor from './providers/monaco/YamlEditor'	×
11
12	import styles from './articleEditorMetadata.module.scss'	×
13
14	/**
15	* @param {object} props properties
16	* @param {any} props.metadata
17	* @param {boolean} props.readOnly
18	* @param {(any) => void} props.onChange
19	* @returns {Element}
20	*/
21	export default function ArticleEditorMetadata({	×
22	onChange,	×
23	readOnly,	×
24	metadata,	×
25	}) {	×
26	const { t } = useTranslation()	×
27	const dispatch = useDispatch()	×
28	const expanded = useSelector(	×
29	(state) => state.articlePreferences.expandSidebarRight	×
30	)	×
31	const selector = useSelector(	×
32	(state) => state.articlePreferences.metadataFormMode	×
33	)	×
34	const yaml = useMemo(() => toYaml(metadata), [metadata])	×
35	const [rawYaml, setRawYaml] = useState(yaml)	×
36	const [error, setError] = useState('')	×
37
38	const toggleExpand = useCallback(	×
39	() =>	×
40	dispatch({	×
41	type: 'ARTICLE_PREFERENCES_TOGGLE',	×
42	key: 'expandSidebarRight',	×
43	}),	×
44	[]	×
45	)	×
46	const setSelector = useCallback(	×
47	(value) =>	×
48	dispatch({	×
49	type: 'ARTICLE_PREFERENCES_TOGGLE',	×
50	key: 'metadataFormMode',	×
51	value,	×
52	}),	×
53	[]	×
54	)	×
55
56	const handleFormUpdate = useCallback(	×
57	(metadata) => {	×
58	if (readOnly) {	×
59	return	×
60	}	×
61	setRawYaml(toYaml(metadata))	×
62	onChange(metadata)	×
63	},	×
64	[readOnly, setRawYaml, onChange]	×
65	)	×
66
67	const handleRawYamlChange = useCallback(	×
68	(yaml) => {	×
69	try {	×
70	const [metadata = {}] = YAML.loadAll(yaml)	×
71	setError('')	×
72	onChange(metadata)	×
73	} catch (err) {	×
74	setError(err.message)	×
75	} finally {	×
76	setRawYaml(yaml)	×
77	}	×
78	},	×
79	[setRawYaml]	×
80	)	×
81
82	return (	×
83	<nav className={`${expanded ? styles.expandRight : styles.retractRight}`}>	×
84	<button	×
85	onClick={toggleExpand}	×
86	className={expanded ? styles.close : styles.open}	×
87	>
88	<Sidebar />{' '}	×
89	{expanded	×
90	? t('write.sidebar.closeButton')	×
91	: t('write.sidebar.metadataButton')}	×
92	</button>	×
93	{expanded && (	×
94	<div className={styles.yamlEditor}>	×
95	<header className={styles.header}>	×
96	<h2>Metadonnées</h2>	×
97	<div	×
98	className={styles.toggle}	×
99	onClick={() => setSelector(selector === 'raw' ? 'basic' : 'raw')}	×
100	>
101	<Toggle	×
102	id="raw-mode"	×
103	checked={selector === 'raw'}	×
104	title={'Activer le mode YAML'}	×
105	onChange={(e) => {	×
106	setSelector(e.target.checked ? 'raw' : 'basic')	×
107	}}	×
108	/>	×
109	<label htmlFor="raw-mode">YAML</label>	×
110	</div>	×
111	</header>	×
UNCOV 112	{selector === 'raw' && (	×
UNCOV 113	<>	×
114	{error !== '' && <p className={styles.error}>{error}</p>}	×
115	<MonacoYamlEditor	×
NEW 116	readOnly={readOnly}	×
117	height="calc(100vh - 280px)"	×
118	fontSize="14"	×
119	text={rawYaml}	×
120	onTextUpdate={handleRawYamlChange}	×
121	/>	×
122	</>	×
123	)}
124	{selector !== 'raw' && (	×
125	<ArticleEditorMetadataForm	×
NEW 126	readOnly={readOnly}	×
127	metadata={metadata}	×
128	error={(reason) => {	×
129	setError(reason)	×
130	if (reason !== '') {	×
131	setSelector('raw')	×
132	}	×
133	}}	×
134	onChange={handleFormUpdate}	×
135	/>	×
136	)}
137	</div>	×
138	)}
139	</nav>	×
140	)
141	}	×

EcrituresNumeriques / stylo / 13905956152

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous