feat: enable preview token

[matteoscurati]

Description

This PR introduces the ability for the user to utilize a preview token generated by Contentful to view unpublished content. The PR is particularly useful for the marketing team, allowing them to test product announcements before they are published.

Related issues

N/A

Manual testing steps

0. Create a draft feature announcement through contentful.
1. retrieve the preview token from 1password or from marketing team/ @MetaMask/notifications team
2. view the page chrome-extension://<YOUR-EXTENSION-URL>/home.html?previewToken=000
3. navigate to the notifications page (you may need to enable notifications).
4. You should be able to see preview/draft feature announcements.

Screenshots/Recordings

N/A

Before

N/A

After

N/A

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[metamaskbot]

Builds ready [4777aa4]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1655 ± 54 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1475	2095	1658	121	58
		domContentLoaded	1432	1936	1624	100	48
		load	1473	2035	1655	113	54
		domInteractive	21	129	43	24	12

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 0 Bytes (0.00%)
• ui: 84 Bytes (0.00%)
• common: 5 Bytes (0.00%)

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[metamaskbot]

Builds ready [5b93f3b]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1709 ± 60 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1502	1942	1724	132	63
		domContentLoaded	1494	1929	1682	122	59
		load	1503	1942	1709	125	60
		domInteractive	19	75	40	17	8

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 0 Bytes (0.00%)
• ui: 84 Bytes (0.00%)
• common: 5 Bytes (0.00%)

[metamaskbot]

Builds ready [3b45315]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1789 ± 104 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1525	2333	1795	220	106
		domContentLoaded	1518	2318	1745	202	97
		load	1526	2340	1789	216	104
		domInteractive	24	107	50	18	8
		backgroundConnect	9	125	45	35	17
		firstReactRender	47	202	91	33	16
		getState	4	97	17	23	11
		initialActions	0	1	0	0	0
		loadScripts	1118	1880	1315	182	87
		setupStore	9	65	23	18	9
		uiStartup	1675	2549	2012	273	131

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 0 Bytes (0.00%)
• ui: 84 Bytes (0.00%)
• common: 5 Bytes (0.00%)

[legobeat]

@matteoscurati

Step 1: knowing the preview token

What is the preview token? How do I make use of this as a non-team-member?

How can I test it locally? Is there a local version of Contentful this can be used with?

[Prithpal-Sooriya]

@matteoscurati

Step 1: knowing the preview token

What is the preview token? How do I make use of this as a non-team-member?

How can I test it locally? Is there a local version of Contentful this can be used with?

Hey @legobeat,

@matteoscurati can you create a page in 1password to share this to both developers and marketing teams?

I believe we did the same for portfolio, lets either do the same for extension. Or (to make it easier for the marketing team) we can create preview links in Contentful for when the marketing team handle draft feature announcements.