Render separate info row line with type and updated date

app/assets/stylesheets/content/_attributes_group.sass

@@ -36,10 +36,6 @@
   align-items: flex-end
 
 
-.attributes-group--header-container-right
-  font-size: 0.72rem
-  padding-bottom: 0.6rem
-
 .attributes-group--header-container
   @include grid-content
   padding: 0 1rem 0.4rem 0

app/assets/stylesheets/content/work_packages/single_view/_single_view.sass

@@ -32,6 +32,10 @@ $work-package-details--tab-height: 40px
   @include grid-visible-overflow
   padding: 0
 
+.work-packages--info-row
+  font-size: 0.8rem
+  padding: 5px 0
+
 .work-packages--details--title
   @include grid-block
   @include details-pane--form-field

config/locales/js-en.yml

@@ -101,6 +101,7 @@ en:
     label_board_locked: "Locked"
     label_board_sticky: "Sticky"
     label_create_work_package: "Create new work package"
+    label_created_by: "Created by"
     label_date: "Date"
     label_date_with_format: "Enter the %{date_attribute} using the following format: %{format}"
     label_deactivate: "Deactivate"
@@ -421,9 +422,9 @@ en:
       inline_create:
        title: 'Click here to add a new work package to this list'
       create:
-        header: 'New work package'
+        header: 'New %{type}'
+        header_with_parent: 'New %{type} (Child of %{type} #%{id})'
         button: 'Create'
-        header_with_parent: 'New work package (Child of %{type} #%{id})'
       no_results:
         title: No work packages to display.
         description: Either none have been created or all work packages are filtered out.

frontend/app/components/api/api-v3/hal-resources/work-package-resource.service.ts

@@ -117,6 +117,7 @@ export class WorkPackageResource extends HalResource {
   public $pristine: { [attribute: string]: any } = {};
   public parentId: number;
   public subject: string;
+  public updatedAt: Date;
   public lockVersion: number;
   public description: any;
   public inFlight: boolean;

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

@@ -1,16 +1,19 @@
 <div ng-if="$ctrl.workPackage && $ctrl.formCtrl" class="work-package--single-view">
+  <div class="work-packages--info-row" ng-if="!$ctrl.workPackage.isNew">
+    <span ng-bind="$ctrl.idLabel"/>:
+    <span ng-bind="$ctrl.text.infoRow.createdBy"/>
+    <user-link user="$ctrl.workPackage.author"></user-link>.
+    <span ng-bind="$ctrl.text.infoRow.lastUpdatedOn"/>
+    <op-date date-value="$ctrl.workPackage.updatedAt"></op-date>.
+  </div>
+
   <div class="attributes-group">
     <div class="attributes-group--header">
       <div class="attributes-group--header-container">
-        <h3 class="attributes-group--header-text" ng-bind="$ctrl.text.idLabel"></h3>
+        <h3 class="attributes-group--header-text"
-      </div>
+            ng-bind="$ctrl.text.fields.description"></h3>
-
-      <div class="attributes-group--header-container-right">
-        <span ng-bind="$ctrl.I18n.t('js.label_last_updated_on')"/>
-        <op-date date-value="$ctrl.workPackage.updatedAt"></op-date>
       </div>
     </div>
-
     <div
         wp-edit-field="'description'"
         wp-attachments-formattable

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

@@ -51,6 +51,7 @@ export class WorkPackageSingleViewController {
               protected I18n,
               protected wpCacheService,
               protected wpNotificationsService: WorkPackageNotificationService,
+              protected TimezoneService,
               protected WorkPackagesOverviewService,
               protected SingleViewWorkPackage) {
 
@@ -61,12 +62,16 @@ export class WorkPackageSingleViewController {
       dropFiles: I18n.t('js.label_drop_files'),
       dropFilesHint: I18n.t('js.label_drop_files_hint'),
       fields: {
+        description: I18n.t('js.work_packages.properties.description'),
         date: {
           startDate: I18n.t('js.label_no_start_date'),
           dueDate: I18n.t('js.label_no_due_date')
         }
       },
-      idLabel: ''
+      infoRow: {
+        createdBy: I18n.t('js.label_created_by'),
+        lastUpdatedOn: I18n.t('js.label_last_updated_on')
+      },
     };
 
     wpCacheService.loadWorkPackage(wpId).observe($scope).subscribe(wp => this.init(wp));
@@ -96,15 +101,19 @@ export class WorkPackageSingleViewController {
     }
   }
 
-  public setIdLabel() {
+  public get idLabel() {
-    if (!this.workPackage.type) {
+    var text;
+
+    if (!(this.workPackage && this.workPackage.type)) {
       return;
     }
 
-    this.text.idLabel = this.workPackage.type.name;
+    text = this.workPackage.type.name;
     if (!this.workPackage.isNew) {
-      this.text.idLabel += ' #' + this.workPackage.id;
+      text += ' #' + this.workPackage.id;
     }
+
+    return text;
   }
 
   private init(wp) {
@@ -147,10 +156,6 @@ function wpSingleViewDirective() {
                             controllers: [WorkPackageEditFormController, WorkPackageSingleViewController]) {
 
     controllers[1].formCtrl = controllers[0];
-
-    scope.$watch(_ => controllers[1].workPackage.type, _ => {
-      controllers[1].setIdLabel();
-    });
   }
 
   return {

frontend/app/components/wp-create/wp-create.controller.ts

@@ -41,10 +41,16 @@ export class WorkPackageCreateController {
 
   public get header():string {
     if (this.parentWorkPackage) {
-      return this.I18n.t('js.work_packages.create.header_with_parent',
+      return this.I18n.t(
-        {type: this.parentWorkPackage.type.name, id: this.parentWorkPackage.id});
+        'js.work_packages.create.header_with_parent',
+        { type: this.parentWorkPackage.type.name, id: this.parentWorkPackage.id }
+      );
     }
-    return this.I18n.t('js.work_packages.create.header');
+
+    return this.I18n.t(
+      'js.work_packages.create.header',
+      { type: this.newWorkPackage.type.name }
+    );
   }
 
   constructor(protected $state,