Add react router for navigation testing #2275

alexneyman-MSFT · 2024-04-17T19:19:48Z

Description

This PR adds React Router to enable navigation between tabs when caching is enabled. There is no Nav component because tabs are populated in the appDefinition files. The onResume function is changed to navigate based on the URL provided.

Summarize the changes, including the goals and reasons for this change. Be sure to call out any technical or behavior changes that reviewers should be aware of.

If this Pull Request should close/resolve any issues when merged, use the special syntax for that here.

Main changes in the PR:

add react router to the package
add an empty page for testing
enable routing in the app.tsx file
update webpack config so the second page can be loaded by url

Validation performed:

change the URL to https://localhost:4000/second-page
ensure the content is an empty page
switch tabs with caching enabled in a test host and ensure the onResume function properly navigates to the empty page.

Unit Tests added:

Unit tests are required for all changes. If no unit tests were added as part of this change, please explain why they aren't necessary.

End-to-end tests added:

Additional Requirements

Change file added:

Ensure the change file meets the formatting requirements.

Related PRs:

Remove this section if n/a

Next/remaining steps:

List the next or remaining steps in implementing the overall feature in subsequent PRs (or is the feature 100% complete after this?).

Remove this section if n/a

Item 1
Item 2

Screenshots:

Remove this section if n/a

Before	After
< image1 >	< image2 >

alexneyman-MSFT · 2024-04-17T19:20:25Z

@TrevorJoelHarris @lakhveerk, can you give this another look, had to remake the PR.

jadahiya-MSFT · 2024-04-17T19:43:07Z

apps/teams-test-app/src/App.tsx

+            </>
+          }
+        />
+        <Route path="/second-page" element={<EmptyPage />} />


What's your thoughts on renaming this route path to be /empty or /empty-page to be more descriptive.

I don't mind keeping it as second-page just wanted to get your opinion on this

Yeah i was thinking about the naming, maybe empty isn't right either because i'm including the appApi's in it since i want to use the getcontext call in e2e testing

I'm going to go with secound-route here since i'm adding content to the page. open to suggestions still!

jadahiya-MSFT · 2024-04-17T19:55:11Z

apps/teams-test-app/src/App.tsx

+          path="/"
+          element={
+            <>
+              <div className="App-container">


How would you feel about extracting this entire div into a separate file called TeamsTestApp.tsx and then just having this route render that

<Route path="/" element = { <TeamsTestApp/> } ...

I like that!

TrevorJoelHarris · 2024-04-23T17:14:37Z

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

+
+const EmptyPage = (): ReactElement => (
+  <div>
+    This is an empty page.


This is not a big deal, but it's sort of funny to see "This is an empty page" next to a component that makes it not an empty page (<AppApis />). Is there a reason the text is helpful?

TrevorJoelHarris

Left one question

* Removed beta tage on Pages.currentApp namespace and APIs * Added changefile * Update change/@microsoft-teams-js-51421b73-089f-43de-9076-75563e1f064c.json --------- Co-authored-by: Trevor Harris <trharris@microsoft.com>

…yerPort (#2277) Update Message Channel capability to support sub capabilities, add data layer capability with getDataLayerPort --------- Co-authored-by: sumathin <sum_nat1@yahoo.com> Co-authored-by: sumathin <sunatara@microsoft.com> Co-authored-by: Trevor Harris <trharris@microsoft.com>

* backed out all exported const enums

* add sdf release yaml --------- Co-authored-by: jadahiya-MSFT <95651173+jadahiya-MSFT@users.noreply.github.com> Co-authored-by: Trevor Harris <trharris@microsoft.com>

* Update comment * Update changefile

…onnector Plugins (#2272) * Adding PPC auth * Adding PPCauth UTs * adding change file * Resolving comments * Resolving comments * Modify hasScriptTags function to handle encoded Input * Modify hasScriptTags function to handle encoded Input * updating default input * Modify hasScriptTags function to handle encoded Input * adding telemetry tag for ppc auth * Removing pluginId and adding unit tests * Changing url to string before passign to psotmessage * Removing regualr expression for html entities * Removing regualr expression for html entities * Modifying comments * Modifying comments * Resolving comments * Resolving comments --------- Co-authored-by: Lakhveer Kaur <lakhveerkaur@microsoft.com> Co-authored-by: Erin <erinha@microsoft.com>

* Webstorage becomes capability * Update webstorage in test app * Update webstorage test json * Add changefile * Test updates * Test updates * Final test updates * Helpful util * Empty json test file

* Not blank, but almost blank * Updated

* Publish android artifacts * Use 1ES publishing steps * task names * Use updated artifact location * Add job attempt

* Added in new valid domains for Copilot Chat * Added in changefile --------- Co-authored-by: AE ( ͡ಠ ʖ̯ ͡ಠ) <36546967+AE-MS@users.noreply.github.com>

* Restrict authentication.authenticate to only accept https urls * Create @microsoft-teams-js-40968a44-8220-4162-a289-038e99f5bee3.json * Updated based on PR feedback * Updated to use new validation functions and added(?) support for URL encoded strings * abstract out the auth code's use of the a tag and then add tests to make sure URL encoded partial urls work correctly * Re-order imports * Updated based on PR feedback --------- Co-authored-by: AE ( ͡ಠ ʖ̯ ͡ಠ) <36546967+AE-MS@users.noreply.github.com>

* Fix incorrect API telemetry label for Pages_NavigateToApp API * update * Update @microsoft-teams-js-d2040181-a9a1-42d2-9080-35acb3a380cd.json --------- Co-authored-by: AE ( ͡ಠ ʖ̯ ͡ಠ) <36546967+AE-MS@users.noreply.github.com>

* Update sdf-release.yml for Azure Pipelines * Update sdf-release.yml for Azure Pipelines

Co-authored-by: sthousto <sthousto@microsoft.com_odspmdb> Co-authored-by: Trevor Harris <trharris@microsoft.com>

* Initial commit * Update ci * Update ci * remove deprecated sub dependencies * Specify exact version in ci

* Update .npmrc location * Changefile * Update @microsoft-teams-js-b63da2d9-3e02-4b83-9664-78aa8f49c713.json * use new scripts for onebranch pipelines --------- Co-authored-by: AE ( ͡ಠ ʖ̯ ͡ಠ) <36546967+AE-MS@users.noreply.github.com>

* add prod pipeline * restrict branches for prod pipeline * add DDL pipeline

This reverts commit 7d8a421.

This reverts commit 53cf983.

* Releasing 2.23.0 (#2309) * Releasing 2.23.0 * Updated CHANGELOG * Added changefile

* clear telemetryPort and dataLayerPort every time app._uninitialize is called * Create @microsoft-teams-js-ace1fe2b-0c05-48f6-b3b4-bdecfe1fb665.json

* Adding dialogParentComm to test app * nit fix * nit changes * fixing e2e

* Adding UUIDs to MessageRequests and MessageResponses * Committing changefile * Added in MessageID and MessageUUID types, added in testing for UUID communication and id as numbers communication * Changing waitForResponse to have input of type MessageUUID * Updated references to use MessageID and MessageUUID * Fixed lint error * Created BaseUUID type * Added validation for uuid to handleParentMessage * Only validate UUIDs if there is one * Added in MessageUUID object * Testing new changes to UUID * Added in serialization of objects * Updated to address PR feedback * Added comment describing MessageID vs MessageUUID * Added in helper function * Removing comment since map.delete was verified to work correctly * Moved uuid object to interfaces.ts for more general use * Replaced Function in Map declarations * Updated to use serialized and deserialized Message Response objects * Added in unit tests for UUID class * Fixed lint error * Updating tests * Moved uuid object to new file uuidObject.ts, edited changefile verbage * Added in unit tests for testing callback map deletion and functionality * Removed unnused import * Added in logging for when a callbackID fails to be generated * Fixed a typo in communication spec * Updated serialization and deserialization and uuid toString function * Reverted toString() change due to compatibility issues * Removing unnecessary map clear due to already clearing in uninitialize and removeHandlers * Fixed an issue with removing message ids * Reverting uuid back to private --------- Co-authored-by: Trevor Harris <trharris@microsoft.com> Co-authored-by: AE ( ͡ಠ ʖ̯ ͡ಠ) <36546967+AE-MS@users.noreply.github.com>

* Add isBackgroundLoad for pageInfo context * Added isBackgroundLoad property under page for app context. The property indicates that the app is loading in the background as part of an opt-in performance enhancement. --------- Co-authored-by: jadahiya-MSFT <95651173+jadahiya-MSFT@users.noreply.github.com>

* Releasing 2.23.0 (#2309) * Releasing 2.23.0 * Updated CHANGELOG * Added changefile

* clear telemetryPort and dataLayerPort every time app._uninitialize is called * Create @microsoft-teams-js-ace1fe2b-0c05-48f6-b3b4-bdecfe1fb665.json

* Adding dialogParentComm to test app * nit fix * nit changes * fixing e2e

* Adding UUIDs to MessageRequests and MessageResponses * Committing changefile * Added in MessageID and MessageUUID types, added in testing for UUID communication and id as numbers communication * Changing waitForResponse to have input of type MessageUUID * Updated references to use MessageID and MessageUUID * Fixed lint error * Created BaseUUID type * Added validation for uuid to handleParentMessage * Only validate UUIDs if there is one * Added in MessageUUID object * Testing new changes to UUID * Added in serialization of objects * Updated to address PR feedback * Added comment describing MessageID vs MessageUUID * Added in helper function * Removing comment since map.delete was verified to work correctly * Moved uuid object to interfaces.ts for more general use * Replaced Function in Map declarations * Updated to use serialized and deserialized Message Response objects * Added in unit tests for UUID class * Fixed lint error * Updating tests * Moved uuid object to new file uuidObject.ts, edited changefile verbage * Added in unit tests for testing callback map deletion and functionality * Removed unnused import * Added in logging for when a callbackID fails to be generated * Fixed a typo in communication spec * Updated serialization and deserialization and uuid toString function * Reverted toString() change due to compatibility issues * Removing unnecessary map clear due to already clearing in uninitialize and removeHandlers * Fixed an issue with removing message ids * Reverting uuid back to private --------- Co-authored-by: Trevor Harris <trharris@microsoft.com> Co-authored-by: AE ( ͡ಠ ʖ̯ ͡ಠ) <36546967+AE-MS@users.noreply.github.com>

…-new

lakhveerk · 2024-05-17T21:03:34Z

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

    name: 'RegisterOnResumeHandler',
    title: 'Register On Resume Handler',
    onClick: async (setResult) => {
      app.lifecycle.registerOnResumeHandler((context: ResumeContext): void => {
        setResult('successfully called with context:' + JSON.stringify(context));
-        app.notifySuccess();
+        window.setTimeout(() => {
+          app.notifySuccess();


It should send notifySuccess after routing to a different location

lakhveerk · 2024-05-17T21:08:09Z

apps/teams-test-app/src/App.tsx

@@ -128,74 +70,23 @@ export const generateRegistrationMsg = (changeCause: string): string => {
  return `Registration attempt has been initiated. If successful, this message will change when ${changeCause}.`;
 };

+// button to route to the second route
+export const SecondRouteButton = (): ReactElement => (


I thought the buttons for new static tabs show up through host code.

Add react router for navigation testing

c188d12

alexneyman-MSFT requested a review from a team as a code owner April 17, 2024 19:19

alexneyman-MSFT requested review from TrevorJoelHarris and lakhveerk April 17, 2024 19:19

jadahiya-MSFT reviewed Apr 17, 2024

View reviewed changes

jadahiya-MSFT previously approved these changes Apr 17, 2024

View reviewed changes

jadahiya-MSFT reviewed Apr 17, 2024

View reviewed changes

Merge branch 'main' into alexneyman/add-second-page-new

c105fd1

TrevorJoelHarris reviewed Apr 23, 2024

View reviewed changes

TrevorJoelHarris requested changes Apr 23, 2024

View reviewed changes

vikramtha and others added 19 commits May 9, 2024 11:26

Removing beta tag - Vikramtha/update pages current app (#2283)

655683c

* Removed beta tage on Pages.currentApp namespace and APIs * Added changefile * Update change/@microsoft-teams-js-51421b73-089f-43de-9076-75563e1f064c.json --------- Co-authored-by: Trevor Harris <trharris@microsoft.com>

Exported Const Enum Backout (#2285)

6bcc994

* backed out all exported const enums

Add release yaml (#2274)

ddab61f

* add sdf release yaml --------- Co-authored-by: jadahiya-MSFT <95651173+jadahiya-MSFT@users.noreply.github.com> Co-authored-by: Trevor Harris <trharris@microsoft.com>

Add description for pop-up auth window. (#2291)

0f677ca

* Update comment * Update changefile

Turn webStorage capability into a "real" capability (#2289)

9305eee

* Webstorage becomes capability * Update webstorage in test app * Update webstorage test json * Add changefile * Test updates * Test updates * Final test updates * Helpful util * Empty json test file

Send validMessageOrigins to parentWindow for verification. (#2293)

4ed12b4

Update webStorage.json to not be blank, but almost blank (#2294)

49dc15b

* Not blank, but almost blank * Updated

Add webstorage E2E tests (#2295)

3abe29e

Publish android artifacts (#2284)

3d79087

* Publish android artifacts * Use 1ES publishing steps * task names * Use updated artifact location * Add job attempt

Cleanup configuration files (#2296)

53f3fd5

Added in new valid domains for Copilot Chat (#2287)

f497084

* Added in new valid domains for Copilot Chat * Added in changefile --------- Co-authored-by: AE ( ͡ಠ ʖ̯ ͡ಠ) <36546967+AE-MS@users.noreply.github.com>

Update sdf-release.yml for Azure Pipelines (#2292)

ecfa5b0

* Update sdf-release.yml for Azure Pipelines * Update sdf-release.yml for Azure Pipelines

Update custom API test (#2282)

f5c6a5b

Co-authored-by: sthousto <sthousto@microsoft.com_odspmdb> Co-authored-by: Trevor Harris <trharris@microsoft.com>

Upgrade pnpm to v9 (#2301)

a6d68fc

* Initial commit * Update ci * Update ci * remove deprecated sub dependencies * Specify exact version in ci

jekloudaMSFT and others added 2 commits May 9, 2024 11:27

Add production pipeline YAML (#2310)

839fa7a

* add prod pipeline * restrict branches for prod pipeline * add DDL pipeline

update routes to properly describe the new page

7d8a421

alexneyman-MSFT dismissed jadahiya-MSFT’s stale review via 7d8a421 May 9, 2024 15:27

alexneyman-MSFT added 3 commits May 9, 2024 11:28

Revert "update routes to properly describe the new page"

53cf983

This reverts commit 7d8a421.

Merge branch 'main' into alexneyman/add-second-page-new

404668c

Revert "Revert "update routes to properly describe the new page""

0e552a9

This reverts commit 53cf983.

alexneyman-MSFT requested review from jadahiya-MSFT and TrevorJoelHarris May 9, 2024 15:37

alexneyman-MSFT enabled auto-merge (squash) May 17, 2024 19:27

alexneyman-MSFT and others added 18 commits May 17, 2024 15:29

add navigation onResume

319cd50

Update pipeline source for DDL release (#2316)

d2e12f1

updated next version (#2320)

1ccfe92

Cleanup for release 2.23.0 (#2318)

b85d57b

* Releasing 2.23.0 (#2309) * Releasing 2.23.0 * Updated CHANGELOG * Added changefile

Trharris/uninitialize fix (#2319)

884058d

* clear telemetryPort and dataLayerPort every time app._uninitialize is called * Create @microsoft-teams-js-ace1fe2b-0c05-48f6-b3b4-bdecfe1fb665.json

Adding dialogParentComm to test app (#2315)

476d0fe

* Adding dialogParentComm to test app * nit fix * nit changes * fixing e2e

Fixing e2e for dialog-parent communication (#2326)

f325c80

cleanup up more imports (#2324)

d975e03

Cleanup for release 2.23.0 (#2318)

1957048

* Releasing 2.23.0 (#2309) * Releasing 2.23.0 * Updated CHANGELOG * Added changefile

Trharris/uninitialize fix (#2319)

4275a24

* clear telemetryPort and dataLayerPort every time app._uninitialize is called * Create @microsoft-teams-js-ace1fe2b-0c05-48f6-b3b4-bdecfe1fb665.json

Adding dialogParentComm to test app (#2315)

cd885da

* Adding dialogParentComm to test app * nit fix * nit changes * fixing e2e

Fixing e2e for dialog-parent communication (#2326)

3120c33

cleanup up more imports (#2324)

020085b

Merge remote-tracking branch 'origin' into alexneyman/add-second-page…

1df6680

…-new

remove unnecessary ref

577cb35

jadahiya-MSFT approved these changes May 17, 2024

View reviewed changes

lakhveerk reviewed May 17, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add react router for navigation testing #2275

Add react router for navigation testing #2275

alexneyman-MSFT commented Apr 17, 2024

alexneyman-MSFT commented Apr 17, 2024

jadahiya-MSFT Apr 17, 2024

alexneyman-MSFT Apr 17, 2024 •

edited

alexneyman-MSFT May 9, 2024 •

edited

jadahiya-MSFT Apr 17, 2024

alexneyman-MSFT May 9, 2024 •

edited

TrevorJoelHarris Apr 23, 2024

TrevorJoelHarris left a comment

lakhveerk May 17, 2024

lakhveerk May 17, 2024

Add react router for navigation testing #2275

Are you sure you want to change the base?

Add react router for navigation testing #2275

Conversation

alexneyman-MSFT commented Apr 17, 2024

Description

Main changes in the PR:

Validation performed:

Unit Tests added:

End-to-end tests added:

Additional Requirements

Change file added:

Related PRs:

Next/remaining steps:

Screenshots:

alexneyman-MSFT commented Apr 17, 2024

jadahiya-MSFT Apr 17, 2024

Choose a reason for hiding this comment

alexneyman-MSFT Apr 17, 2024 • edited

Choose a reason for hiding this comment

alexneyman-MSFT May 9, 2024 • edited

Choose a reason for hiding this comment

jadahiya-MSFT Apr 17, 2024

Choose a reason for hiding this comment

alexneyman-MSFT May 9, 2024 • edited

Choose a reason for hiding this comment

TrevorJoelHarris Apr 23, 2024

Choose a reason for hiding this comment

TrevorJoelHarris left a comment

Choose a reason for hiding this comment

lakhveerk May 17, 2024

Choose a reason for hiding this comment

lakhveerk May 17, 2024

Choose a reason for hiding this comment

alexneyman-MSFT Apr 17, 2024 •

edited

alexneyman-MSFT May 9, 2024 •

edited

alexneyman-MSFT May 9, 2024 •

edited