From 97bad1518052a95ea80da1fc434fe4a0b68c51cc Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Wed, 2 Dec 2020 14:33:37 -0800
Subject: [PATCH 01/24] fix(gatsby): show multiple invites together & at end
 where people are more likely to see them

---
 packages/gatsby/src/services/initialize.ts    | 18 +++++-----
 .../gatsby/src/services/run-page-queries.ts   | 18 +++++-----
 .../src/utils/show-experiment-notice.ts       | 34 +++++++++++++++++--
 packages/gatsby/src/utils/start-server.ts     | 12 +++----
 4 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/packages/gatsby/src/services/initialize.ts b/packages/gatsby/src/services/initialize.ts
index e6666fc84c5ee..d2e22638b1fe9 100644
--- a/packages/gatsby/src/services/initialize.ts
+++ b/packages/gatsby/src/services/initialize.ts
@@ -65,20 +65,20 @@ if (
   sampleSiteForExperiment(`DEV_SSR`, 5)
 ) {
   showExperimentNoticeAfterTimeout(
-    `devSSR`,
-    `
-Your dev experience is about to get better, faster, and stronger!
+    `DEV_SSR`,
+    {
+      reason: `We'll soon be shipping support for SSR in development.`,
+      solution: `This will help the dev environment more closely mimic builds so you'll catch build errors earlier and fix them faster.
 
-We'll soon be shipping support for SSR in development.
+Try out develop SSR *today* by enabling it in your gatsby-config.js:
 
-This will help the dev environment more closely mimic builds so you'll catch build errors earlier and fix them faster.
-
-Try out develop SSR *today* by running your site with it enabled:
-
-GATSBY_EXPERIMENTAL_DEV_SSR=true gatsby develop
+flags: {
+  DEV_SSR: true
+}
 
 Please let us know how it goes good, bad, or otherwise at gatsby.dev/dev-ssr-feedback
       `,
+    },
     1 // Show this immediately to the subset of sites selected.
   )
 }
diff --git a/packages/gatsby/src/services/run-page-queries.ts b/packages/gatsby/src/services/run-page-queries.ts
index 2c76f54440755..991b1c3fea8e2 100644
--- a/packages/gatsby/src/services/run-page-queries.ts
+++ b/packages/gatsby/src/services/run-page-queries.ts
@@ -50,18 +50,16 @@ export async function runPageQueries({
     !isCI()
   ) {
     cancelNotice = showExperimentNoticeAfterTimeout(
-      `queryOnDemand`,
-      reporter.stripIndent(`
-        Your local development experience is about to get better, faster, and stronger!
+      `QUERY_ON_DEMAND`,
+      {
+        reason: `We noticed your site takes longer than ideal to run page queries.`,
+        solution: `We're changing how we run queries in development so queries only run when you need them when you visit a page. This will help make starting your development server a lot faster.
 
-        Your friendly Gatsby maintainers detected your site takes longer than ideal to run page queries. We're working right now to improve this.
+You can enable it by adding "flags: { QUERY_ON_DEMAND: true }" to your gatsby-config.js
 
-        If you're interested in trialing out one of these future improvements *today* which should make your local development experience faster, go ahead and run your site with QUERY_ON_DEMAND enabled.
-
-        You can enable it by adding "flags: { QUERY_ON_DEMAND: true }" to your gatsby-config.js
-
-        Please do let us know how it goes (good, bad, or otherwise) and learn more about it at https://gatsby.dev/query-on-demand-feedback
-      `),
+Please do let us know how it goes (good, bad, or otherwise) and learn more about it at https://gatsby.dev/query-on-demand-feedback
+      `,
+      },
       ONE_MINUTE
     )
   }
diff --git a/packages/gatsby/src/utils/show-experiment-notice.ts b/packages/gatsby/src/utils/show-experiment-notice.ts
index d836e116297c7..3b1806bd471e7 100644
--- a/packages/gatsby/src/utils/show-experiment-notice.ts
+++ b/packages/gatsby/src/utils/show-experiment-notice.ts
@@ -1,5 +1,7 @@
 import { getConfigStore } from "gatsby-core-utils"
 import reporter from "gatsby-cli/lib/reporter"
+import { emitter } from "../redux"
+import chalk from "chalk"
 
 type CancelExperimentNoticeCallback = () => void
 
@@ -9,9 +11,20 @@ export type CancelExperimentNoticeCallbackOrUndefined =
 
 const ONE_DAY = 24 * 60 * 60 * 1000
 
+interface INoticeObject {
+  reason: string
+  solution: string
+}
+
+type NoticesToShow = INoticeObject & {
+  experimentIdentifier: string
+}
+
+const noticesToShow: Array<NoticesToShow> = []
+
 export function showExperimentNoticeAfterTimeout(
   experimentIdentifier: string,
-  noticeText: string,
+  noticeObject: INoticeObject,
   showNoticeAfterMs: number,
   minimumIntervalBetweenNoticesMs: number = ONE_DAY
 ): CancelExperimentNoticeCallbackOrUndefined {
@@ -26,7 +39,7 @@ export function showExperimentNoticeAfterTimeout(
   }
 
   const noticeTimeout = setTimeout(() => {
-    reporter.info(`\n\n${noticeText}\n\n`)
+    noticesToShow.push({ ...noticeObject, experimentIdentifier })
 
     getConfigStore().set(configStoreKey, Date.now())
   }, showNoticeAfterMs)
@@ -35,3 +48,20 @@ export function showExperimentNoticeAfterTimeout(
     clearTimeout(noticeTimeout)
   }
 }
+
+emitter.on(`COMPILATION_DONE`, () => {
+  emitter.off(`COMPILATION_DONE`, () => {})
+
+  if (noticesToShow.length > 0) {
+    let message = `\n\nHello! Your friendly Gatsby maintainers detected ways to improve your site. We're working on new improvements and invite you to try them out *today* and help ready them for general release.`
+
+    noticesToShow.forEach(
+      notice =>
+        (message += `\n\n${chalk.bgBlue.bold(
+          notice.experimentIdentifier
+        )}\n-${notice.reason.trim()}\n-${notice.solution.trim()}\n`)
+    )
+
+    reporter.info(message)
+  }
+})
diff --git a/packages/gatsby/src/utils/start-server.ts b/packages/gatsby/src/utils/start-server.ts
index 5c4458d049f9f..7ca2078d02752 100644
--- a/packages/gatsby/src/utils/start-server.ts
+++ b/packages/gatsby/src/utils/start-server.ts
@@ -93,19 +93,19 @@ export async function startServer(
   ) {
     cancelDevJSNotice = showExperimentNoticeAfterTimeout(
       `PRESERVE_WEBPACK_CACHE`,
-      report.stripIndent(`
-Your friendly Gatsby maintainers detected your site has more JavaScript than most sites! We're working to make your site's JS compile as quickly as possible by avoiding clearing your webpack cache as often.
-
-If you're interested in trialing this coming change *today* — which should make your local development experience faster — go ahead and enable the PRESERVE_WEBPACK_CACHE flag and run your develop server again.
+      {
+        reason: `We noticed your site has more JavaScript than most sites.`,
+        solution: `We're changing the cache clearing behavior to not clear webpack's cache unless really necessary. This will make your local development server load faster.
 
-To do so, add to your gatsby-config.js:
+To enable this behavior, add this flag to your gatsby-config.js:
 
 flags: {
   PRESERVE_WEBPACK_CACHE: true,
 }
 
 Visit the umbrella issue to learn more: https://github.com/gatsbyjs/gatsby/discussions/28331
-      `),
+      `,
+      },
       THIRTY_SECONDS
     )
   }

From 8f89eba49fdda97e90789ae8a85fba4e4d3d1b09 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Wed, 2 Dec 2020 14:35:26 -0800
Subject: [PATCH 02/24] Add telemetry

---
 packages/gatsby/src/utils/show-experiment-notice.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/gatsby/src/utils/show-experiment-notice.ts b/packages/gatsby/src/utils/show-experiment-notice.ts
index 3b1806bd471e7..55cf32e56e796 100644
--- a/packages/gatsby/src/utils/show-experiment-notice.ts
+++ b/packages/gatsby/src/utils/show-experiment-notice.ts
@@ -2,6 +2,7 @@ import { getConfigStore } from "gatsby-core-utils"
 import reporter from "gatsby-cli/lib/reporter"
 import { emitter } from "../redux"
 import chalk from "chalk"
+import telemetry from "gatsby-telemetry"
 
 type CancelExperimentNoticeCallback = () => void
 
@@ -53,6 +54,7 @@ emitter.on(`COMPILATION_DONE`, () => {
   emitter.off(`COMPILATION_DONE`, () => {})
 
   if (noticesToShow.length > 0) {
+    telemetry.trackFeatureIsUsed(`InviteToTryExperiment`)
     let message = `\n\nHello! Your friendly Gatsby maintainers detected ways to improve your site. We're working on new improvements and invite you to try them out *today* and help ready them for general release.`
 
     noticesToShow.forEach(

From 47c8f71c6aa9283ae18f0d1f488d55f7478cb5a7 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Wed, 2 Dec 2020 16:15:37 -0800
Subject: [PATCH 03/24] update copy from suggestions by @DSchau

---
 packages/gatsby/src/services/initialize.ts    | 21 ++++++++++-------
 .../gatsby/src/services/run-page-queries.ts   | 23 ++++++++++++-------
 .../src/utils/show-experiment-notice.ts       | 19 ++++++++-------
 packages/gatsby/src/utils/start-server.ts     | 17 +++++++-------
 4 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/packages/gatsby/src/services/initialize.ts b/packages/gatsby/src/services/initialize.ts
index d2e22638b1fe9..ebef5d91ab96a 100644
--- a/packages/gatsby/src/services/initialize.ts
+++ b/packages/gatsby/src/services/initialize.ts
@@ -6,6 +6,7 @@ import crypto from "crypto"
 import del from "del"
 import path from "path"
 import telemetry from "gatsby-telemetry"
+import chalk from "chalk"
 
 import apiRunnerNode from "../utils/api-runner-node"
 import handleFlags from "../utils/handle-flags"
@@ -65,20 +66,24 @@ if (
   sampleSiteForExperiment(`DEV_SSR`, 5)
 ) {
   showExperimentNoticeAfterTimeout(
-    `DEV_SSR`,
-    {
-      reason: `We'll soon be shipping support for SSR in development.`,
-      solution: `This will help the dev environment more closely mimic builds so you'll catch build errors earlier and fix them faster.
+    `SSR in Development`,
+    `We'll soon be shipping support for ${chalk.bold(
+      `server-side rendering (SSR)`
+    )} in development.
+This will help you as it'll more closely match the behavior of \`gatsby build\`
+which will enable you to catch errors more quickly and ultimately, fix them more
+quickly.
 
 Try out develop SSR *today* by enabling it in your gatsby-config.js:
 
-flags: {
-  DEV_SSR: true
-}
+  module.exports = {
+    flags: {
+      DEV_SSR: true
+    }
+  }
 
 Please let us know how it goes good, bad, or otherwise at gatsby.dev/dev-ssr-feedback
       `,
-    },
     1 // Show this immediately to the subset of sites selected.
   )
 }
diff --git a/packages/gatsby/src/services/run-page-queries.ts b/packages/gatsby/src/services/run-page-queries.ts
index 991b1c3fea8e2..60174aef1a703 100644
--- a/packages/gatsby/src/services/run-page-queries.ts
+++ b/packages/gatsby/src/services/run-page-queries.ts
@@ -1,3 +1,4 @@
+import chalk from "chalk"
 import { processPageQueries } from "../query"
 import reporter from "gatsby-cli/lib/reporter"
 import { IQueryRunningContext } from "../state-machines/query-running/types"
@@ -50,16 +51,22 @@ export async function runPageQueries({
     !isCI()
   ) {
     cancelNotice = showExperimentNoticeAfterTimeout(
-      `QUERY_ON_DEMAND`,
-      {
-        reason: `We noticed your site takes longer than ideal to run page queries.`,
-        solution: `We're changing how we run queries in development so queries only run when you need them when you visit a page. This will help make starting your development server a lot faster.
+      `Query On Demand`,
+      `We noticed your site takes longer than ideal to run page queries. We're changing
+soon how we run queries in development so queries only run for pages as you
+visit them. This avoids a lot of upfront work which helps make starting your
+development server ${chalk.bold(`a whole lot faster`)}.
 
-You can enable it by adding "flags: { QUERY_ON_DEMAND: true }" to your gatsby-config.js
+You can try out Query on Demand *today* by enabling it in your gatsby-config.js:
 
-Please do let us know how it goes (good, bad, or otherwise) and learn more about it at https://gatsby.dev/query-on-demand-feedback
-      `,
-      },
+  module.exports = {
+    flags: {
+      QUERY_ON_DEMAND: true
+    }
+  }
+
+Please do let us know how it goes (good, bad, or otherwise) and learn more about it
+at https://gatsby.dev/query-on-demand-feedback`,
       ONE_MINUTE
     )
   }
diff --git a/packages/gatsby/src/utils/show-experiment-notice.ts b/packages/gatsby/src/utils/show-experiment-notice.ts
index 55cf32e56e796..309f64c62a012 100644
--- a/packages/gatsby/src/utils/show-experiment-notice.ts
+++ b/packages/gatsby/src/utils/show-experiment-notice.ts
@@ -13,19 +13,15 @@ export type CancelExperimentNoticeCallbackOrUndefined =
 const ONE_DAY = 24 * 60 * 60 * 1000
 
 interface INoticeObject {
-  reason: string
-  solution: string
-}
-
-type NoticesToShow = INoticeObject & {
+  noticeText: string
   experimentIdentifier: string
 }
 
-const noticesToShow: Array<NoticesToShow> = []
+const noticesToShow: Array<INoticeObject> = []
 
 export function showExperimentNoticeAfterTimeout(
   experimentIdentifier: string,
-  noticeObject: INoticeObject,
+  noticeText: string,
   showNoticeAfterMs: number,
   minimumIntervalBetweenNoticesMs: number = ONE_DAY
 ): CancelExperimentNoticeCallbackOrUndefined {
@@ -40,7 +36,7 @@ export function showExperimentNoticeAfterTimeout(
   }
 
   const noticeTimeout = setTimeout(() => {
-    noticesToShow.push({ ...noticeObject, experimentIdentifier })
+    noticesToShow.push({ noticeText, experimentIdentifier })
 
     getConfigStore().set(configStoreKey, Date.now())
   }, showNoticeAfterMs)
@@ -55,13 +51,16 @@ emitter.on(`COMPILATION_DONE`, () => {
 
   if (noticesToShow.length > 0) {
     telemetry.trackFeatureIsUsed(`InviteToTryExperiment`)
-    let message = `\n\nHello! Your friendly Gatsby maintainers detected ways to improve your site. We're working on new improvements and invite you to try them out *today* and help ready them for general release.`
+    let message = `\n
+Hello! Your friendly Gatsby maintainers detected ways to improve your site. We're
+working on new improvements and invite you to try them out *today* and help ready
+them for general release.`
 
     noticesToShow.forEach(
       notice =>
         (message += `\n\n${chalk.bgBlue.bold(
           notice.experimentIdentifier
-        )}\n-${notice.reason.trim()}\n-${notice.solution.trim()}\n`)
+        )}\n${notice.noticeText.trim()}\n`)
     )
 
     reporter.info(message)
diff --git a/packages/gatsby/src/utils/start-server.ts b/packages/gatsby/src/utils/start-server.ts
index 7ca2078d02752..3c1bccdb9e2ce 100644
--- a/packages/gatsby/src/utils/start-server.ts
+++ b/packages/gatsby/src/utils/start-server.ts
@@ -92,20 +92,21 @@ export async function startServer(
     !isCI()
   ) {
     cancelDevJSNotice = showExperimentNoticeAfterTimeout(
-      `PRESERVE_WEBPACK_CACHE`,
-      {
-        reason: `We noticed your site has more JavaScript than most sites.`,
-        solution: `We're changing the cache clearing behavior to not clear webpack's cache unless really necessary. This will make your local development server load faster.
+      `Don't clear webpack's cache as often`,
+      `We noticed your site has more JavaScript than most sites. We're working to make
+compiling your code faster by not clearing webpack's cache unless really
+necessary. This will make your local development server load faster.
 
 To enable this behavior, add this flag to your gatsby-config.js:
 
-flags: {
-  PRESERVE_WEBPACK_CACHE: true,
-}
+  module.exports = {
+    flags: {
+      PRESERVE_WEBPACK_CACHE: true,
+    },
+  }
 
 Visit the umbrella issue to learn more: https://github.com/gatsbyjs/gatsby/discussions/28331
       `,
-      },
       THIRTY_SECONDS
     )
   }

From 79cf63bb9a6ec600b198bf07e70f97225de2df91 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Thu, 3 Dec 2020 08:39:47 -0800
Subject: [PATCH 04/24] Actually stop listening

---
 packages/gatsby/src/utils/show-experiment-notice.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/gatsby/src/utils/show-experiment-notice.ts b/packages/gatsby/src/utils/show-experiment-notice.ts
index 309f64c62a012..ed125bf7bf02a 100644
--- a/packages/gatsby/src/utils/show-experiment-notice.ts
+++ b/packages/gatsby/src/utils/show-experiment-notice.ts
@@ -46,9 +46,8 @@ export function showExperimentNoticeAfterTimeout(
   }
 }
 
-emitter.on(`COMPILATION_DONE`, () => {
-  emitter.off(`COMPILATION_DONE`, () => {})
-
+const showNotices = () => {
+  emitter.off(`COMPILATION_DONE`, showNotices)
   if (noticesToShow.length > 0) {
     telemetry.trackFeatureIsUsed(`InviteToTryExperiment`)
     let message = `\n
@@ -65,4 +64,6 @@ them for general release.`
 
     reporter.info(message)
   }
-})
+}
+
+emitter.on(`COMPILATION_DONE`, showNotices)

From dd226788fed4764d7b3a394916750b78ef6ab384 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Thu, 3 Dec 2020 08:49:15 -0800
Subject: [PATCH 05/24] Update
 packages/gatsby/src/utils/show-experiment-notice.ts

Co-authored-by: Matt Kane <matt@gatsbyjs.com>
---
 packages/gatsby/src/utils/show-experiment-notice.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby/src/utils/show-experiment-notice.ts b/packages/gatsby/src/utils/show-experiment-notice.ts
index ed125bf7bf02a..67ab81dfe05b2 100644
--- a/packages/gatsby/src/utils/show-experiment-notice.ts
+++ b/packages/gatsby/src/utils/show-experiment-notice.ts
@@ -46,7 +46,7 @@ export function showExperimentNoticeAfterTimeout(
   }
 }
 
-const showNotices = () => {
+const showNotices = (): void => {
   emitter.off(`COMPILATION_DONE`, showNotices)
   if (noticesToShow.length > 0) {
     telemetry.trackFeatureIsUsed(`InviteToTryExperiment`)

From 9c03933c2038c6d92c7ea4b24ed9023aa8ed190f Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Thu, 3 Dec 2020 10:45:07 -0800
Subject: [PATCH 06/24] Add test for generating the message

---
 .../show-experiment-notice.js.snap            | 13 +++++++++
 .../utils/__tests__/show-experiment-notice.js | 14 ++++++++++
 .../src/utils/show-experiment-notice.ts       | 27 +++++++++++--------
 3 files changed, 43 insertions(+), 11 deletions(-)
 create mode 100644 packages/gatsby/src/utils/__tests__/__snapshots__/show-experiment-notice.js.snap
 create mode 100644 packages/gatsby/src/utils/__tests__/show-experiment-notice.js

diff --git a/packages/gatsby/src/utils/__tests__/__snapshots__/show-experiment-notice.js.snap b/packages/gatsby/src/utils/__tests__/__snapshots__/show-experiment-notice.js.snap
new file mode 100644
index 0000000000000..2c8f19d09d9dd
--- /dev/null
+++ b/packages/gatsby/src/utils/__tests__/__snapshots__/show-experiment-notice.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`show-experiment-notice generates a message 1`] = `
+"
+
+Hello! Your friendly Gatsby maintainers detected ways to improve your site. We're
+working on new improvements and invite you to try them out *today* and help ready
+them for general release.
+
+The Flag
+hi
+"
+`;
diff --git a/packages/gatsby/src/utils/__tests__/show-experiment-notice.js b/packages/gatsby/src/utils/__tests__/show-experiment-notice.js
new file mode 100644
index 0000000000000..89c6094d3d6af
--- /dev/null
+++ b/packages/gatsby/src/utils/__tests__/show-experiment-notice.js
@@ -0,0 +1,14 @@
+import { createNoticeMessage } from "../show-experiment-notice"
+
+describe(`show-experiment-notice`, () => {
+  it(`generates a message`, () => {
+    expect(
+      createNoticeMessage([
+        {
+          noticeText: `hi`,
+          experimentIdentifier: `The Flag`,
+        },
+      ])
+    ).toMatchSnapshot()
+  })
+})
diff --git a/packages/gatsby/src/utils/show-experiment-notice.ts b/packages/gatsby/src/utils/show-experiment-notice.ts
index 67ab81dfe05b2..c487f25032089 100644
--- a/packages/gatsby/src/utils/show-experiment-notice.ts
+++ b/packages/gatsby/src/utils/show-experiment-notice.ts
@@ -46,22 +46,27 @@ export function showExperimentNoticeAfterTimeout(
   }
 }
 
-const showNotices = (): void => {
-  emitter.off(`COMPILATION_DONE`, showNotices)
-  if (noticesToShow.length > 0) {
-    telemetry.trackFeatureIsUsed(`InviteToTryExperiment`)
-    let message = `\n
+export const createNoticeMessage = (notices): string => {
+  let message = `\n
 Hello! Your friendly Gatsby maintainers detected ways to improve your site. We're
 working on new improvements and invite you to try them out *today* and help ready
 them for general release.`
 
-    noticesToShow.forEach(
-      notice =>
-        (message += `\n\n${chalk.bgBlue.bold(
-          notice.experimentIdentifier
-        )}\n${notice.noticeText.trim()}\n`)
-    )
+  notices.forEach(
+    notice =>
+      (message += `\n\n${chalk.bgBlue.bold(
+        notice.experimentIdentifier
+      )}\n${notice.noticeText.trim()}\n`)
+  )
+
+  return message
+}
 
+const showNotices = (): void => {
+  emitter.off(`COMPILATION_DONE`, showNotices)
+  if (noticesToShow.length > 0) {
+    telemetry.trackFeatureIsUsed(`InviteToTryExperiment`)
+    const message = createNoticeMessage(noticesToShow)
     reporter.info(message)
   }
 }

From dd606f37e7dee5980328e60d5d83b91b836e4537 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Thu, 3 Dec 2020 11:04:09 -0800
Subject: [PATCH 07/24] rewrite messages & make shorter

---
 packages/gatsby/src/services/initialize.ts    | 19 +++-------------
 .../gatsby/src/services/run-page-queries.ts   | 17 +++-----------
 .../utils/__tests__/show-experiment-notice.js |  1 +
 .../src/utils/show-experiment-notice.ts       | 22 ++++++++++++++-----
 packages/gatsby/src/utils/start-server.ts     | 19 +++++-----------
 5 files changed, 28 insertions(+), 50 deletions(-)

diff --git a/packages/gatsby/src/services/initialize.ts b/packages/gatsby/src/services/initialize.ts
index ebef5d91ab96a..70e484bd96d43 100644
--- a/packages/gatsby/src/services/initialize.ts
+++ b/packages/gatsby/src/services/initialize.ts
@@ -67,23 +67,10 @@ if (
 ) {
   showExperimentNoticeAfterTimeout(
     `SSR in Development`,
-    `We'll soon be shipping support for ${chalk.bold(
-      `server-side rendering (SSR)`
-    )} in development.
-This will help you as it'll more closely match the behavior of \`gatsby build\`
-which will enable you to catch errors more quickly and ultimately, fix them more
-quickly.
-
-Try out develop SSR *today* by enabling it in your gatsby-config.js:
-
-  module.exports = {
-    flags: {
-      DEV_SSR: true
-    }
-  }
+    `gatsby.dev/dev-ssr-feedback`,
+    `which helps surface issues with build errors more quickly. Here's how to try it:
 
-Please let us know how it goes good, bad, or otherwise at gatsby.dev/dev-ssr-feedback
-      `,
+flags : { DEV_SSR: true, }`,
     1 // Show this immediately to the subset of sites selected.
   )
 }
diff --git a/packages/gatsby/src/services/run-page-queries.ts b/packages/gatsby/src/services/run-page-queries.ts
index 60174aef1a703..60138cb5e7ad7 100644
--- a/packages/gatsby/src/services/run-page-queries.ts
+++ b/packages/gatsby/src/services/run-page-queries.ts
@@ -52,21 +52,10 @@ export async function runPageQueries({
   ) {
     cancelNotice = showExperimentNoticeAfterTimeout(
       `Query On Demand`,
-      `We noticed your site takes longer than ideal to run page queries. We're changing
-soon how we run queries in development so queries only run for pages as you
-visit them. This avoids a lot of upfront work which helps make starting your
-development server ${chalk.bold(`a whole lot faster`)}.
+      `https://gatsby.dev/query-on-demand-feedback`,
+      `which avoids running queries in development until you visit a page — so a lot less upfront work. Here's how to try it:
 
-You can try out Query on Demand *today* by enabling it in your gatsby-config.js:
-
-  module.exports = {
-    flags: {
-      QUERY_ON_DEMAND: true
-    }
-  }
-
-Please do let us know how it goes (good, bad, or otherwise) and learn more about it
-at https://gatsby.dev/query-on-demand-feedback`,
+flags: { QUERY_ON_DEMAND: true }`,
       ONE_MINUTE
     )
   }
diff --git a/packages/gatsby/src/utils/__tests__/show-experiment-notice.js b/packages/gatsby/src/utils/__tests__/show-experiment-notice.js
index 89c6094d3d6af..c0d3fbb12c9c4 100644
--- a/packages/gatsby/src/utils/__tests__/show-experiment-notice.js
+++ b/packages/gatsby/src/utils/__tests__/show-experiment-notice.js
@@ -6,6 +6,7 @@ describe(`show-experiment-notice`, () => {
       createNoticeMessage([
         {
           noticeText: `hi`,
+          umbrellaLink: `http://example.com`,
           experimentIdentifier: `The Flag`,
         },
       ])
diff --git a/packages/gatsby/src/utils/show-experiment-notice.ts b/packages/gatsby/src/utils/show-experiment-notice.ts
index c487f25032089..4f71f12d581ba 100644
--- a/packages/gatsby/src/utils/show-experiment-notice.ts
+++ b/packages/gatsby/src/utils/show-experiment-notice.ts
@@ -3,6 +3,15 @@ import reporter from "gatsby-cli/lib/reporter"
 import { emitter } from "../redux"
 import chalk from "chalk"
 import telemetry from "gatsby-telemetry"
+import realTerminalLink from "terminal-link"
+
+const terminalLink = (text, url): string => {
+  if (process.env.NODE_ENV === `test`) {
+    return `${text} (${url})`
+  } else {
+    return realTerminalLink(text, url)
+  }
+}
 
 type CancelExperimentNoticeCallback = () => void
 
@@ -21,6 +30,7 @@ const noticesToShow: Array<INoticeObject> = []
 
 export function showExperimentNoticeAfterTimeout(
   experimentIdentifier: string,
+  umbrellaLink: string,
   noticeText: string,
   showNoticeAfterMs: number,
   minimumIntervalBetweenNoticesMs: number = ONE_DAY
@@ -36,7 +46,7 @@ export function showExperimentNoticeAfterTimeout(
   }
 
   const noticeTimeout = setTimeout(() => {
-    noticesToShow.push({ noticeText, experimentIdentifier })
+    noticesToShow.push({ noticeText, umbrellaLink, experimentIdentifier })
 
     getConfigStore().set(configStoreKey, Date.now())
   }, showNoticeAfterMs)
@@ -48,15 +58,15 @@ export function showExperimentNoticeAfterTimeout(
 
 export const createNoticeMessage = (notices): string => {
   let message = `\n
-Hello! Your friendly Gatsby maintainers detected ways to improve your site. We're
-working on new improvements and invite you to try them out *today* and help ready
-them for general release.`
+Hi from the Gatsby maintainers! Based on what we see in your site, these coming
+features may help you. All of these can be enabled within gatsby-config.js via
+flags (samples below)`
 
   notices.forEach(
     notice =>
       (message += `\n\n${chalk.bgBlue.bold(
-        notice.experimentIdentifier
-      )}\n${notice.noticeText.trim()}\n`)
+        terminalLink(notice.experimentIdentifier, notice.umbrellaLink)
+      )}, ${notice.noticeText.trim()}\n`)
   )
 
   return message
diff --git a/packages/gatsby/src/utils/start-server.ts b/packages/gatsby/src/utils/start-server.ts
index 3c1bccdb9e2ce..50107fe95cf5a 100644
--- a/packages/gatsby/src/utils/start-server.ts
+++ b/packages/gatsby/src/utils/start-server.ts
@@ -92,21 +92,12 @@ export async function startServer(
     !isCI()
   ) {
     cancelDevJSNotice = showExperimentNoticeAfterTimeout(
-      `Don't clear webpack's cache as often`,
-      `We noticed your site has more JavaScript than most sites. We're working to make
-compiling your code faster by not clearing webpack's cache unless really
-necessary. This will make your local development server load faster.
+      `Preserve webpack's Cache`,
+      `https://github.com/gatsbyjs/gatsby/discussions/28331`,
+      `which changes Gatsby's cache clearing behavior to not clear webpack's cache unless really
+necessary. Here's how to try it:
 
-To enable this behavior, add this flag to your gatsby-config.js:
-
-  module.exports = {
-    flags: {
-      PRESERVE_WEBPACK_CACHE: true,
-    },
-  }
-
-Visit the umbrella issue to learn more: https://github.com/gatsbyjs/gatsby/discussions/28331
-      `,
+flags: { PRESERVE_WEBPACK_CACHE: true }`,
       THIRTY_SECONDS
     )
   }

From 81e6c4ad9b4bd135e711a2e1dfd4f110c42fcb75 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Thu, 3 Dec 2020 11:09:03 -0800
Subject: [PATCH 08/24] make all the things happy

---
 packages/gatsby/src/services/initialize.ts          | 1 -
 packages/gatsby/src/services/run-page-queries.ts    | 1 -
 packages/gatsby/src/utils/show-experiment-notice.ts | 1 +
 3 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/gatsby/src/services/initialize.ts b/packages/gatsby/src/services/initialize.ts
index 70e484bd96d43..c256854d2ca97 100644
--- a/packages/gatsby/src/services/initialize.ts
+++ b/packages/gatsby/src/services/initialize.ts
@@ -6,7 +6,6 @@ import crypto from "crypto"
 import del from "del"
 import path from "path"
 import telemetry from "gatsby-telemetry"
-import chalk from "chalk"
 
 import apiRunnerNode from "../utils/api-runner-node"
 import handleFlags from "../utils/handle-flags"
diff --git a/packages/gatsby/src/services/run-page-queries.ts b/packages/gatsby/src/services/run-page-queries.ts
index 60138cb5e7ad7..d502d65686180 100644
--- a/packages/gatsby/src/services/run-page-queries.ts
+++ b/packages/gatsby/src/services/run-page-queries.ts
@@ -1,4 +1,3 @@
-import chalk from "chalk"
 import { processPageQueries } from "../query"
 import reporter from "gatsby-cli/lib/reporter"
 import { IQueryRunningContext } from "../state-machines/query-running/types"
diff --git a/packages/gatsby/src/utils/show-experiment-notice.ts b/packages/gatsby/src/utils/show-experiment-notice.ts
index 4f71f12d581ba..70a50f5eab7d8 100644
--- a/packages/gatsby/src/utils/show-experiment-notice.ts
+++ b/packages/gatsby/src/utils/show-experiment-notice.ts
@@ -23,6 +23,7 @@ const ONE_DAY = 24 * 60 * 60 * 1000
 
 interface INoticeObject {
   noticeText: string
+  umbrellaLink: string
   experimentIdentifier: string
 }
 

From 8ba6320fccb124b34e03f0275e4bf7f4e13bef5d Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Thu, 3 Dec 2020 13:28:43 -0800
Subject: [PATCH 09/24] update flag

---
 .../__snapshots__/show-experiment-notice.js.snap         | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/gatsby/src/utils/__tests__/__snapshots__/show-experiment-notice.js.snap b/packages/gatsby/src/utils/__tests__/__snapshots__/show-experiment-notice.js.snap
index 2c8f19d09d9dd..1399ebb1d4248 100644
--- a/packages/gatsby/src/utils/__tests__/__snapshots__/show-experiment-notice.js.snap
+++ b/packages/gatsby/src/utils/__tests__/__snapshots__/show-experiment-notice.js.snap
@@ -3,11 +3,10 @@
 exports[`show-experiment-notice generates a message 1`] = `
 "
 
-Hello! Your friendly Gatsby maintainers detected ways to improve your site. We're
-working on new improvements and invite you to try them out *today* and help ready
-them for general release.
+Hi from the Gatsby maintainers! Based on what we see in your site, these coming
+features may help you. All of these can be enabled within gatsby-config.js via
+flags (samples below)
 
-The Flag
-hi
+The Flag (http://example.com), hi
 "
 `;

From 4a83ed15f2a747c0c2a5193538538466ff4bb2b2 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Thu, 3 Dec 2020 17:41:42 -0800
Subject: [PATCH 10/24] This breaking windows??

---
 packages/gatsby/src/utils/show-experiment-notice.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby/src/utils/show-experiment-notice.ts b/packages/gatsby/src/utils/show-experiment-notice.ts
index 70a50f5eab7d8..c8cc4de435a5b 100644
--- a/packages/gatsby/src/utils/show-experiment-notice.ts
+++ b/packages/gatsby/src/utils/show-experiment-notice.ts
@@ -67,7 +67,7 @@ flags (samples below)`
     notice =>
       (message += `\n\n${chalk.bgBlue.bold(
         terminalLink(notice.experimentIdentifier, notice.umbrellaLink)
-      )}, ${notice.noticeText.trim()}\n`)
+      )}, ${notice.noticeText}\n`)
   )
 
   return message

From dc87257b1704d1eab72a5f6a8216f0867aa06be6 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Fri, 4 Dec 2020 08:26:31 -0800
Subject: [PATCH 11/24] Don't use explicit \n to see if that helps snapshot

---
 .../__snapshots__/show-experiment-notice.js.snap      |  1 -
 packages/gatsby/src/utils/show-experiment-notice.ts   | 11 +++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/gatsby/src/utils/__tests__/__snapshots__/show-experiment-notice.js.snap b/packages/gatsby/src/utils/__tests__/__snapshots__/show-experiment-notice.js.snap
index 1399ebb1d4248..235bdbce71eb9 100644
--- a/packages/gatsby/src/utils/__tests__/__snapshots__/show-experiment-notice.js.snap
+++ b/packages/gatsby/src/utils/__tests__/__snapshots__/show-experiment-notice.js.snap
@@ -2,7 +2,6 @@
 
 exports[`show-experiment-notice generates a message 1`] = `
 "
-
 Hi from the Gatsby maintainers! Based on what we see in your site, these coming
 features may help you. All of these can be enabled within gatsby-config.js via
 flags (samples below)
diff --git a/packages/gatsby/src/utils/show-experiment-notice.ts b/packages/gatsby/src/utils/show-experiment-notice.ts
index c8cc4de435a5b..b53748122303f 100644
--- a/packages/gatsby/src/utils/show-experiment-notice.ts
+++ b/packages/gatsby/src/utils/show-experiment-notice.ts
@@ -58,16 +58,19 @@ export function showExperimentNoticeAfterTimeout(
 }
 
 export const createNoticeMessage = (notices): string => {
-  let message = `\n
+  let message = `
 Hi from the Gatsby maintainers! Based on what we see in your site, these coming
 features may help you. All of these can be enabled within gatsby-config.js via
 flags (samples below)`
 
   notices.forEach(
     notice =>
-      (message += `\n\n${chalk.bgBlue.bold(
-        terminalLink(notice.experimentIdentifier, notice.umbrellaLink)
-      )}, ${notice.noticeText}\n`)
+      (message += `
+
+${chalk.bgBlue.bold(
+  terminalLink(notice.experimentIdentifier, notice.umbrellaLink)
+)}, ${notice.noticeText}
+`)
   )
 
   return message

From 5066a261e9c06b7f03caa7850bd638dc89529f94 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Fri, 4 Dec 2020 09:39:11 -0800
Subject: [PATCH 12/24] =?UTF-8?q?Maybe=20jest=20is=20fine=20w/=20explicit?=
 =?UTF-8?q?=20new-lines=20=F0=9F=A4=B7=E2=80=8D=E2=99=82=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/gatsby/src/utils/show-experiment-notice.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/gatsby/src/utils/show-experiment-notice.ts b/packages/gatsby/src/utils/show-experiment-notice.ts
index b53748122303f..22088e461216d 100644
--- a/packages/gatsby/src/utils/show-experiment-notice.ts
+++ b/packages/gatsby/src/utils/show-experiment-notice.ts
@@ -58,8 +58,7 @@ export function showExperimentNoticeAfterTimeout(
 }
 
 export const createNoticeMessage = (notices): string => {
-  let message = `
-Hi from the Gatsby maintainers! Based on what we see in your site, these coming
+  let message = `\nHi from the Gatsby maintainers! Based on what we see in your site, these coming
 features may help you. All of these can be enabled within gatsby-config.js via
 flags (samples below)`
 
@@ -69,8 +68,7 @@ flags (samples below)`
 
 ${chalk.bgBlue.bold(
   terminalLink(notice.experimentIdentifier, notice.umbrellaLink)
-)}, ${notice.noticeText}
-`)
+)}, ${notice.noticeText}\n`)
   )
 
   return message

From dac570b156fcdf7c1c140448fcb4b6864e5c95c5 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Fri, 4 Dec 2020 14:24:21 -0800
Subject: [PATCH 13/24] Strip ansi for tests

---
 packages/gatsby/package.json                    |  1 +
 .../show-experiment-notice.js.snap              |  2 +-
 .../utils/__tests__/show-experiment-notice.js   | 17 ++++++++++-------
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json
index 27bbcb3071bce..923197e185d15 100644
--- a/packages/gatsby/package.json
+++ b/packages/gatsby/package.json
@@ -143,6 +143,7 @@
     "st": "^2.0.0",
     "stack-trace": "^0.0.10",
     "string-similarity": "^1.2.2",
+    "strip-ansi": "^5.2.0",
     "style-loader": "^0.23.1",
     "terminal-link": "^2.1.1",
     "terser-webpack-plugin": "^2.3.8",
diff --git a/packages/gatsby/src/utils/__tests__/__snapshots__/show-experiment-notice.js.snap b/packages/gatsby/src/utils/__tests__/__snapshots__/show-experiment-notice.js.snap
index 235bdbce71eb9..5cfb41a723ae4 100644
--- a/packages/gatsby/src/utils/__tests__/__snapshots__/show-experiment-notice.js.snap
+++ b/packages/gatsby/src/utils/__tests__/__snapshots__/show-experiment-notice.js.snap
@@ -6,6 +6,6 @@ Hi from the Gatsby maintainers! Based on what we see in your site, these coming
 features may help you. All of these can be enabled within gatsby-config.js via
 flags (samples below)
 
-The Flag (http://example.com), hi
+The Flag (http://example.com), hi
 "
 `;
diff --git a/packages/gatsby/src/utils/__tests__/show-experiment-notice.js b/packages/gatsby/src/utils/__tests__/show-experiment-notice.js
index c0d3fbb12c9c4..89706babd4112 100644
--- a/packages/gatsby/src/utils/__tests__/show-experiment-notice.js
+++ b/packages/gatsby/src/utils/__tests__/show-experiment-notice.js
@@ -1,15 +1,18 @@
 import { createNoticeMessage } from "../show-experiment-notice"
+import stripAnsi from "strip-ansi"
 
 describe(`show-experiment-notice`, () => {
   it(`generates a message`, () => {
     expect(
-      createNoticeMessage([
-        {
-          noticeText: `hi`,
-          umbrellaLink: `http://example.com`,
-          experimentIdentifier: `The Flag`,
-        },
-      ])
+      stripAnsi(
+        createNoticeMessage([
+          {
+            noticeText: `hi`,
+            umbrellaLink: `http://example.com`,
+            experimentIdentifier: `The Flag`,
+          },
+        ])
+      )
     ).toMatchSnapshot()
   })
 })

From 184152a837ce7d0a6d90035800c7163dfb0e7650 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Mon, 7 Dec 2020 10:38:04 -0800
Subject: [PATCH 14/24] Update packages/gatsby/src/services/initialize.ts

Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
---
 packages/gatsby/src/services/initialize.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby/src/services/initialize.ts b/packages/gatsby/src/services/initialize.ts
index c256854d2ca97..40dc94ab9576f 100644
--- a/packages/gatsby/src/services/initialize.ts
+++ b/packages/gatsby/src/services/initialize.ts
@@ -65,7 +65,7 @@ if (
   sampleSiteForExperiment(`DEV_SSR`, 5)
 ) {
   showExperimentNoticeAfterTimeout(
-    `SSR in Development`,
+    `Server Side Rendering (SSR) in Development`,
     `gatsby.dev/dev-ssr-feedback`,
     `which helps surface issues with build errors more quickly. Here's how to try it:
 

From 0dbd527672081cad1d99aae0d2264232b1053eed Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Mon, 7 Dec 2020 10:38:14 -0800
Subject: [PATCH 15/24] Update packages/gatsby/src/services/run-page-queries.ts

Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
---
 packages/gatsby/src/services/run-page-queries.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby/src/services/run-page-queries.ts b/packages/gatsby/src/services/run-page-queries.ts
index d502d65686180..dcf993deb6f44 100644
--- a/packages/gatsby/src/services/run-page-queries.ts
+++ b/packages/gatsby/src/services/run-page-queries.ts
@@ -52,7 +52,7 @@ export async function runPageQueries({
     cancelNotice = showExperimentNoticeAfterTimeout(
       `Query On Demand`,
       `https://gatsby.dev/query-on-demand-feedback`,
-      `which avoids running queries in development until you visit a page — so a lot less upfront work. Here's how to try it:
+      `which avoids running page queries in development until you visit a page — so a lot less upfront work. Here's how to try it:
 
 flags: { QUERY_ON_DEMAND: true }`,
       ONE_MINUTE

From e80c28a6864a21d2b094fbaa4c7afb82218b55eb Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Mon, 7 Dec 2020 10:49:26 -0800
Subject: [PATCH 16/24] use trackCLI not trackFeatureIsUsed

---
 packages/gatsby/src/utils/show-experiment-notice.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/gatsby/src/utils/show-experiment-notice.ts b/packages/gatsby/src/utils/show-experiment-notice.ts
index 22088e461216d..8f54e3eec9330 100644
--- a/packages/gatsby/src/utils/show-experiment-notice.ts
+++ b/packages/gatsby/src/utils/show-experiment-notice.ts
@@ -77,7 +77,9 @@ ${chalk.bgBlue.bold(
 const showNotices = (): void => {
   emitter.off(`COMPILATION_DONE`, showNotices)
   if (noticesToShow.length > 0) {
-    telemetry.trackFeatureIsUsed(`InviteToTryExperiment`)
+    telemetry.trackCli(`InviteToTryExperiment`, {
+      notices: showNotices.map(n => n.experimentIdentifier),
+    })
     const message = createNoticeMessage(noticesToShow)
     reporter.info(message)
   }

From bd251e7449e4f91172d1b78aed6d12b209deedbd Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Mon, 7 Dec 2020 10:54:09 -0800
Subject: [PATCH 17/24] only store that we showed the invite when we actually
 do show the invite

---
 .../gatsby/src/utils/show-experiment-notice.ts  | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/gatsby/src/utils/show-experiment-notice.ts b/packages/gatsby/src/utils/show-experiment-notice.ts
index 8f54e3eec9330..872ebe11b1296 100644
--- a/packages/gatsby/src/utils/show-experiment-notice.ts
+++ b/packages/gatsby/src/utils/show-experiment-notice.ts
@@ -28,6 +28,8 @@ interface INoticeObject {
 }
 
 const noticesToShow: Array<INoticeObject> = []
+const configStoreKey = (experimentIdentifier): string =>
+  `lastExperimentNotice.${experimentIdentifier}`
 
 export function showExperimentNoticeAfterTimeout(
   experimentIdentifier: string,
@@ -36,9 +38,9 @@ export function showExperimentNoticeAfterTimeout(
   showNoticeAfterMs: number,
   minimumIntervalBetweenNoticesMs: number = ONE_DAY
 ): CancelExperimentNoticeCallbackOrUndefined {
-  const configStoreKey = `lastExperimentNotice.${experimentIdentifier}`
-
-  const lastTimeWeShowedNotice = getConfigStore().get(configStoreKey)
+  const lastTimeWeShowedNotice = getConfigStore().get(
+    configStoreKey(experimentIdentifier)
+  )
 
   if (lastTimeWeShowedNotice) {
     if (Date.now() - lastTimeWeShowedNotice < minimumIntervalBetweenNoticesMs) {
@@ -48,8 +50,6 @@ export function showExperimentNoticeAfterTimeout(
 
   const noticeTimeout = setTimeout(() => {
     noticesToShow.push({ noticeText, umbrellaLink, experimentIdentifier })
-
-    getConfigStore().set(configStoreKey, Date.now())
   }, showNoticeAfterMs)
 
   return function clearNoticeTimeout(): void {
@@ -80,6 +80,13 @@ const showNotices = (): void => {
     telemetry.trackCli(`InviteToTryExperiment`, {
       notices: showNotices.map(n => n.experimentIdentifier),
     })
+    // Store that we're showing the invite.
+    showNotices.forEach(notice =>
+      getConfigStore().set(
+        configStoreKey(notice.expermentIdentifier),
+        Date.now()
+      )
+    )
     const message = createNoticeMessage(noticesToShow)
     reporter.info(message)
   }

From a9560a26a6d2bc105cb7850123bf1239cbd0130b Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Mon, 7 Dec 2020 10:57:20 -0800
Subject: [PATCH 18/24] Call code directly from webpack's done callback

---
 packages/gatsby/src/services/start-webpack-server.ts | 4 ++++
 packages/gatsby/src/utils/show-experiment-notice.ts  | 7 ++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/gatsby/src/services/start-webpack-server.ts b/packages/gatsby/src/services/start-webpack-server.ts
index c95ff0eedde4a..34a4a87c66a16 100644
--- a/packages/gatsby/src/services/start-webpack-server.ts
+++ b/packages/gatsby/src/services/start-webpack-server.ts
@@ -12,6 +12,7 @@ import {
 } from "../utils/webpack-error-utils"
 
 import { printDeprecationWarnings } from "../utils/print-deprecation-warnings"
+import { showNotices } from "../utils/show-experiment-notice"
 import { printInstructions } from "../utils/print-instructions"
 import { prepareUrls } from "../utils/prepare-urls"
 import { startServer, IWebpackWatchingPauseResume } from "../utils/start-server"
@@ -97,6 +98,9 @@ export async function startWebpackServer({
       const isSuccessful = !messages.errors.length
 
       if (isSuccessful && isFirstCompile) {
+        // Show notices to users about potential experiments/feature flags they could
+        // try.
+        showNotices()
         printInstructions(
           program.sitePackageJson.name || `(Unnamed package)`,
           urls
diff --git a/packages/gatsby/src/utils/show-experiment-notice.ts b/packages/gatsby/src/utils/show-experiment-notice.ts
index 872ebe11b1296..96917d7a8c867 100644
--- a/packages/gatsby/src/utils/show-experiment-notice.ts
+++ b/packages/gatsby/src/utils/show-experiment-notice.ts
@@ -1,6 +1,5 @@
 import { getConfigStore } from "gatsby-core-utils"
 import reporter from "gatsby-cli/lib/reporter"
-import { emitter } from "../redux"
 import chalk from "chalk"
 import telemetry from "gatsby-telemetry"
 import realTerminalLink from "terminal-link"
@@ -74,8 +73,7 @@ ${chalk.bgBlue.bold(
   return message
 }
 
-const showNotices = (): void => {
-  emitter.off(`COMPILATION_DONE`, showNotices)
+export const showNotices = (): void => {
   if (noticesToShow.length > 0) {
     telemetry.trackCli(`InviteToTryExperiment`, {
       notices: showNotices.map(n => n.experimentIdentifier),
@@ -87,9 +85,8 @@ const showNotices = (): void => {
         Date.now()
       )
     )
+
     const message = createNoticeMessage(noticesToShow)
     reporter.info(message)
   }
 }
-
-emitter.on(`COMPILATION_DONE`, showNotices)

From 424bb22dd0a2d8fd7c4333eaee6304169cc4c5d2 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Mon, 7 Dec 2020 11:01:31 -0800
Subject: [PATCH 19/24] mock in jest

---
 .../src/utils/__tests__/show-experiment-notice.js      |  2 ++
 packages/gatsby/src/utils/show-experiment-notice.ts    | 10 +---------
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/gatsby/src/utils/__tests__/show-experiment-notice.js b/packages/gatsby/src/utils/__tests__/show-experiment-notice.js
index 89706babd4112..d9fd22c69a76c 100644
--- a/packages/gatsby/src/utils/__tests__/show-experiment-notice.js
+++ b/packages/gatsby/src/utils/__tests__/show-experiment-notice.js
@@ -1,6 +1,8 @@
 import { createNoticeMessage } from "../show-experiment-notice"
 import stripAnsi from "strip-ansi"
 
+jest.mock(`terminal-link`, () => (text, url) => `${text} (${url})`)
+
 describe(`show-experiment-notice`, () => {
   it(`generates a message`, () => {
     expect(
diff --git a/packages/gatsby/src/utils/show-experiment-notice.ts b/packages/gatsby/src/utils/show-experiment-notice.ts
index 96917d7a8c867..9e25e1ef731a2 100644
--- a/packages/gatsby/src/utils/show-experiment-notice.ts
+++ b/packages/gatsby/src/utils/show-experiment-notice.ts
@@ -2,15 +2,7 @@ import { getConfigStore } from "gatsby-core-utils"
 import reporter from "gatsby-cli/lib/reporter"
 import chalk from "chalk"
 import telemetry from "gatsby-telemetry"
-import realTerminalLink from "terminal-link"
-
-const terminalLink = (text, url): string => {
-  if (process.env.NODE_ENV === `test`) {
-    return `${text} (${url})`
-  } else {
-    return realTerminalLink(text, url)
-  }
-}
+import terminalLink from "terminal-link"
 
 type CancelExperimentNoticeCallback = () => void
 

From cc5649053a02d89452cdb5e513a3e7be55e6e77d Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Mon, 7 Dec 2020 11:02:48 -0800
Subject: [PATCH 20/24] be more explicit about how the caching behavior changes

---
 packages/gatsby/src/utils/start-server.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/gatsby/src/utils/start-server.ts b/packages/gatsby/src/utils/start-server.ts
index 50107fe95cf5a..1d8d224504fc1 100644
--- a/packages/gatsby/src/utils/start-server.ts
+++ b/packages/gatsby/src/utils/start-server.ts
@@ -94,8 +94,9 @@ export async function startServer(
     cancelDevJSNotice = showExperimentNoticeAfterTimeout(
       `Preserve webpack's Cache`,
       `https://github.com/gatsbyjs/gatsby/discussions/28331`,
-      `which changes Gatsby's cache clearing behavior to not clear webpack's cache unless really
-necessary. Here's how to try it:
+      `which changes Gatsby's cache clearing behavior to not clear webpack's
+      cache unless you run "gatsby clean" or delete the .cache folder manually.
+      Here's how to try it:
 
 flags: { PRESERVE_WEBPACK_CACHE: true }`,
       THIRTY_SECONDS

From f6f0d6a6328f2f8cc47e1dd5c1879170661d5347 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Mon, 7 Dec 2020 11:31:10 -0800
Subject: [PATCH 21/24] Show full code sample per @pelikhan's feedback

---
 packages/gatsby/src/services/initialize.ts           | 5 ++++-
 packages/gatsby/src/services/run-page-queries.ts     | 6 +++++-
 packages/gatsby/src/services/start-webpack-server.ts | 4 ++--
 packages/gatsby/src/utils/show-experiment-notice.ts  | 6 +++---
 packages/gatsby/src/utils/start-server.ts            | 9 ++++++---
 5 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/gatsby/src/services/initialize.ts b/packages/gatsby/src/services/initialize.ts
index 40dc94ab9576f..ee1a20f496aca 100644
--- a/packages/gatsby/src/services/initialize.ts
+++ b/packages/gatsby/src/services/initialize.ts
@@ -69,7 +69,10 @@ if (
     `gatsby.dev/dev-ssr-feedback`,
     `which helps surface issues with build errors more quickly. Here's how to try it:
 
-flags : { DEV_SSR: true, }`,
+module.exports = {
+  flags : { DEV_SSR: true, },
+  plugins: [...],
+}`,
     1 // Show this immediately to the subset of sites selected.
   )
 }
diff --git a/packages/gatsby/src/services/run-page-queries.ts b/packages/gatsby/src/services/run-page-queries.ts
index dcf993deb6f44..b31f3ddabc6e6 100644
--- a/packages/gatsby/src/services/run-page-queries.ts
+++ b/packages/gatsby/src/services/run-page-queries.ts
@@ -54,7 +54,11 @@ export async function runPageQueries({
       `https://gatsby.dev/query-on-demand-feedback`,
       `which avoids running page queries in development until you visit a page — so a lot less upfront work. Here's how to try it:
 
-flags: { QUERY_ON_DEMAND: true }`,
+modules.exports = {
+  flags: { QUERY_ON_DEMAND: true },
+  plugins: [...]
+}
+`,
       ONE_MINUTE
     )
   }
diff --git a/packages/gatsby/src/services/start-webpack-server.ts b/packages/gatsby/src/services/start-webpack-server.ts
index 34a4a87c66a16..5337da46cd84f 100644
--- a/packages/gatsby/src/services/start-webpack-server.ts
+++ b/packages/gatsby/src/services/start-webpack-server.ts
@@ -12,7 +12,7 @@ import {
 } from "../utils/webpack-error-utils"
 
 import { printDeprecationWarnings } from "../utils/print-deprecation-warnings"
-import { showNotices } from "../utils/show-experiment-notice"
+import { showExperimentNotices } from "../utils/show-experiment-notice"
 import { printInstructions } from "../utils/print-instructions"
 import { prepareUrls } from "../utils/prepare-urls"
 import { startServer, IWebpackWatchingPauseResume } from "../utils/start-server"
@@ -100,7 +100,7 @@ export async function startWebpackServer({
       if (isSuccessful && isFirstCompile) {
         // Show notices to users about potential experiments/feature flags they could
         // try.
-        showNotices()
+        showExperimentNotices()
         printInstructions(
           program.sitePackageJson.name || `(Unnamed package)`,
           urls
diff --git a/packages/gatsby/src/utils/show-experiment-notice.ts b/packages/gatsby/src/utils/show-experiment-notice.ts
index 9e25e1ef731a2..3c6bb570584c8 100644
--- a/packages/gatsby/src/utils/show-experiment-notice.ts
+++ b/packages/gatsby/src/utils/show-experiment-notice.ts
@@ -65,13 +65,13 @@ ${chalk.bgBlue.bold(
   return message
 }
 
-export const showNotices = (): void => {
+export const showExperimentNotices = (): void => {
   if (noticesToShow.length > 0) {
     telemetry.trackCli(`InviteToTryExperiment`, {
-      notices: showNotices.map(n => n.experimentIdentifier),
+      notices: noticesToShow.map(n => n.experimentIdentifier),
     })
     // Store that we're showing the invite.
-    showNotices.forEach(notice =>
+    noticesToShow.forEach(notice =>
       getConfigStore().set(
         configStoreKey(notice.expermentIdentifier),
         Date.now()
diff --git a/packages/gatsby/src/utils/start-server.ts b/packages/gatsby/src/utils/start-server.ts
index 1d8d224504fc1..96bd377645e3d 100644
--- a/packages/gatsby/src/utils/start-server.ts
+++ b/packages/gatsby/src/utils/start-server.ts
@@ -95,10 +95,13 @@ export async function startServer(
       `Preserve webpack's Cache`,
       `https://github.com/gatsbyjs/gatsby/discussions/28331`,
       `which changes Gatsby's cache clearing behavior to not clear webpack's
-      cache unless you run "gatsby clean" or delete the .cache folder manually.
-      Here's how to try it:
+cache unless you run "gatsby clean" or delete the .cache folder manually.
+Here's how to try it:
 
-flags: { PRESERVE_WEBPACK_CACHE: true }`,
+module.exports = {
+  flags: { PRESERVE_WEBPACK_CACHE: true },
+  plugins: [...]
+}`,
       THIRTY_SECONDS
     )
   }

From f684356c48612cb074430f0c106c864f05a5a262 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Mon, 7 Dec 2020 11:35:50 -0800
Subject: [PATCH 22/24] typescript fixes

---
 packages/gatsby/src/utils/show-experiment-notice.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/gatsby/src/utils/show-experiment-notice.ts b/packages/gatsby/src/utils/show-experiment-notice.ts
index 3c6bb570584c8..32715afa0a92e 100644
--- a/packages/gatsby/src/utils/show-experiment-notice.ts
+++ b/packages/gatsby/src/utils/show-experiment-notice.ts
@@ -67,13 +67,11 @@ ${chalk.bgBlue.bold(
 
 export const showExperimentNotices = (): void => {
   if (noticesToShow.length > 0) {
-    telemetry.trackCli(`InviteToTryExperiment`, {
-      notices: noticesToShow.map(n => n.experimentIdentifier),
-    })
+    telemetry.trackCli(`InviteToTryExperiment`)
     // Store that we're showing the invite.
     noticesToShow.forEach(notice =>
       getConfigStore().set(
-        configStoreKey(notice.expermentIdentifier),
+        configStoreKey(notice.experimentIdentifier),
         Date.now()
       )
     )

From 480ea29ad9357f453920e9d403f3d169d058126a Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Tue, 8 Dec 2020 13:00:36 -0800
Subject: [PATCH 23/24] Update packages/gatsby/src/services/initialize.ts

Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
---
 packages/gatsby/src/services/initialize.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby/src/services/initialize.ts b/packages/gatsby/src/services/initialize.ts
index ee1a20f496aca..12bb5c155aa3c 100644
--- a/packages/gatsby/src/services/initialize.ts
+++ b/packages/gatsby/src/services/initialize.ts
@@ -70,7 +70,7 @@ if (
     `which helps surface issues with build errors more quickly. Here's how to try it:
 
 module.exports = {
-  flags : { DEV_SSR: true, },
+  flags : { DEV_SSR: true },
   plugins: [...],
 }`,
     1 // Show this immediately to the subset of sites selected.

From bdb85ba09f64abce4d011fd8ca1c4646a25055ae Mon Sep 17 00:00:00 2001
From: Michal Piechowiak <misiek.piechowiak@gmail.com>
Date: Tue, 8 Dec 2020 22:29:06 +0100
Subject: [PATCH 24/24] Update packages/gatsby/src/services/initialize.ts

---
 packages/gatsby/src/services/initialize.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby/src/services/initialize.ts b/packages/gatsby/src/services/initialize.ts
index 12bb5c155aa3c..de31ff0645e43 100644
--- a/packages/gatsby/src/services/initialize.ts
+++ b/packages/gatsby/src/services/initialize.ts
@@ -71,7 +71,7 @@ if (
 
 module.exports = {
   flags : { DEV_SSR: true },
-  plugins: [...],
+  plugins: [...]
 }`,
     1 // Show this immediately to the subset of sites selected.
   )