Update configure checks components (#1151)

extensions/src/platform-scripture/contributions/localizedStrings.json

@@ -22,17 +22,25 @@
       "%mainMenu_toggleIncludeMyParatext9Projects%": "Toggle Include My Paratext 9 Projects",
       "%webView_platformScripture_tools%": "Tools",
       "%webView_platformScripture_showCheckResults%": "Show Check Results...",
+      "%webView_platformScripture_currentBook%": "Current book",
       "%webView_characterInventory_title%": "Character Inventory",
       "%webView_repeatedWordsInventory_title%": "Repeated Words Inventory",
       "%webView_configureChecks_title%": "Configure Checks: {projectName}",
+      "%webView_configureChecks_checks%": "Checks",
+      "%webView_configureChecks_loadingChecks%": "Loading checks",
+      "%webView_configureChecks_activeRanges%": "Active Range(s)",
+      "%webView_bookSelector_currentBook%": "Current book",
+      "%webView_bookSelector_selectBooks%": "Select Books",
+      "%webView_bookSelector_selectBooks_prompt%": "Select one or more books to run basic checks on",
+      "%webView_bookSelector_choose%": "Choose...",
+      "%webView_bookSelector_chooseBooks%": "Choose Books",
       "%webView_checkResultsList_title%": "Check Results ({resultsCount}): {projectName}",
       "%webView_checkResultsList_unspecifiedCheckId%": "Unspecified check ID",
       "%webView_checkResultsList_unspecifiedCheckDescription%": "Unspecified check description",
       "%webView_inventory_all%": "All items",
       "%webView_inventory_approved%": "Approved items",
       "%webView_inventory_unapproved%": "Unapproved items",
       "%webView_inventory_unknown%": "Unknown items",
-      "%webView_inventory_scope_book%": "Current book",
       "%webView_inventory_scope_chapter%": "Current chapter",
       "%webView_inventory_scope_verse%": "Current verse",
       "%webView_inventory_filter_text%": "Filter text...",

extensions/src/platform-scripture/src/checks/configure-checks/configure-checks.component.tsx

@@ -1,10 +1,17 @@
-import { useSetting } from '@papi/frontend/react';
+import { useDialogCallback, useLocalizedStrings, useSetting } from '@papi/frontend/react';
 import { Canon, VerseRef } from '@sillsdev/scripture';
-import { Checklist, Label, ScriptureReference, Spinner } from 'platform-bible-react';
+import {
+  BOOK_SELECTOR_STRING_KEYS,
+  BookSelectionMode,
+  BookSelector,
+  Checklist,
+  Label,
+  ScriptureReference,
+  Spinner,
+} from 'platform-bible-react';
 import { getChaptersForBook } from 'platform-bible-utils';
 import { CheckInputRange, CheckRunnerCheckDetails } from 'platform-scripture';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import BookSelector, { BookSelectionMode } from './book-selector.component';
 
 export type BookSelectionStatus = {
   [bookId: string]: boolean;
@@ -41,6 +48,25 @@ export default function ConfigureChecks({
   const [endChapter, setEndChapter] = useState<number>(chapterCount);
   const currentBookId = useMemo(() => Canon.bookNumberToId(scrRef.bookNum), [scrRef]);
 
+  const [bookSelectorLocalizedStrings] = useLocalizedStrings(
+    useMemo(() => {
+      return Array.from(BOOK_SELECTOR_STRING_KEYS);
+    }, []),
+  );
+
+  const [localizedStrings] = useLocalizedStrings(
+    useMemo(
+      () => [
+        '%webView_configureChecks_checks%',
+        '%webView_configureChecks_loadingChecks%',
+        '%webView_configureChecks_activeRanges%',
+        '%webView_bookSelector_selectBooks%',
+        '%webView_bookSelector_selectBooks_prompt%',
+      ],
+      [],
+    ),
+  );
+
   const toggleShouldUseCurrentBook = (newMode: string) => {
     if (newMode === BookSelectionMode.CURRENT_BOOK) {
       setUsingCurrentBook(true);
@@ -98,6 +124,24 @@ export default function ConfigureChecks({
     );
   }, [activeRanges]);
 
+  const selectBooks = useDialogCallback(
+    'platform.selectBooks',
+    useMemo(
+      () => ({
+        prompt: localizedStrings['%webView_bookSelector_selectBooks_prompt%'],
+        title: localizedStrings['%webView_bookSelector_selectBooks%'],
+        selectedBookIds,
+      }),
+      [localizedStrings, selectedBookIds],
+    ),
+    useCallback(
+      (newSelectedBooks) => {
+        if (newSelectedBooks) handleSelectBooks(newSelectedBooks);
+      },
+      [handleSelectBooks],
+    ),
+  );
+
   const noAvailableChecks = useMemo(() => availableChecks.length === 0, [availableChecks]);
   const singleEmptyCheck = useMemo(
     () => availableChecks.length === 1 && availableChecks[0].checkId === '',
@@ -109,28 +153,32 @@ export default function ConfigureChecks({
       {noAvailableChecks || singleEmptyCheck ? (
         <div className="configure-checks-loader">
           <Spinner />
-          <Label>Loading checks</Label>
+          <Label>{localizedStrings['%webView_configureChecks_loadingChecks%']}</Label>
         </div>
       ) : (
         <Checklist
           className="configure-checks-check-names"
-          legend="Checks"
+          legend={localizedStrings['%webView_configureChecks_checks%']}
           listItems={availableChecks.map((check) => check.checkDescription)}
           selectedListItems={selectedChecks}
           handleSelectListItem={handleSelectCheck}
         />
       )}
       <fieldset className="configure-checks-books">
+        <legend>
+          <Label>{localizedStrings['%webView_configureChecks_activeRanges%']}</Label>
+        </legend>
         <BookSelector
           handleBookSelectionModeChange={toggleShouldUseCurrentBook}
           currentBookName={Canon.bookIdToEnglishName(currentBookId)}
+          onSelectBooks={selectBooks}
           selectedBookIds={selectedBookIds}
-          handleSelectBooks={handleSelectBooks}
           chapterCount={chapterCount}
           handleSelectStartChapter={setStartChapter}
           handleSelectEndChapter={setEndChapter}
           startChapter={startChapter}
           endChapter={endChapter}
+          localizedStrings={bookSelectorLocalizedStrings}
         />
       </fieldset>
     </div>

extensions/src/platform-scripture/src/configure-checks.web-view.scss

@@ -1,2 +1 @@
-@import './checks/configure-checks/book-selector.component';
 @import './checks/configure-checks/configure-checks.component';