SF-3028 Add final confirmation step when generating drafts

[josephmyers]

I believe this may actually be the first of the mixed source UI PR's to be ready.

---

This change is 

[Nateowami]

Here's a screenshot of about where we were at the end of the conversation, for reference.

[josephmyers]

Two things Bethany suggested that I think are worth capturing here:

• Using ranges when training books have the exact same source/target
• Collapsing the training card by default

[josephmyers]

Given how condensed the training card can be with the latest changes, I think we should postpone the expand/collapse card til we confirm we need it.

[Nateowami]

This is an improvement, but:

• I think there should be 4 rows here, not one giant cell
• List of books to translate is still not in the same style as the books to draft from. Preferably same font size, comma separated. That's what I recall discussing last time we met.
• Book names should be localized using the I18nService
• I also think the font weight of 100 is too light.

[josephmyers]

• I think there should be 4 rows here, not one giant cell

I am surprised to hear you say this. This would be going back toward the more blatant table style Bethany criticized last week. Combining the identical rows provides much-needed spacing. This is what the table style looks like:

• List of books to translate is still not in the same style as the books to draft from. Preferably same font size, comma separated. That's what I recall discussing last time we met.

I'm not understanding. Aren't the books to translate and the books to draft from the same thing?

• Book names should be localized using the I18nService

Yes, thanks. I haven't done localization yet (see raw text in HTML), but I'll do this one now. Should I fix the other places in the component that are forcing English, too?

• I also think the font weight of 100 is too light.

I disagree. The lighter weight breaks up the monotony of the text and allows us to focus on the book data without needing to increase its weight. This weight is particularly suited to explanatory text like this, which isn't intended to be the focus, while still being readable. Unless you think it's not readable? I'm open to other suggestions, but simply using the standard font weight looked bad.

I do notice that 100-300 are all the same. Maybe we could define a level in between what we have now and the standard?

[josephmyers]

Talked with Nathaniel. It appears that the font sizes between the top and bottom are slightly different. I'll look into this. And we do in fact want the bottom books comma separated on one line.

[josephmyers]

At the recent UX meeting, we decided to combine the identical training book ranges to a single cell, comma separated, with word/span wrapping that doesn't separate the individual ranges.

Edit: with full book names

[Nateowami]

After meeting with Nigel, this is looking good. Several things:

• Remove margin-bottom from .explanation
• Localize everything, including book names
• Instead of list.join(', '), add this method to the I18nService and use it instead (not all languages do commas the same as English):

  enumerateList(list: string[]): string {
    return new (Intl as any).ListFormat(this.localeCode, { style: 'long', type: 'conjunction' }).format(list) as string;
  }

I think we're both happy with it once these changes are included.

[Nateowami]

This should be updated to use i18n.enumerateList

[josephmyers]

Done. We do lose out on the word-wrapping control we had previously, however

[codecov]

Codecov Report

Attention: Patch coverage is 91.66667% with 4 lines in your changes missing coverage. Please review.

Project coverage is 79.20%. Comparing base (661951c) to head (c7c4ce3).

Files with missing lines	Patch %	Lines
...neration-steps/draft-generation-steps.component.ts	91.66%	4 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2787      +/-   ##
==========================================
+ Coverage   79.18%   79.20%   +0.02%     
==========================================
  Files         533      533              
  Lines       30965    31001      +36     
  Branches     5049     5057       +8     
==========================================
+ Hits        24520    24555      +35     
- Misses       5659     5660       +1     
  Partials      786      786              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[josephmyers]

@Nateowami, it sounds like you're owning the review on this? Or maybe @nigel-wells?

[Nateowami]

Reviewed 1 of 5 files at r1, 1 of 4 files at r2.
Reviewable status: 2 of 6 files reviewed, 1 unresolved discussion (waiting on @josephmyers)

---

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-generation-steps/draft-generation-steps.component.html line 204 at r3 (raw file):

              <td mat-cell *matCellDef="let element" class="bookName">
                <div class="confirm-books cell-padding-block">
                  {{ this.i18n.enumerateList(element.ranges) }}

this. is not needed, here or below.

[josephmyers]

Reviewable status: 2 of 6 files reviewed, all discussions resolved (waiting on @Nateowami)

---

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-generation-steps/draft-generation-steps.component.html line 204 at r3 (raw file):

Previously, Nateowami wrote…

this. is not needed, here or below.

Done