From 9f0961aabfbfc0d28865ef1a1b0221290f44e419 Mon Sep 17 00:00:00 2001 From: Arthurk12 Date: Wed, 12 Feb 2025 11:16:47 -0300 Subject: [PATCH 1/5] fix(samples): invalid option in actions bar Fixes an invalid option index in the actions bar sample. --- .../src/sample-actions-bar-plugin/component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/sample-actions-bar-plugin/src/sample-actions-bar-plugin/component.tsx b/samples/sample-actions-bar-plugin/src/sample-actions-bar-plugin/component.tsx index fd09cc85..8c821345 100644 --- a/samples/sample-actions-bar-plugin/src/sample-actions-bar-plugin/component.tsx +++ b/samples/sample-actions-bar-plugin/src/sample-actions-bar-plugin/component.tsx @@ -54,7 +54,7 @@ function SampleActionsBarPlugin({ const toggleGroupItem: ActionsBarInterface = new ActionsBarToggleGroup({ title: 'Toggle', options: options.slice(0, 2), // Toggle groups can have more than 2 options - defaultOption: options[2], + defaultOption: options[1], onChange: (value, event) => { pluginLogger.info('The actions bar toggle group has changed', { value, event: event.nativeEvent }); }, From 6fc42b4cdbde72518f27bdb476971e87b4ef90fc Mon Sep 17 00:00:00 2001 From: Guilherme Leme Date: Wed, 9 Apr 2025 23:08:06 -0300 Subject: [PATCH 2/5] [issue-166] - add support fo svg in actions bar button --- .../src/sample-actions-bar-plugin/component.tsx | 11 ++++++++++- src/extensible-areas/actions-bar-item/component.ts | 8 ++++++-- src/extensible-areas/actions-bar-item/types.ts | 1 + 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/samples/sample-actions-bar-plugin/src/sample-actions-bar-plugin/component.tsx b/samples/sample-actions-bar-plugin/src/sample-actions-bar-plugin/component.tsx index 8c821345..b57ae55d 100644 --- a/samples/sample-actions-bar-plugin/src/sample-actions-bar-plugin/component.tsx +++ b/samples/sample-actions-bar-plugin/src/sample-actions-bar-plugin/component.tsx @@ -25,8 +25,17 @@ function SampleActionsBarPlugin({ useEffect(() => { const buttonToUserListItem: + // Sample of a button that uses a custom SVG for the button. ActionsBarInterface = new ActionsBarButton({ - icon: 'user', + icon: null, + customIconSvg: ( + + + + + + + ) as React.SVGProps, tooltip: 'This will log on the console.', onClick: () => { pluginLogger.info('The actions bar button from plugin was clicked'); diff --git a/src/extensible-areas/actions-bar-item/component.ts b/src/extensible-areas/actions-bar-item/component.ts index 62544aa8..99956777 100644 --- a/src/extensible-areas/actions-bar-item/component.ts +++ b/src/extensible-areas/actions-bar-item/component.ts @@ -38,6 +38,8 @@ class ActionsBarItem implements ActionsBarInterface { export class ActionsBarButton extends ActionsBarItem { icon: string; + customIconSvg?: React.SVGProps; + tooltip: string; onClick: () => void; @@ -46,7 +48,8 @@ export class ActionsBarButton extends ActionsBarItem { * Returns object to be used in the setter for action bar. In this case, * a button. * - * @param icon - icon to be used in the button for the action bar + * @param icon - icon to be used in the button for the action bar (takes priority) + * @param customIconSvg - svg to be used in the button icon for the action bar (not required) * @param tooltip - tooltip to be displayed when hovering the button * @param onClick - function to be called when clicking the button * @param position - position that this button will be displayed, see {@link ActionsBarPosition} @@ -54,10 +57,11 @@ export class ActionsBarButton extends ActionsBarItem { * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5) */ constructor({ - id, icon = '', tooltip = '', onClick = () => {}, position = ActionsBarPosition.RIGHT, + id, icon = '', customIconSvg, tooltip = '', onClick = () => {}, position = ActionsBarPosition.RIGHT, }: ActionsBarButtonProps) { super({ id, type: ActionsBarItemType.BUTTON, position }); this.icon = icon; + this.customIconSvg = customIconSvg; this.tooltip = tooltip; this.onClick = onClick; } diff --git a/src/extensible-areas/actions-bar-item/types.ts b/src/extensible-areas/actions-bar-item/types.ts index 19870f1e..579a6e37 100644 --- a/src/extensible-areas/actions-bar-item/types.ts +++ b/src/extensible-areas/actions-bar-item/types.ts @@ -18,6 +18,7 @@ export interface ActionsBarItemProps { export interface ActionsBarButtonProps { id?: string; icon: string; + customIconSvg?: React.SVGProps; tooltip: string; position: ActionsBarPosition; onClick: () => void; From 3ac768d1c105b692e32ee2a6f5b2eaf2cb584385 Mon Sep 17 00:00:00 2001 From: Guilherme Leme Date: Thu, 10 Apr 2025 10:12:29 -0300 Subject: [PATCH 3/5] [issue-166] - change the svg to be a type union --- .../src/sample-actions-bar-plugin/component.tsx | 3 +-- src/extensible-areas/actions-bar-item/component.ts | 11 ++++------- src/extensible-areas/actions-bar-item/types.ts | 3 +-- 3 files changed, 6 insertions(+), 11 deletions(-) diff --git a/samples/sample-actions-bar-plugin/src/sample-actions-bar-plugin/component.tsx b/samples/sample-actions-bar-plugin/src/sample-actions-bar-plugin/component.tsx index b57ae55d..c6b1c215 100644 --- a/samples/sample-actions-bar-plugin/src/sample-actions-bar-plugin/component.tsx +++ b/samples/sample-actions-bar-plugin/src/sample-actions-bar-plugin/component.tsx @@ -27,8 +27,7 @@ function SampleActionsBarPlugin({ const buttonToUserListItem: // Sample of a button that uses a custom SVG for the button. ActionsBarInterface = new ActionsBarButton({ - icon: null, - customIconSvg: ( + icon: ( diff --git a/src/extensible-areas/actions-bar-item/component.ts b/src/extensible-areas/actions-bar-item/component.ts index 99956777..e4a5a127 100644 --- a/src/extensible-areas/actions-bar-item/component.ts +++ b/src/extensible-areas/actions-bar-item/component.ts @@ -36,9 +36,7 @@ class ActionsBarItem implements ActionsBarInterface { } export class ActionsBarButton extends ActionsBarItem { - icon: string; - - customIconSvg?: React.SVGProps; + icon: string | React.SVGProps; tooltip: string; @@ -48,8 +46,8 @@ export class ActionsBarButton extends ActionsBarItem { * Returns object to be used in the setter for action bar. In this case, * a button. * - * @param icon - icon to be used in the button for the action bar (takes priority) - * @param customIconSvg - svg to be used in the button icon for the action bar (not required) + * @param icon - icon to be used in the button for the action bar - it can be the iconName + * from BigbBlueButton or an svg * @param tooltip - tooltip to be displayed when hovering the button * @param onClick - function to be called when clicking the button * @param position - position that this button will be displayed, see {@link ActionsBarPosition} @@ -57,11 +55,10 @@ export class ActionsBarButton extends ActionsBarItem { * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5) */ constructor({ - id, icon = '', customIconSvg, tooltip = '', onClick = () => {}, position = ActionsBarPosition.RIGHT, + id, icon = '', tooltip = '', onClick = () => {}, position = ActionsBarPosition.RIGHT, }: ActionsBarButtonProps) { super({ id, type: ActionsBarItemType.BUTTON, position }); this.icon = icon; - this.customIconSvg = customIconSvg; this.tooltip = tooltip; this.onClick = onClick; } diff --git a/src/extensible-areas/actions-bar-item/types.ts b/src/extensible-areas/actions-bar-item/types.ts index 579a6e37..c7d6604d 100644 --- a/src/extensible-areas/actions-bar-item/types.ts +++ b/src/extensible-areas/actions-bar-item/types.ts @@ -17,8 +17,7 @@ export interface ActionsBarItemProps { export interface ActionsBarButtonProps { id?: string; - icon: string; - customIconSvg?: React.SVGProps; + icon: string | React.SVGProps; tooltip: string; position: ActionsBarPosition; onClick: () => void; From 88bd24fa3bca1544f5a097aec8bbaa0050dacfd6 Mon Sep 17 00:00:00 2001 From: Guilherme Leme Date: Thu, 10 Apr 2025 16:37:46 -0300 Subject: [PATCH 4/5] [issue-166] - changes in review --- .../sample-actions-bar-plugin/component.tsx | 18 ++++++++++-------- .../actions-bar-item/component.ts | 5 +++-- src/extensible-areas/actions-bar-item/types.ts | 15 ++++++++++++++- 3 files changed, 27 insertions(+), 11 deletions(-) diff --git a/samples/sample-actions-bar-plugin/src/sample-actions-bar-plugin/component.tsx b/samples/sample-actions-bar-plugin/src/sample-actions-bar-plugin/component.tsx index c6b1c215..1e576205 100644 --- a/samples/sample-actions-bar-plugin/src/sample-actions-bar-plugin/component.tsx +++ b/samples/sample-actions-bar-plugin/src/sample-actions-bar-plugin/component.tsx @@ -27,14 +27,16 @@ function SampleActionsBarPlugin({ const buttonToUserListItem: // Sample of a button that uses a custom SVG for the button. ActionsBarInterface = new ActionsBarButton({ - icon: ( - - - - - - - ) as React.SVGProps, + icon: { + svgContent: ( + + + + + + + ) as React.SVGProps, + }, tooltip: 'This will log on the console.', onClick: () => { pluginLogger.info('The actions bar button from plugin was clicked'); diff --git a/src/extensible-areas/actions-bar-item/component.ts b/src/extensible-areas/actions-bar-item/component.ts index e4a5a127..598771c4 100644 --- a/src/extensible-areas/actions-bar-item/component.ts +++ b/src/extensible-areas/actions-bar-item/component.ts @@ -9,6 +9,7 @@ import { SelectOption, ToggleGroupOption, ActionsBarToggleGroupProps, + ActionsBarIconType, } from './types'; // ActionsBar Extensible Area @@ -36,7 +37,7 @@ class ActionsBarItem implements ActionsBarInterface { } export class ActionsBarButton extends ActionsBarItem { - icon: string | React.SVGProps; + icon: ActionsBarIconType; tooltip: string; @@ -55,7 +56,7 @@ export class ActionsBarButton extends ActionsBarItem { * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5) */ constructor({ - id, icon = '', tooltip = '', onClick = () => {}, position = ActionsBarPosition.RIGHT, + id, icon, tooltip = '', onClick = () => {}, position = ActionsBarPosition.RIGHT, }: ActionsBarButtonProps) { super({ id, type: ActionsBarItemType.BUTTON, position }); this.icon = icon; diff --git a/src/extensible-areas/actions-bar-item/types.ts b/src/extensible-areas/actions-bar-item/types.ts index c7d6604d..625ccf61 100644 --- a/src/extensible-areas/actions-bar-item/types.ts +++ b/src/extensible-areas/actions-bar-item/types.ts @@ -15,9 +15,22 @@ export interface ActionsBarItemProps { type: ActionsBarItemType; } +export interface ActionsBarButtonIconSvg { + svgContent: React.SVGProps; +} + +export interface ActionsBarButtonIconName { + /** + * Default icon name defined by BBB (see options there). + */ + iconName: string; +} + +export type ActionsBarIconType = ActionsBarButtonIconSvg | ActionsBarButtonIconName + export interface ActionsBarButtonProps { id?: string; - icon: string | React.SVGProps; + icon: ActionsBarIconType; tooltip: string; position: ActionsBarPosition; onClick: () => void; From 6d731e18810246ca46b64fb34ab5f9b11170441b Mon Sep 17 00:00:00 2001 From: Guilherme Leme Date: Fri, 25 Apr 2025 16:11:31 -0300 Subject: [PATCH 5/5] [add-testing-support-boilerplate] - correct possible ts problems --- .../domain/settings/plugin-settings/hooks.ts | 4 ++-- .../domain/settings/plugin-settings/types.ts | 10 ++++++++++ .../domain/settings/plugin-settings/utils.ts | 4 ++-- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/data-consumption/domain/settings/plugin-settings/hooks.ts b/src/data-consumption/domain/settings/plugin-settings/hooks.ts index 25ae56bd..2852e60b 100644 --- a/src/data-consumption/domain/settings/plugin-settings/hooks.ts +++ b/src/data-consumption/domain/settings/plugin-settings/hooks.ts @@ -1,9 +1,9 @@ import { useCustomSubscription } from '../../shared/custom-subscription/hooks'; import { PLUGIN_SETTINGS_QUERY } from './queries'; -import { PluginSettingsResponseFromGraphqlWrapper } from './types'; +import { PluginSettingsResponseFromGraphqlWrapper, UsePluginSettingsWrapperFunction } from './types'; import { filterPluginSpecificSettings } from './utils'; -export const usePluginSettings = ( +export const usePluginSettings: UsePluginSettingsWrapperFunction = ( pluginName: string, ) => filterPluginSpecificSettings(useCustomSubscription< PluginSettingsResponseFromGraphqlWrapper>(PLUGIN_SETTINGS_QUERY, { diff --git a/src/data-consumption/domain/settings/plugin-settings/types.ts b/src/data-consumption/domain/settings/plugin-settings/types.ts index 8c6491ef..38b41344 100644 --- a/src/data-consumption/domain/settings/plugin-settings/types.ts +++ b/src/data-consumption/domain/settings/plugin-settings/types.ts @@ -13,3 +13,13 @@ export interface PluginSettingsResponseFromGraphqlWrapper { export type UsePluginSettingsFunction = () => GraphqlResponseWrapper< PluginSettingsData >; + +export type UsePluginSettingsWrapperFunction = (pluginName: string) => GraphqlResponseWrapper< + PluginSettingsData +>; + +export type FilterPluginSpecificSettingsFunction = ( + completeSettings: GraphqlResponseWrapper, +) => GraphqlResponseWrapper< + PluginSettingsData +> diff --git a/src/data-consumption/domain/settings/plugin-settings/utils.ts b/src/data-consumption/domain/settings/plugin-settings/utils.ts index 8586fd6d..9bd5074a 100644 --- a/src/data-consumption/domain/settings/plugin-settings/utils.ts +++ b/src/data-consumption/domain/settings/plugin-settings/utils.ts @@ -1,7 +1,7 @@ import { GraphqlResponseWrapper } from '../../../../core'; -import { PluginSettingsResponseFromGraphqlWrapper } from './types'; +import { PluginSettingsResponseFromGraphqlWrapper, FilterPluginSpecificSettingsFunction } from './types'; -export const filterPluginSpecificSettings = ( +export const filterPluginSpecificSettings: FilterPluginSpecificSettingsFunction = ( completeSettings: GraphqlResponseWrapper, ) => { const pluginSettings = completeSettings