Editor: deactivate placeables in read-only mode

CHANGES.md

@@ -7,6 +7,7 @@ v.next (unreleased)
 * Browser: disabled projects are taken out from counters by default (#425).
 * Editor: allowed to filter units from enabled/disabled projects (#425).
 * Fixed bug where no overview stats were shown for language pages (#425).
+* Editor: placeables are not actionable in read-only mode (#460).
 
 
 v0.9.1 (2020-03-11)

pootle/apps/pootle_store/views.py

@@ -433,6 +433,12 @@ def get_sources(self):
         sources[self.source_language.code] = self.object.source_f.strings
         return sources
 
+    def get_tm_suggestions(self, ctx):
+        can_edit = ctx["cansuggest"] or ctx["cantranslate"]
+        if not can_edit:
+            return []
+        return self.object.get_tm_suggestions()[:MAX_TM_RESULTS]
+
     def get_context_data(self, *args, **kwargs):
         return {
             "unit": self.object,
@@ -468,7 +474,7 @@ def get_context_data(self, *args, **kwargs):
     def get_response_data(self, context):
         return {
             "editor": self.render_edit_template(context),
-            "tm_suggestions": self.object.get_tm_suggestions()[:MAX_TM_RESULTS],
+            "tm_suggestions": self.get_tm_suggestions(context),
             "is_obsolete": self.object.isobsolete(),
             "sources": self.get_sources(),
             "target": self.object.target_f.strings,

pootle/static/js/editor/components/UnitSource.js

@@ -15,6 +15,7 @@ import { highlightRW } from '../../utils';
 
 const UnitSource = React.createClass({
   propTypes: {
+    canEdit: React.PropTypes.bool.isRequired,
     id: React.PropTypes.number.isRequired,
     values: React.PropTypes.array.isRequired,
     hasPlurals: React.PropTypes.bool.isRequired,
@@ -27,6 +28,7 @@ const UnitSource = React.createClass({
       lang: this.props.sourceLocaleCode,
       dir: this.props.sourceLocaleDir,
     };
+    const placeablesExtraClassName = this.props.canEdit ? 'js-editor-copytext' : '';
 
     return (
       <div key={`source-value-${index}`}>
@@ -38,7 +40,9 @@ const UnitSource = React.createClass({
         <div
           className="translation-text js-translation-text"
           data-string={sourceValue}
-          dangerouslySetInnerHTML={{ __html: highlightRW(sourceValue) }}
+          dangerouslySetInnerHTML={{
+            __html: highlightRW(sourceValue, placeablesExtraClassName),
+          }}
           {...props}
         ></div>
       </div>

pootle/static/js/editor/index.js

@@ -58,6 +58,7 @@ const ReactEditor = {
     );
     ReactRenderer.render(
       <UnitSource
+        canEdit={this.props.canSuggest || this.props.canTranslate}
         id={this.props.unitId}
         values={this.props.sourceValues}
         hasPlurals={this.props.hasPlurals}
@@ -71,6 +72,7 @@ const ReactEditor = {
       const unit = this.props.alternativeSources[mountNode.dataset.id];
       ReactRenderer.render(
         <UnitSource
+          canEdit={this.props.canSuggest || this.props.canTranslate}
           id={unit.id}
           values={unit.target}
           hasPlurals={unit.has_plurals}

pootle/static/js/utils.js

@@ -113,7 +113,7 @@ export function highlightRO(text) {
   );
 }
 
-export function highlightRW(text) {
+export function highlightRW(text, className = '') {
   return highlightSymbols(
     nl2br(
       highlightPunctuation(
@@ -126,14 +126,14 @@ export function highlightRW(text) {
               // is managed as a component.
               text.replace(/\r\n/g, '\n')
             ),
-            'js-editor-copytext'
+            className
           ),
-          'js-editor-copytext'
+          className
         ),
-        'js-editor-copytext'
+        className
       )
     ),
-    'js-editor-copytext'
+    className
   );
 }
 
@@ -152,10 +152,6 @@ export function highlightRONodes(selector) {
   return highlightNodes(selector, highlightRO);
 }
 
-export function highlightRWNodes(selector) {
-  return highlightNodes(selector, highlightRW);
-}
-
 export function blinkClass($elem, className, n, delay) {
   $elem.toggleClass(className);
   if (n > 1) {
@@ -168,7 +164,6 @@ export default {
   highlightRO,
   highlightRW,
   highlightRONodes,
-  highlightRWNodes,
   getHash,
   getParsedHash,
   strCmp,

pootle/templates/editor/units/edit.html

@@ -43,6 +43,7 @@
       {% endif %}
 
       <!-- Terminology suggestions -->
+      {% if cansuggest or cantranslate %}
       {% with unit.terminology as terms %}
       {% if terms %}
       <div id="tm" class="sidebar" dir="{% locale_dir %}">
@@ -57,6 +58,7 @@
       </div>
       {% endif %}
       {% endwith %}
+      {% endif %}
 
       {% if unit.developer_comment %}
       <!-- Developer comments -->
@@ -178,6 +180,8 @@
 
             <script type="text/javascript">
               PTL.reactEditor.init({
+                canSuggest: {{ cansuggest|yesno:'true,false' }},
+                canTranslate: {{ cantranslate|yesno:'true,false' }},
                 initialValues: {{ unit_values|to_jquery_safe_js }},
                 isDisabled: {{ form.target_f.field.widget.attrs.disabled|yesno:'true,false' }},
                 currentLocaleCode: '{{ language.code }}',