From df4e05bbd4de0e60ae4a0bfc24fa382e1445c1bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Agneray?= <francois.agneray@lam.fr>
Date: Mon, 26 Sep 2022 17:52:17 +0200
Subject: [PATCH] Design progress => WIP

---
 .../components/instance-form.component.html   |  50 +++++++
 .../components/instance-form.component.ts     |   6 +
 .../app/instance/instance.component.spec.ts   |   6 +
 .../components/progress-bar.component.html    |   8 +-
 .../components/progress-bar.component.scss    |   4 +
 .../components/progress-bar.component.spec.ts |  20 ++-
 .../components/progress-bar.component.ts      |  21 +--
 .../effects/search-multiple.effects.spec.ts   |  12 ++
 .../app/metamodel/models/instance.model.ts    |   6 +
 client/src/test-data.ts                       |  18 +++
 conf-dev/create-db.sh                         |   2 +-
 .../__CG__AppEntityInstance.php               | 136 +++++++++++++++++-
 server/src/Action/InstanceAction.php          |  12 ++
 server/src/Action/InstanceListAction.php      |  12 ++
 server/src/Entity/Instance.php                | 110 ++++++++++++++
 server/tests/Action/InstanceActionTest.php    |   8 +-
 .../tests/Action/InstanceListActionTest.php   |   6 +
 17 files changed, 416 insertions(+), 21 deletions(-)

diff --git a/client/src/app/admin/instance/components/instance-form.component.html b/client/src/app/admin/instance/components/instance-form.component.html
index c9a4f4b8..5f55899a 100644
--- a/client/src/app/admin/instance/components/instance-form.component.html
+++ b/client/src/app/admin/instance/components/instance-form.component.html
@@ -224,6 +224,56 @@
                 </div>
             </div>
         </accordion-group>
+        <accordion-group heading="Design progress bar" [isOpen]="false">
+            <div class="form-group">
+                <label for="progress_bar_title">Progress bar title</label>
+                <input type="text" class="form-control" id="progress_bar_title" formControlName="progress_bar_title">
+            </div>
+            <div class="form-group">
+                <label for="progress_bar_subtitle">Progress bar subtitle</label>
+                <input type="text" class="form-control" id="progress_bar_subtitle" formControlName="progress_bar_subtitle">
+            </div>
+            <div class="form-row">
+                <div class="form-group col-md-6">
+                    <label for="progress_bar_color_picker">Progress bar color (picker)</label>
+                    <input class="form-control" type="color" id="progress_bar_color_picker" [value]="form.value.progress_bar_color" formControlName="progress_bar_color">
+                </div>
+                <div class="form-group col-md-6">
+                    <label for="progress_bar_color_input">Progress bar color (value)</label>
+                    <input type="text" class="form-control" id="progress_bar_color_input" [value]="form.value.progress_bar_color" formControlName="progress_bar_color">
+                </div>
+            </div>
+            <div class="form-row">
+                <div class="form-group col-md-6">
+                    <label for="progress_bar_active_color_picker">Progress bar active color (picker)</label>
+                    <input class="form-control" type="color" id="progress_bar_active_color_picker" [value]="form.value.progress_bar_active_color" formControlName="progress_bar_active_color">
+                </div>
+                <div class="form-group col-md-6">
+                    <label for="progress_bar_active_color_input">Progress bar active color (value)</label>
+                    <input type="text" class="form-control" id="progress_bar_active_color_input" [value]="form.value.progress_bar_active_color" formControlName="progress_bar_active_color">
+                </div>
+            </div>
+            <div class="form-row">
+                <div class="form-group col-md-6">
+                    <label for="progress_bar_circle_color_picker">Progress bar circle color (picker)</label>
+                    <input class="form-control" type="color" id="progress_bar_circle_color_picker" [value]="form.value.progress_bar_circle_color" formControlName="progress_bar_circle_color">
+                </div>
+                <div class="form-group col-md-6">
+                    <label for="progress_bar_circle_color_input">Progress bar cirlce color (value)</label>
+                    <input type="text" class="form-control" id="progress_bar_circle_color_input" [value]="form.value.progress_bar_circle_color" formControlName="progress_bar_circle_color">
+                </div>
+            </div>
+            <div class="form-row">
+                <div class="form-group col-md-6">
+                    <label for="progress_bar_text_color_picker">Progress bar text color (picker)</label>
+                    <input class="form-control" type="color" id="progress_bar_text_color_picker" [value]="form.value.progress_bar_text_color" formControlName="progress_bar_text_color">
+                </div>
+                <div class="form-group col-md-6">
+                    <label for="progress_bar_text_color_input">Progress bar text color (value)</label>
+                    <input type="text" class="form-control" id="progress_bar_text_color_input" [value]="form.value.progress_bar_text_color" formControlName="progress_bar_text_color">
+                </div>
+            </div>
+        </accordion-group>
         <accordion-group heading="Functionalities" [isOpen]="false">
             <div class="custom-control custom-switch mb-2">
                 <input class="custom-control-input" type="checkbox" id="samp_enabled" name="samp_enabled" formControlName="samp_enabled">
diff --git a/client/src/app/admin/instance/components/instance-form.component.ts b/client/src/app/admin/instance/components/instance-form.component.ts
index d25d7ebf..9f515f0d 100644
--- a/client/src/app/admin/instance/components/instance-form.component.ts
+++ b/client/src/app/admin/instance/components/instance-form.component.ts
@@ -52,6 +52,12 @@ export class InstanceFormComponent implements OnInit {
         family_title_color: new UntypedFormControl('#007BFF'),
         family_title_bold: new UntypedFormControl(false),
         family_color: new UntypedFormControl('#212529'),
+        progress_bar_title: new UntypedFormControl('Dataset search'),
+        progress_bar_subtitle: new UntypedFormControl('Select a dataset, add criteria, select output columns and display the result.'),
+        progress_bar_color: new UntypedFormControl('#E9ECEF'),
+        progress_bar_active_color: new UntypedFormControl('#7AC29A'),
+        progress_bar_circle_color: new UntypedFormControl('#FFFFFF'),
+        progress_bar_text_color: new UntypedFormControl('#91B2BF'),
         samp_enabled: new UntypedFormControl(true),
         back_to_portal: new UntypedFormControl(true),
         user_menu_enabled: new UntypedFormControl(true),
diff --git a/client/src/app/instance/instance.component.spec.ts b/client/src/app/instance/instance.component.spec.ts
index 64face0c..add09718 100644
--- a/client/src/app/instance/instance.component.spec.ts
+++ b/client/src/app/instance/instance.component.spec.ts
@@ -101,6 +101,12 @@ describe('[Instance] InstanceComponent', () => {
             family_title_color: '#007BFF',
             family_title_bold: false,
             family_color: '#212529',
+            progress_bar_title: 'Dataset search',
+            progress_bar_subtitle: 'Select a dataset, add criteria, select output columns and display the result.',
+            progress_bar_color: '#E9ECEF',
+            progress_bar_active_color: '#7AC29A',
+            progress_bar_circle_color: '#FFFFFF',
+            progress_bar_text_color: '#91B2BF',
             samp_enabled: true,
             back_to_portal: true,
             user_menu_enabled: true,
diff --git a/client/src/app/instance/search/components/progress-bar.component.html b/client/src/app/instance/search/components/progress-bar.component.html
index 1f21f183..7a453e3a 100644
--- a/client/src/app/instance/search/components/progress-bar.component.html
+++ b/client/src/app/instance/search/components/progress-bar.component.html
@@ -1,14 +1,14 @@
 <div class="row text-center">
     <div class="col">
-        <h1>Dataset search</h1>
-        <p class="text-muted">Select a dataset, add criteria, select output columns and display the result.</p>
+        <h1>{{ instance.progress_bar_title }}</h1>
+        <p class="text-muted">{{ instance.progress_bar_subtitle }}</p>
     </div>
 </div>
 <div class="progress-navigation">
-    <div class="progress progress-with-circle">
+    <div class="progress progress-with-circle" [ngStyle]="{'background-color': instance.progress_bar_color }">
         <div class="progress-bar" 
             [ngClass]="getStepClass()"
-            [ngStyle]="{'background-color': instance.design_color }" 
+            [ngStyle]="{'background-color': instance.progress_bar_active_color }" 
             role="progressbar" 
             aria-valuenow="1" 
             aria-valuemin="1" 
diff --git a/client/src/app/instance/search/components/progress-bar.component.scss b/client/src/app/instance/search/components/progress-bar.component.scss
index bc7ebf91..9f69ac99 100644
--- a/client/src/app/instance/search/components/progress-bar.component.scss
+++ b/client/src/app/instance/search/components/progress-bar.component.scss
@@ -27,6 +27,10 @@
     transition: width .3s ease;
 }
 
+.nav-link {
+    font-weight: bold;
+}
+
 .nav-pills {
     background-color: #F3F2EE;
     position: absolute;
diff --git a/client/src/app/instance/search/components/progress-bar.component.spec.ts b/client/src/app/instance/search/components/progress-bar.component.spec.ts
index 03c3eed8..ba0805ad 100644
--- a/client/src/app/instance/search/components/progress-bar.component.spec.ts
+++ b/client/src/app/instance/search/components/progress-bar.component.spec.ts
@@ -74,6 +74,12 @@ describe('[Instance][Search][Component] ProgressBarComponent', () => {
             family_title_color: '#007BFF',
             family_title_bold: false,
             family_color: '#212529',
+            progress_bar_title: 'Dataset search',
+            progress_bar_subtitle: 'Select a dataset, add criteria, select output columns and display the result.',
+            progress_bar_color: '#E9ECEF',
+            progress_bar_active_color: '#7AC29A',
+            progress_bar_circle_color: '#FFFFFF',
+            progress_bar_text_color: '#91B2BF',
             samp_enabled: true,
             back_to_portal: true,
             user_menu_enabled: true,
@@ -88,8 +94,8 @@ describe('[Instance][Search][Component] ProgressBarComponent', () => {
             nb_datasets: 2
         };
         component.currentStep = 'a';
-        expect(component.getNavItemAStyle('b', false)).toBeNull();
-        expect(component.getNavItemAStyle('b', true)).toEqual({ color: 'green' });
+        expect(component.getNavItemAStyle('b', false)).toEqual({"color": "#91B2BF"});
+        expect(component.getNavItemAStyle('b', true)).toEqual({ color: '#7AC29A' });
     });
 
     it('#getNavItemIconCircleStyle() should return circle color theme', () => {
@@ -120,6 +126,12 @@ describe('[Instance][Search][Component] ProgressBarComponent', () => {
             family_title_color: '#007BFF',
             family_title_bold: false,
             family_color: '#212529',
+            progress_bar_title: 'Dataset search',
+            progress_bar_subtitle: 'Select a dataset, add criteria, select output columns and display the result.',
+            progress_bar_color: '#E9ECEF',
+            progress_bar_active_color: '#7AC29A',
+            progress_bar_circle_color: '#FFFFFF',
+            progress_bar_text_color: '#91B2BF',
             samp_enabled: true,
             back_to_portal: true,
             user_menu_enabled: true,
@@ -134,7 +146,7 @@ describe('[Instance][Search][Component] ProgressBarComponent', () => {
             nb_datasets: 2
         };
         component.currentStep = 'a';
-        expect(component.getNavItemIconCircleStyle('a', false)).toEqual({ 'background-color': 'green', 'border-color': 'green' });
-        expect(component.getNavItemIconCircleStyle('b', true)).toEqual({ 'color': 'green', 'border-color': 'green' });
+        expect(component.getNavItemIconCircleStyle('a', false)).toEqual({ 'background-color': '#7AC29A', 'border-color': '#7AC29A' });
+        expect(component.getNavItemIconCircleStyle('b', true)).toEqual({ 'color': '#7AC29A', 'border-color': '#7AC29A', 'background-color': '#FFFFFF' });
     });
 });
diff --git a/client/src/app/instance/search/components/progress-bar.component.ts b/client/src/app/instance/search/components/progress-bar.component.ts
index ed20b92f..637c8772 100644
--- a/client/src/app/instance/search/components/progress-bar.component.ts
+++ b/client/src/app/instance/search/components/progress-bar.component.ts
@@ -60,10 +60,12 @@ export class ProgressBarComponent {
     getNavItemAStyle(currentStep: string, checked: boolean): { color: string } | null {
         if (this.currentStep === currentStep || checked) {
             return {
-                'color': this.instance.design_color
+                'color': this.instance.progress_bar_active_color
             }
         } else {
-            return null;
+            return {
+                'color': this.instance.progress_bar_text_color
+            }
         }
     }
 
@@ -75,12 +77,15 @@ export class ProgressBarComponent {
     getNavItemIconCircleStyle(currentStep: string, checked: boolean): {} {
         let style = {};
         if (this.currentStep === currentStep) {
-            style['border-color'] = this.instance.design_color;
-            style['background-color'] = this.instance.design_color;
-        }
-        if (checked) {
-            style['border-color'] = this.instance.design_color;
-            style['color'] = this.instance.design_color;
+            style['border-color'] = this.instance.progress_bar_active_color;
+            style['background-color'] = this.instance.progress_bar_active_color;
+        } else if (checked) {
+            style['background-color'] = this.instance.progress_bar_circle_color;
+            style['border-color'] = this.instance.progress_bar_active_color;
+            style['color'] = this.instance.progress_bar_active_color;
+        } else {
+            style['border-color'] = this.instance.progress_bar_color;
+            style['background-color'] = this.instance.progress_bar_circle_color;
         }
         return style;
     }
diff --git a/client/src/app/instance/store/effects/search-multiple.effects.spec.ts b/client/src/app/instance/store/effects/search-multiple.effects.spec.ts
index caed7faf..88a16628 100644
--- a/client/src/app/instance/store/effects/search-multiple.effects.spec.ts
+++ b/client/src/app/instance/store/effects/search-multiple.effects.spec.ts
@@ -156,6 +156,12 @@ describe('[Instance][Store] SearchMultipleEffects', () => {
                     family_title_color: '#007BFF',
                     family_title_bold: false,
                     family_color: '#212529',
+                    progress_bar_title: 'Dataset search',
+                    progress_bar_subtitle: 'Select a dataset, add criteria, select output columns and display the result.',
+                    progress_bar_color: '#E9ECEF',
+                    progress_bar_active_color: '#7AC29A',
+                    progress_bar_circle_color: '#FFFFFF',
+                    progress_bar_text_color: '#91B2BF',
                     samp_enabled: true,
                     back_to_portal: true,
                     user_menu_enabled: true,
@@ -245,6 +251,12 @@ describe('[Instance][Store] SearchMultipleEffects', () => {
                     family_title_color: '#007BFF',
                     family_title_bold: false,
                     family_color: '#212529',
+                    progress_bar_title: 'Dataset search',
+                    progress_bar_subtitle: 'Select a dataset, add criteria, select output columns and display the result.',
+                    progress_bar_color: '#E9ECEF',
+                    progress_bar_active_color: '#7AC29A',
+                    progress_bar_circle_color: '#FFFFFF',
+                    progress_bar_text_color: '#91B2BF',
                     samp_enabled: true,
                     back_to_portal: true,
                     user_menu_enabled: true,
diff --git a/client/src/app/metamodel/models/instance.model.ts b/client/src/app/metamodel/models/instance.model.ts
index c39be4e7..461faff6 100644
--- a/client/src/app/metamodel/models/instance.model.ts
+++ b/client/src/app/metamodel/models/instance.model.ts
@@ -39,6 +39,12 @@ export interface Instance {
     family_title_color: string;
     family_title_bold: boolean;
     family_color: string;
+    progress_bar_title: string;
+    progress_bar_subtitle: string;
+    progress_bar_color: string;
+    progress_bar_active_color: string;
+    progress_bar_circle_color: string;
+    progress_bar_text_color: string;
     samp_enabled: boolean;
     back_to_portal: boolean;
     user_menu_enabled: boolean;
diff --git a/client/src/test-data.ts b/client/src/test-data.ts
index e8f4951f..9c4787a3 100644
--- a/client/src/test-data.ts
+++ b/client/src/test-data.ts
@@ -71,6 +71,12 @@ export const INSTANCE_LIST: Instance[] = [
         family_title_color: '#007BFF',
         family_title_bold: false,
         family_color: '#212529',
+        progress_bar_title: 'Dataset search',
+        progress_bar_subtitle: 'Select a dataset, add criteria, select output columns and display the result.',
+        progress_bar_color: '#E9ECEF',
+        progress_bar_active_color: '#7AC29A',
+        progress_bar_circle_color: '#FFFFFF',
+        progress_bar_text_color: '#91B2BF',
         samp_enabled: true,
         back_to_portal: true,
         user_menu_enabled: true,
@@ -111,6 +117,12 @@ export const INSTANCE_LIST: Instance[] = [
         family_title_color: '#007BFF',
         family_title_bold: false,
         family_color: '#212529',
+        progress_bar_title: 'Dataset search',
+        progress_bar_subtitle: 'Select a dataset, add criteria, select output columns and display the result.',
+        progress_bar_color: '#E9ECEF',
+        progress_bar_active_color: '#7AC29A',
+        progress_bar_circle_color: '#FFFFFF',
+        progress_bar_text_color: '#91B2BF',
         samp_enabled: true,
         back_to_portal: true,
         user_menu_enabled: true,
@@ -153,6 +165,12 @@ export const INSTANCE: Instance = {
     family_title_color: '#007BFF',
     family_title_bold: false,
     family_color: '#212529',
+    progress_bar_title: 'Dataset search',
+    progress_bar_subtitle: 'Select a dataset, add criteria, select output columns and display the result.',
+    progress_bar_color: '#E9ECEF',
+    progress_bar_active_color: '#7AC29A',
+    progress_bar_circle_color: '#FFFFFF',
+    progress_bar_text_color: '#91B2BF',
     samp_enabled: true,
     back_to_portal: true,
     user_menu_enabled: true,
diff --git a/conf-dev/create-db.sh b/conf-dev/create-db.sh
index 95a2587f..41a3c5ec 100644
--- a/conf-dev/create-db.sh
+++ b/conf-dev/create-db.sh
@@ -8,7 +8,7 @@ set -e
 curl -d '{"label":"Test","dbname":"anis_test","dbtype":"pdo_pgsql","dbhost":"db","dbport":5432,"dblogin":"anis","dbpassword":"anis"}' --header 'Content-Type: application/json' -X POST http://localhost/database
 
 # Add default instance
-curl -d '{"name":"default","label":"Default instance","description":"Instance for the test","scientific_manager":"M. Durand","instrument":"Multiple","wavelength_domain":"Visible imaging / Spectroscopy","display":10,"data_path":"\/DEFAULT","files_path":"\/INSTANCE_FILES","public":true,"portal_logo":"","design_color":"#7AC29A","design_background_color":"#ffffff","design_logo":"/logo.png","design_favicon":"/favicon.ico","navbar_background_color":"#F8F9FA","navbar_border_bottom_color":"#DEE2E6","navbar_color_href":"#000000","footer_background_color":"#F8F9FA","footer_border_top_color":"#DEE2E6","footer_text_color":"#000000","family_border_color":"#DFDFDF","family_header_background_color":"#F7F7F7","family_title_color":"#007BFF","family_title_bold":false,"family_color":"#212529","samp_enabled":true,"back_to_portal":true,"user_menu_enabled":true,"search_by_criteria_allowed":true,"search_by_criteria_label":"Search","search_multiple_allowed":false,"search_multiple_label":"Search multiple","search_multiple_all_datasets_selected":false,"documentation_allowed":false,"documentation_label":"Documentation"}' --header 'Content-Type: application/json' -X POST http://localhost/instance
+curl -d '{"name":"default","label":"Default instance","description":"Instance for the test","scientific_manager":"M. Durand","instrument":"Multiple","wavelength_domain":"Visible imaging / Spectroscopy","display":10,"data_path":"\/DEFAULT","files_path":"\/INSTANCE_FILES","public":true,"portal_logo":"","design_color":"#7AC29A","design_background_color":"#ffffff","design_logo":"/logo.png","design_favicon":"/favicon.ico","navbar_background_color":"#F8F9FA","navbar_border_bottom_color":"#DEE2E6","navbar_color_href":"#000000","footer_background_color":"#F8F9FA","footer_border_top_color":"#DEE2E6","footer_text_color":"#000000","family_border_color":"#DFDFDF","family_header_background_color":"#F7F7F7","family_title_color":"#007BFF","family_title_bold":false,"family_color":"#212529","progress_bar_title":"Dataset search","progress_bar_subtitle":"Select a dataset, add criteria, select output columns and display the result.","progress_bar_color":"#E9ECEF","progress_bar_active_color":"#7AC29A","progress_bar_circle_color":"#FFFFFF","progress_bar_text_color":"#91B2BF","samp_enabled":true,"back_to_portal":true,"user_menu_enabled":true,"search_by_criteria_allowed":true,"search_by_criteria_label":"Search","search_multiple_allowed":false,"search_multiple_label":"Search multiple","search_multiple_all_datasets_selected":false,"documentation_allowed":false,"documentation_label":"Documentation"}' --header 'Content-Type: application/json' -X POST http://localhost/instance
 
 # Add dataset families
 curl -d '{"label":"Default dataset family","display":10,"opened":true}' --header 'Content-Type: application/json' -X POST http://localhost/instance/default/dataset-family
diff --git a/server/doctrine-proxy/__CG__AppEntityInstance.php b/server/doctrine-proxy/__CG__AppEntityInstance.php
index afab6be2..9eb14cbd 100644
--- a/server/doctrine-proxy/__CG__AppEntityInstance.php
+++ b/server/doctrine-proxy/__CG__AppEntityInstance.php
@@ -67,10 +67,10 @@ class Instance extends \App\Entity\Instance implements \Doctrine\ORM\Proxy\Proxy
     public function __sleep()
     {
         if ($this->__isInitialized__) {
-            return ['__isInitialized__', 'name', 'label', 'description', 'scientificManager', 'instrument', 'wavelengthDomain', 'display', 'dataPath', 'filesPath', 'public', 'portalLogo', 'designColor', 'designBackgroundColor', 'designLogo', 'designFavicon', 'navbarBackgroundColor', 'navbarBorderBottomColor', 'navbarColorHref', 'footerBackgroundColor', 'footerBorderTopColor', 'footerTextColor', 'familyBorderColor', 'familyHeaderBackgroundColor', 'familyTitleColor', 'familyTitleBold', 'familyColor', 'sampEnabled', 'backToPortal', 'userMenuEnabled', 'searchByCriteriaAllowed', 'searchByCriteriaLabel', 'searchMultipleAllowed', 'searchMultipleLabel', 'searchMultipleAllDatasetsSelected', 'documentationAllowed', 'documentationLabel', 'datasetFamilies'];
+            return ['__isInitialized__', 'name', 'label', 'description', 'scientificManager', 'instrument', 'wavelengthDomain', 'display', 'dataPath', 'filesPath', 'public', 'portalLogo', 'designColor', 'designBackgroundColor', 'designLogo', 'designFavicon', 'navbarBackgroundColor', 'navbarBorderBottomColor', 'navbarColorHref', 'footerBackgroundColor', 'footerBorderTopColor', 'footerTextColor', 'familyBorderColor', 'familyHeaderBackgroundColor', 'familyTitleColor', 'familyTitleBold', 'familyColor', 'progressBarTitle', 'progressBarSubtitle', 'progressBarColor', 'progressBarActiveColor', 'progressBarCircleColor', 'progressBarTextColor', 'sampEnabled', 'backToPortal', 'userMenuEnabled', 'searchByCriteriaAllowed', 'searchByCriteriaLabel', 'searchMultipleAllowed', 'searchMultipleLabel', 'searchMultipleAllDatasetsSelected', 'documentationAllowed', 'documentationLabel', 'datasetFamilies'];
         }
 
-        return ['__isInitialized__', 'name', 'label', 'description', 'scientificManager', 'instrument', 'wavelengthDomain', 'display', 'dataPath', 'filesPath', 'public', 'portalLogo', 'designColor', 'designBackgroundColor', 'designLogo', 'designFavicon', 'navbarBackgroundColor', 'navbarBorderBottomColor', 'navbarColorHref', 'footerBackgroundColor', 'footerBorderTopColor', 'footerTextColor', 'familyBorderColor', 'familyHeaderBackgroundColor', 'familyTitleColor', 'familyTitleBold', 'familyColor', 'sampEnabled', 'backToPortal', 'userMenuEnabled', 'searchByCriteriaAllowed', 'searchByCriteriaLabel', 'searchMultipleAllowed', 'searchMultipleLabel', 'searchMultipleAllDatasetsSelected', 'documentationAllowed', 'documentationLabel', 'datasetFamilies'];
+        return ['__isInitialized__', 'name', 'label', 'description', 'scientificManager', 'instrument', 'wavelengthDomain', 'display', 'dataPath', 'filesPath', 'public', 'portalLogo', 'designColor', 'designBackgroundColor', 'designLogo', 'designFavicon', 'navbarBackgroundColor', 'navbarBorderBottomColor', 'navbarColorHref', 'footerBackgroundColor', 'footerBorderTopColor', 'footerTextColor', 'familyBorderColor', 'familyHeaderBackgroundColor', 'familyTitleColor', 'familyTitleBold', 'familyColor', 'progressBarTitle', 'progressBarSubtitle', 'progressBarColor', 'progressBarActiveColor', 'progressBarCircleColor', 'progressBarTextColor', 'sampEnabled', 'backToPortal', 'userMenuEnabled', 'searchByCriteriaAllowed', 'searchByCriteriaLabel', 'searchMultipleAllowed', 'searchMultipleLabel', 'searchMultipleAllDatasetsSelected', 'documentationAllowed', 'documentationLabel', 'datasetFamilies'];
     }
 
     /**
@@ -742,6 +742,138 @@ class Instance extends \App\Entity\Instance implements \Doctrine\ORM\Proxy\Proxy
         return parent::setFamilyColor($familyColor);
     }
 
+    /**
+     * {@inheritDoc}
+     */
+    public function getProgressBarTitle()
+    {
+
+        $this->__initializer__ && $this->__initializer__->__invoke($this, 'getProgressBarTitle', []);
+
+        return parent::getProgressBarTitle();
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function setProgressBarTitle($progressBarTitle)
+    {
+
+        $this->__initializer__ && $this->__initializer__->__invoke($this, 'setProgressBarTitle', [$progressBarTitle]);
+
+        return parent::setProgressBarTitle($progressBarTitle);
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function getProgressBarSubtitle()
+    {
+
+        $this->__initializer__ && $this->__initializer__->__invoke($this, 'getProgressBarSubtitle', []);
+
+        return parent::getProgressBarSubtitle();
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function setProgressBarSubtitle($progressBarSubtitle)
+    {
+
+        $this->__initializer__ && $this->__initializer__->__invoke($this, 'setProgressBarSubtitle', [$progressBarSubtitle]);
+
+        return parent::setProgressBarSubtitle($progressBarSubtitle);
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function getProgressBarColor()
+    {
+
+        $this->__initializer__ && $this->__initializer__->__invoke($this, 'getProgressBarColor', []);
+
+        return parent::getProgressBarColor();
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function setProgressBarColor($progressBarColor)
+    {
+
+        $this->__initializer__ && $this->__initializer__->__invoke($this, 'setProgressBarColor', [$progressBarColor]);
+
+        return parent::setProgressBarColor($progressBarColor);
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function getProgressBarActiveColor()
+    {
+
+        $this->__initializer__ && $this->__initializer__->__invoke($this, 'getProgressBarActiveColor', []);
+
+        return parent::getProgressBarActiveColor();
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function setProgressBarActiveColor($progressBarActiveColor)
+    {
+
+        $this->__initializer__ && $this->__initializer__->__invoke($this, 'setProgressBarActiveColor', [$progressBarActiveColor]);
+
+        return parent::setProgressBarActiveColor($progressBarActiveColor);
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function getProgressBarCircleColor()
+    {
+
+        $this->__initializer__ && $this->__initializer__->__invoke($this, 'getProgressBarCircleColor', []);
+
+        return parent::getProgressBarCircleColor();
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function setProgressBarCircleColor($progressBarCircleColor)
+    {
+
+        $this->__initializer__ && $this->__initializer__->__invoke($this, 'setProgressBarCircleColor', [$progressBarCircleColor]);
+
+        return parent::setProgressBarCircleColor($progressBarCircleColor);
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function getProgressBarTextColor()
+    {
+
+        $this->__initializer__ && $this->__initializer__->__invoke($this, 'getProgressBarTextColor', []);
+
+        return parent::getProgressBarTextColor();
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function setProgressBarTextColor($progressBarTextColor)
+    {
+
+        $this->__initializer__ && $this->__initializer__->__invoke($this, 'setProgressBarTextColor', [$progressBarTextColor]);
+
+        return parent::setProgressBarTextColor($progressBarTextColor);
+    }
+
     /**
      * {@inheritDoc}
      */
diff --git a/server/src/Action/InstanceAction.php b/server/src/Action/InstanceAction.php
index ef904656..f7f251a8 100644
--- a/server/src/Action/InstanceAction.php
+++ b/server/src/Action/InstanceAction.php
@@ -89,6 +89,12 @@ final class InstanceAction extends AbstractAction
                 'family_title_color',
                 'family_title_bold',
                 'family_color',
+                'progress_bar_title',
+                'progress_bar_subtitle',
+                'progress_bar_color',
+                'progress_bar_active_color',
+                'progress_bar_circle_color',
+                'progress_bar_text_color',
                 'samp_enabled',
                 'back_to_portal',
                 'user_menu_enabled',
@@ -159,6 +165,12 @@ final class InstanceAction extends AbstractAction
         $instance->setFamilyTitleColor($parsedBody['family_title_color']);
         $instance->setFamilyTitleBold($parsedBody['family_title_bold']);
         $instance->setFamilyColor($parsedBody['family_color']);
+        $instance->setProgressBarTitle($parsedBody['progress_bar_title']);
+        $instance->setProgressBarSubtitle($parsedBody['progress_bar_subtitle']);
+        $instance->setProgressBarColor($parsedBody['progress_bar_color']);
+        $instance->setProgressBarActiveColor($parsedBody['progress_bar_active_color']);
+        $instance->setProgressBarCircleColor($parsedBody['progress_bar_circle_color']);
+        $instance->setProgressBarTextColor($parsedBody['progress_bar_text_color']);
         $instance->setSampEnabled($parsedBody['samp_enabled']);
         $instance->setUserMenuEnabled($parsedBody['user_menu_enabled']);
         $instance->setBackToPortal($parsedBody['back_to_portal']);
diff --git a/server/src/Action/InstanceListAction.php b/server/src/Action/InstanceListAction.php
index e151e73b..3480586e 100644
--- a/server/src/Action/InstanceListAction.php
+++ b/server/src/Action/InstanceListAction.php
@@ -89,6 +89,12 @@ final class InstanceListAction extends AbstractAction
                 'family_title_color',
                 'family_title_bold',
                 'family_color',
+                'progress_bar_title',
+                'progress_bar_subtitle',
+                'progress_bar_color',
+                'progress_bar_active_color',
+                'progress_bar_circle_color',
+                'progress_bar_text_color',
                 'samp_enabled',
                 'back_to_portal',
                 'user_menu_enabled',
@@ -153,6 +159,12 @@ final class InstanceListAction extends AbstractAction
         $instance->setFamilyTitleColor($parsedBody['family_title_color']);
         $instance->setFamilyTitleBold($parsedBody['family_title_bold']);
         $instance->setFamilyColor($parsedBody['family_color']);
+        $instance->setProgressBarTitle($parsedBody['progress_bar_title']);
+        $instance->setProgressBarSubtitle($parsedBody['progress_bar_subtitle']);
+        $instance->setProgressBarColor($parsedBody['progress_bar_color']);
+        $instance->setProgressBarActiveColor($parsedBody['progress_bar_active_color']);
+        $instance->setProgressBarCircleColor($parsedBody['progress_bar_circle_color']);
+        $instance->setProgressBarTextColor($parsedBody['progress_bar_text_color']);
         $instance->setSampEnabled($parsedBody['samp_enabled']);
         $instance->setBackToPortal($parsedBody['back_to_portal']);
         $instance->setUserMenuEnabled($parsedBody['user_menu_enabled']);
diff --git a/server/src/Entity/Instance.php b/server/src/Entity/Instance.php
index f3e4a3e0..dc66062c 100644
--- a/server/src/Entity/Instance.php
+++ b/server/src/Entity/Instance.php
@@ -206,6 +206,50 @@ class Instance implements \JsonSerializable
      */
     protected $familyColor;
 
+    /**
+     * @var string
+     *
+     * @Column(type="string", name="progress_bar_title", nullable=false, options={"default" : "Dataset search"})
+     */
+    protected $progressBarTitle;
+
+    /**
+     * @var string
+     *
+     * @Column(type="string", name="progress_bar_subtitle", nullable=false, options={
+     *     "default" : "Select a dataset, add criteria, select output columns and display the result."
+     * })
+     */
+    protected $progressBarSubtitle;
+
+    /**
+     * @var string
+     *
+     * @Column(type="string", name="progress_bar_color", nullable=false, options={"default" : "#E9ECEF"})
+     */
+    protected $progressBarColor;
+
+    /**
+     * @var string
+     *
+     * @Column(type="string", name="progress_bar_active_color", nullable=false, options={"default" : "#7AC29A"})
+     */
+    protected $progressBarActiveColor;
+
+    /**
+     * @var string
+     *
+     * @Column(type="string", name="progress_bar_circle_color", nullable=false, options={"default" : "#FFFFFF"})
+     */
+    protected $progressBarCircleColor;
+
+    /**
+     * @var string
+     *
+     * @Column(type="string", name="progress_bar_text_color", nullable=false, options={"default" : "#91B2BF"})
+     */
+    protected $progressBarTextColor;
+
     /**
      * @var bool
      *
@@ -545,6 +589,66 @@ class Instance implements \JsonSerializable
         $this->familyColor = $familyColor;
     }
 
+    public function getProgressBarTitle()
+    {
+        return $this->progressBarTitle;
+    }
+
+    public function setProgressBarTitle($progressBarTitle)
+    {
+        $this->progressBarTitle = $progressBarTitle;
+    }
+
+    public function getProgressBarSubtitle()
+    {
+        return $this->progressBarSubtitle;
+    }
+
+    public function setProgressBarSubtitle($progressBarSubtitle)
+    {
+        $this->progressBarSubtitle = $progressBarSubtitle;
+    }
+
+    public function getProgressBarColor()
+    {
+        return $this->progressBarColor;
+    }
+
+    public function setProgressBarColor($progressBarColor)
+    {
+        $this->progressBarColor = $progressBarColor;
+    }
+
+    public function getProgressBarActiveColor()
+    {
+        return $this->progressBarActiveColor;
+    }
+
+    public function setProgressBarActiveColor($progressBarActiveColor)
+    {
+        $this->progressBarActiveColor = $progressBarActiveColor;
+    }
+
+    public function getProgressBarCircleColor()
+    {
+        return $this->progressBarCircleColor;
+    }
+
+    public function setProgressBarCircleColor($progressBarCircleColor)
+    {
+        $this->progressBarCircleColor = $progressBarCircleColor;
+    }
+
+    public function getProgressBarTextColor()
+    {
+        return $this->progressBarTextColor;
+    }
+
+    public function setProgressBarTextColor($progressBarTextColor)
+    {
+        $this->progressBarTextColor = $progressBarTextColor;
+    }
+
     public function getSampEnabled()
     {
         return $this->sampEnabled;
@@ -688,6 +792,12 @@ class Instance implements \JsonSerializable
             'family_title_color' => $this->getFamilyTitleColor(),
             'family_title_bold' => $this->getFamilyTitleBold(),
             'family_color' => $this->getFamilyColor(),
+            'progress_bar_title' => $this->getProgressBarTitle(),
+            'progress_bar_subtitle' => $this->getProgressBarSubtitle(),
+            'progress_bar_color' => $this->getProgressBarColor(),
+            'progress_bar_active_color' => $this->getProgressBarActiveColor(),
+            'progress_bar_circle_color' => $this->getProgressBarCircleColor(),
+            'progress_bar_text_color' => $this->getProgressBarTextColor(),
             'samp_enabled' => $this->getSampEnabled(),
             'back_to_portal' => $this->getBackToPortal(),
             'user_menu_enabled' => $this->getUserMenuEnabled(),
diff --git a/server/tests/Action/InstanceActionTest.php b/server/tests/Action/InstanceActionTest.php
index 8e1525f1..e49c8a66 100644
--- a/server/tests/Action/InstanceActionTest.php
+++ b/server/tests/Action/InstanceActionTest.php
@@ -103,8 +103,12 @@ final class InstanceActionTest extends TestCase
             'family_title_color' => '#007BFF',
             'family_title_bold' => false,
             'family_color' => '#212529',
-            'home_component' => 'WelcomeComponent',
-            'home_component_config' => '{}',
+            'progress_bar_title' => 'Dataset search',
+            'progress_bar_subtitle' => 'Select a dataset, add criteria, select output columns and display the result.',
+            'progress_bar_color' => '#E9ECEF',
+            'progress_bar_active_color' => '#7AC29A',
+            'progress_bar_circle_color' => '#FFFFFF',
+            'progress_bar_text_color' => '#91B2BF',
             'samp_enabled' => true,
             'back_to_portal' => true,
             'user_menu_enabled' => true,
diff --git a/server/tests/Action/InstanceListActionTest.php b/server/tests/Action/InstanceListActionTest.php
index 685e0baa..1cbd9326 100644
--- a/server/tests/Action/InstanceListActionTest.php
+++ b/server/tests/Action/InstanceListActionTest.php
@@ -87,6 +87,12 @@ final class InstanceListActionTest extends TestCase
             'family_title_color' => '#007BFF',
             'family_title_bold' => false,
             'family_color' => '#212529',
+            'progress_bar_title' => 'Dataset search',
+            'progress_bar_subtitle' => 'Select a dataset, add criteria, select output columns and display the result.',
+            'progress_bar_color' => '#E9ECEF',
+            'progress_bar_active_color' => '#7AC29A',
+            'progress_bar_circle_color' => '#FFFFFF',
+            'progress_bar_text_color' => '#91B2BF',
             'home_component' => 'WelcomeComponent',
             'home_component_config' => '{}',
             'samp_enabled' => true,
-- 
GitLab