Revise Settings Dialog with New UX Design (#1354)

assets/localization/en.json

@@ -49,11 +49,21 @@
   "%selectBooks_title_selectBooks%": "Select Books",
   "%selectMultipleProjects_title_selectProjects%": "Select Projects",
   "%selectProject_title%": "Select Project",
-  "%settings_defaultMessage_loadingSetting%": "Loading setting",
+  "%settings_defaultMessage_loadingOneSetting%": "Loading setting",
+  "%settings_defaultMessage_loadingSettings%": "Loading settings...",
+  "%settings_defaultMessage_noSettings%": "No settings",
+  "%settings_defaultMessage_noSettingComponent%": "No setting component",
+  "%settings_defaultMessage_noSettingsForThisProject%": "No settings available for this project.",
   "%settings_defaultSearchText_searchProject%": "Search Project Settings...",
   "%settings_defaultSearchText_searchUserSettings%": "Search User Settings...",
+  "%settings_errorMessages_invalidNumber%": "Invalid number",
+  "%settings_errorMessages_invalidJSON%": "Invalid JSON",
+  "%settings_errorMessages_invalidValue%": "Invalid value",
+  "%settings_sidebar_extensionsLabel%": "Extensions",
+  "%settings_sidebar_projectsComboBoxPlaceholder%": "Type or select project",
+  "%settings_sidebar_projectsLabel%": "Projects",
   "%settings_title_projectSettings%": "Project Settings",
-  "%settings_title_userSettings%": "User Settings",
+  "%settings_title%": "Settings",
   "%submitButton%": "Submit",
   "%scrollGroup_undefined%": "Ø",
   "%scrollGroup_0%": "A",

assets/localization/es.json

@@ -182,7 +182,7 @@
   "%settings_platform_verseRef_description%": "Referencia de Verso Actual para el Grupo de Desplazamiento A. Obsoleto - Por favor use `papi.scrollGroups` y `useWebViewScrollGroupScrRef`",
   "%settings_platform_verseRef_label%": "Referencia de Verso Actual para el Grupo de Desplazamiento A (Obsoleto)",
   "%settings_title_projectSettings%": "Configuración del Proyecto",
-  "%settings_title_userSettings%": "Configuración del Usuario",
+  "%settings_title%": "Configuración",
   "%some_localization_key%": "Esto es el texto en español para %some_localization_key%.",
   "%submitButton%": "Enviar",
   "%tab_aria_tab%": "Pestaña",

extensions/src/hello-world/contributions/menus.json

@@ -88,7 +88,7 @@
             "label": "%webView_openProjectSettings%",
             "group": "helloWorld.projectGroup",
             "order": 3,
-            "command": "platform.openProjectSettings"
+            "command": "platform.openSettings"
           }
         ]
       }

lib/papi-dts/papi.d.ts

@@ -2868,6 +2868,7 @@ declare module 'papi-shared-types' {
   import type IDataProvider from 'shared/models/data-provider.interface';
   import type ExtractDataProviderDataTypes from 'shared/models/extract-data-provider-data-types.model';
   import type { NetworkableObject } from 'shared/models/network-object.model';
+  import { WebViewId } from 'shared/models/web-view.model';
   /**
    * Function types for each command available on the papi. Each extension can extend this interface
    * to add commands that it registers on the papi with `papi.commands.registerCommand`.
@@ -2898,8 +2899,11 @@ declare module 'papi-shared-types' {
     'platform.quit': () => Promise<void>;
     /** Restart the application */
     'platform.restart': () => Promise<void>;
+    /** @deprecated 3 December 2024. Renamed to `platform.openSettings` */
     'platform.openProjectSettings': (webViewId: string) => Promise<void>;
+    /** @deprecated 3 December 2024. Renamed to `platform.openSettings` */
     'platform.openUserSettings': () => Promise<void>;
+    'platform.openSettings': (webViewId?: WebViewId) => Promise<void>;
     'test.addMany': (...nums: number[]) => number;
     'test.throwErrorExtensionHost': (message: string) => void;
   }

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

@@ -434,7 +434,7 @@ export type TabKeyValueContent = {
 	value: string;
 	content: React$1.ReactNode;
 };
-export type NavigationContentSearchProps = {
+export type TabNavigationContentSearchProps = {
 	/** List of values and keys for each tab this component should provide */
 	tabList: TabKeyValueContent[];
 	/** Handler to run when the value of the search bar changes */
@@ -448,7 +448,41 @@ export type NavigationContentSearchProps = {
 	/** Text direction ltr or rtl */
 	direction?: "ltr" | "rtl";
 };
-export function NavigationContentSearch({ tabList, onSearch, searchPlaceholder, headerTitle, isSearchBarFullWidth, direction, }: NavigationContentSearchProps): import("react/jsx-runtime").JSX.Element;
+declare function TabNavigationContentSearch({ tabList, onSearch, searchPlaceholder, headerTitle, isSearchBarFullWidth, direction, }: TabNavigationContentSearchProps): import("react/jsx-runtime").JSX.Element;
+export type SelectedSettingsSidebarItem = {
+	label: string;
+	projectId?: string;
+};
+export type ProjectInfo = {
+	projectId: string;
+	projectName: string;
+};
+export type SettingsSidebarProps = {
+	/** Optional id for testing */
+	id?: string;
+	/** Extension labels from contribution */
+	extensionLabels: string[];
+	/** Project names and ids */
+	projectInfo: ProjectInfo[];
+	/** Handler for selecting a sidebar item */
+	handleSelectSidebarItem: (key: string, projectId?: string) => void;
+	/** The current selected value in the sidebar */
+	selectedSidebarItem: SelectedSettingsSidebarItem;
+	/** Label for the group of extensions setting groups */
+	extensionsSidebarGroupLabel: string;
+	/** Label for the group of projects settings */
+	projectsSidebarGroupLabel: string;
+	/** Placeholder text for the button */
+	buttonPlaceholderText: string;
+};
+export function SettingsSidebar({ id, extensionLabels, projectInfo, handleSelectSidebarItem, selectedSidebarItem, extensionsSidebarGroupLabel, projectsSidebarGroupLabel, buttonPlaceholderText, }: SettingsSidebarProps): import("react/jsx-runtime").JSX.Element;
+export type SettingsSidebarContentSearchProps = SettingsSidebarProps & React$1.PropsWithChildren & {
+	/** Optional id for testing */
+	id?: string;
+	/** Handler to run when the value of the search bar changes */
+	onSearch: (searchQuery: string) => void;
+};
+export function SettingsSidebarContentSearch({ id, extensionLabels, projectInfo, children, handleSelectSidebarItem, selectedSidebarItem, onSearch, extensionsSidebarGroupLabel, projectsSidebarGroupLabel, buttonPlaceholderText, }: SettingsSidebarContentSearchProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Information (e.g., a checking error or some other type of "transient" annotation) about something
  * noteworthy at a specific place in an instance of the Scriptures.
@@ -683,8 +717,12 @@ export type ComboBoxProps<T> = {
 	/** Text label title for combobox */
 	/** List of available options for the dropdown menu */
 	options?: readonly T[];
-	/** Additional css classes to help with unique styling of the combo box */
+	/** @deprecated 3 December 2024. Renamed to {@link buttonClassName} */
 	className?: string;
+	/** Additional css classes to help with unique styling of the combo box button */
+	buttonClassName?: string;
+	/** Additional css classes to help with unique styling of the combo box popover */
+	popoverContentClassName?: string;
 	/**
 	 * The selected value that the combo box currently holds. Must be shallow equal to one of the
 	 * options entries.
@@ -718,7 +756,7 @@ export type Direction = "ltr" | "rtl";
  * Thanks to Shadcn for heavy inspiration and documentation
  * https://ui.shadcn.com/docs/components/combobox
  */
-export declare function ComboBox<T extends ComboBoxOption = ComboBoxOption>({ id, options, className, value, onChange, getOptionLabel, icon, buttonPlaceholder, textPlaceholder, commandEmptyMessage, buttonVariant, alignDropDown, dir, isDisabled, ...props }: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ComboBox<T extends ComboBoxOption = ComboBoxOption>({ id, options, className, buttonClassName, popoverContentClassName, value, onChange, getOptionLabel, icon, buttonPlaceholder, textPlaceholder, commandEmptyMessage, buttonVariant, alignDropDown, dir, isDisabled, ...props }: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
 export type MenuItemInfoBase = {
 	/** Text (displayable in the UI) as the name of the menu item */
 	label: string;
@@ -906,6 +944,7 @@ export type IconButtonProps = React$1.PropsWithChildren<{
  * https://mui.com/material-ui/getting-started/overview/
  */
 export declare function IconButton({ id, label, isDisabled, tooltip, isTooltipSuppressed, adjustMarginToAlignToEdge, size, className, onClick, children, }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the SearchBar component. */
 export type SearchBarProps = {
 	/**
 	 * Callback fired to handle the search query when button pressed
@@ -917,7 +956,7 @@ export type SearchBarProps = {
 	placeholder?: string;
 	/** Optional boolean to set the input base to full width */
 	isFullWidth?: boolean;
-	/** ClassName for the input */
+	/** Additional css classes to help with unique styling of the search bar */
 	className?: string;
 };
 export function SearchBar({ onSearch, placeholder, isFullWidth, className, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
@@ -1497,6 +1536,7 @@ export declare const usePromise: <T>(promiseFactoryCallback: (() => Promise<T>)
 export declare function cn(...inputs: ClassValue[]): string;
 
 export {
+	TabNavigationContentSearch as NavigationContentSearch,
 	sonner,
 };