Simple implementation of feature flags

Author: Meldiron

.env.example

@@ -1,6 +1,6 @@
 PUBLIC_CONSOLE_MODE=self-hosted
+PUBLIC_CONSOLE_FEATURE_FLAGS=
 PUBLIC_APPWRITE_MULTI_REGION=false
 PUBLIC_APPWRITE_ENDPOINT=http://localhost/v1
-
 PUBLIC_STRIPE_KEY=
 PUBLIC_GROWTH_ENDPOINT=

.github/workflows/publish.yml

@@ -78,6 +78,7 @@ jobs:
                   labels: ${{ steps.meta.outputs.labels }}
                   build-args: |
                       "PUBLIC_CONSOLE_MODE=cloud"
+                      "PUBLIC_CONSOLE_FEATURE_FLAGS="sites,csv-import"
                       "PUBLIC_APPWRITE_MULTI_REGION=true"
                       "PUBLIC_GROWTH_ENDPOINT=${{ secrets.PUBLIC_GROWTH_ENDPOINT }}"
                       "PUBLIC_STRIPE_KEY=${{ secrets.PUBLIC_STRIPE_KEY_STAGE }}"

Dockerfile

@@ -21,6 +21,7 @@ ADD ./src /app/src
 ADD ./static /app/static
 
 ARG PUBLIC_CONSOLE_MODE
+ARG PUBLIC_CONSOLE_FEATURE_FLAGS
 ARG PUBLIC_APPWRITE_MULTI_REGION
 ARG PUBLIC_APPWRITE_ENDPOINT
 ARG PUBLIC_GROWTH_ENDPOINT
@@ -31,6 +32,7 @@ ARG SENTRY_RELEASE
 ENV PUBLIC_APPWRITE_ENDPOINT=$PUBLIC_APPWRITE_ENDPOINT
 ENV PUBLIC_GROWTH_ENDPOINT=$PUBLIC_GROWTH_ENDPOINT
 ENV PUBLIC_CONSOLE_MODE=$PUBLIC_CONSOLE_MODE
+ENV PUBLIC_CONSOLE_FEATURE_FLAGS=$PUBLIC_CONSOLE_FEATURE_FLAGS
 ENV PUBLIC_APPWRITE_MULTI_REGION=$PUBLIC_APPWRITE_MULTI_REGION
 ENV PUBLIC_STRIPE_KEY=$PUBLIC_STRIPE_KEY
 ENV SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN

build.js

@@ -24,6 +24,7 @@ async function main() {
     log(bold().magenta('APPWRITE CONSOLE'));
     log();
     logEnv('CONSOLE MODE', env?.PUBLIC_CONSOLE_MODE);
+    logEnv('CONSOLE FEATURE FLAGS', env?.PUBLIC_CONSOLE_FEATURE_FLAGS);
     logEnv('MULTI REGION', env?.PUBLIC_APPWRITE_MULTI_REGION);
     logEnv('APPWRITE ENDPOINT', env?.PUBLIC_APPWRITE_ENDPOINT, 'relative');
     logEnv('GROWTH ENDPOINT', env?.PUBLIC_GROWTH_ENDPOINT);

compose.yml

@@ -5,6 +5,7 @@ services:
             context: .
             args:
                 PUBLIC_CONSOLE_MODE: ${PUBLIC_CONSOLE_MODE}
+                PUBLIC_CONSOLE_FEATURE_FLAGS: ${PUBLIC_CONSOLE_FEATURE_FLAGS}
                 PUBLIC_APPWRITE_MULTI_REGION: ${PUBLIC_APPWRITE_MULTI_REGION}
                 PUBLIC_APPWRITE_ENDPOINT: ${PUBLIC_APPWRITE_ENDPOINT}
                 PUBLIC_GROWTH_ENDPOINT: ${PUBLIC_GROWTH_ENDPOINT}
@@ -21,6 +22,7 @@ services:
                       - build/
         environment:
             - PUBLIC_CONSOLE_MODE
+            - PUBLIC_CONSOLE_FEATURE_FLAGS
             - PUBLIC_APPWRITE_MULTI_REGION
             - PUBLIC_APPWRITE_ENDPOINT
             - PUBLIC_GROWTH_ENDPOINT

src/lib/flags.ts

@@ -0,0 +1,13 @@
+import { env } from '$env/dynamic/public';
+
+export const PUBLIC_CONSOLE_FEATURE_FLAGS = env.PUBLIC_CONSOLE_FEATURE_FLAGS ?? '';
+
+function setupFlag(name: string, _description: string) {
+    // TODO: Use flags library that provides visual component
+    return PUBLIC_CONSOLE_FEATURE_FLAGS.includes(name);
+}
+
+export const flags = {
+    showSites: setupFlag('sites', 'When disabled, sites view will show high demand'),
+    showCsvImport: setupFlag('csv-import', 'When disabled, documents view will hide import button')
+};

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte

@@ -24,8 +24,7 @@
     import { base } from '$app/paths';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import type { Models } from '@appwrite.io/console';
-    import { organization } from '$lib/stores/organization';
-    import { APPWRITE_OFFICIALS_ORG, isCloud } from '$lib/system';
+    import { flags } from '$lib/flags';
 
     export let data: PageData;
 
@@ -88,14 +87,6 @@
             $isCsvImportInProgress = false;
         }
     }
-
-    /**
-     * Controls visibility of CSV Imports feature:
-     * - Shown if running on self-hosted
-     * - Shown on cloud only if the organization is Appwrite's.
-     * - Hidden on cloud for any non-Appwrite organization.
-     */
-    $: showCsvImports = !isCloud || $organization.$id === APPWRITE_OFFICIALS_ORG;
 </script>
 
 {#key page.params.collection}
@@ -109,7 +100,7 @@
                     analyticsSource="database_documents" />
                 <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
                     <ViewSelector view={data.view} {columns} hideView />
-                    {#if showCsvImports}
+                    {#if flags.showCsvImport}
                         <Button
                             secondary
                             event={Click.DatabaseImportCsv}

src/routes/(console)/project-[region]-[project]/sites/+page.ts

@@ -2,6 +2,7 @@ import { Query, type Models } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
 import { getLimit, getPage, getSearch, getView, pageToOffset, View } from '$lib/helpers/load';
 import { CARD_LIMIT, Dependencies } from '$lib/constants';
+import { flags } from '$lib/flags';
 
 export const load = async ({ url, depends, route, params }) => {
     depends(Dependencies.SITES);
@@ -11,11 +12,9 @@ export const load = async ({ url, depends, route, params }) => {
     const offset = pageToOffset(page, limit);
     const view = getView(url, route, View.Grid, View.Grid);
 
-    const sitesLive = false;
-
-    if (!sitesLive)
+    if (!flags.showSites) {
         return {
-            sitesLive,
+            sitesLive: false,
             offset,
             limit,
             search,
@@ -25,6 +24,7 @@ export const load = async ({ url, depends, route, params }) => {
                 sites: []
             } as Models.SiteList
         };
+    }
 
     const siteList = await sdk
         .forProject(params.region, params.project)
@@ -34,7 +34,7 @@ export const load = async ({ url, depends, route, params }) => {
         );
 
     return {
-        sitesLive,
+        sitesLive: true,
         offset,
         limit,
         search,