fix(FEC-12792): UppperBarMangager.update() & sidePangesManager.update() API fails sometimes

.eslintrc

@@ -6,12 +6,11 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended"
   ],
-  "plugins": ["@typescript-eslint", "prettier"],
+  "plugins": ["@typescript-eslint"],
   "rules": {
     "react/prefer-stateless-function": "off",
-    "max-len": ["warn", { "code": 130 }],
+    "max-len": ["warn", { "code": 160 }],
     "eol-last": "off",
-    "prettier/prettier": "error",
     "@typescript-eslint/explicit-function-return-type": "warn",
     "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/no-unused-vars": "error",

src/services/side-panels-manager/models/item-wrapper.tsx

@@ -1,15 +1,17 @@
 import { h, createRef, RefObject, FunctionalComponent, ComponentClass } from 'preact';
-import { KalturaPlayer } from 'kaltura-player-js';
+import { KalturaPlayer, PlaykitJS } from 'kaltura-player-js';
 import { PanelItemWrapper } from '../ui/panel-item-wrapper/panel-item-wrapper.component';
 import { PanelComponentProps, SidePanelItem } from './side-panel-item';
 import { UpperBarManager } from '../../upper-bar-manager/upper-bar-manager';
+import { pluginName } from '../../../ui-managers';
 
 /**
  * Panel item metadata
  * @internal
  */
 export class ItemWrapper {
   private static nextId = 0;
+  private static logger = PlaykitJS.getLogger(pluginName);
   public readonly id: number;
   public iconId: number | undefined;
   public readonly item: SidePanelItem;
@@ -58,7 +60,11 @@ export class ItemWrapper {
   }
 
   public update(): void {
-    this.panelItemComponentRef.current!.forceUpdate();
+    if (this.panelItemComponentRef.current) {
+      this.panelItemComponentRef.current.forceUpdate();
+    } else {
+      ItemWrapper.logger.warn(`Panel component of label: ${this.item.label} id: ${this.id} can not be force updated because the component ref is not set yet`);
+    }
   }
 
   private injectPanelComponent(): void {

src/services/upper-bar-manager/models/icon-model.ts

@@ -3,9 +3,12 @@ import { IconDto } from './icon-dto';
 import { IconWrapper } from '../ui/icon-wrapper/icon-wrapper.component';
 import { SvgIcon } from './svg-icon';
 import { KalturaPluginNames } from '../../../types/ui-managers-config';
+import { PlaykitJS } from 'kaltura-player-js';
+import { pluginName } from '../../../ui-managers';
 
 export class IconModel {
   private static nextId = 0;
+  private static logger = PlaykitJS.getLogger(pluginName);
   public readonly id: number;
   public label: KalturaPluginNames | string;
   public componentRef: RefObject<IconWrapper>;
@@ -22,6 +25,10 @@ export class IconModel {
   }
 
   public update(): void {
-    this.componentRef.current!.forceUpdate();
+    if (this.componentRef.current) {
+      this.componentRef.current.forceUpdate();
+    } else {
+      IconModel.logger.warn(`Icon component of label: ${this.label} id: ${this.id} can not be force updated because the component ref is not set yet`);
+    }
   }
 }