Feat: Add possibility to translate the workflow texts

CHANGELOG.md

@@ -1,3 +1,7 @@
+0.26.0
+------
+- Feat: Add possibility to translate the workflow texts
+
 0.25.2
 ------
 - feat: use label property to render info in search inputs and to sort elements

e2e/cypress/integration/gmi-type-content.js

@@ -269,15 +269,15 @@ LOGIN_TYPES.forEach((loginType) => {
       )
 
       // Modify workflow
-      cy.findByText(/Current state: private/)
+      cy.findByText(/Current state: Private/)
       cy.findByText('Publish').click()
       cy.findByText('Confirm').click()
       cy.get(NOTIFICATION_SELECTOR).should('contain', `Great status changed!`)
-      cy.findByText(/Current state: public/)
+      cy.findByText(/Current state: Public/)
       cy.findByText('Retire').click()
       cy.findByText('Confirm').click()
       cy.get(NOTIFICATION_SELECTOR).should('contain', `Great status changed!`)
-      cy.findByText(/Current state: private/)
+      cy.findByText(/Current state: Private/)
 
       // Upload multiple image
       cy.get(`[data-test='formMultiimageOrderedAttachmentTest']`).within(() => {

e2e/vite_example/src/App.tsx

@@ -132,7 +132,11 @@ function App() {
       <Layout auth={auth} onLogout={onLogout}>
         {isLogged && (
           <Guillotina
-            locale={navigator.language || 'en'}
+            locale={
+              ['ca', 'en', 'es'].includes(navigator.language)
+                ? navigator.language
+                : 'en'
+            }
             auth={auth}
             url={currentSchema}
             registry={{

guillotina_example/guillotina_react_app/guillotina_react_app/__init__.py

@@ -1,12 +1,13 @@
 from guillotina import configure
-
+from guillotina_react_app.workflow import guillotina_basic_with_translations
 
 app_settings = {
     "commands": {
         "populate": "guillotina_react_app.commands.populate.PopulateData",
     },
+     "workflows": {"guillotina_basic_with_translations": guillotina_basic_with_translations},
     "workflows_content": {
-        "guillotina_react_app.gmi.interface.IGMI": "guillotina_basic",
+        "guillotina_react_app.gmi.interface.IGMI": "guillotina_basic_with_translations",
         "guillotina_react_app.gmi.interface.IGMIBehaviors": "guillotina_simple",
     },
 }
@@ -21,3 +22,4 @@ def includeme(root):
     configure.scan("guillotina_react_app.vocabularies")
     configure.scan("guillotina_react_app.gmi")
     configure.scan("guillotina_react_app.gmi_behaviors")
+    configure.scan("guillotina_react_app.workflow")

guillotina_example/guillotina_react_app/guillotina_react_app/workflow.py

@@ -0,0 +1,91 @@
+guillotina_basic_with_translations = {
+    "initial_state": "private",
+    "states": {
+        "private": {
+            "metadata": {
+                "title": "Private",
+                "translated_title": {
+                    "en": "Private",
+                    "ca": "Privat",
+                    "es": "Privado",
+                },
+            },
+            "actions": {
+                "publish": {
+                    "title": "Publish",
+                    "metadata": {
+                        "translated_title": {
+                            "en": "Publish",
+                            "ca": "Publicar",
+                            "es": "Publicar",
+                        },
+                    },
+                    "to": "public",
+                    "check_permission": "guillotina.ReviewContent",
+                }
+            },
+            "set_permission": {
+                "roleperm": [
+                    {
+                        "setting": "Deny",
+                        "role": "guillotina.Anonymous",
+                        "permission": "guillotina.ViewContent",
+                    },
+                    {
+                        "setting": "Deny",
+                        "role": "guillotina.Anonymous",
+                        "permission": "guillotina.AccessContent",
+                    },
+                    {
+                        "setting": "Deny",
+                        "role": "guillotina.Anonymous",
+                        "permission": "guillotina.SearchContent",
+                    },
+                ]
+            },
+        },
+        "public": {
+            "metadata": {
+                "title": "Public",
+                "translated_title": {
+                    "en": "Public",
+                    "ca": "Públic",
+                    "es": "Público",
+                },
+            },
+            "actions": {
+                "retire": {
+                    "title": "Retire",
+                    "metadata": {
+                        "translated_title": {
+                            "en": "Retire",
+                            "ca": "Retirar",
+                            "es": "Retirar",
+                        },
+                    },
+                    "to": "private",
+                    "check_permission": "guillotina.ReviewContent",
+                },
+            },
+            "set_permission": {
+                "roleperm": [
+                    {
+                        "setting": "AllowSingle",
+                        "role": "guillotina.Anonymous",
+                        "permission": "guillotina.ViewContent",
+                    },
+                    {
+                        "setting": "AllowSingle",
+                        "role": "guillotina.Anonymous",
+                        "permission": "guillotina.AccessContent",
+                    },
+                    {
+                        "setting": "AllowSingle",
+                        "role": "guillotina.Anonymous",
+                        "permission": "guillotina.SearchContent",
+                    },
+                ]
+            },
+        },
+    },
+}

guillotina_example/guillotina_react_app/requirements.txt

@@ -1,2 +1,2 @@
-guillotina==7.0.0
+guillotina==7.0.2
 pillow==9.5

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.25.2",
+  "version": "0.26.0",
   "repository": {
     "type": "git",
     "url": "[email protected]:guillotinaweb/guillotina_react.git"

src/guillo-gmi/components/behaviors/iworkflow.js

@@ -4,7 +4,8 @@ import { Confirm } from '../modal'
 import { useCrudContext } from '../../hooks/useCrudContext'
 import { ItemModel } from '../../models'
 import { defineMessages, useIntl } from 'react-intl'
-
+import { useVocabulary } from '../../hooks/useVocabulary'
+import { get } from '../../lib/utils'
 const messages = defineMessages({
   status_changed_ok: {
     id: 'status_changed_ok',
@@ -36,6 +37,7 @@ export function IWorkflow() {
   const [definition, setDefinition] = React.useState(undefined)
   const [workflowAction, setWorkflowAction] = React.useState(null)
   const model = new ItemModel(Ctx.context)
+  const vocabulary = useVocabulary('workflow_states')
   const currentState =
     model.item['guillotina.contrib.workflows.interfaces.IWorkflowBehavior'][
       'review_state'
@@ -72,6 +74,33 @@ export function IWorkflow() {
     Ctx.refresh()
     setWorkflowAction(null)
   }
+  const getStateTitle = () => {
+    if (vocabulary.data?.items?.length > 0) {
+      const vocabularyValue = vocabulary.data.items.find(
+        (item) => item.token === currentState
+      )
+      if (vocabularyValue) {
+        const translatedValue = get(
+          vocabularyValue,
+          `title.translated_title.${intl.locale}`,
+          null
+        )
+        if (translatedValue !== null) {
+          return translatedValue
+        }
+        const titleValue = get(
+          vocabularyValue,
+          `title.title.${intl.locale}`,
+          null
+        )
+        if (titleValue !== null) {
+          return titleValue
+        }
+      }
+    }
+    return currentState
+  }
+
   if (definition === undefined) return null
 
   return (
@@ -92,10 +121,12 @@ export function IWorkflow() {
           className="has-text-weight-bold"
           data-test={`textInfoStatus-${currentState}`}
         >
-          {intl.formatMessage(messages.current_state, { state: currentState })}
+          {intl.formatMessage(messages.current_state, {
+            state: getStateTitle(),
+          })}
         </div>
       </div>
-      {modifyContent && (
+      {modifyContent && definition.transitions.length > 0 && (
         <div
           className=" is-flex is-align-items-center has-text-weight-bold"
           data-test={`textInfoStatus-${currentState}`}
@@ -112,7 +143,11 @@ export function IWorkflow() {
                   )
                 }
               >
-                {transition.title}
+                {get(
+                  transition,
+                  `metadata.translated_title.${intl.locale}`,
+                  transition.title
+                )}
               </button>
             )
           })}

src/guillo-gmi/components/fields/renderField.js

@@ -105,7 +105,6 @@ export const SearchRenderField = ({ schema, value, modifyContent }) => {
   }, [value])
 
   const getRenderValue = () => {
-    console.log('get render values', value, valuesLabels)
     if (value === undefined) {
       if (modifyContent) {
         return DEFAULT_VALUE_EDITABLE_FIELD