From af8b1bedf88e9f4e4cbfa207f35723c6227f3b49 Mon Sep 17 00:00:00 2001
From: Guilherme Pereira Leme <69865537+GuiLeme@users.noreply.github.com>
Date: Mon, 21 Oct 2024 13:21:25 -0300
Subject: [PATCH] [update-generic-content] - Added logic to update plugin's
 generic content without updating the ID of the extensible area. (#125)

---
 .../action-button-dropdown-item/component.ts      |  5 ++++-
 .../action-button-dropdown-item/types.ts          |  1 +
 .../actions-bar-item/component.ts                 |  5 ++++-
 src/extensible-areas/actions-bar-item/types.ts    |  1 +
 .../audio-settings-dropdown-item/component.ts     |  5 ++++-
 .../audio-settings-dropdown-item/types.ts         |  1 +
 .../camera-settings-dropdown-item/component.ts    |  5 ++++-
 .../camera-settings-dropdown-item/types.ts        |  1 +
 src/extensible-areas/floating-window/component.ts |  4 ++++
 src/extensible-areas/floating-window/types.ts     |  1 +
 .../generic-content-item/component.ts             | 10 ++++++++--
 .../generic-content-item/types.ts                 |  2 ++
 src/extensible-areas/nav-bar-item/component.ts    | 10 ++++++++--
 src/extensible-areas/nav-bar-item/types.ts        |  2 ++
 .../options-dropdown-item/component.ts            |  5 ++++-
 .../options-dropdown-item/types.ts                |  1 +
 .../presentation-dropdown-item/component.ts       |  5 ++++-
 .../presentation-dropdown-item/types.ts           |  1 +
 .../presentation-toolbar-item/component.ts        |  9 ++++++---
 .../presentation-toolbar-item/types.ts            |  1 +
 .../screenshare-helper-item/component.ts          |  5 ++++-
 .../screenshare-helper-item/types.ts              |  1 +
 .../user-camera-dropdown-item/component.ts        |  5 ++++-
 .../user-camera-dropdown-item/types.ts            |  1 +
 .../user-camera-helper-item/component.ts          |  5 ++++-
 .../user-camera-helper-item/types.ts              |  1 +
 .../user-list-dropdown-item/component.ts          | 15 ++++++++++++---
 .../user-list-dropdown-item/types.ts              |  3 +++
 .../component.ts                                  | 10 ++++++++--
 .../types.ts                                      |  2 ++
 30 files changed, 102 insertions(+), 21 deletions(-)

diff --git a/src/extensible-areas/action-button-dropdown-item/component.ts b/src/extensible-areas/action-button-dropdown-item/component.ts
index d01931bf..d3e70587 100644
--- a/src/extensible-areas/action-button-dropdown-item/component.ts
+++ b/src/extensible-areas/action-button-dropdown-item/component.ts
@@ -32,8 +32,11 @@ export class ActionButtonDropdownOption implements ActionButtonDropdownInterface
    * @returns the option to be displayed in the action button dropdown
    */
   constructor({
-    label = '', icon = '', tooltip = '', allowed = true, onClick = () => {},
+    id, label = '', icon = '', tooltip = '', allowed = true, onClick = () => {},
   }: ActionButtonDropdownOptionProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.icon = icon;
     this.tooltip = tooltip;
diff --git a/src/extensible-areas/action-button-dropdown-item/types.ts b/src/extensible-areas/action-button-dropdown-item/types.ts
index 9a558f9e..f1983abc 100644
--- a/src/extensible-areas/action-button-dropdown-item/types.ts
+++ b/src/extensible-areas/action-button-dropdown-item/types.ts
@@ -7,6 +7,7 @@ export interface ActionButtonDropdownInterface extends PluginProvidedUiItemDescr
 }
 
 export interface ActionButtonDropdownOptionProps {
+  id?: string;
   label: string;
   icon: string;
   tooltip: string;
diff --git a/src/extensible-areas/actions-bar-item/component.ts b/src/extensible-areas/actions-bar-item/component.ts
index 5e03d63b..26d3e352 100644
--- a/src/extensible-areas/actions-bar-item/component.ts
+++ b/src/extensible-areas/actions-bar-item/component.ts
@@ -30,8 +30,11 @@ export class ActionsBarButton implements ActionsBarInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
    */
   constructor({
-    icon = '', tooltip = '', onClick = () => {}, position = ActionsBarPosition.RIGHT,
+    id, icon = '', tooltip = '', onClick = () => {}, position = ActionsBarPosition.RIGHT,
   }: ActionsBarButtonProps) {
+    if (id) {
+      this.id = id;
+    }
     this.icon = icon;
     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 f08250d9..e27624f6 100644
--- a/src/extensible-areas/actions-bar-item/types.ts
+++ b/src/extensible-areas/actions-bar-item/types.ts
@@ -9,6 +9,7 @@ export interface ActionsBarInterface extends PluginProvidedUiItemDescriptor{
 }
 
 export interface ActionsBarButtonProps {
+  id?: string;
   icon: string;
   tooltip: string;
   position: ActionsBarPosition;
diff --git a/src/extensible-areas/audio-settings-dropdown-item/component.ts b/src/extensible-areas/audio-settings-dropdown-item/component.ts
index 404359a8..2f666f14 100644
--- a/src/extensible-areas/audio-settings-dropdown-item/component.ts
+++ b/src/extensible-areas/audio-settings-dropdown-item/component.ts
@@ -27,8 +27,11 @@ export class AudioSettingsDropdownOption implements AudioSettingsDropdownInterfa
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
    */
   constructor({
-    label = '', icon = '', onClick = () => {},
+    id, label = '', icon = '', onClick = () => {},
   }: AudioSettingsDropdownOptionProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.icon = icon;
     this.onClick = onClick;
diff --git a/src/extensible-areas/audio-settings-dropdown-item/types.ts b/src/extensible-areas/audio-settings-dropdown-item/types.ts
index 6ad5e15f..35deaa11 100644
--- a/src/extensible-areas/audio-settings-dropdown-item/types.ts
+++ b/src/extensible-areas/audio-settings-dropdown-item/types.ts
@@ -11,6 +11,7 @@ export interface AudioSettingsDropdownInterface extends PluginProvidedUiItemDesc
 }
 
 export interface AudioSettingsDropdownOptionProps {
+  id?: string;
   label: string;
   icon: string;
   onClick: () => void;
diff --git a/src/extensible-areas/camera-settings-dropdown-item/component.ts b/src/extensible-areas/camera-settings-dropdown-item/component.ts
index d9653776..3b8b5e30 100644
--- a/src/extensible-areas/camera-settings-dropdown-item/component.ts
+++ b/src/extensible-areas/camera-settings-dropdown-item/component.ts
@@ -27,8 +27,11 @@ export class CameraSettingsDropdownOption implements CameraSettingsDropdownInter
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    label = '', icon = '', onClick = () => {},
+    id, label = '', icon = '', onClick = () => {},
   }: CameraSettingsDropdownOptionProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.icon = icon;
     this.onClick = onClick;
diff --git a/src/extensible-areas/camera-settings-dropdown-item/types.ts b/src/extensible-areas/camera-settings-dropdown-item/types.ts
index dab954db..f901ae8f 100644
--- a/src/extensible-areas/camera-settings-dropdown-item/types.ts
+++ b/src/extensible-areas/camera-settings-dropdown-item/types.ts
@@ -11,6 +11,7 @@ export interface CameraSettingsDropdownInterface extends PluginProvidedUiItemDes
 }
 
 export interface CameraSettingsDropdownOptionProps {
+  id?: string;
   label: string;
   icon: string;
   onClick: () => void;
diff --git a/src/extensible-areas/floating-window/component.ts b/src/extensible-areas/floating-window/component.ts
index 8b075abb..6b86e76b 100644
--- a/src/extensible-areas/floating-window/component.ts
+++ b/src/extensible-areas/floating-window/component.ts
@@ -38,6 +38,7 @@ export class FloatingWindow implements FloatingWindowInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
+    id,
     top,
     left,
     movable,
@@ -45,6 +46,9 @@ export class FloatingWindow implements FloatingWindowInterface {
     boxShadow,
     contentFunction,
   }: FloatingWindowProps) {
+    if (id) {
+      this.id = id;
+    }
     this.top = top;
     this.left = left;
     this.movable = movable;
diff --git a/src/extensible-areas/floating-window/types.ts b/src/extensible-areas/floating-window/types.ts
index 1ec311aa..ecb56732 100644
--- a/src/extensible-areas/floating-window/types.ts
+++ b/src/extensible-areas/floating-window/types.ts
@@ -5,6 +5,7 @@ export interface FloatingWindowInterface extends PluginProvidedUiItemDescriptor
 }
 
 export interface FloatingWindowProps {
+  id?: string;
   top: number;
   left: number;
   movable: boolean;
diff --git a/src/extensible-areas/generic-content-item/component.ts b/src/extensible-areas/generic-content-item/component.ts
index 1e31be23..12170d36 100644
--- a/src/extensible-areas/generic-content-item/component.ts
+++ b/src/extensible-areas/generic-content-item/component.ts
@@ -21,8 +21,11 @@ export class GenericContentMainArea implements GenericContentInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    contentFunction,
+    id, contentFunction,
   }: GenericContentMainAreaProps) {
+    if (id) {
+      this.id = id;
+    }
     this.contentFunction = contentFunction;
     this.type = GenericContentType.MAIN_AREA;
   }
@@ -64,8 +67,11 @@ export class GenericContentSidekickArea implements GenericContentInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    contentFunction, name, section, buttonIcon, open,
+    id, contentFunction, name, section, buttonIcon, open,
   }: GenericContentSidekickAreaProps) {
+    if (id) {
+      this.id = id;
+    }
     this.contentFunction = contentFunction;
     this.name = name;
     this.section = section;
diff --git a/src/extensible-areas/generic-content-item/types.ts b/src/extensible-areas/generic-content-item/types.ts
index 34d9804c..46c05065 100644
--- a/src/extensible-areas/generic-content-item/types.ts
+++ b/src/extensible-areas/generic-content-item/types.ts
@@ -5,10 +5,12 @@ export interface GenericContentInterface extends PluginProvidedUiItemDescriptor
 }
 
 export interface GenericContentMainAreaProps {
+  id?: string;
   contentFunction: (element: HTMLElement) => ReactDOM.Root;
 }
 
 export interface GenericContentSidekickAreaProps {
+  id?: string;
   contentFunction: (element: HTMLElement) => ReactDOM.Root;
   name: string;
   section: string;
diff --git a/src/extensible-areas/nav-bar-item/component.ts b/src/extensible-areas/nav-bar-item/component.ts
index 6aa56af5..e769f320 100644
--- a/src/extensible-areas/nav-bar-item/component.ts
+++ b/src/extensible-areas/nav-bar-item/component.ts
@@ -42,9 +42,12 @@ export class NavBarButton implements NavBarInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    label = '', icon = '', tooltip = '', disabled = true, onClick = () => {},
+    id, label = '', icon = '', tooltip = '', disabled = true, onClick = () => {},
     position = NavBarItemPosition.RIGHT, hasSeparator = true,
   }: NavBarButtonProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.icon = icon;
     this.tooltip = tooltip;
@@ -84,9 +87,12 @@ export class NavBarInfo implements NavBarInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    label = '', position = NavBarItemPosition.RIGHT,
+    id, label = '', position = NavBarItemPosition.RIGHT,
     hasSeparator = true,
   }: NavBarInfoProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.type = NavBarItemType.INFO;
     this.position = position;
diff --git a/src/extensible-areas/nav-bar-item/types.ts b/src/extensible-areas/nav-bar-item/types.ts
index 965bbf87..4952503b 100644
--- a/src/extensible-areas/nav-bar-item/types.ts
+++ b/src/extensible-areas/nav-bar-item/types.ts
@@ -7,6 +7,7 @@ export interface NavBarInterface extends PluginProvidedUiItemDescriptor{
 }
 
 export interface NavBarButtonProps {
+  id?: string;
   label: string;
   icon: string;
   tooltip: string;
@@ -17,6 +18,7 @@ export interface NavBarButtonProps {
 }
 
 export interface NavBarInfoProps {
+  id?: string;
   label: string;
   hasSeparator: boolean;
   position: NavBarItemPosition;
diff --git a/src/extensible-areas/options-dropdown-item/component.ts b/src/extensible-areas/options-dropdown-item/component.ts
index edb994c2..20b0422c 100644
--- a/src/extensible-areas/options-dropdown-item/component.ts
+++ b/src/extensible-areas/options-dropdown-item/component.ts
@@ -27,8 +27,11 @@ export class OptionsDropdownOption implements OptionsDropdownInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    label = '', icon = '', onClick = () => {},
+    id, label = '', icon = '', onClick = () => {},
   }: OptionsDropdownOptionProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.icon = icon;
     this.onClick = onClick;
diff --git a/src/extensible-areas/options-dropdown-item/types.ts b/src/extensible-areas/options-dropdown-item/types.ts
index 444d87aa..d4d8ffd5 100644
--- a/src/extensible-areas/options-dropdown-item/types.ts
+++ b/src/extensible-areas/options-dropdown-item/types.ts
@@ -11,6 +11,7 @@ export interface OptionsDropdownInterface extends PluginProvidedUiItemDescriptor
 }
 
 export interface OptionsDropdownOptionProps {
+  id?: string;
   label: string;
   icon: string;
   onClick: () => void;
diff --git a/src/extensible-areas/presentation-dropdown-item/component.ts b/src/extensible-areas/presentation-dropdown-item/component.ts
index ab3c4165..210c98e4 100644
--- a/src/extensible-areas/presentation-dropdown-item/component.ts
+++ b/src/extensible-areas/presentation-dropdown-item/component.ts
@@ -28,8 +28,11 @@ export class PresentationDropdownOption implements PresentationDropdownInterface
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    label = '', icon = '', onClick = () => {},
+    id, label = '', icon = '', onClick = () => {},
   }: PresentationDropdownOptionProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.icon = icon;
     this.onClick = onClick;
diff --git a/src/extensible-areas/presentation-dropdown-item/types.ts b/src/extensible-areas/presentation-dropdown-item/types.ts
index ffaf3cf5..1553528b 100644
--- a/src/extensible-areas/presentation-dropdown-item/types.ts
+++ b/src/extensible-areas/presentation-dropdown-item/types.ts
@@ -11,6 +11,7 @@ export interface PresentationDropdownInterface extends PluginProvidedUiItemDescr
 }
 
 export interface PresentationDropdownOptionProps {
+  id?: string;
   label: string;
   icon: string;
   onClick: () => void;
diff --git a/src/extensible-areas/presentation-toolbar-item/component.ts b/src/extensible-areas/presentation-toolbar-item/component.ts
index 5ecf6fd2..f855c173 100644
--- a/src/extensible-areas/presentation-toolbar-item/component.ts
+++ b/src/extensible-areas/presentation-toolbar-item/component.ts
@@ -30,8 +30,11 @@ export class PresentationToolbarButton implements PresentationToolbarInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
    */
   constructor({
-    label = '', tooltip = '', onClick = () => {}, style = {},
+    id, label = '', tooltip = '', onClick = () => {}, style = {},
   }: PresentationToolbarButtonProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.tooltip = tooltip;
     this.onClick = onClick;
@@ -60,7 +63,7 @@ export class PresentationToolbarSpinner implements PresentationToolbarInterface
   }
 
   setItemId: (id: string) => void = (id: string) => {
-    this.id = `PresentationToolbarButton_${id}`;
+    this.id = `PresentationToolbarSpinner_${id}`;
   };
 }
 
@@ -80,6 +83,6 @@ export class PresentationToolbarSeparator implements PresentationToolbarInterfac
   }
 
   setItemId: (id: string) => void = (id: string) => {
-    this.id = `PresentationToolbarButton_${id}`;
+    this.id = `PresentationToolbarSeparator_${id}`;
   };
 }
diff --git a/src/extensible-areas/presentation-toolbar-item/types.ts b/src/extensible-areas/presentation-toolbar-item/types.ts
index 8bb611b5..14696558 100644
--- a/src/extensible-areas/presentation-toolbar-item/types.ts
+++ b/src/extensible-areas/presentation-toolbar-item/types.ts
@@ -6,6 +6,7 @@ import { PluginProvidedUiItemDescriptor } from '../base';
 export interface PresentationToolbarInterface extends PluginProvidedUiItemDescriptor {}
 
 export interface PresentationToolbarButtonProps {
+  id?: string;
   label: string;
   tooltip: string;
   style: React.CSSProperties;
diff --git a/src/extensible-areas/screenshare-helper-item/component.ts b/src/extensible-areas/screenshare-helper-item/component.ts
index 3cfa2eaf..01255aca 100644
--- a/src/extensible-areas/screenshare-helper-item/component.ts
+++ b/src/extensible-areas/screenshare-helper-item/component.ts
@@ -41,9 +41,12 @@ export class ScreenshareHelperButton implements ScreenshareHelperButtonInterface
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    label = '', icon = '', tooltip = '', disabled = true, onClick = () => {},
+    id, label = '', icon = '', tooltip = '', disabled = true, onClick = () => {},
     position = ScreenshareHelperItemPosition.TOP_RIGHT,
   }: ScreenshareHelperButtonProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.icon = icon;
     this.tooltip = tooltip;
diff --git a/src/extensible-areas/screenshare-helper-item/types.ts b/src/extensible-areas/screenshare-helper-item/types.ts
index 58e5afb2..8f907e5c 100644
--- a/src/extensible-areas/screenshare-helper-item/types.ts
+++ b/src/extensible-areas/screenshare-helper-item/types.ts
@@ -24,6 +24,7 @@ export interface ScreenshareHelperButtonInterface extends ScreenshareHelperInter
 }
 
 export interface ScreenshareHelperButtonProps {
+  id?: string;
   label?: string;
   icon: string;
   tooltip: string;
diff --git a/src/extensible-areas/user-camera-dropdown-item/component.ts b/src/extensible-areas/user-camera-dropdown-item/component.ts
index b1b44fda..62aab540 100644
--- a/src/extensible-areas/user-camera-dropdown-item/component.ts
+++ b/src/extensible-areas/user-camera-dropdown-item/component.ts
@@ -32,9 +32,12 @@ export class UserCameraDropdownOption implements UserCameraDropdownInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
    */
   constructor({
-    label = '', icon = '', onClick = () => {},
+    id, label = '', icon = '', onClick = () => {},
     displayFunction = () => true,
   }: UserCameraDropdownOptionProps) {
+    if (id) {
+      this.id = id;
+    }
     this.displayFunction = displayFunction;
     this.label = label;
     this.icon = icon;
diff --git a/src/extensible-areas/user-camera-dropdown-item/types.ts b/src/extensible-areas/user-camera-dropdown-item/types.ts
index a69a6dfe..6b9e3452 100644
--- a/src/extensible-areas/user-camera-dropdown-item/types.ts
+++ b/src/extensible-areas/user-camera-dropdown-item/types.ts
@@ -25,6 +25,7 @@ export interface UserCameraDropdownSeparatorProps {
 }
 
 export interface UserCameraDropdownOptionProps {
+  id?: string;
   label: string;
   icon: string;
   onClick: (args: OnclickFunctionCallbackArguments) => void;
diff --git a/src/extensible-areas/user-camera-helper-item/component.ts b/src/extensible-areas/user-camera-helper-item/component.ts
index 8a4d1a2c..a28d91ee 100644
--- a/src/extensible-areas/user-camera-helper-item/component.ts
+++ b/src/extensible-areas/user-camera-helper-item/component.ts
@@ -44,9 +44,12 @@ export class UserCameraHelperButton implements UserCameraHelperButtonInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    label = '', icon = '', tooltip = '', disabled = true, onClick = () => {},
+    id, label = '', icon = '', tooltip = '', disabled = true, onClick = () => {},
     position = UserCameraHelperItemPosition.TOP_RIGHT, displayFunction,
   }: UserCameraHelperButtonProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.icon = icon;
     this.tooltip = tooltip;
diff --git a/src/extensible-areas/user-camera-helper-item/types.ts b/src/extensible-areas/user-camera-helper-item/types.ts
index 50819dfa..5a5eb5fc 100644
--- a/src/extensible-areas/user-camera-helper-item/types.ts
+++ b/src/extensible-areas/user-camera-helper-item/types.ts
@@ -33,6 +33,7 @@ export interface UserCameraHelperButtonInterface extends UserCameraHelperInterfa
 }
 
 export interface UserCameraHelperButtonProps {
+  id?: string;
   label?: string;
   icon: string;
   tooltip: string;
diff --git a/src/extensible-areas/user-list-dropdown-item/component.ts b/src/extensible-areas/user-list-dropdown-item/component.ts
index c9b52e27..a217db16 100644
--- a/src/extensible-areas/user-list-dropdown-item/component.ts
+++ b/src/extensible-areas/user-list-dropdown-item/component.ts
@@ -122,9 +122,12 @@ export class UserListDropdownFixedContentInformation implements UserListDropdown
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    label = '', icon = '', iconRight = '', allowed = true,
+    id, label = '', icon = '', iconRight = '', allowed = true,
     userId = '', textColor = '',
   }: UserListDropdownFixedContentInformationProps) {
+    if (id) {
+      this.id = id;
+    }
     this.userId = userId;
     this.label = label;
     this.icon = icon;
@@ -168,9 +171,12 @@ implements UserListDropdownInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    contentFunction, allowed = true,
+    id, contentFunction, allowed = true,
     userId = '',
   }: UserListDropdownGenericContentInformationProps) {
+    if (id) {
+      this.id = id;
+    }
     this.userId = userId;
     this.allowed = allowed;
     this.contentFunction = contentFunction;
@@ -209,8 +215,11 @@ export class UserListDropdownTitleAction implements UserListDropdownInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    icon = '', userId = '', onClick, tooltip,
+    id, icon = '', userId = '', onClick, tooltip,
   }: UserListDropdownTitleActionProps) {
+    if (id) {
+      this.id = id;
+    }
     this.userId = userId;
     this.icon = icon;
     this.tooltip = tooltip;
diff --git a/src/extensible-areas/user-list-dropdown-item/types.ts b/src/extensible-areas/user-list-dropdown-item/types.ts
index 164b581e..55ebaf72 100644
--- a/src/extensible-areas/user-list-dropdown-item/types.ts
+++ b/src/extensible-areas/user-list-dropdown-item/types.ts
@@ -27,12 +27,14 @@ export interface UserListDropdownSeparatorProps {
 }
 
 export interface UserListDropdownGenericContentInformationProps {
+  id?: string;
   contentFunction: (element: HTMLElement) => void;
   allowed: boolean;
   userId: string;
 }
 
 export interface UserListDropdownFixedContentInformationProps {
+  id?: string;
   label: string;
   icon?: string;
   iconRight?: string;
@@ -46,6 +48,7 @@ export interface UserListDropdownTitleActionOnClickArguments {
 }
 
 export interface UserListDropdownTitleActionProps {
+  id?: string;
   tooltip: string;
   icon: string;
   userId: string;
diff --git a/src/extensible-areas/user-list-item-additional-information/component.ts b/src/extensible-areas/user-list-item-additional-information/component.ts
index 9ca16199..22ad7f1d 100644
--- a/src/extensible-areas/user-list-item-additional-information/component.ts
+++ b/src/extensible-areas/user-list-item-additional-information/component.ts
@@ -27,8 +27,11 @@ export class UserListItemIcon implements UserListItemAdditionalInformationInterf
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    icon = '', userId = '',
+    id, icon = '', userId = '',
   }: UserListItemIconProps) {
+    if (id) {
+      this.id = id;
+    }
     this.icon = icon;
     this.userId = userId;
     this.type = UserListItemAdditionalInformationType.ICON;
@@ -63,8 +66,11 @@ export class UserListItemLabel implements UserListItemAdditionalInformationInter
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    icon = '', userId = '', label = '',
+    id, icon = '', userId = '', label = '',
   }: UserListItemLabelProps) {
+    if (id) {
+      this.id = id;
+    }
     this.icon = icon;
     this.label = label;
     this.userId = userId;
diff --git a/src/extensible-areas/user-list-item-additional-information/types.ts b/src/extensible-areas/user-list-item-additional-information/types.ts
index 7d44e79f..f4ce96c9 100644
--- a/src/extensible-areas/user-list-item-additional-information/types.ts
+++ b/src/extensible-areas/user-list-item-additional-information/types.ts
@@ -12,11 +12,13 @@ export interface UserListItemAdditionalInformationInterface extends PluginProvid
   userId: string;
 }
 export interface UserListItemIconProps {
+  id?: string;
   userId: string;
   icon: string;
 }
 
 export interface UserListItemLabelProps {
+  id?: string;
   userId: string;
   icon: string;
   label: string;