From bfb6b493c714ed1c16a35f2a8490045ca04a155d Mon Sep 17 00:00:00 2001
From: Mark Williams <mark.williams@diamond.ac.uk>
Date: Fri, 28 Nov 2025 16:19:20 +0000
Subject: [PATCH 1/3] LIMS-1974: Indicate dev DB in header bar

---
 api/config_sample.php                        |  8 ++++++--
 api/index.php                                |  3 ++-
 client/src/js/app/components/breadcrumbs.vue | 21 ++++++++++----------
 client/src/js/app/components/header.vue      | 15 ++++++++++++--
 client/src/js/app/store/store.js             |  2 ++
 client/tailwind.config.js                    |  6 ++++--
 6 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/api/config_sample.php b/api/config_sample.php
index 9be9cf64f..b7b7d77e3 100644
--- a/api/config_sample.php
+++ b/api/config_sample.php
@@ -9,8 +9,12 @@
     #   Values: dev | production
     $mode = 'dev';
 
-    # Database credentials, db = hostname/database
-    $isb  = array('user' => 'user', 'pass' => 'pass', 'db' => 'localhost/ispyb');
+    # Dev and production database credentials, db = hostname/database
+    $creds = array(
+        'dev' => array('user' => 'user', 'pass' => 'pass', 'db' => 'localhost/ispyb'),
+        'production' => array('user' => 'user', 'pass' => 'pass', 'db' => 'localhost/ispyb')
+    );
+    $isb = $creds[$mode];
     $dbtype = 'mysql';
 
     # Encoded JWT key, used to sign and check validaty of jwt tokens
diff --git a/api/index.php b/api/index.php
index a16c214de..286e85749 100644
--- a/api/index.php
+++ b/api/index.php
@@ -67,7 +67,7 @@ function setupApplication($mode): Slim
     });
 
     $app->get('/options', function () use ($app) {
-        global $motd, $authentication_type, $cas_url, $cas_sso, $sso_url, $package_description,
+        global $mode, $motd, $authentication_type, $cas_url, $cas_sso, $sso_url, $package_description,
             $facility_courier_countries, $facility_courier_countries_nde, $facility_courier_countries_link, $icat_base_url,
             $visit_persist_storage_dir_segment, $dhl_enable, $scale_grid, $scale_grid_end_date, $preset_proposal, $timezone,
             $valid_components, $enabled_container_types, $synchweb_version, $redirects,
@@ -78,6 +78,7 @@ function setupApplication($mode): Slim
         $app->contentType('application/json');
         $options = $app->container['options'];
         $app->response()->body(json_encode(array(
+            'mode' => $mode == 'production' ? 'production' : 'development',
             'motd' => $options->get('motd', $motd),
             'authentication_type' => $authentication_type,
             'cas_url' => $cas_url,
diff --git a/client/src/js/app/components/breadcrumbs.vue b/client/src/js/app/components/breadcrumbs.vue
index b2f1f548a..d6a9e890f 100644
--- a/client/src/js/app/components/breadcrumbs.vue
+++ b/client/src/js/app/components/breadcrumbs.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="bread">
-    <ul id="breadcrumbs">
+    <ul id="breadcrumbs" :class="getBackgroundClass">
       <li
         v-for="(item, index) in bc"
         :key="index"
@@ -30,20 +30,21 @@ export default {
             var title = this.bc.map( (item) => { return item.title} )
             document.title = 'ISPyB » ' + title.join(' » ')
         }
-    }
+    },
+    computed: {
+        isDevMode() {
+            return this.$store.state.mode === 'development'
+        },
+        getBackgroundClass : function() {
+            return this.isDevMode ? 'tw-bg-header-background-dev' : 'tw-bg-header-background'
+        },
+    },
 }
 </script>
 
 <style scoped>
 
 #breadcrumbs {
-    /* background: #474747;
-    color: #dbdbdb;
-    font-size: 10px;
-    list-style-type: none;
-    padding: 5px 5px;
-    clear: both */
-    @apply tw-bg-header-bc-background;
     @apply tw-text-header-bc-color;
     @apply tw-p-1;
     @apply tw-text-xxs;
@@ -72,4 +73,4 @@ export default {
 #breadcrumbs li:before {
     content: '\00BB  '
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/src/js/app/components/header.vue b/client/src/js/app/components/header.vue
index ac2758223..302722cc1 100644
--- a/client/src/js/app/components/header.vue
+++ b/client/src/js/app/components/header.vue
@@ -1,7 +1,8 @@
 <template>
   <div
     id="vue-header"
-    class="tw-flex tw-justify-between tw-items-center tw-h-10 tw-bg-header-background"
+    class="tw-flex tw-justify-between tw-items-center tw-h-10"
+    :class="getBackgroundClass"
   >
     <div class="">
       <router-link
@@ -49,6 +50,10 @@
         </p>
       </router-link>
     </div>
+    <div v-if="isDevMode" class="tw-flex tw-items-center tw-justify-center tw-text-header-color">
+      <span class="fa fa-2x fa-exclamation-circle tw-mx-1"></span>
+      <p class="tw-hidden lg:tw-inline">Development Database</p>
+    </div>
     <div
       class="tw-flex"
     >
@@ -109,7 +114,13 @@ export default {
             else return (this.$store.getters['user/hasPermission'](item.permission))
           }, this)
           return menus
-        }
+        },
+        isDevMode() {
+            return this.$store.state.mode === 'development'
+        },
+        getBackgroundClass : function() {
+            return this.isDevMode ? 'tw-bg-header-background-dev' : 'tw-bg-header-background'
+        },
     },
     methods: {
       logout: function () {
diff --git a/client/src/js/app/store/store.js b/client/src/js/app/store/store.js
index 68b9b5f27..a41ae57f5 100644
--- a/client/src/js/app/store/store.js
+++ b/client/src/js/app/store/store.js
@@ -43,6 +43,7 @@ const store = new Vuex.Store({
 
     isLoading: false,
     motd: '',
+    mode: '',
     synchwebVersion: '',
     help: false, // Global help flag used to denote if we should display inline help on pages
     skipHomePage: config.skipHome || false,
@@ -66,6 +67,7 @@ const store = new Vuex.Store({
       state.appOptions = options.toJSON()
 
       state.motd = options.get('motd') || state.motd
+      state.mode = options.get('mode') || 'production'
 
       state.synchwebVersion = options.get('synchweb_version') || state.synchwebVersion
 
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index bff83ce6f..464dae9a5 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -94,14 +94,16 @@ module.exports = {
         'sidebar-mobile-active-background': 'rgb(115,115,115)',
         'sidebar-mobile-hover-background': 'rgb(105,105,105)',
 // Header
-        'header-background': '#2c2c2c',
+        'header-background': '#112e4d',
+        'header-background-dev': '#2e4d11',
         'header-color': '#aaaaaa',
         'header-hover-color': '#ffffff',
 // Header Menu
         'header-menu-color': '#dddddd',
         'header-menu-hover': '#ffffff',
 // Header Breadcrumbs
-        'header-bc-background': '#474747',
+        'header-bc-background': '#112e4d',
+        'header-bc-background-dev': '#2e4d11',
         'header-bc-color': '#dbdbdb',
         'header-bc-hover': '#ffffff',
 // Footer

From bf2520c94e573ac4182a6bc19a6eeee8e8c0da85 Mon Sep 17 00:00:00 2001
From: Mark Williams <mark.williams@diamond.ac.uk>
Date: Mon, 1 Dec 2025 10:14:25 +0000
Subject: [PATCH 2/3] LIMS-1974: Revert changes to config

---
 api/config_sample.php | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/api/config_sample.php b/api/config_sample.php
index b7b7d77e3..ec98d666a 100644
--- a/api/config_sample.php
+++ b/api/config_sample.php
@@ -9,12 +9,8 @@
     #   Values: dev | production
     $mode = 'dev';
 
-    # Dev and production database credentials, db = hostname/database
-    $creds = array(
-        'dev' => array('user' => 'user', 'pass' => 'pass', 'db' => 'localhost/ispyb'),
-        'production' => array('user' => 'user', 'pass' => 'pass', 'db' => 'localhost/ispyb')
-    );
-    $isb = $creds[$mode];
+    # Database credentials, db = hostname/database
+    $isb = array('user' => 'user', 'pass' => 'pass', 'db' => 'localhost/ispyb');
     $dbtype = 'mysql';
 
     # Encoded JWT key, used to sign and check validaty of jwt tokens

From 861c036bba2e12ef2b0c8e7335b2ea11867f2243 Mon Sep 17 00:00:00 2001
From: Mark Williams <mark.williams@diamond.ac.uk>
Date: Mon, 1 Dec 2025 11:08:26 +0000
Subject: [PATCH 3/3] LIMS-1974: Use a phase banner

---
 client/src/js/app/components/breadcrumbs.vue | 13 +++----------
 client/src/js/app/components/header.vue      | 19 ++++++++++---------
 client/tailwind.config.js                    |  2 --
 3 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/client/src/js/app/components/breadcrumbs.vue b/client/src/js/app/components/breadcrumbs.vue
index d6a9e890f..5bacdd3f4 100644
--- a/client/src/js/app/components/breadcrumbs.vue
+++ b/client/src/js/app/components/breadcrumbs.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="bread">
-    <ul id="breadcrumbs" :class="getBackgroundClass">
+    <ul id="breadcrumbs">
       <li
         v-for="(item, index) in bc"
         :key="index"
@@ -30,21 +30,14 @@ export default {
             var title = this.bc.map( (item) => { return item.title} )
             document.title = 'ISPyB » ' + title.join(' » ')
         }
-    },
-    computed: {
-        isDevMode() {
-            return this.$store.state.mode === 'development'
-        },
-        getBackgroundClass : function() {
-            return this.isDevMode ? 'tw-bg-header-background-dev' : 'tw-bg-header-background'
-        },
-    },
+    }
 }
 </script>
 
 <style scoped>
 
 #breadcrumbs {
+    @apply tw-bg-header-bc-background;
     @apply tw-text-header-bc-color;
     @apply tw-p-1;
     @apply tw-text-xxs;
diff --git a/client/src/js/app/components/header.vue b/client/src/js/app/components/header.vue
index 302722cc1..2f35f9028 100644
--- a/client/src/js/app/components/header.vue
+++ b/client/src/js/app/components/header.vue
@@ -1,8 +1,15 @@
 <template>
+  <div>
+  <div
+    v-if="isDevMode"
+    class="tw-flex tw-h-10 tw-items-center tw-bg-content-active"
+  >
+    <span class="fa fa-2x fa-exclamation-circle tw-mx-1"></span>
+    This application is running in development mode. Data will not be persisted.
+  </div>
   <div
     id="vue-header"
-    class="tw-flex tw-justify-between tw-items-center tw-h-10"
-    :class="getBackgroundClass"
+    class="tw-flex tw-justify-between tw-items-center tw-h-10 tw-bg-header-background"
   >
     <div class="">
       <router-link
@@ -50,10 +57,6 @@
         </p>
       </router-link>
     </div>
-    <div v-if="isDevMode" class="tw-flex tw-items-center tw-justify-center tw-text-header-color">
-      <span class="fa fa-2x fa-exclamation-circle tw-mx-1"></span>
-      <p class="tw-hidden lg:tw-inline">Development Database</p>
-    </div>
     <div
       class="tw-flex"
     >
@@ -77,6 +80,7 @@
       </router-link>
     </div>
   </div>
+  </div>
 </template>
 
 <script>
@@ -118,9 +122,6 @@ export default {
         isDevMode() {
             return this.$store.state.mode === 'development'
         },
-        getBackgroundClass : function() {
-            return this.isDevMode ? 'tw-bg-header-background-dev' : 'tw-bg-header-background'
-        },
     },
     methods: {
       logout: function () {
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 464dae9a5..c050e21e8 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -95,7 +95,6 @@ module.exports = {
         'sidebar-mobile-hover-background': 'rgb(105,105,105)',
 // Header
         'header-background': '#112e4d',
-        'header-background-dev': '#2e4d11',
         'header-color': '#aaaaaa',
         'header-hover-color': '#ffffff',
 // Header Menu
@@ -103,7 +102,6 @@ module.exports = {
         'header-menu-hover': '#ffffff',
 // Header Breadcrumbs
         'header-bc-background': '#112e4d',
-        'header-bc-background-dev': '#2e4d11',
         'header-bc-color': '#dbdbdb',
         'header-bc-hover': '#ffffff',
 // Footer