@microsoft/sp-component-base 1.23.1 → 1.24.0-beta.2

package/lib-esm/dataCollector/WebPartLoadDataCollector.js

@@ -0,0 +1,125 @@
+// Copyright (c) Microsoft. All rights reserved.
+// This file contains code for the WebPartLoadDataCollector. This class will collect webpart data on load
+// and upload it for monitoring purposes.
+import { _PerformanceLogger, _PerformanceDataDimensions } from '@msinternal/sp-telemetry';
+import { _CacheMissReason as CacheMissReason, CacheStatus } from './IWebPartLoadData';
+import { _BrowserUtilities } from '@microsoft/sp-core-library';
+const NOT_AVAILABLE = 'N/A';
+/**
+ * This is used internally to collect web part and adaptive card extension's module load, init, and render performances.
+ * This file moved from sp-webpart-base to not additional dependency to sp-adaptive-card-extension-base.
+ * @internal
+ */ export class WebPartLoadDataCollector {
+    static collect(manifest, webPartTag, pageContext) {
+        const getTime = (key)=>{
+            return _PerformanceLogger.readComponentBreakdown(webPartTag, key) || _PerformanceLogger.readTempData(`${webPartTag}.${key}`);
+        };
+        const start = getTime('start');
+        const moduleLoaded = getTime('modulesLoaded');
+        const initialized = getTime('init');
+        const end = getTime('end');
+        const isSpinnyShown = !!getTime('displaySpinner');
+        const isMultiGeo = Boolean(pageContext && pageContext.legacyPageContext && pageContext.legacyPageContext.isMultiGeoTenant);
+        let dataProvider = NOT_AVAILABLE;
+        let layoutID = NOT_AVAILABLE;
+        let webPartCacheHit = CacheStatus.NotAvailable;
+        let cacheMissReason = CacheMissReason.NotApplicable;
+        // Collect data for first-party web parts only. This ideally should be done outside of spfx.
+        // VSO#855246 Refactor WebPartLoadDataCollector to move out first-party only logging logic.
+        if (manifest.isInternal) {
+            const cacheHit = getTime('CacheHit');
+            const cacheMiss = getTime('CacheMiss');
+            const prefetechedData = getTime('prefetchedData');
+            const isCacheApplicable = Boolean(cacheHit || cacheMiss);
+            webPartCacheHit = isCacheApplicable ? cacheHit ? CacheStatus.True : CacheStatus.False : CacheStatus.NotAvailable;
+            cacheMissReason = WebPartLoadDataCollector._getCacheMissReason(cacheHit, getTime);
+            let dataProviderTime = _PerformanceLogger.now();
+            const layoutKey = _PerformanceDataDimensions.Layout;
+            const dataProviderKey = _PerformanceDataDimensions.DataProvider;
+            const perfBreakDown = _PerformanceLogger.readFullEUPLBreakDown();
+            // WebParts which have different layouts and dataproviders, will have perf marks such as
+            // webPartTag.dataProvider: [dataProviderName]
+            // webPartTag.Layout: [Layout]
+            // The logic below will extract the data provider and layout, and log them for perf measurements.
+            Object.keys(perfBreakDown).forEach((key)=>{
+                if (key.indexOf(webPartTag) > -1) {
+                    // We only have 1 layout
+                    if (layoutID === NOT_AVAILABLE && key.indexOf(layoutKey) > -1) {
+                        layoutID = key.split(layoutKey)[1];
+                    // Focus on primary data provider
+                    } else if (key.indexOf(dataProviderKey) > -1) {
+                        // Pick earliest data provider, in case there are multiple
+                        if (dataProvider === NOT_AVAILABLE || perfBreakDown[key] < dataProviderTime) {
+                            dataProvider = key.split(dataProviderKey)[1];
+                            dataProviderTime = perfBreakDown[key];
+                        }
+                    }
+                }
+            });
+            dataProvider = prefetechedData ? 'Prefetch' : dataProvider;
+        }
+        const webpartPerfFlights = _PerformanceLogger.getWebpartFlightsAndExperiments(webPartTag);
+        const syncRenderTime = this._getSyncRenderTime(layoutID, getTime);
+        const retVal = {
+            alias: manifest.alias,
+            isMultiGeo: isMultiGeo,
+            isInternal: manifest.isInternal,
+            isSpinnyShown: isSpinnyShown,
+            manifestId: manifest.id,
+            moduleLoadTime: Math.floor(moduleLoaded - start),
+            initTime: Math.floor(initialized - moduleLoaded),
+            renderTime: Math.floor(end - initialized),
+            syncRenderTime,
+            scenarioId: _PerformanceLogger.getScenarioId(),
+            isFullPage: _PerformanceLogger.fullPageLoad,
+            dataProvider,
+            layout: layoutID,
+            mySiteCacheHit: webPartCacheHit,
+            cacheMissReason,
+            flights: webpartPerfFlights,
+            storeAppId: manifest.storeAppId,
+            mpnId: manifest.mpnId,
+            componentDeveloperName: manifest.componentDeveloperName
+        };
+        retVal.teamsHosted = _BrowserUtilities.isTeamsHosted();
+        return retVal;
+    }
+    static _getSyncRenderTime(layoutID, getTime) {
+        let syncRenderTime = undefined;
+        syncRenderTime = Math.floor(getTime('syncRender') - getTime('getDataComplete'));
+        const postRenderCompleteTime = getTime('postRenderComplete');
+        const loadLayoutEnd = getTime('loadLayoutEnd');
+        const syncLayoutRenderComplete = getTime('syncLayoutRenderComplete');
+        if (loadLayoutEnd && syncLayoutRenderComplete) {
+            // render layout and items inside it
+            syncRenderTime = Math.floor(syncRenderTime + (syncLayoutRenderComplete - loadLayoutEnd));
+        }
+        if (postRenderCompleteTime) {
+            syncRenderTime = Math.floor(// transposeRow + transposeItems + render + syncPostRender
+            syncRenderTime + (postRenderCompleteTime - getTime(_PerformanceDataDimensions.Layout + layoutID)));
+        }
+        return syncRenderTime;
+    }
+    static _getCacheMissReason(cacheHit, getTime) {
+        if (cacheHit) {
+            return CacheMissReason.NotApplicable;
+        }
+        const mySiteCacheMissOnConfgMismatch = !!getTime('CacheMissConfigMismatch');
+        const mySiteCacheMissOnLateFlush = !!getTime('LateFlush');
+        const cachedWebPartNotFound = !!getTime('CachedWebPartNotFound');
+        const cacheExpired = !!getTime('CacheExpired');
+        let cacheMissReason = CacheMissReason.NotSpecified;
+        if (mySiteCacheMissOnConfgMismatch) {
+            cacheMissReason = CacheMissReason.CacheConfigMissmatch;
+        } else if (mySiteCacheMissOnLateFlush) {
+            cacheMissReason = CacheMissReason.LateFlush;
+        } else if (cachedWebPartNotFound) {
+            cacheMissReason = CacheMissReason.CachedItemNotFound;
+        } else if (cacheExpired) {
+            cacheMissReason = CacheMissReason.CacheExpired;
+        }
+        return cacheMissReason;
+    }
+}
+
+//# sourceMappingURL=./WebPartLoadDataCollector.js.map

package/{lib → lib-esm}/index.js

@@ -8,9 +8,9 @@
  * common across all client-side component types.
  *
  * @packagedocumentation
- */
-export { default as BaseComponent } from './BaseComponent';
+ */ export { default as BaseComponent } from './BaseComponent';
 export { default as BaseComponentContext } from './BaseComponentContext';
+export { default as RenderableComponentContext } from './RenderableComponentContext';
 export { default as DynamicDataProvider } from './DynamicDataProvider';
 export { default as DynamicDataSourceManager } from './DynamicDataSourceManager';
 export { default as DynamicProperty } from './DynamicProperty';
@@ -24,4 +24,5 @@ export { ensureIsolatedDomainUrl as _ensureIsolatedDomainUrl } from './EnsureIso
 export { WebPartLoadDataCollector as _WebPartLoadDataCollector } from './dataCollector/WebPartLoadDataCollector';
 export { _CacheMissReason } from './dataCollector/IWebPartLoadData';
 export { DeferredTeamsAppsClient as _DeferredTeamsAppsClient } from './teams/DeferredTeamsAppsClient';
-//# sourceMappingURL=index.js.map
+
+//# sourceMappingURL=./index.js.map

package/lib-esm/teams/DeferredTeamsAppsClient.js

@@ -0,0 +1,32 @@
+import { ServiceKey } from '@microsoft/sp-core-library';
+import { _QosMonitor } from '@microsoft/sp-diagnostics';
+/**
+ * @internal
+ */ export class DeferredTeamsAppsClient {
+    getClient() {
+        if (this._teamsAppsClient) {
+            return Promise.resolve(this._teamsAppsClient);
+        }
+        if (!this._teamsAppsClientPromise) {
+            const loadMonitor = new _QosMonitor('DeferredTeamsAppsClient.LoadTeamsAppClient');
+            this._teamsAppsClientPromise = import(/* webpackChunkName: 'teams-apps-client' */ './TeamsAppsClient')// eslint-disable-next-line @typescript-eslint/naming-convention
+            .then(({ TeamsAppsClient })=>{
+                this._teamsAppsClient = new TeamsAppsClient(this._serviceScope);
+                loadMonitor.writeSuccess();
+                return this._teamsAppsClient;
+            }).catch((error)=>{
+                loadMonitor.writeUnexpectedFailure(undefined, error);
+                throw error;
+            });
+        }
+        return this._teamsAppsClientPromise;
+    }
+    constructor(serviceScope){
+        this._serviceScope = serviceScope;
+    }
+}
+/**
+   * The service key for DeferredTeamsAppsClient.
+   */ DeferredTeamsAppsClient.serviceKey = ServiceKey.create('sp-teams-apps-client', DeferredTeamsAppsClient);
+
+//# sourceMappingURL=./DeferredTeamsAppsClient.js.map

package/lib-esm/teams/ITeamsAppCatalog.js

@@ -0,0 +1,9 @@
+/**
+ * Top level teams app item in app catalogs fetched using the Graph API.
+ *
+ * @internal
+ */ /**
+ * @internal
+ */ export { };
+
+//# sourceMappingURL=./ITeamsAppCatalog.js.map

package/lib-esm/teams/TeamsAppsClient.js

@@ -0,0 +1,395 @@
+import { _QosMonitor } from '@microsoft/sp-diagnostics';
+import { MSGraphClientFactory, SPHttpClient } from '@microsoft/sp-http';
+import { PageContext } from '@microsoft/sp-page-context';
+import { isBotAcesFromTeamsEnabled } from '../common/Flights';
+import { uniq } from '@microsoft/sp-lodash-subset';
+// base teams apps endpoint
+const MS_GRAPH_TEAMS_APPS_ENDPOINT = '/appCatalogs/teamsApps';
+// QSP to fetch all teams apps with dashboard cards
+const MS_GRAPH_FETCH_TEAMS_APPS_QSP = `$expand=appDefinitions($expand=outlineIcon,colorIcon,dashboardCards)&$filter=appDefinitions/any(a:a/dashboardCards/$count ne 0)`;
+// QSP to check permissions for the list of app ids
+const MS_GRAPH_CHECK_PERMISSIONS_QSP = `$expand=appDefinitions($expand=dashboardCards)&$filter=appDefinitions/any(a:a/dashboardCards/$count ne 0) and id in ('{appIds}')`;
+const MS_GRAPH_API_VERSION = 'beta';
+// the number of app ids we can process without batching the request to avoid the URL length limit
+const MAX_IDS_WITHOUT_BATCHING = 30;
+const MAX_REQUESTS_PER_BATCH = 10;
+const MANIFEST_VERSION = 2;
+const ADVANCED_TOOLBOX_GROUP_ID = '5c03119e-3074-46fd-976b-c60198311f70';
+/**
+ * The client for the Teams Apps sync.
+ *
+ * @internal
+ */ export class TeamsAppsClient {
+    /**
+   * Gets the list of Teams App components from Teams App Catalog.
+   * @returns Promise that resolves to the list of Teams App components.
+   */ getTeamsAppComponentManifests() {
+        if (!TeamsAppsClient._getTeamsAppComponentManifestsPromise) {
+            if (!isBotAcesFromTeamsEnabled()) {
+                TeamsAppsClient._getTeamsAppComponentManifestsPromise = Promise.resolve([]);
+            } else {
+                const monitor = new _QosMonitor('TeamsAppsClient.FetchTeamsApp');
+                TeamsAppsClient._getTeamsAppComponentManifestsPromise = this._msGraphClient.then((client)=>{
+                    return client.api(`${MS_GRAPH_TEAMS_APPS_ENDPOINT}?${MS_GRAPH_FETCH_TEAMS_APPS_QSP}`).version(MS_GRAPH_API_VERSION).get();
+                }).then((response)=>{
+                    const manifestsPromises = response.value.map((item)=>{
+                        return this._teamsAppCatalogItemToAceManifests(item);
+                    });
+                    return Promise.all(manifestsPromises).then((manifests)=>{
+                        const flatManifests = [];
+                        manifests.forEach((item)=>{
+                            flatManifests.push(...item);
+                        });
+                        monitor.writeSuccess();
+                        return flatManifests;
+                    });
+                }).catch((error)=>{
+                    monitor.writeUnexpectedFailure(undefined, error);
+                    // removing reference to the promise to allow retry
+                    TeamsAppsClient._getTeamsAppComponentManifestsPromise = undefined;
+                    return [];
+                });
+            }
+        }
+        return TeamsAppsClient._getTeamsAppComponentManifestsPromise;
+    }
+    /**
+   * Syncs the Teams App component into SharePoint App Catalog.
+   */ syncComponent(teamsAppComponentManifest) {
+        const manifest = teamsAppComponentManifest;
+        if (!isBotAcesFromTeamsEnabled() || !manifest.isPendingTeamsAppSync) {
+            return Promise.resolve(teamsAppComponentManifest);
+        }
+        const monitor = new _QosMonitor('TeamsAppsClient.SyncComponent');
+        if (!teamsAppComponentManifest.properties?.teamsAppComponent) {
+            monitor.writeExpectedFailure('TeamsAppComponentMissing');
+            return new Promise(()=>{
+                throw new Error('Teams App component manifest is missing teamsAppComponent property');
+            });
+        }
+        const spHttpClient = this._serviceScope.consume(SPHttpClient.serviceKey);
+        const pageContext = this._serviceScope.consume(PageContext.serviceKey);
+        const baseRequestUrl = pageContext.web.absoluteUrl;
+        let monitorFailureTagNameSuffix = undefined;
+        let ensureAppCatalogPromise = TeamsAppsClient._ensureAppCatalogPromise;
+        if (!TeamsAppsClient._ensureAppCatalogPromise) {
+            // first step is to ensure app catalog
+            const ensureAppCatalogRequestUrl = `${baseRequestUrl}/_api/web/EnsureTenantAppCatalog(callerId='TeamsAppsClient')`;
+            ensureAppCatalogPromise = TeamsAppsClient._ensureAppCatalogPromise = spHttpClient.post(ensureAppCatalogRequestUrl, SPHttpClient.configurations.v1, {}).then((response)=>{
+                return response.json();
+            }).then((response)=>{
+                if (response.error) {
+                    throw new Error(response.error.message);
+                }
+            }).catch((error)=>{
+                // app catalog error
+                monitorFailureTagNameSuffix = 'EnsureAppCatalogFailed';
+                // we want to retry if needed
+                TeamsAppsClient._ensureAppCatalogPromise = undefined;
+                throw error;
+            });
+        }
+        return ensureAppCatalogPromise.then(()=>{
+            const syncRequestUrl = `${baseRequestUrl}/_api/web/SyncTeamsComponent`;
+            const teamsAppComponent = teamsAppComponentManifest.properties.teamsAppComponent;
+            return spHttpClient.post(syncRequestUrl, SPHttpClient.configurations.v1, {
+                body: JSON.stringify({
+                    teamsComponent: teamsAppComponent
+                })
+            }).catch((error)=>{
+                // sync error
+                monitorFailureTagNameSuffix = 'SyncComponentFailed';
+                throw error;
+            });
+        }).then((response)=>{
+            return response.json();
+        }).then((syncedManifest)=>{
+            if (syncedManifest.error) {
+                monitorFailureTagNameSuffix = 'SyncComponentFailed';
+                throw new Error(syncedManifest.error.message);
+            }
+            const manifestResponse = syncedManifest;
+            const parsedManifest = JSON.parse(manifestResponse.Manifest);
+            if (manifestResponse.ManifestActivatedTime) {
+                parsedManifest.manifestActivatedTime = manifestResponse.ManifestActivatedTime;
+            }
+            monitor.writeSuccess();
+            const { appId } = teamsAppComponentManifest.properties.teamsAppComponent;
+            // we know for sure the component is allowed
+            this._appComponentsPermissionsPromises.set(appId, Promise.resolve(new Set([
+                appId
+            ])));
+            return parsedManifest;
+        }).catch((error)=>{
+            monitor.writeUnexpectedFailure(monitorFailureTagNameSuffix, error);
+            throw error;
+        });
+    }
+    /**
+   * Requests permissions for the Teams App components (apps) for the current user.
+   */ requestPermissions(teamsAppComponentIds) {
+        if (!isBotAcesFromTeamsEnabled() || !teamsAppComponentIds.length) {
+            return Promise.resolve();
+        }
+        return this._requestAppsPermissions(teamsAppComponentIds).then(()=>{});
+    }
+    /**
+   * Checks if the component is enabled for the current user based on requested Teams permissions.
+   */ isComponentEnabled(teamsAppId) {
+        if (!isBotAcesFromTeamsEnabled()) {
+            return Promise.resolve(true);
+        }
+        if (this._appComponentsPermissionsPromises.has(teamsAppId)) {
+            return this._appComponentsPermissionsPromises.get(teamsAppId).then((allowedApps)=>{
+                return allowedApps.has(teamsAppId) || false;
+            });
+        } else {
+            return this._requestAppsPermissions([
+                {
+                    appId: teamsAppId,
+                    componentId: ''
+                }
+            ]).then((allowedComponents)=>{
+                return allowedComponents.has(teamsAppId) || false;
+            });
+        }
+    }
+    _requestAppsPermissions(teamsAppComponentIds) {
+        // getting app ids for which we don't have a promise yet
+        const uniqueAppIds = uniq(teamsAppComponentIds.map((item)=>item.appId)).filter((appId)=>!this._appComponentsPermissionsPromises.has(appId));
+        let requestPermissionsPromise;
+        if (uniqueAppIds.length > MAX_IDS_WITHOUT_BATCHING) {
+            requestPermissionsPromise = this._requestAppsPermissionsBatched(uniqueAppIds);
+        }
+        if (!requestPermissionsPromise) {
+            const monitor = new _QosMonitor('TeamsAppsClient.RequestAppsPermissions');
+            requestPermissionsPromise = this._msGraphClient.then((client)=>{
+                return client.api(this._getCheckPermissionsUrl(uniqueAppIds)).version(MS_GRAPH_API_VERSION).get();
+            }).then((response)=>{
+                if (response.error) {
+                    monitor.writeUnexpectedFailure('RequestFailed', new Error(response.error.message));
+                    return new Set();
+                }
+                const allowedApps = new Set();
+                response.value.map((item)=>{
+                    allowedApps.add(item.id);
+                });
+                monitor.writeSuccess();
+                return allowedApps;
+            }).catch((error)=>{
+                monitor.writeUnexpectedFailure(undefined, error);
+                return new Set();
+            });
+        }
+        // store the promise to avoid multiple requests to the API for the same teamsAppId
+        uniqueAppIds.forEach((teamsAppId)=>{
+            this._appComponentsPermissionsPromises.set(teamsAppId, requestPermissionsPromise);
+        });
+        return requestPermissionsPromise;
+    }
+    _requestAppsPermissionsBatched(appIds) {
+        const monitor = new _QosMonitor('TeamsAppsClient.RequestAppsPermissionsBatched');
+        const allowedApps = new Set();
+        //
+        // MS Graph batch body is like that:
+        // {
+        //  "requests": [
+        //    {
+        //      "id": "1",
+        //      "method": "GET",
+        //      "url": "our-permissions-url"
+        //    },
+        //    {
+        //      etc.
+        //    }
+        //  ]
+        // }
+        // We need to split the list of app ids to have no more than 10 requests per batch and no more than 30 ids per request
+        //
+        // we can have MAX_IDS_WITHOUT_BATCHING per one request in batch. And up to MAX_REQUESTS_PER_BATCH requests in batch.
+        const maxIdsPerBatch = MAX_IDS_WITHOUT_BATCHING * MAX_REQUESTS_PER_BATCH;
+        const batchesCount = Math.ceil(appIds.length / maxIdsPerBatch);
+        let batchIndex = 0;
+        const batchRequests = [];
+        try {
+            while(batchIndex < batchesCount){
+                const batchBody = {
+                    requests: []
+                };
+                const batchStartIndex = batchIndex * maxIdsPerBatch;
+                const batchEndIndex = Math.min(batchStartIndex + maxIdsPerBatch, appIds.length);
+                let batchIdStartIndex = batchStartIndex;
+                while(batchIdStartIndex < batchEndIndex){
+                    const batchIdEndIndex = batchIdStartIndex + MAX_IDS_WITHOUT_BATCHING;
+                    const batchIds = appIds.slice(batchIdStartIndex, batchIdEndIndex);
+                    batchBody.requests.push({
+                        id: batchIdStartIndex.toString(),
+                        method: 'GET',
+                        url: this._getCheckPermissionsUrl(batchIds)
+                    });
+                    batchIdStartIndex = batchIdEndIndex;
+                }
+                batchRequests.push(batchBody);
+                batchIndex++;
+            }
+        } catch (error) {
+            monitor.writeUnexpectedFailure('BatchSplitLogicError', error);
+            // Early return to avoid the request
+            return Promise.resolve(allowedApps);
+        }
+        const errors = [];
+        return this._msGraphClient.then((client)=>{
+            const batchPromises = batchRequests.map((batchBody)=>{
+                return client.api('$batch').version(MS_GRAPH_API_VERSION).post(batchBody).then((response)=>{
+                    response.responses.forEach((responseItem)=>{
+                        if (responseItem.status !== 200) {
+                            errors.push(new Error(responseItem.body.error.message));
+                            return;
+                        }
+                        responseItem.body.value.map((app)=>{
+                            allowedApps.add(app.id);
+                        });
+                    });
+                }).catch((error)=>{
+                    errors.push(error);
+                });
+            });
+            return Promise.all(batchPromises);
+        }).then(()=>{
+            // some batches failed
+            if (errors.length) {
+                monitor.writeUnexpectedFailure('SomeBatchRequestsError', undefined, {
+                    errors: errors
+                });
+            }
+            return allowedApps;
+        }).catch((error)=>{
+            // all batches failed
+            monitor.writeUnexpectedFailure('BatchRequestError', error);
+            return new Set();
+        });
+    }
+    _getCheckPermissionsUrl(appIds) {
+        return `${MS_GRAPH_TEAMS_APPS_ENDPOINT}?${MS_GRAPH_CHECK_PERMISSIONS_QSP.replace('{appIds}', appIds.join(`','`))}`;
+    }
+    get _msGraphClient() {
+        if (!this._msGraphClientFactory) {
+            this._msGraphClientFactory = this._serviceScope.consume(MSGraphClientFactory.serviceKey);
+        }
+        if (!this._msGraphClientDeferred) {
+            this._msGraphClientDeferred = this._msGraphClientFactory.getClientInternal('3');
+        }
+        return this._msGraphClientDeferred;
+    }
+    _teamsAppCatalogItemToAceManifests(item) {
+        //
+        // collect components that use Teams App icon instead of having its own
+        // if there are such components, we will need to fetch the app icon
+        //
+        let iconPromise;
+        const colorIconWebUrl = item.appDefinitions[0].colorIcon?.webUrl;
+        const manifestsWithoutIcon = [];
+        const dashboardCards = item.appDefinitions[0].dashboardCards || [];
+        const manifests = [];
+        dashboardCards.forEach((dashboardCard)=>{
+            const component = {
+                appId: item.id,
+                externalAppId: item.externalId || undefined,
+                componentId: dashboardCard.id,
+                groupId: ADVANCED_TOOLBOX_GROUP_ID,
+                iconUrl: dashboardCard.icon?.iconUrl,
+                officeUIFabricIconName: dashboardCard.icon?.officeUIFabricIconName,
+                description: dashboardCard.description,
+                name: dashboardCard.displayName,
+                botId: dashboardCard.contentSource.botConfiguration.botId,
+                appName: item.displayName,
+                appDescription: item.appDefinitions[0].description,
+                version: item.appDefinitions[0].version,
+                // size is lower case in the manifest
+                defaultSize: `${dashboardCard.defaultSize.charAt(0).toUpperCase()}${dashboardCard.defaultSize.slice(1)}`
+            };
+            const manifest = this._teamsAppComponentToAceManifest(component);
+            manifests.push(manifest);
+            if (!component.iconUrl && !component.officeUIFabricIconName) {
+                manifestsWithoutIcon.push(manifest);
+                if (!iconPromise && colorIconWebUrl) iconPromise = this._msGraphClient.then((client)=>{
+                    return client.api(colorIconWebUrl).responseType('blob').get();
+                });
+            }
+        });
+        let resultPromise = Promise.resolve(manifests);
+        if (manifestsWithoutIcon.length && iconPromise) {
+            resultPromise = iconPromise.then((response)=>{
+                return this._convertBlobToBase64(response);
+            }).then((iconUrl)=>{
+                manifestsWithoutIcon.forEach((manifest)=>{
+                    manifest.preconfiguredEntries[0].iconImageUrl = iconUrl;
+                    manifest.properties.teamsAppComponent.iconUrl = iconUrl;
+                });
+                return manifests;
+            });
+        }
+        return resultPromise;
+    }
+    _convertBlobToBase64(blob) {
+        return new Promise((resolve, reject)=>{
+            const reader = new FileReader();
+            reader.onerror = reject;
+            reader.onload = ()=>{
+                const base64String = reader.result;
+                if (!base64String) {
+                    reject('');
+                }
+                resolve(base64String.substr(base64String.indexOf(', ') + 1));
+            };
+            reader.readAsDataURL(blob);
+        });
+    }
+    _teamsAppComponentToAceManifest(component) {
+        return {
+            id: component.componentId,
+            manifestVersion: MANIFEST_VERSION,
+            version: component.version,
+            componentType: 'AdaptiveCardExtension',
+            alias: component.componentId,
+            properties: {
+                teamsAppComponent: component
+            },
+            loaderConfig: {
+                entryModuleId: component.componentId,
+                internalModuleBaseUrls: [
+                    'HTTPS://CLIENTSIDEASSETSLIBRARY/'
+                ],
+                scriptResources: {}
+            },
+            preconfiguredEntries: [
+                {
+                    cardSize: component.defaultSize,
+                    title: {
+                        default: component.name
+                    },
+                    description: {
+                        default: component.description
+                    },
+                    iconImageUrl: component.iconUrl,
+                    officeFabricIconFontName: component.officeUIFabricIconName,
+                    groupId: component.groupId,
+                    properties: {}
+                }
+            ],
+            connectedTeamsAppId: component.appId,
+            isPendingTeamsAppSync: true
+        };
+    }
+    constructor(serviceScope){
+        /**
+   * Map[teamsAppId, Promise[Set[teamsAppId]]]
+   *
+   * We store a map where the same promise can be used for multiple entries.
+   * In that case we can avoid multiple requests to the API for the same teamsAppId as well as avoid race conditions and allow to make extra requests if needed.
+   */ this._appComponentsPermissionsPromises = new Map();
+        this._serviceScope = serviceScope;
+    }
+}
+
+//# sourceMappingURL=./TeamsAppsClient.js.map

package/lib-esm/test-api/MockComponent.js

@@ -0,0 +1,38 @@
+import BaseComponent from '../BaseComponent';
+import { MockComponentContext } from './MockComponentContext';
+export class MockComponent extends BaseComponent {
+    constructor(mockScope){
+        super();
+        this.mockIDynamicData = {
+            getPropertyDefinitions: ()=>{
+                return [
+                    {
+                        id: 'test1',
+                        title: 'Test One'
+                    },
+                    {
+                        id: 'test2',
+                        title: 'Test Two'
+                    },
+                    {
+                        id: 'test3',
+                        title: 'Test Three'
+                    }
+                ];
+            },
+            getPropertyValue: ()=>{
+                return {
+                    'mock-key': 'mock-value'
+                };
+            },
+            getAnnotatedPropertyValue: ()=>{
+                return {
+                    sampleValue: {}
+                };
+            }
+        };
+        this._initializeContext(new MockComponentContext(mockScope));
+    }
+}
+
+//# sourceMappingURL=./MockComponent.js.map

package/{lib → lib-esm}/test-api/MockComponentContext.js

@@ -1,16 +1,16 @@
-import { __extends } from "tslib";
 import BaseComponentContext from '../BaseComponentContext';
-var MockComponentContext = /** @class */ (function (_super) {
-    __extends(MockComponentContext, _super);
-    function MockComponentContext(mockRootScope) {
-        return _super.call(this, {
+export class MockComponentContext extends BaseComponentContext {
+    constructor(mockRootScope){
+        super({
             parentServiceScope: mockRootScope,
             manifest: {
                 componentType: 'Application',
                 alias: 'alias',
                 version: '1.0',
                 loaderConfig: {
-                    internalModuleBaseUrls: ['mock info'],
+                    internalModuleBaseUrls: [
+                        'mock info'
+                    ],
                     entryModuleId: 'eId',
                     scriptResources: {}
                 },
@@ -19,9 +19,8 @@ var MockComponentContext = /** @class */ (function (_super) {
             },
             loggingTag: 'logtag',
             instanceId: 'iId'
-        }) || this;
+        });
     }
-    return MockComponentContext;
-}(BaseComponentContext));
-export { MockComponentContext };
-//# sourceMappingURL=MockComponentContext.js.map
+}
+
+//# sourceMappingURL=./MockComponentContext.js.map

package/{lib → lib-esm}/test-api/index.js

@@ -1,3 +1,4 @@
 export { MockComponent } from './MockComponent';
 export { MockComponentContext } from './MockComponentContext';
-//# sourceMappingURL=index.js.map
+
+//# sourceMappingURL=./index.js.map