Adding new async publish feature for single and bulk.

src/app/components/multiple-draft-generator/multiple-draft-generator.component.css

@@ -0,0 +1,17 @@
+.toggle-drafts {
+  width: 100%;
+  display: flex;
+  margin-bottom: 15px;
+}
+
+.toggle-drafts label.btn {
+  flex: 0 1 50%;
+}
+
+.translation-btn {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 350px;
+  margin: 0 auto 8px;
+}

src/app/components/multiple-draft-generator/multiple-draft-generator.component.html

@@ -1,35 +1,92 @@
 <div class="modal-body">
-  <h5>Languages without a Draft</h5>
+  <div class="btn-group btn-group-toggle toggle-drafts" data-toggle="buttons">
+    <label
+      class="btn btn-success {{
+        actionType === 'publish' ? 'btn-success' : 'btn-outline-success'
+      }}"
+      (click)="switchActionType('publish')"
+    >
+      Publish Languages
+    </label>
+    <label
+      class="btn {{
+        actionType === 'createDrafts'
+          ? 'btn-secondary'
+          : 'btn-outline-secondary'
+      }}"
+      (click)="switchActionType('createDrafts')"
+    >
+      Generate Drafts
+    </label>
+  </div>
+
   <div *ngFor="let translation of resource['latest-drafts-translations']">
     <label
-      class="btn-secondary btn-block"
+      class="btn-outline-secondary btn-block translation-btn"
       ngbButtonLabel
-      *ngIf="translation.is_published"
+      *ngIf="
+        actionType === 'publish' ||
+        (actionType === 'createDrafts' && translation['is-published'])
+      "
     >
-      <input
-        type="checkbox"
-        ngbButton
-        [(ngModel)]="translation.generateDraft"
-      />
-      {{ translation.language.name }}
+      <div class="translation-btn-text">
+        <input
+          type="checkbox"
+          ngbButton
+          [(ngModel)]="translation.selectedForAction"
+        />
+        {{ translation.language.name }}
+      </div>
+      <admin-translation-version-badge [translation]="translation">
+      </admin-translation-version-badge>
     </label>
   </div>
   <br />
-  <ngb-alert type="info" [dismissible]="false" *ngIf="saving">
-    Saving...
+
+  <ngb-alert
+    type="success"
+    [dismissible]="true"
+    *ngFor="let successMessage of sucessfulMessages"
+  >
+    {{ successMessage }}
   </ngb-alert>
-  <ngb-alert type="danger" [dismissible]="false" *ngIf="errorMessage">
-    {{ errorMessage }}
+  <ngb-alert type="info" [dismissible]="false" *ngIf="alertMessage">
+    {{ alertMessage }}
   </ngb-alert>
-  <button class="btn btn-danger" (click)="cancel()">Cancel</button>
-  <button class="btn btn-success" (click)="showConfirmAlert()">
-    Generate drafts
-  </button>
-  <ngb-alert type="danger" [dismissible]="false" *ngIf="confirmMessage">
-    {{ confirmMessage }}
-    <button (click)="generateDrafts()" class="btn btn-dark">Confirm</button>
-    <button (click)="confirmMessage = null" class="btn btn-secondary">
+  <ngb-alert
+    type="danger"
+    [dismissible]="false"
+    *ngFor="let error of errorMessage"
+  >
+    {{ error }}
+  </ngb-alert>
+
+  <ngb-alert type="info" [dismissible]="false" *ngIf="confirmMessage">
+    <p>{{ confirmMessage }}</p>
+    <div class="btn-toolbar justify-content-between">
+      <button (click)="confirmMessage = null" class="btn btn-danger">
+        Cancel
+      </button>
+      <button (click)="publishOrCreateDrafts()" class="btn btn-success">
+        Confirm
+      </button>
+    </div>
+  </ngb-alert>
+
+  <div class="modal-footer justify-content-between">
+    <button
+      class="btn btn-secondary"
+      (click)="cancel()"
+      [disabled]="disableButtons"
+    >
       Cancel
     </button>
-  </ngb-alert>
+    <button
+      class="btn btn-success"
+      (click)="showConfirmAlert()"
+      [disabled]="disableButtons"
+    >
+      {{ actionType === 'publish' ? 'Publish' : 'Generate drafts' }}
+    </button>
+  </div>
 </div>

src/app/components/multiple-draft-generator/multiple-draft-generator.component.spec.ts

@@ -7,20 +7,24 @@ import {
 import { MultipleDraftGeneratorComponent } from './multiple-draft-generator.component';
 import { FormsModule } from '@angular/forms';
 import { DraftService } from '../../service/draft.service';
+import { LanguageService } from '../../service/language.service';
+import { ResourceService } from '../../service/resource/resource.service';
 import { Resource } from '../../models/resource';
 import { Translation } from '../../models/translation';
 import { By } from '@angular/platform-browser';
 import { NgbButtonLabel } from '@ng-bootstrap/ng-bootstrap';
 import { Language } from '../../models/language';
 import { DebugElement } from '@angular/core';
+import { TranslationVersionBadgeComponent } from '../translation/translation-version-badge/translation-version-badge.component';
+import { MessageType } from '../../models/message';
 
 describe('MultipleDraftGeneratorComponent', () => {
   let comp: MultipleDraftGeneratorComponent;
   let fixture: ComponentFixture<MultipleDraftGeneratorComponent>;
 
   const buildTranslation = (
     isPublished: boolean,
-    generateDraft: boolean,
+    selectedForAction: boolean,
     language: string,
   ) => {
     const l = new Language();
@@ -29,15 +33,24 @@ describe('MultipleDraftGeneratorComponent', () => {
     const t = new Translation();
     t.language = l;
     t.is_published = isPublished;
-    t.generateDraft = generateDraft;
+    t['is-published'] = isPublished;
+    t.selectedForAction = selectedForAction;
     return t;
   };
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [MultipleDraftGeneratorComponent],
+      declarations: [
+        MultipleDraftGeneratorComponent,
+        TranslationVersionBadgeComponent,
+      ],
       imports: [NgbModule.forRoot(), FormsModule],
-      providers: [{ provide: DraftService }, { provide: NgbActiveModal }],
+      providers: [
+        { provide: DraftService },
+        { provide: NgbActiveModal },
+        { provide: ResourceService },
+        { provide: LanguageService },
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(MultipleDraftGeneratorComponent);
@@ -53,25 +66,52 @@ describe('MultipleDraftGeneratorComponent', () => {
     const r = new Resource();
     r['latest-drafts-translations'] = translations;
     comp.resource = r;
+    comp.actionType = 'publish';
 
     fixture.detectChanges();
   });
 
-  it('only shows languages without drafts', () => {
+  it('shows languages with and without drafts', () => {
     expect(
       fixture.debugElement.queryAll(By.directive(NgbButtonLabel)).length,
-    ).toBe(3);
+    ).toBe(4);
   });
 
-  it('confirm message lists all languages', () => {
+  it('shows confirm message to publish selected languages', () => {
     comp.showConfirmAlert();
     fixture.detectChanges();
 
     const alert: DebugElement = fixture.debugElement.query(
       By.directive(NgbAlert),
     );
     expect(alert.nativeElement.textContent).toContain(
-      `${comp.baseConfirmMessage} Chinese, French?`,
+      `Are you sure you want to publish these languages: Chinese, French?`,
     );
   });
+
+  it('shows confirm message to create a draft for selected languages', () => {
+    comp.actionType = 'createDrafts';
+    comp.showConfirmAlert();
+    fixture.detectChanges();
+
+    const alert: DebugElement = fixture.debugElement.query(
+      By.directive(NgbAlert),
+    );
+    expect(alert.nativeElement.textContent).toContain(
+      `Are you sure you want to generate a draft for these languages: Chinese, French?`,
+    );
+  });
+
+  describe('Publish languages', () => {
+    it('shows confirm message to publish selected languages', () => {
+      comp.showConfirmAlert();
+      fixture.detectChanges();
+      spyOn(comp, 'renderMessage');
+      comp.publishOrCreateDrafts();
+      expect(comp.renderMessage).toHaveBeenCalledWith(
+        MessageType.success,
+        'Publishing translations...',
+      );
+    });
+  });
 });