fix(settings/teams-integration): display error indication and help link KMCNG-2657

Author: amirch1

src/applications/settings-integration-settings-app/settings-integration-settings-app.module.ts

@@ -37,32 +37,34 @@ import { TeamsComponent } from './teams/teams.component';
 import { TeamsProfilesTableComponent } from './teams/profiles-table/profiles-table.component';
 import { TeamsNewProfileComponent } from './teams/new-profile/new-profile.component';
 import { EditTeamsProfileComponent } from './teams/edit-profile/edit-profile.component';
-import {TeamsUpdateProfileSecretComponent} from './teams/update-secret/update-secret.component';
+import { TeamsUpdateProfileSecretComponent } from './teams/update-secret/update-secret.component';
+import { LocalizationModule } from '@kaltura-ng/mc-shared';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    RouterModule.forChild(routing),
-    ReactiveFormsModule,
-    DropdownModule,
-    InputTextModule,
-    InputSwitchModule,
-    RadioButtonModule,
-    ButtonModule,
-    AreaBlockerModule,
-    TranslateModule,
-    AutoCompleteModule,
-    TooltipModule,
-    MenuModule,
-    InputTextareaModule,
-    PopupWidgetModule,
-    StickyModule,
-    CategoriesModule,
-    KMCPermissionsModule,
-    InputHelperModule,
-    KMCPermissionsModule,
-    TableModule
-  ],
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routing),
+        ReactiveFormsModule,
+        DropdownModule,
+        InputTextModule,
+        InputSwitchModule,
+        RadioButtonModule,
+        ButtonModule,
+        AreaBlockerModule,
+        TranslateModule,
+        AutoCompleteModule,
+        TooltipModule,
+        MenuModule,
+        InputTextareaModule,
+        PopupWidgetModule,
+        StickyModule,
+        CategoriesModule,
+        KMCPermissionsModule,
+        InputHelperModule,
+        KMCPermissionsModule,
+        TableModule,
+        LocalizationModule
+    ],
   declarations: [
     SettingsIntegrationSettingsComponent,
     AccountInfoComponent,

src/applications/settings-integration-settings-app/teams/profiles-table/profiles-table.component.html

@@ -40,8 +40,9 @@
                         </span>
                 </td>
                 <td class="kPrivacyContextLabel" [ngStyle]="{'width': '14%'}">
-                        <span class="kTableColumn">
+                        <span class="kTableColumn" >
                             {{profile.status === 'enabled' ? ('applications.settings.integrationSettings.zoom.enabled' | translate) : ('applications.settings.integrationSettings.zoom.disabled' | translate)}}
+                            <i *ngIf="profile.lastError" class="kIconInfo_Full kHelpTip" [kTooltip]="profile.lastError.message"></i>
                         </span>
                 </td>
 

src/applications/settings-integration-settings-app/teams/profiles-table/profiles-table.component.scss

@@ -12,7 +12,15 @@
     }
 
     .kPrivacyContextLabel {
-
+        .kHelpTip{
+            font-size: 15px;
+            margin-left: 4px;
+            cursor: pointer;
+            color: $kDandger;
+            &:hover{
+                color: $kGrayscale1;
+            }
+        }
     }
 
     .kActionsColumn {

src/applications/settings-integration-settings-app/teams/teams.component.html

@@ -11,6 +11,12 @@
       <div class="tableHolder">
           <kTeamsProfilesTable [_profiles]="_profiles" (onActionSelected)="_onActionSelected($event)"></kTeamsProfilesTable>
       </div>
+
+      <div class="errorsFound" *ngIf="_errorsFound">
+          <i class="kIconInfo_Full"></i>
+          <span>{{'applications.settings.integrationSettings.teams.error1' | translate}}</span>
+          <span class="link" (click)="openErrorsHelp()">{{'applications.settings.integrationSettings.teams.error2' | translate}}</span>
+      </div>
     </div>
 </k-area-blocker>
 

src/applications/settings-integration-settings-app/teams/teams.component.scss

@@ -38,5 +38,23 @@
         height: 100%;
         overflow-y: auto;
     }
+    .errorsFound {
+        display: flex;
+        align-items: center;
+        margin-top: 24px;
+        font-size: 14px;
+        color: $kGrayscale1;
+        gap: 4px;
+        i {
+            color: $kGrayscale3;
+            margin-right: 4px;
+        }
+        .link {
+            text-decoration: none;
+            color: $kPrimary;
+            cursor: pointer;
+            font-weight: normal;
+        }
+    }
 }
 

src/applications/settings-integration-settings-app/teams/teams.component.ts

@@ -27,6 +27,7 @@ export class TeamsComponent implements OnInit, OnDestroy {
     public _isBusy = false;
     public _kmcPermissions = KMCPermissions;
     public totalCount = 0;
+    public _errorsFound = false;
 
     @ViewChild('editProfile', {static: true}) editProfilePopup: PopupWidgetComponent;
     @ViewChild('updateSecretPopup', {static: true}) updateSecretPopup: PopupWidgetComponent;
@@ -165,6 +166,7 @@ export class TeamsComponent implements OnInit, OnDestroy {
                         this._updateAreaBlockerState(false, null);
                         this._profiles = response.objects || [];
                         this.totalCount = this._profiles.length;
+                        this._errorsFound = this._profiles.find(profile => profile.lastError?.message?.length) !== undefined;
                     }
                 },
                 error => {
@@ -232,6 +234,11 @@ export class TeamsComponent implements OnInit, OnDestroy {
        this._analytics.trackButtonClickEvent(ButtonType.Add, 'Teams_initiate_new_integration');
     }
 
+    public openErrorsHelp(): void {
+        this._analytics.trackButtonClickEvent(ButtonType.Browse, 'Teams_errors_guide');
+        this._browserService.openLink('https://knowledge.kaltura.com/help/kaltura-video-integration-with-teams#troubleshooting');
+    }
+
     private _updateAreaBlockerState(isBusy: boolean, areaBlocker: AreaBlockerMessage): void {
         this._logger.debug(`update areablocker state`, {isBusy, message: areaBlocker ? areaBlocker.message : null});
         this._isBusy = isBusy;

src/applications/settings-integration-settings-app/teams/teams.service.ts

@@ -44,6 +44,10 @@ export type TeamsIntegration = {
     settings?: TeamsIntegrationSettings;
     status?: 'enabled' | 'disabled';
     updatedAt?: Date;
+    lastError?: {
+        code: string,
+        message: string
+    }
 }
 
 export type LoadTeamsIntegrationResponse = {

src/i18n/en.json

@@ -3085,7 +3085,9 @@
                     "createUser": "Create new user based on teams user",
                     "secret": "Update Secret",
                     "update": "Update",
-                    "docLink": "Teams integration article"
+                    "docLink": "Teams integration article",
+                    "error1":"We've detected an error on at least one integration. For help in troubleshooting, ",
+                    "error2": "click here"
                 },
                 "webex": {
                     "title": "Webex integration",