Update Get Resources web-view UI to Phase 1 UX design

assets/localization/en.json

@@ -20,6 +20,7 @@
   "%getResources_errorUninstallResource_resourceNotInstalled%": "Resource is not currently installed, so it can't be removed.",
   "%getResources_errorUninstallResource_localResourceNotFound%": "Resource cannot be located, so it can't be removed.",
   "%getResources_errorUninstallResource_localResourceStillPresent%": "Resource is still present. Removing failed.",
+  "%home_dialog_title%": "Home",
   "%insertNote%": "Insert Note",
   "%general_error_title%": "Error",
   "%general_loading%": "Loading",
@@ -47,6 +48,32 @@
   "%project_settings_platform_isEditable_description%": "Whether this project is editable. A project that is not editable is sometimes called a resource.",
   "%project_settings_platform_language_label%": "Project Primary Language",
   "%project_settings_platform_name_label%": "Project Short Name",
+  "%resources_action%": "Action",
+  "%resources_any%": "Any",
+  "%resources_dialog_subtitle%": "Add resources to Home",
+  "%resources_dialog_title%": "Get Resources",
+  "%resources_filterBy%": "Filter by",
+  "%resources_filterInput%": "Search by name, language, type",
+  "%resources_fullName%": "Full Name",
+  "%resources_get%": "Get",
+  "%resources_installed%": "Installed",
+  "%resources_language%": "Language",
+  "%resources_languages%": "Languages",
+  "%resources_loadingResources%": "Loading...",
+  "%resources_noResults%": "No results found",
+  "%resources_open%": "Open",
+  "%resources_remove%": "Remove",
+  "%resources_results%": "results",
+  "%resources_showing%": "Showing",
+  "%resources_size%": "Size",
+  "%resources_type%": "Type",
+  "%resources_types%": "Types",
+  "%resources_type_DBL%": "DBL Resource",
+  "%resources_type_ER%": "Enhanced Resource",
+  "%resources_type_SLR%": "Source Language Text",
+  "%resources_type_XR%": "XML Resource",
+  "%resources_type_unknown%": "Unknown resource type",
+  "%resources_update%": "Update",
   "%selectBooks_title_selectBooks%": "Select Books",
   "%selectMultipleProjects_title_selectProjects%": "Select Projects",
   "%selectProject_title%": "Select Project",

extensions/src/platform-get-resources/contributions/localizedStrings.json

@@ -2,27 +2,6 @@
   "metadata": {},
   "localizedStrings": {
     "en": {
-      "%resources_action%": "Action",
-      "%resources_dialog_subtitle%": "Add resources to Home",
-      "%resources_dialog_title%": "Get Resources",
-      "%resources_filterInput%": "Search by name, language, type",
-      "%resources_fullName%": "Full Name",
-      "%resources_get%": "Get",
-      "%resources_installed%": "Installed",
-      "%resources_language%": "Language",
-      "%resources_languageFilter%": "Filter by language",
-      "%resources_loadingResources%": "Loading resources...",
-      "%resources_noResults%": "No results found",
-      "%resources_open%": "Open",
-      "%resources_remove%": "Remove",
-      "%resources_size%": "Size",
-      "%resources_type%": "Type",
-      "%resources_type_DBL%": "DBL Resource",
-      "%resources_type_ER%": "Enhanced Resource",
-      "%resources_type_SLR%": "Source Language Text",
-      "%resources_type_XR%": "XML Resource",
-      "%resources_type_unknown%": "Unknown resource type",
-      "%resources_update%": "Update",
       "%mainMenu_openGetResources%": "Get Resources"
     }
   }

extensions/src/platform-get-resources/src/get-resources.web-view.tsx

@@ -1,7 +1,6 @@
 import { WebViewProps } from '@papi/core';
 import papi from '@papi/frontend';
 import { useData, useDataProvider, useLocalizedStrings } from '@papi/frontend/react';
-import type { ResourceType } from 'platform-bible-utils';
 import { FilterableResourceList, FILTERABLE_RESOURCE_LIST_STRING_KEYS } from 'platform-bible-react';
 
 globalThis.webViewComponent = function GetResourcesDialog({ useWebViewState }: WebViewProps) {
@@ -13,24 +12,24 @@ globalThis.webViewComponent = function GetResourcesDialog({ useWebViewState }: W
     'platformGetResources.dblResourcesProvider',
   ).DblResources(undefined, []);
 
-  const [typeFilter, setTypeFilter] = useWebViewState<ResourceType[]>('typeFilter', [
+  const [selectedTypes, setSelectedTypes] = useWebViewState<string[]>('typeFilter', [
     'DBLResource',
   ]);
 
-  const [languageFilter, setLanguageFilter] = useWebViewState<string[]>('languageFilter', []);
+  const [selectedLanguages, setSelectedLanguages] = useWebViewState<string[]>('languageFilter', []);
 
   const openResource = (projectId: string) =>
     papi.commands.sendCommand('platformScriptureEditor.openResourceViewer', projectId);
 
   return (
     <FilterableResourceList
       localizedStrings={localizedStrings}
-      dblResources={dblResources}
-      isLoadingDblResources={isLoadingDblResources}
-      typeFilter={typeFilter}
-      setTypeFilter={setTypeFilter}
-      languageFilter={languageFilter}
-      setLanguageFilter={setLanguageFilter}
+      resources={dblResources}
+      isLoadingResources={isLoadingDblResources}
+      selectedTypes={selectedTypes}
+      setSelectedTypes={setSelectedTypes}
+      selectedLanguages={selectedLanguages}
+      setSelectedLanguages={setSelectedLanguages}
       openResource={openResource}
       installResource={dblResourcesProvider?.installDblResource}
       uninstallResource={dblResourcesProvider?.uninstallDblResource}

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

@@ -2,27 +2,6 @@
   "metadata": {},
   "localizedStrings": {
     "en": {
-      "%resources_action%": "Action",
-      "%resources_dialog_subtitle%": "",
-      "%resources_dialog_title%": "Home",
-      "%resources_filterInput%": "Search by name, language, type",
-      "%resources_fullName%": "Full Name",
-      "%resources_get%": "Get",
-      "%resources_installed%": "Installed",
-      "%resources_language%": "Language",
-      "%resources_languageFilter%": "Filter by language",
-      "%resources_loadingResources%": "Loading Projects and Resource",
-      "%resources_noResults%": "No results found",
-      "%resources_open%": "Open",
-      "%resources_remove%": "Remove",
-      "%resources_size%": "Size",
-      "%resources_type%": "Type",
-      "%resources_type_DBL%": "DBL Resource",
-      "%resources_type_ER%": "Enhanced Resource",
-      "%resources_type_SLR%": "Source Language Text",
-      "%resources_type_XR%": "XML Resource",
-      "%resources_type_unknown%": "Unknown resource type",
-      "%resources_update%": "Update",
       "%mainMenu_openHome%": "Home..."
     }
   }

extensions/src/platform-home/src/home.web-view.tsx

@@ -1,7 +1,6 @@
 import { WebViewProps } from '@papi/core';
 import papi from '@papi/frontend';
 import { useData, useDataProvider, useLocalizedStrings } from '@papi/frontend/react';
-import type { ResourceType } from 'platform-bible-utils';
 import { FilterableResourceList, FILTERABLE_RESOURCE_LIST_STRING_KEYS } from 'platform-bible-react';
 
 globalThis.webViewComponent = function GetResourcesDialog({ useWebViewState }: WebViewProps) {
@@ -13,24 +12,24 @@ globalThis.webViewComponent = function GetResourcesDialog({ useWebViewState }: W
     'platformGetResources.dblResourcesProvider',
   ).DblResources(undefined, []);
 
-  const [typeFilter, setTypeFilter] = useWebViewState<ResourceType[]>('typeFilter', [
+  const [selectedTypes, setSelectedTypes] = useWebViewState<string[]>('typeFilter', [
     'DBLResource',
   ]);
 
-  const [languageFilter, setLanguageFilter] = useWebViewState<string[]>('languageFilter', []);
+  const [selectedLanguages, setSelectedLanguages] = useWebViewState<string[]>('languageFilter', []);
 
   const openResource = (projectId: string) =>
     papi.commands.sendCommand('platformScriptureEditor.openResourceViewer', projectId);
 
   return (
     <FilterableResourceList
       localizedStrings={localizedStrings}
-      dblResources={dblResources}
-      isLoadingDblResources={isLoadingDblResources}
-      typeFilter={typeFilter}
-      setTypeFilter={setTypeFilter}
-      languageFilter={languageFilter}
-      setLanguageFilter={setLanguageFilter}
+      resources={dblResources}
+      isLoadingResources={isLoadingDblResources}
+      selectedTypes={selectedTypes}
+      setSelectedTypes={setSelectedTypes}
+      selectedLanguages={selectedLanguages}
+      setSelectedLanguages={setSelectedLanguages}
       openResource={openResource}
       installResource={dblResourcesProvider?.installDblResource}
       uninstallResource={dblResourcesProvider?.uninstallDblResource}

lib/platform-bible-react/dist/index.d.ts

@@ -439,8 +439,9 @@ export interface MultiSelectComboBoxProps {
 	customSelectedText?: string;
 	sortSelected?: boolean;
 	icon?: React$1.ReactNode;
+	className?: string;
 }
-export declare function MultiSelectComboBox({ entries, getEntriesCount, selected, onChange, placeholder, commandEmptyMessage, customSelectedText, sortSelected, icon, }: MultiSelectComboBoxProps): import("react/jsx-runtime").JSX.Element;
+export declare function MultiSelectComboBox({ entries, getEntriesCount, selected, onChange, placeholder, commandEmptyMessage, customSelectedText, sortSelected, icon, className, }: MultiSelectComboBoxProps): import("react/jsx-runtime").JSX.Element;
 export type TabKeyValueContent = {
 	key: string;
 	value: string;
@@ -1409,20 +1410,25 @@ export interface FooterProps {
  * @returns The rendered Footer component
  */
 export function Footer({ id, publisherDisplayName, fileSize, locales, versionHistory, }: FooterProps): import("react/jsx-runtime").JSX.Element;
+export interface FilterProps extends MultiSelectComboBoxProps {
+	badgesPlaceholder: string;
+}
+export declare function Filter({ entries, getEntriesCount, selected, onChange, placeholder, commandEmptyMessage, customSelectedText, sortSelected, icon, className, badgesPlaceholder, }: FilterProps): import("react/jsx-runtime").JSX.Element;
 export declare const FILTERABLE_RESOURCE_LIST_STRING_KEYS: LocalizeKey[];
 export type FilterableResourceListProps = {
 	localizedStrings: LanguageStrings;
-	dblResources: DblResourceData[];
-	isLoadingDblResources: boolean;
-	typeFilter: ResourceType[];
-	setTypeFilter: (stateValue: ResourceType[]) => void;
-	languageFilter: string[];
-	setLanguageFilter: (stateValue: string[]) => void;
+	resources: DblResourceData[];
+	isLoadingResources: boolean;
+	selectedTypes: string[];
+	setSelectedTypes: (stateValue: string[]) => void;
+	selectedLanguages: string[];
+	setSelectedLanguages: (stateValue: string[]) => void;
 	openResource: (projectId: string) => void;
 	installResource: ((uid: string) => Promise<void>) | undefined;
 	uninstallResource: ((uid: string) => Promise<void>) | undefined;
+	className?: string;
 };
-export declare function FilterableResourceList({ localizedStrings, dblResources, isLoadingDblResources, typeFilter, setTypeFilter, languageFilter, setLanguageFilter, openResource, installResource, uninstallResource, }: FilterableResourceListProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterableResourceList({ localizedStrings, resources, isLoadingResources, selectedTypes, setSelectedTypes, selectedLanguages, setSelectedLanguages, openResource, installResource, uninstallResource, className, }: FilterableResourceListProps): import("react/jsx-runtime").JSX.Element;
 declare const UI_LANGUAGE_SELECTOR_STRING_KEYS: readonly [
 	"%settings_uiLanguageSelector_selectFallbackLanguages%"
 ];