Implement share functionality

[leela-solomon]

Context

The current share menu lacks functionality for users to share content directly via Email, Facebook, X (formerly Twitter), or by copying a link. Adding this functionality will improve user experience and encourage content sharing.

Definition of Done

• Share menu is updated to include the following working options: Email, Facebook, X (formerly Twitter), Copy link;
• Clicking on each menu item triggers the respective share functionality:
  • Email: Opens the default email client with a prefilled subject and body containing a link.
  • Facebook: Opens Facebook's share dialog for sharing the content link.
  • X: Opens X's sharing interface with a prefilled tweet containing the content link.
  • Copy link: Copies the content link to the user's clipboard, with a visual confirmation (e.g., toast notification).
• Testing is conducted to ensure each share option works correctly

Engineering Details

• Update the existing Share component to add the functionality.
• Implement sharing functionality using:
  • mailto: links for Email sharing.
  • Facebook’s Share Dialog URL: https://www.facebook.com/sharer/sharer.php?u=<URL>.
  • X’s Tweet Composer URL: https://twitter.com/intent/tweet?url=<URL>.
  • Clipboard API for copying the link (navigator.clipboard.writeText).
• Use Jest and React Testing Library to test the share functionality:
  • Verify mailto:, Facebook, and X links render with correct href attributes.
  • Mock the Clipboard API to test that the "Copy link" feature copies the correct URL and shows a confirmation message.
• Limitations: Testing frameworks cannot verify the execution of external sharing. Focus tests on DOM interaction and correct link generation.

[amnak613]

set up repo and am starting to work on the issue

[amnak613]

What I have right now:

Is this what we are going for or do we want to be able to share a specific report that we click on?

[amnak613]

url changes to this when searching but the page data does not change
1000 Great Highway

[amnak613]

Was able to get the url to work for Twitter, email, and copying it -> facebook seems to have an issue with the share so I'll be doing some additional tests

• check if it works with https url

• check if it works with localhost

• document findings

• works with a secure url when it is https

• does not work for localhost url IE http

The way I implemented the solution will work when we change to a secure production server