[dashboard] replace dev configuration with env vars

[trumbitta]

Description

Set 2 variables once instead of editing craco.config.js every time you want to contribute to the dashboard app.

How to test

• Follow the new instructions in components/dashboard/README.md
• Check if the dashboard loads properly
• 🚨 IMPORTANT! Do a production build and check that one as well: I never used CRACO's whenDev before

Release Notes

[dashboard] It's now even easier to contribute: set a couple variables once, contribute for as long as you like.

[trumbitta]

🆙 I'm quite fond of this one, so 🤞

[laushinka]

/werft run

[laushinka]

/werft run

[laushinka]

Have to run again due to Werft issues earlier.

/werft run

[laushinka]

Again 😭 [internal Slack]

/werft run

[iQQBot]

devServer is always using in dev, you can add some check for process.env.GP_DEV_HOST and process.env.GP_DEV_COOKIE to make sure someone want to enable this feature

[trumbitta]

Is this necessary? The instructions before this change were like: if you want to contribute to the dashboard app, you have to add a devServer block with this and that.
The changes in this PR just make those instructions easier: you don't have to add that block every time you open a workspace, and you don't have to make sure every time that you don't commit and push that block.

Are there more, undocumented, situations where one doesn't need to add a devServer block in order to work on the dashboard app?

[iQQBot]

member can use telepresence for development, it need permission for preview environment kubectl

[laushinka]

@iQQBot Will we hit this whenDev() block when we use telepresence?

[iQQBot]

I think it will hit, because telepresence also use craco start

[trumbitta]

@mustard-mh The exact same reason why before this we had to add the whole devServer block to the config instead of just its contents: I don't know 🤣

To me, it's also more explicitly saying: "Ok, this one is only for development" vs having to know how Webpack handles this specific config.

[trumbitta]

we have a notion document about using telepresence, current is internal, But to be honest, I didn't use it 😂

I do some test, when someone use telepresence is will in whenDev

@iQQBot @laushinka (I'm still going to act on your initial feedback ASAP, but I'd like to understand) If it's correct for telepresence to run in dev mode, then why isn't it correct for telepresence to also use the devServer?

[iQQBot]

For telepresence, which works by replacing pods in a kubernetes cluster and redirecting traffic to access them, it has strong limitations, for example, it can only debug the current preview environment, it cannot debug gitpod.io

The reason I'm using devServer here is that our server has access restrictions on origin, and ws-proxy automatically filters out sensitive cookies, making it impossible to skip these restrictions at the browser level without using devServer's forwarding capabilities

[iQQBot]

Another reason I wanted to add the check is that if a user doesn't have GP_DEV_HOST configured then bringing in devServer results in all his requests being directed to https:// which is an address that can never be reached and can be confusing

[laushinka]

Thanks @iQQBot for jumping in and thanks @trumbitta for this implementation! This change will greatly benefit our contributors 🙏🏽
The use of telepresence is explained in an internal doc, but it's a good point for us to reconsider moving it closer to our code.
And for now as @iQQBot explained, for this change, we should make sure that only contributors will hit the devServer block by explicitly checking for the env variables.
Looking forward to that change and shipping this 🔥

[mustard-mh]

Good idea🤩 ,

I used to add const COOKIE = require('fs').readFileSync(".dev.local").toString() and apply it before 😂

[iQQBot]

I would like with this

[trumbitta]

@laushinka I followed the example by @iQQBot and updated the code 🧡

[laushinka]

Tested and works as advertised!
Thank you again @trumbitta 🤗 and apologies for the delay in reviewing 🙏🏽

LGTM

[laushinka]

Seems like I have to do this again 🤔

/werft run

👍 started the job as gitpod-build-streamline-dashboard-dev-env-fork.4

[mustard-mh]

/werft run no-preview

👍 started the job as gitpod-build-streamline-dashboard-dev-env-fork.5