chore: migration des métadonnées sur les articles/versions

EcrituresNumeriques · Dec 3, 2024 · 63fc4c9 · 63fc4c9
1 parent d84a7cd
commit 63fc4c9
Show file tree

Hide file tree

Showing 34 changed files with 1,128 additions and 487 deletions.
diff --git a/README.md b/README.md
@@ -45,7 +45,6 @@ npm --prefix export clean-install
 npm --prefix graphql clean-install
 ```
 
-
 ## Sans Docker
 
 Avant un premier lancement, la variable `SE_GRAPHQL_TOKEN` doit être renseignée dans `.env` à l'aide de la valeur produite par cette commande :

diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -38,6 +38,7 @@
     "@sentry/react": "^8.38.0",
     "@vitejs/plugin-legacy": "~5.4",
     "@vitejs/plugin-react": "~4.3",
+    "allof-merge": "^0.6.6",
     "biblatex-csl-converter": "^1.11.0",
     "clsx": "^1.2.1",
     "core-js": "^3.38",

diff --git a/front/src/components/Credentials.graphql b/front/src/components/Credentials.graphql
@@ -6,7 +6,6 @@ query getUserDetails($user: ID!) {
     admin
     createdAt
     updatedAt
-    yaml
     firstName
     zoteroToken
     lastName
@@ -24,7 +23,6 @@ query getFullUserProfile {
     lastName
     institution
     email
-    yaml
     admin
     createdAt
     updatedAt
@@ -69,7 +67,6 @@ mutation updateUser($user: ID!, $details: UserProfileInput!) {
     admin
     createdAt
     updatedAt
-    yaml
     firstName
     lastName
     institution

diff --git a/front/src/components/Form.jsx b/front/src/components/Form.jsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import PropTypes from 'prop-types'
 import React, { Fragment, useCallback, useMemo, useState } from 'react'
 import Form, { getDefaultRegistry } from '@rjsf/core'
@@ -18,7 +19,7 @@ import IsidoreAuthorAPIAutocompleteField from './Write/metadata/isidoreAuthor'
 
 const {
   templates: { BaseInputTemplate: DefaultBaseInputTemplate },
-  widgets: { CheckboxesWidget}
+  widgets: { CheckboxesWidget }
 } = getDefaultRegistry()
 
 /**
@@ -99,47 +100,54 @@ function ArrayFieldTemplate (properties) {
 
   const inlineRemoveButton = properties.schema?.items?.type === 'string' || !removeItemTitle
   return (
-    <fieldset className={styles.fieldset} key={properties.key}>
-      {title && <Translation>{(t) => <legend id={properties.id}>{t(title)}</legend>}</Translation>}
-      {properties.items &&
-        properties.items.map((element) => (
-          <div
-            id={element.key}
-            key={element.key}
-            className={`${element.className} can-add-remove`}
+    <div className={styles.arrayField}>
+      <fieldset className={styles.fieldset} key={properties.key}>
+        {title && <Translation>{(t) => 
+          <legend id={properties.id}>{t(title)}</legend>}
+        </Translation>}
+        {properties.canAdd && (
+          <Button
+            type="button"
+            className={styles.addButton}
+            tabIndex={-1}
+            onClick={properties.onAddClick}
           >
-            {element.children}
-            {element.hasRemove && (
-              <Button
-                icon={inlineRemoveButton}
-                type="button"
-                className={[styles.removeButton, inlineRemoveButton ? styles.inlineRemoveButton : ''].join(' ')}
-                tabIndex={-1}
-                disabled={element.disabled || element.readonly}
-                onClick={element.onDropIndexClick(element.index)}
+            <Plus/>
+            <Translation>
+              {(t) => t(addItemTitle)}
+            </Translation>
+          </Button>
+        )}
+        {properties.items &&
+          properties.items.map((element) => {
+            console.log({ element })
+            return (
+              <div
+                id={element.key}
+                key={element.key}
+                className={clsx(element.className, 'can-add-remove', element?.uiSchema?.['ui:className'])}
               >
-                <Trash/>
-                {inlineRemoveButton ? '' : <Translation>
-                  {(t) => t(removeItemTitle)}
-                </Translation>}
-              </Button>
-            )}
-          </div>
-        ))}
-      {properties.canAdd && (
-        <Button
-          type="button"
-          className={styles.addButton}
-          tabIndex={-1}
-          onClick={properties.onAddClick}
-        >
-          <Plus/>
-          <Translation>
-            {(t) => t(addItemTitle)}
-          </Translation>
-        </Button>
-      )}
-    </fieldset>
+                {element.children}
+                {element.hasRemove && (
+                  <Button
+                    icon={inlineRemoveButton}
+                    type="button"
+                    className={[styles.removeButton, inlineRemoveButton ? styles.inlineRemoveButton : ''].join(' ')}
+                    tabIndex={-1}
+                    disabled={element.disabled || element.readonly}
+                    onClick={element.onDropIndexClick(element.index)}
+                  >
+                    <Trash/>
+                    {inlineRemoveButton ? '' : <Translation>
+                      {(t) => t(removeItemTitle)}
+                    </Translation>}
+                  </Button>
+                )}
+              </div>
+            )
+          })}
+      </fieldset>
+    </div>
   )
 }
 

diff --git a/front/src/components/UserInfos.jsx b/front/src/components/UserInfos.jsx
@@ -11,7 +11,6 @@ import formStyles from './field.module.scss'
 import Button from './Button'
 import Field from './Field'
 import TimeAgo from './TimeAgo.jsx'
-import MonacoYamlEditor from './Write/providers/monaco/YamlEditor'
 
 export default function UserInfos () {
   const dispatch = useDispatch()
@@ -23,12 +22,10 @@ export default function UserInfos () {
   const [firstName, setFirstName] = useState(activeUser.firstName || '')
   const [lastName, setLastName] = useState(activeUser.lastName || '')
   const [institution, setInstitution] = useState(activeUser.institution || '')
-  const [yaml, setYaml] = useState(activeUser.yaml)
   const [isSaving, setIsSaving] = useState(false)
 
   const updateActiveUserDetails = useCallback((payload) => dispatch({ type: `UPDATE_ACTIVE_USER_DETAILS`, payload }), [])
   const clearZoteroToken = useCallback(() => dispatch({ type: 'CLEAR_ZOTERO_TOKEN' }), [])
-  const handleYamlUpdate = useCallback((yaml) => setYaml(yaml), [])
 
   const unlinkZoteroAccount = useCallback(async (event) => {
     event.preventDefault()
@@ -44,12 +41,12 @@ export default function UserInfos () {
     setIsSaving(true)
     const variables = {
       user: activeUser._id,
-      details: { yaml, displayName, firstName, lastName, institution },
+      details: { displayName, firstName, lastName, institution },
     }
     const { updateUser: userDetails } = await runQuery({ query: updateUser, variables })
     updateActiveUserDetails(userDetails)
     setIsSaving(false)
-  }, [activeUser._id, yaml, displayName, firstName, lastName, institution])
+  }, [activeUser._id, displayName, firstName, lastName, institution])
 
   return (<>
     <section className={styles.section}>
@@ -87,13 +84,6 @@ export default function UserInfos () {
           onChange={(e) => setInstitution(etv(e))}
           placeholder="Institution name"
         />
-        <Field id="yamlField" label="Default YAML">
-          <MonacoYamlEditor
-            id="yamlField"
-            text={activeUser.yaml}
-            onTextUpdate={handleYamlUpdate}
-          />
-        </Field>
         <Field  label="Zotero">
           <>
             {zoteroToken && <span>Linked with <b>{zoteroToken}</b> account.</span>}

diff --git a/front/src/components/Write/ArticleEditorMetadata.jsx b/front/src/components/Write/ArticleEditorMetadata.jsx
@@ -1,16 +1,18 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
+import YAML from 'js-yaml'
+import { Sidebar } from 'react-feather'
 
-import styles from './articleEditorMetadata.module.scss'
-import YamlEditor from './yamleditor/YamlEditor'
+import { toYaml } from './metadata/yaml.js'
+import ArticleEditorMetadataForm from './yamleditor/ArticleEditorMetadataForm.jsx'
 import NavTag from '../NavTab'
-import YAML from 'js-yaml'
 import MonacoYamlEditor from './providers/monaco/YamlEditor'
-import { Sidebar } from 'react-feather'
 
-export default function ArticleEditorMetadata({ handleYaml, readOnly, yaml }) {
+import styles from './articleEditorMetadata.module.scss'
+
+export default function ArticleEditorMetadata ({ onChange, readOnly, metadata }) {
   const { t } = useTranslation()
   const dispatch = useDispatch()
   const expanded = useSelector(
@@ -19,7 +21,7 @@ export default function ArticleEditorMetadata({ handleYaml, readOnly, yaml }) {
   const selector = useSelector(
     (state) => state.articlePreferences.metadataFormMode
   )
-
+  const yaml = useMemo(() => toYaml(metadata), [metadata])
   const [rawYaml, setRawYaml] = useState(yaml)
   const [error, setError] = useState('')
 
@@ -41,25 +43,33 @@ export default function ArticleEditorMetadata({ handleYaml, readOnly, yaml }) {
     []
   )
 
+  const handleFormUpdate = useCallback((metadata) => {
+    if (readOnly) {
+      return
+    }
+    setRawYaml(toYaml(metadata))
+    onChange(metadata)
+  }, [readOnly, setRawYaml, onChange])
+
   const handleRawYamlChange = useCallback((yaml) => {
     try {
-      YAML.loadAll(yaml)
+      const [metadata = {}] = YAML.loadAll(yaml)
       setError('')
-      handleYaml(yaml)
+      onChange(metadata)
     } catch (err) {
       setError(err.message)
     } finally {
       setRawYaml(yaml)
     }
-  }, [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')}
+        <Sidebar/> {expanded ? t('write.sidebar.closeButton') : t('write.sidebar.metadataButton')}
       </button>
       {expanded && (
         <div className={styles.yamlEditor}>
@@ -71,10 +81,6 @@ export default function ArticleEditorMetadata({ handleYaml, readOnly, yaml }) {
                 value: 'basic',
                 name: t('write.basicMode.metadataButton'),
               },
-              {
-                value: 'editor',
-                name: t('write.editorMode.metadataButton'),
-              },
               {
                 value: 'raw',
                 name: t('write.rawMode.metadataButton'),
@@ -92,32 +98,16 @@ export default function ArticleEditorMetadata({ handleYaml, readOnly, yaml }) {
               />
             </>
           )}
-          {selector !== 'raw' && readOnly && (
-            <YamlEditor
-              yaml={rawYaml}
-              basicMode={selector === 'basic'}
-              error={(reason) => {
-                setError(reason)
-                if (reason !== '') {
-                  setSelector('raw')
-                }
-              }}
-            />
-          )}
-          {selector !== 'raw' && !readOnly && (
-            <YamlEditor
-              yaml={rawYaml}
-              basicMode={selector === 'basic'}
+          {selector !== 'raw' && (
+            <ArticleEditorMetadataForm
+              metadata={metadata}
               error={(reason) => {
                 setError(reason)
                 if (reason !== '') {
                   setSelector('raw')
                 }
               }}
-              onChange={(yaml) => {
-                setRawYaml(yaml)
-                handleYaml(yaml)
-              }}
+              onChange={handleFormUpdate}
             />
           )}
         </div>
@@ -127,7 +117,7 @@ export default function ArticleEditorMetadata({ handleYaml, readOnly, yaml }) {
 }
 
 ArticleEditorMetadata.propTypes = {
-  handleYaml: PropTypes.func,
+  onChange: PropTypes.func,
   readOnly: PropTypes.bool,
-  yaml: PropTypes.string,
+  metadata: PropTypes.object,
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -45,7 +45,6 @@ npm --prefix export clean-install @@
     npm --prefix graphql clean-install
     ```
     ## Sans Docker
     Avant un premier lancement, la variable `SE_GRAPHQL_TOKEN` doit être renseignée dans `.env` à l'aide de la valeur produite par cette commande :
@@ Expand Down @@