Add env variable docs (#2440)

* - add env variable docs

* - danger.js rule

* - fix value

* Fix Danger CI setup

* Add token in CI

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

.github/workflows/ci-utils.yaml

@@ -19,8 +19,13 @@ jobs:
           node-version: "18"
       - name: Utils / Install Dependencies
         run: cd packages/twenty-utils && yarn
+      - name: Set danger env
+        run: |
+          part1='github_pat_11BCSUEQA0Vd4ajqgGdujc_JJYRUxKfcbMtUn'
+          part2='z89DFTksGNXqOwLnmNv0VwMpQdc47T5BTGG2GOUbm6L8J'
+          echo "DANGER_GITHUB_API_TOKEN=${part1}${part2}" >> $GITHUB_ENV
       - name: Utils / Run Danger.js
         run: cd packages/twenty-utils && yarn danger ci
         env:
-          GITHUB_TOKEN: ${{ secrets.TOKEN_FOR_GITHUB_BOT }}
+          DANGER_GITHUB_API_TOKEN: ${{ env.DANGER_GITHUB_API_TOKEN }}
 

docs/docs/others/telemetry.mdx

@@ -12,5 +12,5 @@ Twenty does not use cookies for telemetry or collect email addresses, names, pho
 # Opting-out of telemetry
 To disable telemetry in your workspace, add the following line to your `server/.env` file:
 ```
-IS_TELEMETRY_ENABLED=false
+TELEMETRY_ANONYMIZATION_ENABLED=false
 ```

docs/docs/start/self-hosting/_category_.json

@@ -0,0 +1,5 @@
+{
+  "position": 2,
+  "collapsible": true,
+  "collapsed": true
+}

docs/docs/start/self-hosting/enviroment-variables.mdx

@@ -0,0 +1,88 @@
+---
+title: Enviroment Variables
+sidebar_position: 1
+sidebar_custom_props:
+  icon: TbVariable
+---
+
+import OptionTable from '@site/src/theme/OptionTable'
+
+## Frontend
+
+<OptionTable options={[
+    ['REACT_APP_SERVER_BASE_URL', 'http://localhost:3000', 'Url of backend server'],
+    ['REACT_APP_SERVER_AUTH_URL', 'http://localhost:3000/auth', 'Auth Url of backend server'],
+    ['REACT_APP_SERVER_FILES_URL', 'http://localhost:3000/files', 'Files Url of backend server'],
+    ['GENERATE_SOURCEMAP', 'false', 'Generate source maps for debugging'],
+    ['CHROMATIC_PROJECT_TOKEN', '', 'Chromatic token used for CI'],
+    ]}></OptionTable>
+
+
+## Backend
+
+### Config
+
+<OptionTable options={[
+    ['PG_DATABASE_URL', 'postgres://user:pw@localhost:5432/default?connection_limit=1', 'Database connection'],
+    ['FRONT_BASE_URL', 'http://localhost:3001', 'Url to the hosted frontend'],
+    ['PORT', '3000', 'Port'],
+    ['TELEMETRY_ANONYMIZATION_ENABLED', 'true', 'Anonymized telemetry is collected if not disabled'],
+    ]}></OptionTable>
+
+### Tokens
+
+<OptionTable options={[
+    ['ACCESS_TOKEN_SECRET', '<random>', 'Secret used for the access tokens'],
+    ['ACCESS_TOKEN_EXPIRES_IN', '30m', 'Access token expiration time'],
+    ['LOGIN_TOKEN_SECRET', '<random>', 'Secret used for the login tokens'],
+    ['LOGIN_TOKEN_EXPIRES_IN', '15m', 'Login token expiration time'],
+    ['REFRESH_TOKEN_SECRET', '<random>', 'Secret used for the refresh tokens'],
+    ['REFRESH_TOKEN_EXPIRES_IN', '90d', 'Refresh token expiration time'],
+    ['REFRESH_TOKEN_COOL_DOWN', '1m', 'Refresh token cooldown'],
+    ['API_TOKEN_EXPIRES_IN', '1000y', 'Api token expiration time'],
+    ]}></OptionTable>
+
+### Auth
+
+<OptionTable options={[
+    ['AUTH_GOOGLE_ENABLED', 'false', 'Enable Goole SSO login'],
+    ['AUTH_GOOGLE_CLIENT_ID', '', 'Google client ID'],
+    ['AUTH_GOOGLE_CLIENT_SECRET', '', 'Google client secret'],
+    ['AUTH_GOOGLE_CALLBACK_URL', '', 'Google auth callback'],
+    ['FRONT_AUTH_CALLBACK_URL', 'http://localhost:3001/verify ', 'Callback used for Login page'],
+    ]}></OptionTable>
+
+### Storage
+
+<OptionTable options={[
+    ['STORAGE_TYPE', 'local', "Storage driver: 'local' or 's3'"],
+    ['STORAGE_S3_REGION', '', 'Storage Region'],
+    ['STORAGE_S3_NAME', '', 'Bucket Name'],
+    ['STORAGE_S3_ENDPOINT', '', 'Use if a different Endpoint is needed (for example Google)'],
+    ['STORAGE_LOCAL_PATH', '.local-storage', 'data path (local storage)'],
+    ]}></OptionTable>
+
+### Logging
+
+<OptionTable options={[
+    ['LOGGER_DRIVER', 'console', "The logging driver can be: 'console' or 'sentry'"],
+    ['LOG_LEVEL', 'error,warn', "The loglevels which are logged to the logging driver. Can include: 'log', 'warn', 'error'"],
+    ['SENTRY_DSN', 'https://xxx@xxx.ingest.sentry.io/xxx', 'The sentry logging endpoint used if sentry logging driver is selected'],
+    ]}></OptionTable>
+
+### Support
+
+
+<OptionTable options={[
+    ['SUPPORT_DRIVER', 'front', "Support driver ('front' or 'none')"],
+    ['SUPPORT_FRONT_HMAC_KEY', '<secret>', 'Suport chat key'],
+    ['SUPPORT_FRONT_CHAT_ID', '<id>', 'Support chat id'],
+    ]}></OptionTable>
+
+
+### Debug / Development
+
+<OptionTable options={[
+    ['DEBUG_MODE', 'true', 'Activate debug mode'],
+    ['SIGN_IN_PREFILLED', 'true', 'Prefill the Signin form for usage in a demo or dev enviroment'],
+    ]}></OptionTable>

docs/docs/start/self-hosting/self-hosting.mdx

@@ -1,6 +1,6 @@
 ---
 title: Self-Hosting
-sidebar_position: 2
+sidebar_position: 1
 sidebar_custom_props:
   icon: TbServer
 ---

docs/src/theme/OptionTable/index.js

@@ -0,0 +1,29 @@
+import styles from "./style.module.css";
+import React from "react";
+
+export default function OptionTable({ options }) {
+  return (
+    <div className={styles.container}>
+      <table className={styles.optionsTable}>
+        <thead className={styles.tableHeader}>
+          <tr className={styles.tableHeaderRow}>
+            <th className={styles.tableHeaderCell}>Variable</th>
+            <th className={styles.tableHeaderCell}>Example</th>
+            <th className={styles.tableHeaderCell}>Description</th>
+          </tr>
+        </thead>
+        <tbody className={styles.tableBody}>
+          {options.map(([option, example, description]) => (
+            <tr key={option} className={styles.tableRow}>
+              <td className={styles.tableOptionCell}>
+                {option}
+              </td>
+              <td className={styles.tableDescriptionCell}>{example}</td>
+              <td className={styles.tableDescriptionCell}>{description}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

docs/src/theme/OptionTable/style.module.css

@@ -0,0 +1,87 @@
+.container {
+  mask-image: linear-gradient(
+    to right,
+    transparent 0.8em,
+    white 1.5em,
+    white calc(100% - 1.5em),
+    transparent calc(100% - 0.8em)
+  );
+
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-bottom: 1rem;
+  margin-bottom: 1rem;
+  margin-top: 1.5rem;
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+}
+
+.container::-webkit-scrollbar {
+  appearance: none;
+}
+
+.optionsTable {
+  width: 100%;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  border-collapse: collapse;
+  display: inline-table;
+}
+
+.tableHeader {
+  background: transparent;
+}
+
+.tableHeaderRow {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  border-bottom-width: 1px;
+  text-align: left;
+  border-top: none;
+}
+
+.tableHeaderCell {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-weight: 600;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+}
+
+.tableBody {
+  color: var(--ifm-color-content);
+  vertical-align: baseline;
+}
+
+.tableRow {
+  border-bottom-width: 1px;
+  border-left: none;
+  border-right: none;
+  border-color: var(--ifm-color-content);
+}
+
+.tableOptionCell {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+  white-space: pre;
+  color: var(--ifm-color-primary-light);
+  border-right: none;
+  border-left: none;
+}
+
+.tableDescriptionCell {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1.5rem;
+  border-right: none;
+  border-left: none;
+}

docs/src/theme/icons.js

@@ -38,4 +38,5 @@ export {
   TbBrandGraphql,
   TbApi,
   TbUsers,
+  TbVariable
 } from "react-icons/tb";

packages/twenty-utils/dangerfile.ts

@@ -11,6 +11,15 @@ if (packageChanged && !lockfileChanged) {
   warn(`${message} - <i>${idea}</i>`);
 }
 
+// Check if .env.example was changed, but not enviroment variable documentation
+const envChanged = danger.git.modified_files.includes('.env.example') || danger.git.modified_files.includes('environment.service.ts');
+const envDocsChanged = danger.git.modified_files.includes('enviroment-variables.mdx');
+if (envChanged && !envDocsChanged) {
+  const message = 'Changes were made to the enviroment variables, but not to the documentation';
+  const idea = 'Please review your changes and check if a change needs to be documented!';
+  warn(`${message} - <i>${idea}</i>`);
+}
+
 
 // CLA alert if first time contributor
 if(danger.github.pr.author_association === 'FIRST_TIME_CONTRIBUTOR' || danger.github.pr.author_association === 'NONE') {