Add shortcutRelay capability to support host shortcut in Apps

apps/teams-test-app/src/components/ShortcutRelayAPIs.tsx

@@ -0,0 +1,55 @@
+import { shortcutRelay } from '@microsoft/teams-js';
+import React from 'react';
+
+import { ApiWithoutInput } from './utils';
+import { ModuleWrapper } from './utils/ModuleWrapper';
+
+const CheckShortcutRelayCapability = (): React.ReactElement =>
+  ApiWithoutInput({
+    name: 'shortcutRelay_checkShortcutRelayCapability',
+    title: 'Check Shortcut Relay Capability',
+    onClick: async () => `ShortcutRelay ${shortcutRelay.isSupported() ? 'is' : 'is not'} supported`,
+  });
+
+const EnableShortcutRelayCapability = (): React.ReactElement =>
+  ApiWithoutInput({
+    name: 'shortcutRelay_enableShortcutRelayCapability',
+    title: 'Enable Shortcut Relay Capability',
+    onClick: async () => {
+      await shortcutRelay.enableShortcutRelayCapability();
+      return 'called';
+    },
+  });
+
+const SetOverridableShortcutHandler = (): React.ReactElement =>
+  ApiWithoutInput({
+    name: 'shortcutRelay_setOverridableShortcutHandler',
+    title: 'Set Overridable Shortcut Handler',
+    onClick: async () => {
+      shortcutRelay.setOverridableShortcutHandler(() => true);
+      return 'called';
+    },
+  });
+
+const ResetIsShortcutRelayCapabilityEnabled = (): React.ReactElement =>
+  ApiWithoutInput({
+    name: 'shortcutRelay_resetIsShortcutRelayCapabilityEnabled',
+    title: 'Reset Shortcut Relay Capability',
+    onClick: async () => {
+      shortcutRelay.resetIsShortcutRelayCapabilityEnabled();
+      return 'called';
+    },
+  });
+
+const ShortcutRelayAPIs = (): React.ReactElement => (
+  <>
+    <ModuleWrapper title="ShortcutRelay">
+      <CheckShortcutRelayCapability />
+      <EnableShortcutRelayCapability />
+      <SetOverridableShortcutHandler />
+      <ResetIsShortcutRelayCapabilityEnabled />
+    </ModuleWrapper>
+  </>
+);
+
+export default ShortcutRelayAPIs;

apps/teams-test-app/src/pages/TestApp.tsx

@@ -59,6 +59,7 @@ import RemoteCameraAPIs from '../components/RemoteCameraAPIs';
 import SearchAPIs from '../components/SearchAPIs';
 import SecondaryBrowserAPIs from '../components/SecondaryBrowserAPIs';
 import SharingAPIs from '../components/SharingAPIs';
+import ShortcutRelayAPIs from '../components/ShortcutRelayAPIs';
 import StageViewAPIs from '../components/StageViewAPIs';
 import StageViewSelfAPIs from '../components/StageViewSelfAPIs';
 import StoreAPIs from '../components/StoreApis';
@@ -157,6 +158,7 @@ export const TestApp: React.FC = () => {
       { name: 'SearchAPIs', component: <SearchAPIs /> },
       { name: 'SecondaryBrowserAPIs', component: <SecondaryBrowserAPIs /> },
       { name: 'SharingAPIs', component: <SharingAPIs /> },
+      { name: 'ShortcutRelayAPIs', component: <ShortcutRelayAPIs /> },
       { name: 'WebStorageAPIs', component: <WebStorageAPIs /> },
       { name: 'StageViewAPIs', component: <StageViewAPIs /> },
       { name: 'StageViewSelfAPIs', component: <StageViewSelfAPIs /> },

packages/teams-js/src/internal/telemetry.ts

@@ -332,6 +332,9 @@ export const enum ApiName {
   Settings_SetValidityState = 'settings.setValidityState',
   Sharing_History_GetContent = 'sharing.history.getContent',
   Sharing_ShareWebContent = 'sharing.shareWebContent',
+  ShortcutRelay_GetHostShortcuts = 'shortcutRelay.getHostShortcuts',
+  ShortcutRelay_ForwardShortcutEvent = 'shortcutRelay.forwardShortcutEvent',
+  ShortcutRelay_HostShortcutChanged = 'shortcutRelay.hostShortcutChanged',
   StageView_Open = 'stageView.open',
   StageView_Self_Close = 'stageView.self.close',
   Store_OpenFullStore = 'store.openFullStore',

packages/teams-js/src/public/index.ts

@@ -139,3 +139,4 @@ export * as liveShare from './liveShareHost';
 export { LiveShareHost } from './liveShareHost';
 export * as marketplace from './marketplace';
 export { ISerializable } from './serializable.interface';
+export * as shortcutRelay from './shortcutRelay';

packages/teams-js/src/public/runtime.ts

@@ -298,6 +298,7 @@ interface IRuntimeV4 extends IBaseRuntime {
     readonly sharing?: {
       readonly history?: {};
     };
+    readonly shortcutRelay?: {};
     readonly stageView?: {
       readonly self?: {};
     };