514 hook up select multiple projects dialog

extensions/src/hello-world/web-views/hello-world.web-view.tsx

@@ -1,4 +1,4 @@
-import { ScrVers, VerseRef } from '@sillsdev/scripture';
+import { ScrVers, VerseRef } from '@sillsdev/scripture';
 import papi from 'papi-frontend';
 import {
   Button,
@@ -18,6 +18,7 @@ import { Key, useCallback, useContext, useEffect, useMemo, useRef, useState } fr
 import type { HelloWorldEvent } from 'hello-world';
 import type { DialogTypes } from 'renderer/components/dialogs/dialog-definition.model';
 import type { WebViewProps } from 'shared/data/web-view.model';
+import { ProjectDataTypes } from 'papi-shared-types';
 import Clock from './components/clock.component';
 
 type Row = {
@@ -29,7 +30,15 @@ type Row = {
 const {
   react: {
     context: { TestContext },
-    hooks: { useData, useDataProvider, usePromise, useEvent, useSetting, useDialogCallback },
+    hooks: {
+      useData,
+      useDataProvider,
+      useProjectData,
+      usePromise,
+      useEvent,
+      useSetting,
+      useDialogCallback,
+    },
   },
   logger,
 } = papi;
@@ -69,10 +78,10 @@ globalThis.webViewComponent = function HelloWorld({
   const [rows, setRows] = useState(initializeRows());
   const [selectedRows, setSelectedRows] = useState(new Set<Key>());
   const [scrRef, setScrRef] = useSetting('platform.verseRef', defaultScrRef);
-  /* const verseRef = useMemo(
+  const verseRef = useMemo(
     () => new VerseRef(scrRef.bookNum, scrRef.chapterNum, scrRef.verseNum),
     [scrRef],
-  ); */
+  );
 
   // Update the clicks when we are informed helloWorld has been run
   useEvent(
@@ -120,6 +129,18 @@ globalThis.webViewComponent = function HelloWorld({
     'Loading latest Scripture text...',
   );
 
+  const [projects, selectProjects] = useDialogCallback(
+    'platform.selectMultipleProjects',
+    useRef({
+      prompt: 'Please select one or more projects for Hello World WebView:',
+      iconUrl: 'papi-extension://hello-world/assets/offline.svg',
+      title: 'Select List of Hello World Projects',
+    }).current,
+    // Assert as string type rather than string literal type.
+    // eslint-disable-next-line no-type-assertion/no-type-assertion
+    ['None'] as DialogTypes['platform.selectMultipleProjects']['responseType'],
+  );
+
   const [name, setName] = useState('Bill');
 
   const peopleDataProvider = useDataProvider<PeopleDataProvider>('helloSomeone.people');
@@ -144,12 +165,11 @@ globalThis.webViewComponent = function HelloWorld({
     'Loading John 1:1...',
   );
 
-  // TODO: Uncomment this or similar sample code once https://github.com/paranext/paranext-core/issues/440 is resolved
-  /* const [webVerse] = useProjectData.VerseUSFM<ProjectDataTypes['ParatextStandard'], 'VerseUSFM'>(
-    '32664dc3288a28df2e2bb75ded887fc8f17a15fb',
+  const [webVerse] = useProjectData.VerseUSFM<ProjectDataTypes['ParatextStandard'], 'VerseUSFM'>(
+    project,
     verseRef,
     'Loading WEB Verse',
-  ); */
+  );
 
   return (
     <div>
@@ -196,8 +216,13 @@ globalThis.webViewComponent = function HelloWorld({
       <div>{john11}</div>
       <h3>Psalm 1</h3>
       <div>{psalm1}</div>
-      {/* <h3>{verseRef.toString()} WEB</h3>
-      <div>{webVerse}</div> */}
+      <h3>{verseRef.toString()} WEB</h3>
+      <div>{webVerse}</div>
+      <h3>List of Selected Project Id(s):</h3>
+      <div>{projects.join(', ')}</div>
+      <div>
+        <Button onClick={selectProjects}>Select Projects</Button>
+      </div>
       <br />
       <div>
         <TextField label="Test Me" />

lib/papi-dts/papi.d.ts

@@ -3378,6 +3378,8 @@ declare module 'renderer/components/dialogs/dialog-definition.model' {
   import { ReactElement } from 'react';
   /** The tabType for the select project dialog in `select-project.dialog.tsx` */
   export const SELECT_PROJECT_DIALOG_TYPE = 'platform.selectProject';
+  /** The tabType for the select multiple projects dialog in `select-multiple-projects.dialog.tsx` */
+  export const SELECT_MULTIPLE_PROJECTS_DIALOG_TYPE = 'platform.selectMultipleProjects';
   /**
    * Mapped type for dialog functions to use in getting various types for dialogs
    *
@@ -3387,6 +3389,7 @@ declare module 'renderer/components/dialogs/dialog-definition.model' {
    */
   export interface DialogTypes {
     [SELECT_PROJECT_DIALOG_TYPE]: DialogDataTypes<DialogOptions, string>;
+    [SELECT_MULTIPLE_PROJECTS_DIALOG_TYPE]: DialogDataTypes<DialogOptions, string[]>;
   }
   /** Each type of dialog. These are the tab types used in the dock layout */
   export type DialogTabTypes = keyof DialogTypes;

src/renderer/components/dialogs/dialog-definition.model.ts

@@ -4,6 +4,8 @@ import { ReactElement } from 'react';
 
 /** The tabType for the select project dialog in `select-project.dialog.tsx` */
 export const SELECT_PROJECT_DIALOG_TYPE = 'platform.selectProject';
+/** The tabType for the select multiple projects dialog in `select-multiple-projects.dialog.tsx` */
+export const SELECT_MULTIPLE_PROJECTS_DIALOG_TYPE = 'platform.selectMultipleProjects';
 
 /**
  * Mapped type for dialog functions to use in getting various types for dialogs
@@ -14,7 +16,7 @@ export const SELECT_PROJECT_DIALOG_TYPE = 'platform.selectProject';
  */
 export interface DialogTypes {
   [SELECT_PROJECT_DIALOG_TYPE]: DialogDataTypes<DialogOptions, string>;
-  // 'platform.selectMultipleProjects': DialogDataTypes<DialogOptions, string[]>;
+  [SELECT_MULTIPLE_PROJECTS_DIALOG_TYPE]: DialogDataTypes<DialogOptions, string[]>;
 }
 
 /** Each type of dialog. These are the tab types used in the dock layout */

src/renderer/components/dialogs/index.ts

@@ -1,5 +1,6 @@
 import SELECT_PROJECT_DIALOG from '@renderer/components/dialogs/select-project.dialog';
 import { DialogDefinition, DialogTabTypes } from './dialog-definition.model';
+import SELECT_MULTIPLE_PROJECTS_DIALOG from './select-multiple-projects-dialog.component';
 
 /**
  * Map of all available dialog definitions used to create dialogs
@@ -8,6 +9,7 @@ import { DialogDefinition, DialogTabTypes } from './dialog-definition.model';
  */
 const DIALOGS: { [DialogTabType in DialogTabTypes]: DialogDefinition<DialogTabType> } = {
   [SELECT_PROJECT_DIALOG.tabType]: SELECT_PROJECT_DIALOG,
+  [SELECT_MULTIPLE_PROJECTS_DIALOG.tabType]: SELECT_MULTIPLE_PROJECTS_DIALOG,
 };
 
 /** All tab types for available dialogs */

src/renderer/components/projects/open-multiple-projects-tab.component.scss → src/renderer/components/dialogs/select-multiple-projects-dialog.component.scss

@@ -1,8 +1,8 @@
-.open-multiple-projects-dialog {
+.select-multiple-projects-dialog {
   overflow-y: auto;
 }
 
-.open-multiple-projects-submit-button {
+.select-multiple-projects-submit-button {
   display: flex !important;
   justify-content: flex-end !important;
 }

src/renderer/components/dialogs/select-multiple-projects-dialog.component.tsx

@@ -0,0 +1,73 @@
+import { ListItemIcon } from '@mui/material';
+import { useMemo, useState } from 'react';
+import FolderOpenIcon from '@mui/icons-material/FolderOpen';
+import DoneIcon from '@mui/icons-material/Done';
+import { Button } from 'papi-components';
+import ProjectList from '@renderer/components/projects/project-list.component';
+import './select-multiple-projects-dialog.component.scss';
+import projectLookupService from '@shared/services/project-lookup.service';
+import usePromise from '@renderer/hooks/papi-hooks/use-promise.hook';
+import { ProjectMetadata } from '@shared/models/project-metadata.model';
+import DIALOG_BASE, { DialogProps } from './dialog-base.data';
+import { DialogDefinition, SELECT_MULTIPLE_PROJECTS_DIALOG_TYPE } from './dialog-definition.model';
+
+type SelectMultipleProjectDialogProps = DialogProps<string[]>;
+
+function SelectMultipleProjectsDialog({ prompt, submitDialog }: SelectMultipleProjectDialogProps) {
+  const [downloadedProjects, isLoadingProjects] = usePromise(
+    projectLookupService.getMetadataForAllProjects,
+    useMemo(() => [], []),
+  );
+
+  const [selectedProjects, setSelectedProjects] = useState<ProjectMetadata[]>([]);
+
+  const handleProjectToggle = (projectId: string) => {
+    if (selectedProjects.some((project) => project.id === projectId)) {
+      setSelectedProjects(selectedProjects.filter((project) => project.id !== projectId));
+    } else {
+      const selectedProject = downloadedProjects.find((project) => project.id === projectId);
+      if (selectedProject) setSelectedProjects([...selectedProjects, selectedProject]);
+    }
+  };
+
+  return (
+    <div className="select-multiple-projects-dialog">
+      <div>{prompt}</div>
+      {isLoadingProjects ? (
+        <div>Loading Projects</div>
+      ) : (
+        <ProjectList
+          projects={downloadedProjects}
+          handleSelectProject={handleProjectToggle}
+          selectedProjects={selectedProjects}
+          isMultiselect
+          isCheckable
+        >
+          <ListItemIcon>
+            <FolderOpenIcon />
+          </ListItemIcon>
+        </ProjectList>
+      )}
+      <div className="select-multiple-projects-submit-button">
+        <Button onClick={() => submitDialog(selectedProjects.map((p) => p.id))}>
+          <DoneIcon />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+const SELECT_MULTIPLE_PROJECTS_DIALOG: DialogDefinition<
+  typeof SELECT_MULTIPLE_PROJECTS_DIALOG_TYPE
+> = Object.freeze({
+  ...DIALOG_BASE,
+  tabType: SELECT_MULTIPLE_PROJECTS_DIALOG_TYPE,
+  defaultTitle: 'Select Projects',
+  initialSize: {
+    width: 500,
+    height: 350,
+  },
+  Component: SelectMultipleProjectsDialog,
+});
+
+export default SELECT_MULTIPLE_PROJECTS_DIALOG;

src/renderer/components/docking/platform-dock-layout.component.tsx

@@ -56,10 +56,6 @@ import {
   loadDownloadUpdateProjectTab,
   TAB_TYPE_DOWNLOAD_UPDATE_PROJECT_DIALOG,
 } from '@renderer/components/projects/download-update-project-tab.component';
-import {
-  loadOpenMultipleProjectsTab,
-  TAB_TYPE_OPEN_MULTIPLE_PROJECTS_DIALOG,
-} from '@renderer/components/projects/open-multiple-projects-tab.component';
 import {
   TAB_TYPE_EXTENSION_MANAGER,
   loadExtensionManagerTab,
@@ -118,7 +114,6 @@ const tabLoaderMap = new Map<TabType, TabLoader>([
   [TAB_TYPE_TEST, loadTestTab],
   [TAB_TYPE_WEBVIEW, loadWebViewTab],
   [TAB_TYPE_DOWNLOAD_UPDATE_PROJECT_DIALOG, loadDownloadUpdateProjectTab],
-  [TAB_TYPE_OPEN_MULTIPLE_PROJECTS_DIALOG, loadOpenMultipleProjectsTab],
   [TAB_TYPE_EXTENSION_MANAGER, loadExtensionManagerTab],
   [TAB_TYPE_SETTINGS_DIALOG, loadSettingsDialog],
   [TAB_TYPE_RUN_BASIC_CHECKS, loadRunBasicChecksTab],

src/renderer/components/projects/project-list.component.tsx

@@ -1,7 +1,8 @@
 import { List, ListItem, ListItemButton, ListItemText, ListSubheader } from '@mui/material';
 import { ProjectMetadata } from '@shared/models/project-metadata.model';
+import { Checkbox } from 'papi-components';
 import { ProjectTypes } from 'papi-shared-types';
-import { PropsWithChildren, useCallback } from 'react';
+import { PropsWithChildren, useCallback, JSX } from 'react';
 
 export type Project = ProjectMetadata & {
   id: string;
@@ -91,14 +92,21 @@ export type ProjectListProps = PropsWithChildren<{
   isMultiselect?: boolean;
 
   /**
-   * If multiple is selected, then the array of selected projects is passed to control the selected flag on ListItemButton
+   * If multiselect is selected, then the array of selected projects is passed to control
+   *  the selected flag on ListItemButton
    */
   selectedProjects?: ProjectMetadata[] | undefined;
 
   /**
    * Optional subheader
    */
   subheader?: string;
+
+  /**
+   * Adds a checkbox to the end of each list item that reflects the selected state of
+   * each project
+   */
+  isCheckable?: boolean;
 }>;
 
 /**
@@ -112,6 +120,7 @@ export default function ProjectList({
   isMultiselect,
   selectedProjects,
   subheader,
+  isCheckable,
   children,
 }: ProjectListProps) {
   const isSelected = useCallback(
@@ -124,20 +133,25 @@ export default function ProjectList({
     [isMultiselect, selectedProjects],
   );
 
+  const createListItemContents = (project: ProjectMetadata): JSX.Element => {
+    return (
+      <ListItemButton
+        selected={isSelected(project)}
+        onClick={() => handleSelectProject(project.id)}
+      >
+        {children}
+        <ListItemText primary={project.name} />
+        {isCheckable && <Checkbox isChecked={isSelected(project)} />}
+      </ListItemButton>
+    );
+  };
+
   return (
     <div className="project-list">
       <List>
         <ListSubheader>{subheader}</ListSubheader>
         {projects.map((project) => (
-          <ListItem key={project.id}>
-            <ListItemButton
-              selected={isSelected(project)}
-              onClick={() => handleSelectProject(project.id)}
-            >
-              {children}
-              <ListItemText primary={project.name} />
-            </ListItemButton>
-          </ListItem>
+          <ListItem key={project.id}>{createListItemContents(project)}</ListItem>
         ))}
       </List>
     </div>