BACKLOG-21380: Fix language link styling (#100)

* BACKLOG-21380: Fix language link styling * Edit german translation
Jahia · Aug 22, 2023 · 19458cf · 19458cf
1 parent b3da371
commit 19458cf
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 589 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "testcli": "jest",
     "build": "yarn lint:fix && yarn webpack",
     "build:nolint": "yarn webpack",
-    "dev": "yarn webpack --watch",
+    "watch": "yarn webpack --watch",
     "webpack": "node --max_old_space_size=2048 ./node_modules/webpack/bin/webpack.js",
     "build:analyze": "yarn build --analyze",
     "build:production": "yarn build --mode=production",
@@ -72,7 +72,7 @@
     "eslint-loader": "^3.0.2",
     "eslint-plugin-json": "^2.0.1",
     "husky": "^3.0.9",
-    "node-sass": "^6.0.1",
+    "sass": "^1.66.1",
     "path": "^0.12.7",
     "rimraf": "^3.0.0",
     "sass-loader": "^12.1.0",

diff --git a/pom.xml b/pom.xml
@@ -105,8 +105,8 @@
                             <goal>install-node-and-yarn</goal>
                         </goals>
                         <configuration>
-                            <nodeVersion>v14.21.3</nodeVersion>
-                            <yarnVersion>v1.22.11</yarnVersion>
+                            <nodeVersion>v18.16.0</nodeVersion>
+                            <yarnVersion>v1.22.19</yarnVersion>
                         </configuration>
                     </execution>
                     <execution>

diff --git a/src/javascript/registrations/properties/SiteProperties/Content/Content.jsx b/src/javascript/registrations/properties/SiteProperties/Content/Content.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Paper, Typography, Chip, Button} from '@jahia/moonstone';
+import {Paper, Typography, Chip} from '@jahia/moonstone';
 import clsx from 'clsx';
 import styles from './Content.scss';
 import dayjs from 'dayjs';
@@ -17,9 +17,6 @@ export const Content = ({site, language, uilang}) => {
 
     const mandatoryLanguages = site.languages.filter(l => l.mandatory).map(l => (<Chip key={l.language} label={l.displayName} color="accent"/>));
     const additionalServerNames = site.additionalServerNames ? site.additionalServerNames.values.join(', ') : [];
-    const navigateToLanguages = () => {
-        window.location.pathname = `${window.contextJsParameters.contextPath}/jahia/administration/${site.name}/settings/languages`;
-    };
 
     return (
         <Paper className={styles.paper}>
@@ -52,12 +49,15 @@ export const Content = ({site, language, uilang}) => {
             </div>
             <Typography variant="title" weight="bold" className={styles.heading}>{t('properties.languages')}</Typography>
             <div className="flexCol">
-                {
-                    res.checksResult &&
+                {res.checksResult &&
                     <div className={clsx('flexRow', styles.row)}>
-                        <Button label={t('properties.editLang')} variant="ghost" data-sel-role="edit-languages" onClick={navigateToLanguages}/>
-                    </div>
-                }
+                        <Typography variant="subheading" className={styles.link} data-sel-role="edit-languages">
+                            {t('properties.editLang.text')}
+                            <a href={`${window.contextJsParameters.contextPath}/jahia/administration/${site.name}/settings/languages`}>
+                                {t('properties.editLang.linkText')}
+                            </a>.
+                        </Typography>
+                    </div>}
                 <div className={clsx('flexRow', styles.row, styles.rowNoHeight)}>
                     <Typography variant="subheading" weight="bold" className={styles.left}>{t('properties.languages')}</Typography>
                     <div className={styles.right}>

diff --git a/src/javascript/registrations/properties/SiteProperties/Content/Content.scss b/src/javascript/registrations/properties/SiteProperties/Content/Content.scss
@@ -26,3 +26,8 @@
 .heading {
     margin-top: var(--spacing-big);
 }
+
+.link,
+.link a {
+    color: var(--color-gray);
+}
diff --git a/src/main/resources/javascript/locales/de.json b/src/main/resources/javascript/locales/de.json
@@ -27,7 +27,10 @@
     "label": "Site Eigenschaften",
     "edit": "Site Eigenschaften editieren",
     "generalInfo": "Allgemeine Informationen",
-    "editLang": "Site Sprachen können hier editiert werden.",
+    "editLang": {
+      "text": "Editieren Sie die Site Sprachen ",
+      "linkText": "hier"
+    },
     "additionalServerNames": "Zusätzliche Projekt Hostnamen",
     "serverName": "Projekt Hostname",
     "templateSet": "Vorlagensatz",

diff --git a/src/main/resources/javascript/locales/en.json b/src/main/resources/javascript/locales/en.json
@@ -27,7 +27,10 @@
     "label": "Site properties",
     "edit": "Edit site properties",
     "generalInfo": "General information",
-    "editLang": "Site languages can be edited here",
+    "editLang": {
+      "text": "Site languages can be edited ",
+      "linkText": "here"
+    },
     "additionalServerNames": "Additional Server Names",
     "serverName": "Server Name",
     "templateSet": "Template Set",

diff --git a/src/main/resources/javascript/locales/fr.json b/src/main/resources/javascript/locales/fr.json
@@ -27,7 +27,10 @@
     "label": "Propriétés du site",
     "edit": "Editer les propriétés du site",
     "generalInfo": "Informations générales",
-    "editLang": "Les langues du site peuvent être modifiées ici.",
+    "editLang": {
+      "text": "Les langues du site peuvent être modifiées ",
+      "linkText": "ici"
+    },
     "additionalServerNames": "Noms de serveurs supplémentaires",
     "serverName": "Nom du serveur",
     "templateSet": "Jeu de modèles",

diff --git a/tests/cypress/page-object/siteProperties.ts b/tests/cypress/page-object/siteProperties.ts
@@ -15,6 +15,6 @@ export class SiteProperties extends BasePage {
     }
 
     editLanguages() {
-        getComponentByRole(Button, 'edit-languages').click()
+        cy.get('a').click()
     }
 }