refactor(dashboard): ignore dashboard/proto/gen and gen them during…

… `npm i` (#8695)

Signed-off-by: TennyZhuang <[email protected]>

.gitattributes

@@ -2,7 +2,5 @@
 src/tests/regress/data/** linguist-vendored
 # source test data
 scripts/source/test_data/** linguist-vendored
-# generated proto for dashboard
-dashboard/proto/gen/** linguist-generated
 # generated grafana dashboard
 grafana/risingwave-dashboard.json linguist-generated

dashboard/.gitignore

@@ -23,3 +23,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# generated proto
+proto/gen

dashboard/README.md

@@ -1,11 +1,15 @@
+# Dashboard
+
 The framework: [Next.js](https://nextjs.org).
 
 Next.js supports SPA, SSG and SSR. With this feature, the dashboard ui can be deployed in
+
 1. Standalone machine serving only dashboard UI with a backend. (e.g. Dashboard for cloud product)
 2. Meta service node. (e.g. Static HTML files integrated in meta service without any other dependencies like node.js)
 
 ## Files
-```
+
+```plain
 dashboard/
 --.next/ (generated by nextjs)
 --node_modules/ (development dependencies)
@@ -19,47 +23,67 @@ dashboard/
 ```
 
 ## Testing
+
 TODO: Find a suitable testing framework
 
 ## Development
+
 Start the RisingWave database, remove drop tables from `tpch_snapshot.slt`
+
 ```bash
 ./risedev d
 sqllogictest -p 4566 -d dev './e2e_test/streaming/tpch_snapshot.slt'
 ```
+
 Install Dependencies.
+
 ```bash
 npm i
 ```
+
 The website will be served at port 3000.
+
 ```bash
 npm run dev
 ```
+
 You should also run:
-```
+
+```bash
 node mock-server.js
 ```
+
 To start a mock API server when developing. You can use `fetch.sh` to update the mock APIs.
 
 ## Test with RisingWave meta node
-To replace the built static files in RisingWave with your newest code, 
+
+To replace the built static files in RisingWave with your newest code,
 run the following scripts in the root directory.
-```
+
+```bash
 ./risedev export-dashboard-v2
 ```
 
-
 ## Deployment
-#### Static HTML files
+
+### Generate the protos
+
+Running `npm i` will generate the proto files under `proto/gen` automatically. In case there are modifications to the protos, you can regenerate them using the command npm run gen-proto.
+
+### Static HTML files
+
 Build static files for standalone deployment without node.js. The built files are generated at `./out`.
 Check more details at [Static HTML Export](https://nextjs.org/docs/advanced-features/static-html-export).
+
 ```bash
 npm run build-static
 ```
 
 #### Next.js app
+
 The built files are generated at `./.next`.
+
 ```bash
 npm run build
 npm run start
-```
+```

dashboard/package.json

@@ -8,7 +8,8 @@
     "gen-proto": "./scripts/generate_proto.sh",
     "lint": "prettier --check . && next lint",
     "format": "prettier --write . && next lint --fix",
-    "mock-server": "node ./mock-server.js"
+    "mock-server": "node ./mock-server.js",
+    "postinstall": "npm run gen-proto"
   },
   "dependencies": {
     "@chakra-ui/react": "^2.3.1",