LIMS-1974: Indicate dev DB in header bar (#1012)

* LIMS-1974: Indicate dev DB in header bar

* LIMS-1974: Revert changes to config

* LIMS-1974: Use a phase banner

---------

Co-authored-by: Mark Williams <[email protected]>

Author: ndg63276

api/config_sample.php

@@ -10,7 +10,7 @@
     $mode = 'dev';
 
     # Database credentials, db = hostname/database
-    $isb  = array('user' => 'user', 'pass' => 'pass', 'db' => 'localhost/ispyb');
+    $isb = array('user' => 'user', 'pass' => 'pass', 'db' => 'localhost/ispyb');
     $dbtype = 'mysql';
 
     # Encoded JWT key, used to sign and check validaty of jwt tokens

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,

client/src/js/app/components/breadcrumbs.vue

@@ -37,12 +37,6 @@ export default {
 <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;
@@ -72,4 +66,4 @@ export default {
 #breadcrumbs li:before {
     content: '\00BB  '
 }
-</style>
+</style>

client/src/js/app/components/header.vue

@@ -1,4 +1,12 @@
 <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 tw-bg-header-background"
@@ -72,6 +80,7 @@
       </router-link>
     </div>
   </div>
+  </div>
 </template>
 
 <script>
@@ -109,7 +118,10 @@ export default {
             else return (this.$store.getters['user/hasPermission'](item.permission))
           }, this)
           return menus
-        }
+        },
+        isDevMode() {
+            return this.$store.state.mode === 'development'
+        },
     },
     methods: {
       logout: function () {

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
 

client/tailwind.config.js

@@ -94,14 +94,14 @@ 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-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-color': '#dbdbdb',
         'header-bc-hover': '#ffffff',
 // Footer