Create items and add as related immediatelly (#3256)

.eslintignore

@@ -5,4 +5,5 @@ language-mapping-list.js
 scripts/extensions/*/node_modules
 scripts/extensions/**/dist
 end-to-end-testing-helpers/dist
-end-to-end-testing-helpers/node_modules
+end-to-end-testing-helpers/node_modules
+spec/**/*.js

package.json

@@ -156,7 +156,7 @@
     "debug-unit-tests": "karma start karma.conf.js --browsers=Chrome",
     "unit": "grunt unit",
     "build": "grunt build",
-    "lint": "tsc -p scripts --noEmit && tslint -c tslint.json './**/*.{ts,tsx}' && eslint --parser=@typescript-eslint/parser --ext .js --ext .jsx --ext .ts --ext .tsx scripts tasks *.js",
+    "lint": "tsc -p scripts --noEmit && tslint -c tslint.json './**/*.{ts,tsx}' && eslint --parser=@typescript-eslint/parser --ext .js --ext .jsx --ext .ts --ext .tsx scripts spec tasks *.js",
     "lint-fix": "tsc -p scripts --noEmit && tslint --fix -c tslint.json 'scripts/**/*.{ts,tsx}' && eslint --fix --parser=@typescript-eslint/parser --ext .js --ext .jsx --ext .ts --ext .tsx scripts spec tasks *.js",
     "start-test-server": "cd test-server && python3 -m venv env && . env/bin/activate && pip install -Ur requirements.txt && honcho start",
     "protractor": "protractor protractor.conf.js",

scripts/apps/authoring/styles/themes.scss

@@ -311,7 +311,11 @@ body, html {
             }
         }
     }
-
+    .field__label--with-actions {
+        display: flex;
+        .field__label { margin-right: auto; }
+    }
+
     .main-article__fieldset {
         display: flex;
         flex-direction: row;

scripts/apps/authoring/views/article-edit.html

@@ -679,7 +679,6 @@
      sd-validation-error="error[field._id]"
      order="{{editor[field._id].order}}"
      data-required="schema[field._id].required">
-    <label class="field__label" translate>{{field.display_name}}</label>
 
     <div ng-if="_editable"
         sd-related_items
@@ -689,10 +688,14 @@
         data-onchange="autosave(item, 0)">
     </div>
 
-    <div ng-if="!_editable"
-        sd-related-items-preview
-        data-item="item"
-        data-field="field">
+    <div ng-if="!_editable">
+        <label class="field__label">{{field.display_name}}</label>
+
+        <div 
+            sd-related-items-preview
+            data-item="item"
+            data-field="field">
+        </div>
     </div>
 
     <div class="sd-editor__info-text" ng-if="helper_text[field._id]">{{field.helper_text}}</div>

scripts/apps/authoring/views/authoring-header.html

@@ -96,6 +96,7 @@
                         ng-disabled="!_editable"
                         ng-trim="false"
                         tabindex="{{editor.slugline.order}}"
+                        data-test-id="field-slugline"
                     >
                     <span ng-if="schema.slugline.maxlength" sd-character-count data-item="item.slugline" data-html="true" data-limit="schema.slugline.maxlength"></span>
                     <sd-validate-characters ng-if="schema.slugline.validate_characters"
@@ -497,8 +498,9 @@
                               ng-model="item.ednote"
                               ng-disabled="!_editable"
                               ng-change="autosave(item)"
-                              tabindex="{{editor.ednote.order}}">
-                    </textarea>
+                              tabindex="{{editor.ednote.order}}"
+                              data-test-id="field-editors-note"
+                    ></textarea>
                 </div>
 
             </div>

scripts/apps/authoring/views/authoring-topbar.html

@@ -141,7 +141,8 @@
                 ng-if="action !== 'correct' && action !== 'kill'"
                 title="{{ :: 'Close' | translate }}"
                 sd-hotkey="ctrl+shift+e"
-                sd-hotkey-options="{global: true}">
+                sd-hotkey-options="{global: true}"
+                data-test-id="close">
             <span translate>Close</span>
         </button>
 
@@ -152,7 +153,9 @@
         ng-disabled="!save_enabled() || saveDisabled"
         sd-hotkey="ctrl+shift+s"
         sd-hotkey-options="{global: true}"
-        translate>Save</button>
+        translate
+        data-test-id="save"
+      >Save</button>
 
       <button class="btn btn--primary" type="submit"
         ng-click="previewFormattedItem()"
@@ -215,10 +218,16 @@
         <div id="authoring-extra-dropdown"
              ng-if="item._type !== 'legal_archive' && item._type !== 'archived' && !highlight && item.state !== 'spiked' && buttonsToHide['article-edit--topbar--actions'] !== true"
              class="dropdown pull-left strict" dropdown>
-            <button id="more-actions" class="navbtn dropdown__toggle" title="{{ :: 'More actions' | translate }}" dropdown__toggle>
+            <button
+              id="more-actions"
+              class="navbtn dropdown__toggle"
+              title="{{ :: 'More actions' | translate }}"
+              dropdown__toggle
+              data-test-id="actions-button"
+            >
                 <i class="icon-dots-vertical"></i>
             </button>
-            <div class="dropdown__menu pull-right">
+            <div class="dropdown__menu pull-right" data-test-id="actions-list">
                 <ul ng-controller="TemplateMenu as templateMenu" ng-show="canSaveTemplate()">
                   <li>
                     <button type="button"

scripts/apps/authoring/views/authoring.html

@@ -1,4 +1,4 @@
-<div sd-authoring class="auth-screen" ng-if="origItem">
+<div sd-authoring class="auth-screen" ng-if="origItem" data-test-id="authoring">
     <div sd-authoring-topbar></div>
     <section class="main-section" ng-class="{'auth-sendto': views.send, 'packaging-screen': item.type === 'composite'}">
         <div sd-authoring-widgets data-item="item">

scripts/apps/highlights/services/HighlightsService.ts

@@ -115,7 +115,7 @@ export function HighlightsService(api, $q, $cacheFactory, packages, privileges)
             pkgDefaults.task = highlight.task;
         }
 
-        return packages.createEmptyPackage(pkgDefaults, group);
+        return packages.createEmptyPackage(pkgDefaults, false, group);
     };
 
     /**

scripts/apps/monitoring/views/monitoring-view.html

@@ -96,8 +96,16 @@ <h3 class="subnav__page-title sd-flex-no-grow sd-empty">
                             </button>
 
                             <div ng-if="disableMonitoringCreateItem == null && (!state.opened && (type !== 'spike' && type !== 'highlights'))" class="dropdown dropdown--align-right strict" sd-tooltip="{{ :: 'Create new item' | translate }}" flow="left" dropdown>
-                                <button class="navbtn dropdown__toggle sd-create-btn" dropdown__toggle></button>
-                                <div class="dropdown__menu dropdown__menu--has-head-foot pull-right" sd-content-create></div>
+                                <button
+                                    class="navbtn dropdown__toggle sd-create-btn"
+                                    dropdown__toggle
+                                    data-test-id="content-create"
+                                ></button>
+                                <div
+                                    sd-content-create
+                                    class="dropdown__menu dropdown__menu--has-head-foot pull-right"
+                                    data-test-id="content-create-dropdown"
+                                ></div>
                             </div>
                         </div>
                     </div>

scripts/apps/packaging/services/PackagesService.ts

@@ -46,13 +46,13 @@ export function PackagesService(api, $q, archiveService, lock, autosave, authori
         return api.save('archive', newPackage);
     };
 
-    this.createEmptyPackage = function(defaults, idRef = 'main') {
+    this.createEmptyPackage = function(defaults, initializeAsUpdated: boolean, idRef = 'main') {
         var newPackage: any = {
             headline: '',
             slugline: '',
             description_text: '',
             type: 'composite',
-            version: 0,
+            version: initializeAsUpdated ? 1 : 0,
             groups: [
                 {
                     role: 'grpRole:NEP',

scripts/apps/relations/directives/RelatedItemsDirective.ts

@@ -8,6 +8,8 @@ const ARCHIVE_TYPES = ['archive', 'published'];
 const isInArchive = (item: IArticle) => item._type != null && ARCHIVE_TYPES.includes(item._type);
 
 interface IScope extends IDirectiveScope<void> {
+    onCreated: (items: Array<IArticle>) => void;
+    gettext: (text: any, params?: any) => string;
     field: IArticleField;
     editable: boolean;
     item: IArticle;
@@ -43,6 +45,14 @@ export function RelatedItemsDirective(authoringWorkspace: AuthoringWorkspaceServ
         },
         templateUrl: 'scripts/apps/relations/views/related-items.html',
         link: function(scope: IScope, elem, attr) {
+            scope.onCreated = (items: Array<IArticle>) => {
+                items.forEach((item) => {
+                    scope.addRelatedItem(item);
+                });
+            };
+
+            scope.gettext = gettext;
+
             const dragOverClass = 'dragover';
             const fieldOptions = scope.field?.field_options || {};
             const allowed = fieldOptions.allowed_types || {};

scripts/apps/relations/views/related-items.html

@@ -1,7 +1,24 @@
+<div class="field__label--with-actions">
+    <label class="field__label">{{field.display_name}}</label>
+    <div class="dropdown dropdown--align-right strict" dropdown>
+        <button class="btn btn--primary btn--small btn--text-only" dropdown__toggle>
+            <i class="icon-plus-sign icon--blue"></i><span translate>Create new</span>
+        </button>
+
+        <div
+            sd-content-create
+            on-created="onCreated"
+            initialize-as-updated="true"
+            class="dropdown__menu dropdown__menu--has-head-foot pull-right"
+        ></div>
+    </div>
+</div>
+
 <button class="item-association item-association--no-click" ng-if="isEmptyRelatedItems(field._id)"
     ng-class="{'item-association--loading': loading}">
-    <span class="item-association__text-label">{{'Drop items here' | translate}}</span>
+    <span class="item-association__text-label" translate>Drop items here</span>
 </button>
+
 <div class="related-items" ng-if="!isEmptyRelatedItems(field._id)">
     <div ng-if="loading" class="loading-overlay" ng-class="{active: loading}" style="opacity: 0.5;"></div>
     <ul class="groups draggable-list" ng-if="!loading" sd-sort-groups>
@@ -27,4 +44,4 @@
             </div>
         </li>
     </ul>
-</div>
+</div>

scripts/apps/templates/views/create-template.html

@@ -39,8 +39,14 @@ <h3 class="modal__heading" translate>Save as template</h3>
     <button type="button" class="btn"
         ng-click="$dismiss()"
         translate>Cancel</button>
-    <button type="button" class="btn btn--primary"
+    <button
+        type="button"
+        class="btn btn--primary"
         ng-disabled="templateForm.$invalid"
         ng-click="template.save().then($close)"
-        translate>Save</button>
+        translate
+        data-test-id="create-template-modal--save"
+    >
+        Save
+    </button>
 </div>

scripts/apps/templates/views/template-list.html

@@ -1,4 +1,4 @@
-<li ng-repeat="template in templates track by template._id">
+<li ng-repeat="template in templates track by template._id" data-test-id="templates-list">
     <button class="btn btn--text-only" ng-click="select({template: template})" ng-keypress="selectOnEnter($event, template)">
         <span class="pull-left">{{ :: template.template_name }}</span>
     </button>