feat(gatsby): Auto-Install Preview UI (#35587)

* initial commit

* added check to install preview-ui

* updated tests

Author: leithonenglish

packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.ts

@@ -245,9 +245,12 @@ describe(`Load plugins`, () => {
     })
 
     it(`loads gatsby-plugin-gatsby-cloud if not provided and installed on gatsby-cloud`, async () => {
-      resolveFrom.mockImplementation(
-        (rootDir, pkg) => rootDir + `/node_modules/` + pkg
-      )
+      resolveFrom.mockImplementation((rootDir, pkg) => {
+        if (pkg !== `gatsby-plugin-gatsby-cloud`) {
+          return undefined
+        }
+        return rootDir + `/node_modules/` + pkg
+      })
       const config = {
         plugins: [],
       }
@@ -268,9 +271,12 @@ describe(`Load plugins`, () => {
     })
 
     it(`uses the user provided plugin-gatsby-cloud if provided`, async () => {
-      resolveFrom.mockImplementation(
-        (rootDir, pkg) => rootDir + `/node_modules/` + pkg
-      )
+      resolveFrom.mockImplementation((rootDir, pkg) => {
+        if (pkg !== `gatsby-plugin-gatsby-cloud`) {
+          return undefined
+        }
+        return rootDir + `/node_modules/` + pkg
+      })
       const config = {
         plugins: [
           {
@@ -302,9 +308,12 @@ describe(`Load plugins`, () => {
     })
 
     it(`does not add gatsby-plugin-gatsby-cloud if it exists in config.plugins`, async () => {
-      resolveFrom.mockImplementation(
-        (rootDir, pkg) => rootDir + `/node_modules/` + pkg
-      )
+      resolveFrom.mockImplementation((rootDir, pkg) => {
+        if (pkg !== `gatsby-plugin-gatsby-cloud`) {
+          return undefined
+        }
+        return rootDir + `/node_modules/` + pkg
+      })
       const config = {
         plugins: [
           `gatsby-plugin-gatsby-cloud`,

packages/gatsby/src/bootstrap/load-plugins/load-internal-plugins.ts

@@ -13,8 +13,10 @@ import { createPluginId } from "./utils/create-id"
 import { createFileContentHash } from "./utils/create-hash"
 import {
   addGatsbyPluginCloudPluginWhenInstalled,
+  addGatsbyPluginPreviewWhenInstalled,
   incompatibleGatsbyCloudPlugin,
   GATSBY_CLOUD_PLUGIN_NAME,
+  GATSBY_PLUGIN_PREVIEW_NAME,
 } from "./utils/handle-gatsby-cloud"
 import { getResolvedFieldsForPlugin } from "../../utils/parcel/compile-gatsby-files"
 
@@ -90,6 +92,13 @@ export function loadInternalPlugins(
     addGatsbyPluginCloudPluginWhenInstalled(plugins, rootDir)
   }
 
+  if (
+    !configuredPluginNames.has(GATSBY_PLUGIN_PREVIEW_NAME) &&
+    (process.env.GATSBY_CLOUD === `true` || process.env.GATSBY_CLOUD === `1`)
+  ) {
+    addGatsbyPluginPreviewWhenInstalled(plugins, rootDir)
+  }
+
   // Support Typescript by default but allow users to override it
   if (!configuredPluginNames.has(TYPESCRIPT_PLUGIN_NAME)) {
     const processedTypeScriptPlugin = processPlugin(

packages/gatsby/src/bootstrap/load-plugins/utils/handle-gatsby-cloud.ts

@@ -4,15 +4,14 @@ import { IPluginInfo } from "../types"
 import { processPlugin } from "../process-plugin"
 
 export const GATSBY_CLOUD_PLUGIN_NAME = `gatsby-plugin-gatsby-cloud`
+export const GATSBY_PLUGIN_PREVIEW_NAME = `@gatsby-cloud-pkg/gatsby-plugin-preview`
 
-export function addGatsbyPluginCloudPluginWhenInstalled(
+function addCloudPluginWhenInstalled(
   plugins: Array<IPluginInfo>,
-  rootDir: string
+  rootDir: string,
+  name: string
 ): void {
-  const cloudPluginLocation = resolveFromSilent(
-    rootDir,
-    GATSBY_CLOUD_PLUGIN_NAME
-  )
+  const cloudPluginLocation = resolveFromSilent(rootDir, name)
 
   if (cloudPluginLocation) {
     const processedGatsbyCloudPlugin = processPlugin(
@@ -26,6 +25,20 @@ export function addGatsbyPluginCloudPluginWhenInstalled(
   }
 }
 
+export function addGatsbyPluginPreviewWhenInstalled(
+  plugins: Array<IPluginInfo>,
+  rootDir: string
+): void {
+  addCloudPluginWhenInstalled(plugins, rootDir, GATSBY_PLUGIN_PREVIEW_NAME)
+}
+
+export function addGatsbyPluginCloudPluginWhenInstalled(
+  plugins: Array<IPluginInfo>,
+  rootDir: string
+): void {
+  addCloudPluginWhenInstalled(plugins, rootDir, GATSBY_CLOUD_PLUGIN_NAME)
+}
+
 export function incompatibleGatsbyCloudPlugin(
   plugins: Array<IPluginInfo>
 ): boolean {