Merge pull request #7778 from opf/feature/31369/default-placeholder

[31369] Default placeholder for all formattable fields

config/locales/js-en.yml

@@ -750,7 +750,7 @@ en:
         label_content: "Click here to skip over the menu and go to the content"
       placeholders:
         default: "-"
-        description: "Click to enter description..."
+        formattable: "%{name}: Click to edit..."
       query:
         column_names: "Columns"
         group_by: "Group results by"

frontend/src/app/components/work-packages/wp-single-view/wp-single-view.component.ts

@@ -127,9 +127,6 @@ export class WorkPackageSingleViewComponent implements OnInit, OnDestroy {
     fields: {
       description: this.I18n.t('js.work_packages.properties.description'),
     },
-    description: {
-      placeholder: this.I18n.t('js.work_packages.placeholders.description')
-    },
     infoRow: {
       createdBy: this.I18n.t('js.label_created_by'),
       lastUpdatedOn: this.I18n.t('js.label_last_updated_on')

frontend/src/app/components/work-packages/wp-single-view/wp-single-view.html

@@ -86,8 +86,7 @@
       <editable-attribute-field [fieldName]="'description'"
                      [resource]="workPackage"
                      [isDropTarget]="true"
-                     [wrapperClasses]="'-no-label'"
-                     [displayPlaceholder]="text.description.placeholder">
+                     [wrapperClasses]="'-no-label'">
       </editable-attribute-field>
     </div>
   </div>

frontend/src/app/components/wp-edit-form/display-field-renderer.ts

@@ -33,7 +33,7 @@ export class DisplayFieldRenderer<T extends HalResource = HalResource> {
   public render(resource:T,
                 name:string,
                 change:ResourceChangeset<T>|null,
-                placeholder = cellEmptyPlaceholder):HTMLSpanElement {
+                placeholder?:string):HTMLSpanElement {
 
     const [field, span] = this.renderFieldValue(resource, name, change, placeholder);
 
@@ -49,7 +49,7 @@ export class DisplayFieldRenderer<T extends HalResource = HalResource> {
   public renderFieldValue(resource:T,
                           name:string,
                           change:ResourceChangeset<T>|null,
-                          placeholder = cellEmptyPlaceholder):[DisplayField|null, HTMLSpanElement] {
+                          placeholder?:string):[DisplayField|null, HTMLSpanElement] {
     const span = document.createElement('span');
     const schemaName = this.getSchemaName(resource, change, name);
     const fieldSchema = resource.schema[schemaName];
@@ -61,7 +61,7 @@ export class DisplayFieldRenderer<T extends HalResource = HalResource> {
     }
 
     const field = this.getField(resource, fieldSchema, schemaName, change);
-    field.render(span, this.getText(field, placeholder));
+    field.render(span, this.getText(field, fieldSchema, placeholder));
 
     const title = field.title;
     if (title) {
@@ -109,9 +109,9 @@ export class DisplayFieldRenderer<T extends HalResource = HalResource> {
     return this.displayFieldService.getField(resource, name, fieldSchema, context);
   }
 
-  private getText(field:DisplayField, placeholder:string):string {
+  private getText(field:DisplayField, fieldSchema:IFieldSchema, placeholder?:string):string {
     if (field.isEmpty()) {
-      return placeholder;
+      return placeholder || this.getDefaultPlaceholder(fieldSchema);
     } else {
       return field.valueString;
     }
@@ -191,4 +191,12 @@ export class DisplayFieldRenderer<T extends HalResource = HalResource> {
     return name;
 
   }
+
+  private getDefaultPlaceholder(fieldSchema:IFieldSchema):string {
+    if (fieldSchema.type === 'Formattable') {
+      return this.I18n.t('js.work_packages.placeholders.formattable', { name: fieldSchema.name });
+    }
+
+    return cellEmptyPlaceholder;
+  }
 }

spec/features/work_packages/details/markdown/description_editor_spec.rb

@@ -91,7 +91,7 @@ describe 'description inplace editor', js: true, selenium: true do
     let(:description_text) { '' }
 
     it 'renders a placeholder' do
-      field.expect_state_text 'Click to enter description...'
+      field.expect_state_text 'Description: Click to edit...'
 
       field.activate!
       # An empty description is also allowed