TASK #2075 | Add user settings placeholder

core/src/UserSettingsEditor.html

@@ -155,6 +155,7 @@
             class="fd-input"
             type="text"
             aria-label="Image label"
+            placeholder="{$getTranslation(schemaItem.placeholder)}"
             data-testid="lui-us-input{i}"
             bind:value="{storedUserSettingData[userSettingGroup[0]][key]}"
             disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
@@ -180,6 +181,7 @@
                   <input
                     type="text"
                     class="fd-input fd-input-group__input"
+                    placeholder="{$getTranslation(schemaItem.placeholder)}"
                     data-testid="lui-us-input{i}"
                     value="{getLabelForValue(storedUserSettingData[userSettingGroup[0]][key], schemaItem.options)}"
                     disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"

docs/user-settings.md

@@ -125,6 +125,7 @@ These parameters used in the example above allow you to configure the items in t
 
   - **label** (optional) is a string and the label of the setting.
   - **isEditable** (optional) is a boolean and by default `true`. If it is set to `false` the setting is not editable.
+  - *placeholder** (optional) is a string and by default `null`. If it is set to `Value` the placeholder is displaing `Value` the other hend notdsda.
   - **style** (optional) is a string and can be defined for the data types `boolean` and `enum`. Boolean will be rendered as switcher by default and it can be changed to `checkbox`. Enum will be rendered as dropdown by default and it can be changed to `button`, which means it will be rendered as a `segmented button`.
   - **options** is an array of options. It is mandatory and necessary if the data type is `enum`. It can be entries of primitive data types like string or integer or entries of objects.
     In this case the objects need `value` and `label` as key.

test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js

@@ -52,6 +52,73 @@ describe('Navigation', () => {
     const setting_date_format = 'df_' + new Date().getTime();
     const setting_privacy_policy = 'privacy_policy_' + new Date().getTime();
 
+    it('Fill Account, Language and Reason, Privacy, should have placeholder', () => {
+      //Click on User Account
+      cy.get('[data-testid="us-navigation-item"]')
+        .eq(0)
+        .click();
+
+      //Check User Account is selected
+      cy.get('[data-testid="us-navigation-item"]')
+        .eq(0)
+        .should('have.class', 'is-selected');
+
+      //Check Name Input exist
+      cy.get('[data-testid="lui-us-input0"]').should('exist');
+
+      //Check Name Input has placeholder
+      cy.get('[data-testid="lui-us-input0"]')
+        .invoke('attr', 'placeholder')
+        .should('contain', 'Name');
+
+      //Click on Language & Region
+      cy.get('[data-testid="us-navigation-item"]')
+        .eq(1)
+        .click();
+
+      //Check Language & Region is selected
+      cy.get('[data-testid="us-navigation-item"]')
+        .eq(1)
+        .should('have.class', 'is-selected');
+
+      //Check Language and Region Input exist
+      cy.get('[data-testid="lui-us-input0"]').should('exist');
+
+      //Check Language and Region Input has placeholder
+      cy.get('[data-testid="lui-us-input0"]')
+        .invoke('attr', 'placeholder')
+        .should('contain', 'Language and Region');
+
+      //Check Date Format Input exist
+      cy.get('[data-testid="lui-us-input1"]').should('exist');
+
+      //Check Date Format Input has placeholder
+      cy.get('[data-testid="lui-us-input1"]')
+        .invoke('attr', 'placeholder')
+        .should('contain', 'DD-MM-YYYY');
+
+      //Click on Privacy
+      cy.get('[data-testid="us-navigation-item"]')
+        .eq(2)
+        .click();
+
+      //Click on Privacy
+      cy.get('[data-testid="us-navigation-item"]')
+        .eq(2)
+        .should('have.class', 'is-selected');
+
+      //Check Private Policy Input exist
+      cy.get('[data-testid="lui-us-input0"]').should('exist');
+
+      //Check Private Policy Input has placeholder
+      cy.get('[data-testid="lui-us-input0"]')
+        .invoke('attr', 'placeholder')
+        .should('contain', '...');
+
+      //Close settings
+      closeSettings();
+    });
+
     it('Fill Account and save; reopen and check saved value', () => {
       //Click on User Account
       cy.get('[data-testid="us-navigation-item"]')
@@ -169,9 +236,7 @@ describe('Navigation', () => {
         .click();
 
       // //Check Private Policy Input field exist and placeholder is
-      cy.get('[data-testid="lui-us-input0"]')
-        .should('exist');
-
+      cy.get('[data-testid="lui-us-input0"]').should('exist');
 
       //Check Private Policy Input field exist and placeholder is
       cy.get('[data-testid="lui-us-input0"]').type(setting_privacy_policy);

test/e2e-test-application/src/luigi-config/extended/userSettings.js

@@ -15,7 +15,7 @@ class UserSettings {
       icon: 'account',
       title: 'User Account',
       settings: {
-        name: { type: 'string', label: 'Name' },
+        name: { type: 'string', label: 'Name', placeholder: 'Name' },
         email: { type: 'string', label: 'E-Mail', isEditable: false },
         server: { type: 'string', label: 'Server', isEditable: false },
         checkbox: {
@@ -46,10 +46,11 @@ class UserSettings {
         language: {
           type: 'enum',
           label: 'Language and Region',
+          placeholder: 'Language and Region',
           options: [{ value: 'de', label: 'German' }, { value: 'en', label: 'English' }, 'Spanish', 'French'],
           description: 'After you save your settings, the browser will refresh for the new language to take effect.'
         },
-        date: { type: 'string', label: 'Date Format' },
+        date: { type: 'string', label: 'Date Format', placeholder: 'DD-MM-YYYY' },
         time: {
           type: 'enum',
           style: 'button',
@@ -65,7 +66,8 @@ class UserSettings {
       settings: {
         policy: {
           type: 'string',
-          label: 'Privacy policy has not been defined.'
+          label: 'Privacy policy has not been defined.',
+          placeholder: '...'
         },
         time: {
           type: 'enum',