chore(ci): disable mocks by default everywhere apart from PR previews (#5099)

See title

Note: locally during development you probably never need to use the
KUMA_MOCK_API_ENABLED cookie anymore as it will use the local node
server for mocks which is much more reliable.

I guess thew only time you might need to set it is if you happen to have
no internet connection and you want the call to
`https://kuma.io/latest_version` to resolve with a mock response.

In this case you can still enable the MSW mocks.

TL;DR and most importantly, we no longer have to explicitly set
`KUMA_MOCK_API_ENABLED` to `false` locally. In a preview its built with
the MSW mocks enabled by default (but you can turn them off whilst
previewing with cookies should we need to)

---------

Signed-off-by: John Cowen <john.cowen@konghq.com>
Signed-off-by: John Cowen <johncowen@users.noreply.github.com>
Co-authored-by: Mo <24444046+schogges@users.noreply.github.com>

Author: johncowen

packages/config/src/mk/build.mk

@@ -8,8 +8,8 @@
 
 .PHONY: build/preview
 build/preview: VITE ?= $(shell $(MAKE) resolve/bin BIN=vite)
-build/preview:
-	@$(VITE) \
+build/preview: ## Dev: Create preview build with mocks on by default
+	@KUMA_MOCK_API_ENABLED=true $(VITE) \
 			--configLoader runner \
 			-c ./vite.config.production.ts \
 			--mode preview \

packages/config/src/vite/config/vite.config.base.ts

@@ -7,6 +7,7 @@ import type { UserConfig, UserConfigFn } from 'vite'
 
 export const defineConfig: UserConfigFn = () => ({
   base: './',
+  envPrefix: 'KUMA_',
   server: {
     port: 8080,
   },

packages/gherkin-web/src/cypress/steps/index.ts

@@ -120,9 +120,6 @@ export async function setupSteps<TMock extends BaseMock>({ mock, client = getCli
   // act
 
   When('I visit the {string} URL', function (path: string) {
-    // turn off MSW in dev environments so we can use cy.intercept
-    cy.setCookie('KUMA_MOCK_API_ENABLED', 'false')
-    //
     cy.getAllCookies().then((cookies) => {
       cy.visit(`${path}`)
       const sel = client.waitForVisit(`${path}`, cookies, cy)

packages/gherkin-web/src/playwright/steps/index.ts

@@ -78,13 +78,6 @@ export async function setupSteps({
     selectors = {}
     localStorage = new Set()
     await context.unrouteAll()
-    await context.addCookies([
-      {
-        name: 'KUMA_MOCK_API_ENABLED',
-        value: 'false',
-        url: `${baseURL}`,
-      },
-    ])
     const p = Object.keys(fs).map(route => {
       return context.route(
         (u) => routeToRegexp(route).test(u.toString()),

packages/kuma-gui/README.md

@@ -38,6 +38,11 @@ Install the project’s dependencies.
 make install
 ```
 
+> [!NOTE]
+> `make install` will also run every time you run `make run`, so you generally
+> don't need to use `make install`.
+
+
 ## Starting the development server
 
 Start a development server (runs on [localhost:8080](http://localhost:8080/) by
@@ -47,8 +52,8 @@ default):
 make run
 ```
 
-The default development mode uses [msw](https://mswjs.io/) with custom mock
-data so you don’t have to run anything else to start exploring.
+The default development mode uses a local vite based server with custom mock
+data so you don't have to run anything else to start exploring.
 
 Alternatively, make the development mode use a real Kuma installation running
 at <http://localhost:5681>.
@@ -59,17 +64,28 @@ at <http://localhost:5681>.
 > [github.com/kumahq/kuma](https://github.com/kumahq/kuma/) to find out how to do
 > that.
 >
+> In order to allow your locally running GUI (on port 8080) to use the real Kuma
+> HTTP API (on port 5681) you should use `KUMA_API_SERVER_CORS_ALLOWED_DOMAINS`
+> when starting the Kuma Control Plane.
+>
 > You can confirm Kuma is running by accessing its API:
 >
 > ```sh
 > curl http://localhost:5681/
 > ```
 
-Once installed you can make the development server/GUI use Kuma by adding a
-`KUMA_MOCK_API_ENABLED=false` cookie to your browser. You can do this my using
-the browser's Application/Cookies settings in Web Inspector, or by clicking
-<http://localhost:8080/gui/#KUMA_MOCK_API_ENABLED=false> (and set it back again
-by clicking <http://localhost:8080/gui/#KUMA_MOCK_API_ENABLED=true>)
+Once Kuma is running you can make the development server/GUI use Kuma by adding
+a `KUMA_API_URL=http://localhost:5681` cookie to your browser. You can do this
+by using the browser's Application/Cookies settings in Web Inspector. We also
+provide bookmarklets to let you toggle this easily.
+
+If the development GUI cannot contact Kuma's HTTP API, please check Kuma's
+`KUMA_API_SERVER_CORS_ALLOWED_DOMAINS` setting.
+
+> [!NOTE]
+> We generate a full static preview for every PR. These are fully static and
+> therefore cannot use a local (or remote) vite server to serve the HTTP API
+> mocks. Instead, only on PR previews, we use MSW to serve the very same mocks.
 
 ### Disabling anonymous reports in Kuma
 
@@ -87,8 +103,8 @@ echo "export KUMA_REPORTS_ENABLED=false" >> ~/.profile
 make build
 ```
 
-> [!TIP]
-> NOTE In production environments, the GUI application is typically served at
+> [!NOTE]
+> In production environments, the GUI application is typically served at
 > [localhost:5681/gui/](http://localhost:5681/gui/).
 
 ## Run unit tests
@@ -108,28 +124,26 @@ make run
 Run the browser test UI in another terminal window:
 
 ```sh
-KUMA_BASE_URL=http://localhost:8080/gui KUMA_TEST_BROWSER=chrome make
-test/e2e
+KUMA_TEST_BROWSER=chrome make test/e2e
 ```
 
-The above environment variables:
-
-1. Point the e2e tests to use the locally running GUI on localhost:8080
-2. Tell the e2e tests to open and run in Chrome
+The above environment variable tells the e2e tests to open and run in Chrome.
 
 > [!TIP]
-> NOTE If you are running tests often you should consider adding these
+> If you are running tests often you should consider adding these
 > environment variables to your shell profile:
 >
 > ```sh
-> export KUMA_BASE_URL=http://localhost:8080/gui export
-> KUMA_TEST_BROWSER=chrome make test/e2e
+> export KUMA_TEST_BROWSER=chrome
 > ```
 >
 > You can then just run:
 >
 > ```sh
-> make run make test/e2e
+> # in one terminal
+> make run
+> # in another terminal
+> make test/e2e
 > ```
 >
 

packages/kuma-gui/src/app/kuma/debug.ts

@@ -52,7 +52,7 @@ export const services = (app: Record<string, Token>): ServiceDefinition[] => [
   [token('kuma.debug.env.vars'), {
     service: () => {
       return {
-        KUMA_MOCK_API_ENABLED: () => 'true',
+        KUMA_MOCK_API_ENABLED: () => import.meta.env.KUMA_MOCK_API_ENABLED ?? '',
       }
     },
     labels: [