feat(gatsby): people who are using a flag, invite them to try out other flags (#28338)

* feat(gatsby): people who are using a flag, invite them to try out other flags

* Avoid scaling problems

(cherry picked from commit 9c8f788)

Author: KyleAMathews

packages/gatsby/src/utils/__tests__/__snapshots__/handle-flags.ts.snap

@@ -41,6 +41,10 @@ Object {
 - ALL_COMMANDS · (Umbrella Issue (test)) · test
 - DEV_SSR · (Umbrella Issue (https://github.com/gatsbyjs/gatsby/discussions/28138)) · SSR pages on full reloads during develop. Helps you detect SSR bugs and fix them without needing to do full builds.
 - QUERY_ON_DEMAND · (Umbrella Issue (https://github.com/gatsbyjs/gatsby/discussions/27620)) · Only run queries when needed instead of running all queries upfront. Speeds starting the develop server.
+
+There are 2 other flags available that you might be interested in:
+- ONLY_BUILDS · (Umbrella Issue (test)) · test
+- YET_ANOTHER · (Umbrella Issue (test)) · test
 ",
 }
 `;

packages/gatsby/src/utils/__tests__/handle-flags.ts

@@ -46,6 +46,13 @@ describe(`handle flags`, () => {
       description: `test`,
       umbrellaIssue: `test`,
     },
+    {
+      name: `YET_ANOTHER`,
+      env: `GATSBY_EXPERIMENTAL_SOMETHING_COOL2`,
+      command: `all`,
+      description: `test`,
+      umbrellaIssue: `test`,
+    },
   ]
 
   const configFlags = {

packages/gatsby/src/utils/handle-flags.ts

@@ -56,31 +56,44 @@ const handleFlags = (
   // TODO remove flags that longer exist.
   //  w/ message of thanks
 
+  const generateFlagLine = (flag): string => {
+    let message = ``
+    message += `\n- ${flag.name}`
+    if (flag.experimental) {
+      message += ` · ${chalk.white.bgRed.bold(`EXPERIMENTAL`)}`
+    }
+    if (flag.umbrellaIssue) {
+      message += ` · (${terminalLink(`Umbrella Issue`, flag.umbrellaIssue)})`
+    }
+    message += ` · ${flag.description}`
+
+    return message
+  }
+
   let message = ``
   //  Create message about what flags are active.
   if (enabledConfigFlags.length > 0) {
     message = `The following flags are active:`
     enabledConfigFlags.forEach(flag => {
-      message += `\n- ${flag.name}`
-      if (flag.experimental) {
-        message += ` · ${chalk.white.bgRed.bold(`EXPERIMENTAL`)}`
-      }
-      if (flag.umbrellaIssue) {
-        message += ` · (${terminalLink(`Umbrella Issue`, flag.umbrellaIssue)})`
-      }
-      message += ` · ${flag.description}`
+      message += generateFlagLine(flag)
     })
 
-    // TODO renable once "gatsby flags` CLI command exists.
-    // Suggest enabling other flags if they're not trying them all.
-    // const otherFlagsCount = flags.length - enabledConfigFlags.length
-    // if (otherFlagsCount > 0) {
-    // message += `\n\nThere ${
-    // otherFlagsCount === 1
-    // ? `is one other flag`
-    // : `are ${otherFlagsCount} other flags`
-    // } available you can test — run "gatsby flags" to enable them`
-    // }
+    const otherFlagsCount = flags.length - enabledConfigFlags.length
+    if (otherFlagsCount > 0) {
+      message += `\n\nThere ${
+        otherFlagsCount === 1
+          ? `is one other flag`
+          : `are ${otherFlagsCount} other flags`
+      } available that you might be interested in:`
+
+      const enabledFlagsSet = new Set()
+      enabledConfigFlags.forEach(f => enabledFlagsSet.add(f.name))
+      flags.forEach(flag => {
+        if (!enabledFlagsSet.has(flag.name)) {
+          message += generateFlagLine(flag)
+        }
+      })
+    }
 
     message += `\n`
   }