From f3a02df80e83a7e311aaed6aaa8ad90bc305f97a Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Tue, 27 May 2025 17:44:42 +0200
Subject: [PATCH] Version in self hosted (#770)

* Enhance Application Version Management in Docker and Feature Flags

- Added a new build argument `APP_VERSION` in the Docker configuration files to facilitate version tracking during builds.
- Introduced a private method `getAppVersion` in `FeatureFlagsController` to retrieve the application version from the Docker environment, enhancing the feature flags response with version information.
- Updated the `app.php` configuration file to include a new entry for `docker_version`, allowing for better version management and fallback when the Docker build version is unavailable.

These changes aim to improve the application's versioning capabilities, ensuring that the version is consistently available across different components and environments.

* Refactor OpenFormFooter and Update Feature Flags Handling

- Modified `OpenFormFooter.vue` to include a version display when available, enhancing user awareness of the application version.
- Refactored the script section to use the `<script setup>` syntax, improving readability and reactivity by utilizing `ref` and `computed` for reactive properties.
- Removed the deprecated `feature-flags.js` plugin and updated `featureFlags.js` to ensure proper SSR compatibility and error handling during feature flag fetching.

These changes aim to improve the user interface by providing version information and enhance the overall code structure for better maintainability and performance.
---
 .github/workflows/dockerhub.yml               |  3 +++
 .../Content/FeatureFlagsController.php        | 14 +++++++++++
 api/config/app.php                            | 11 ++++++++
 client/components/pages/OpenFormFooter.vue    | 25 ++++++++-----------
 client/middleware/self-hosted-credentials.js  |  6 -----
 client/plugins/feature-flags.js               | 10 --------
 client/plugins/featureFlags.js                | 19 ++++++++++----
 docker-compose.yml                            | 12 +++++++--
 docker/Dockerfile.api                         |  6 +++++
 9 files changed, 68 insertions(+), 38 deletions(-)
 delete mode 100644 client/plugins/feature-flags.js

diff --git a/.github/workflows/dockerhub.yml b/.github/workflows/dockerhub.yml
index 4ab7a210..e8a400f4 100644
--- a/.github/workflows/dockerhub.yml
+++ b/.github/workflows/dockerhub.yml
@@ -60,6 +60,7 @@ jobs:
           build-args: |
             APP_ENV=${{ env.VERSION == 'dev' && 'local' || 'production' }}
             COMPOSER_FLAGS=${{ env.VERSION == 'dev' && '--optimize-autoloader --no-interaction' || '--no-dev --optimize-autoloader --no-interaction' }}
+            APP_VERSION=${{ env.VERSION }}
           tags: ${{ env.API_TAGS }}
           cache-from: type=registry,ref=${{secrets.DOCKER_API_REPO}}:dev
           cache-to: type=inline
@@ -71,6 +72,8 @@ jobs:
           file: docker/Dockerfile.client
           platforms: linux/amd64,linux/arm64
           push: true
+          build-args: |
+            APP_VERSION=${{ env.VERSION }}
           tags: ${{ env.UI_TAGS }}
           cache-from: type=registry,ref=${{secrets.DOCKER_UI_REPO}}:dev
           cache-to: type=inline
diff --git a/api/app/Http/Controllers/Content/FeatureFlagsController.php b/api/app/Http/Controllers/Content/FeatureFlagsController.php
index 43ff0b57..dd7cae53 100644
--- a/api/app/Http/Controllers/Content/FeatureFlagsController.php
+++ b/api/app/Http/Controllers/Content/FeatureFlagsController.php
@@ -14,6 +14,7 @@ class FeatureFlagsController extends Controller
                 'self_hosted' => config('app.self_hosted', true),
                 'custom_domains' => config('custom-domains.enabled', false),
                 'ai_features' => !empty(config('services.openai.api_key')),
+                'version' => $this->getAppVersion(),
 
                 'billing' => [
                     'enabled' => !empty(config('cashier.key')) && !empty(config('cashier.secret')),
@@ -44,4 +45,17 @@ class FeatureFlagsController extends Controller
 
         return response()->json($featureFlags);
     }
+
+    /**
+     * Get the application version from Docker environment or fallback
+     */
+    private function getAppVersion(): ?string
+    {
+        // Only return version for self-hosted installations
+        if (!config('app.self_hosted', true)) {
+            return null;
+        }
+
+        return config('app.docker_version');
+    }
 }
diff --git a/api/config/app.php b/api/config/app.php
index e409eb8b..dddc163f 100644
--- a/api/config/app.php
+++ b/api/config/app.php
@@ -15,6 +15,17 @@ return [
 
     'name' => env('APP_NAME', 'OpnForm'),
 
+    /*
+    |--------------------------------------------------------------------------
+    | Application Version
+    |--------------------------------------------------------------------------
+    |
+    | This value is the version of your application. Used for display purposes
+    | and fallback when Docker build version is not available.
+    |
+    */
+    'docker_version' => env('APP_VERSION_DOCKER'),
+
     /*
     |--------------------------------------------------------------------------
     | Application Environment
diff --git a/client/components/pages/OpenFormFooter.vue b/client/components/pages/OpenFormFooter.vue
index fa61bf8f..0a7e881a 100644
--- a/client/components/pages/OpenFormFooter.vue
+++ b/client/components/pages/OpenFormFooter.vue
@@ -4,6 +4,9 @@
       <div class="flex mt-2 items-center">
         <p class="text-sm text-gray-600 dark:text-gray-400 text-center w-full">
           © Copyright {{ currYear }}. All Rights Reserved
+          <span v-if="version">
+            <br>Version {{ version }}
+          </span>
         </p>
       </div>
       <div class="flex justify-center mt-5 md:mt-0">
@@ -82,22 +85,14 @@
   </div>
 </template>
 
-<script>
-import { computed } from "vue"
+<script setup>
 import opnformConfig from "~/opnform.config.js"
 
-export default {
-  setup() {
-    const authStore = useAuthStore()
-    return {
-      user: computed(() => authStore.user),
-      appStore: useAppStore(),
-      opnformConfig,
-    }
-  },
+const authStore = useAuthStore()
 
-  data: () => ({
-    currYear: new Date().getFullYear(),
-  }),
-}
+const user = computed(() => authStore.user)
+const currYear = ref(new Date().getFullYear())
+
+// Use the reactive version for proper template reactivity
+const version = computed(() => useFeatureFlag('version'))
 </script>
diff --git a/client/middleware/self-hosted-credentials.js b/client/middleware/self-hosted-credentials.js
index be46fbbc..d7d6265b 100644
--- a/client/middleware/self-hosted-credentials.js
+++ b/client/middleware/self-hosted-credentials.js
@@ -1,11 +1,5 @@
 export default defineNuxtRouteMiddleware(async () => {
   const authStore = useAuthStore()
-  const featureFlagsStore = useFeatureFlagsStore()
-
-  // Ensure feature flags are loaded
-  if (!featureFlagsStore.isLoaded) {
-    await featureFlagsStore.fetchFlags()
-  }
 
   if (useFeatureFlag('self_hosted')) {
     if (authStore.check && authStore.user?.email === 'admin@opnform.com') {
diff --git a/client/plugins/feature-flags.js b/client/plugins/feature-flags.js
deleted file mode 100644
index 2c067660..00000000
--- a/client/plugins/feature-flags.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useFeatureFlagsStore } from '~/stores/featureFlags'
-
-export default defineNuxtPlugin(async () => {
-  const featureFlagsStore = useFeatureFlagsStore()
-
-  // Load flags if they haven't been loaded yet
-  if (!featureFlagsStore.isLoaded) {
-    await featureFlagsStore.fetchFlags()
-  }
-}) 
\ No newline at end of file
diff --git a/client/plugins/featureFlags.js b/client/plugins/featureFlags.js
index 35cbca2f..1bcc8b0c 100644
--- a/client/plugins/featureFlags.js
+++ b/client/plugins/featureFlags.js
@@ -1,9 +1,18 @@
 import { useFeatureFlagsStore } from '~/stores/featureFlags'
 
-export default defineNuxtPlugin((nuxtApp) => {
-  const featureFlagsStore = useFeatureFlagsStore()
+export default defineNuxtPlugin(async (nuxtApp) => {
+  // Get the pinia instance for SSR compatibility
+  const { $pinia } = nuxtApp
 
-  nuxtApp.provide('featureFlag', (key, defaultValue = false) => {
-    return featureFlagsStore.getFlag(key, defaultValue)
-  })
+  try {    
+    // Pass pinia instance for SSR compatibility
+    const featureFlagsStore = useFeatureFlagsStore($pinia)
+    
+    // Fetch flags during SSR to prevent hydration mismatches
+    if (!featureFlagsStore.isLoaded) {
+      await featureFlagsStore.fetchFlags()
+    }
+  } catch (error) {
+    console.error('Feature flags plugin failed:', error)
+  }
 })
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index c1ca2438..39194bdf 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,7 +1,11 @@
 ---
 services:
   api: &api-environment
-    image: jhumanj/opnform-api:latest
+    build:
+      context: .
+      dockerfile: docker/Dockerfile.api
+      args:
+        APP_VERSION: "local-test-1.0.0"
     container_name: opnform-api
     volumes: &api-environment-volumes
       - opnform_storage:/usr/share/nginx/html/storage:rw
@@ -62,7 +66,11 @@ services:
       start_period: 70s # Allow time for first scheduled run and cache write
 
   ui:
-    image: jhumanj/opnform-client:latest
+    build:
+      context: .
+      dockerfile: docker/Dockerfile.client
+      args:
+        APP_VERSION: "local-test-1.0.0"
     container_name: opnform-client
     env_file:
       - ./client/.env
diff --git a/docker/Dockerfile.api b/docker/Dockerfile.api
index a2055666..a3e5b9ec 100644
--- a/docker/Dockerfile.api
+++ b/docker/Dockerfile.api
@@ -27,6 +27,9 @@ RUN composer install --optimize-autoloader --no-interaction \
 # Final stage - smaller runtime image
 FROM php:8.3-fpm-alpine
 
+# Accept version build argument
+ARG APP_VERSION=unknown
+
 # Install runtime dependencies
 RUN apk add --no-cache \
     libzip \
@@ -75,6 +78,9 @@ RUN mkdir -p storage/framework/sessions \
 # Copy the entire application from the builder stage
 COPY --from=builder /app/ ./
 
+# Set version as environment variable (more reliable than file approach)
+ENV APP_VERSION_DOCKER=$APP_VERSION
+
 # Setup entrypoint
 COPY docker/php-fpm-entrypoint /usr/local/bin/opnform-entrypoint
 RUN chmod a+x /usr/local/bin/*