Placeholder for empty fields

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 - Added search feature for subprojects [#422](https://github.com/openkfw/TruBudget/issues/422)
 - Show no permissions assigned warning on subproject/workflowitem create [#441](https://github.com/openkfw/TruBudget/issues/441)
+- Placeholders are being shown in case of an empty state [#31](https://github.com/openkfw/TruBudget/issues/31)
 
 <!-- ### Changed -->
 

e2e-test/cypress/integration/global_permissions_spec.js

@@ -13,12 +13,14 @@ describe("Users/Groups Dashboard", function() {
     cy.login(testUserName, testUserNamePassword);
     cy.visit("/users");
   });
+
   beforeEach(function() {
     cy.login();
     cy.visit("/users");
   });
 
   it("Display the global permission dialog correctly", function() {
+    cy.reload();
     cy.get(`[data-test=edit-user-permissions-${testUserName}]`).click();
     cy.get("[data-test=global-permissions-dialog]").should("be.visible");
     cy.get("[data-test=cancel]").click();
@@ -47,7 +49,10 @@ describe("Users/Groups Dashboard", function() {
   });
 
   it("After clicking 'cancel', the selection is not adopted", function() {
-    cy.get(`[data-test=edit-user-permissions-${testUserName}]`).click();
+    cy.get(`[data-test=user-${testUserName}]`).should("be.visible");
+    cy.get(`[data-test=edit-user-permissions-${testUserName}]`)
+      .should("be.visible")
+      .click();
     cy.get("[data-test=global-permissions-dialog]").should("be.visible");
 
     cy.get("[data-test='permission-global.createUser'] input").should("not.be.checked");

e2e-test/cypress/integration/project_analytics_spec.js

@@ -209,7 +209,7 @@ describe("Project Analytics", function() {
     // Open dialog
     cy.get("[data-test=details-analytics-button]")
       .should("be.visible")
-      .click();
+      .click({ force: true });
     cy.get("[data-test=select-currencies]")
       .should("be.visible")
       .click();

e2e-test/cypress/integration/subproject_analytics_spec.js

@@ -145,7 +145,7 @@ describe("Subproject Analytics", function() {
     // Open dialog
     cy.get("[data-test=details-analytics-button]")
       .should("be.visible")
-      .click();
+      .click({ force: true });
 
     cy.get("[data-test=number-chart-total-budget]").should("not.be.visible");
     cy.get("[data-test=projected-budget-table]").should("be.visible");

e2e-test/cypress/integration/subproject_create_spec.js

@@ -1,5 +1,11 @@
 describe("Subproject creation", function() {
   let projectId;
+  let baseUrl, apiRoute;
+
+  before(() => {
+    baseUrl = Cypress.env("API_BASE_URL") || `${Cypress.config("baseUrl")}/test`;
+    apiRoute = baseUrl.toLowerCase().includes("test") ? "/test/api" : "/api";
+  });
 
   it("Root cannot add a subproject", function() {
     const organization = "ACME Corp";
@@ -27,9 +33,13 @@ describe("Subproject creation", function() {
   it("Check warnings that permissions are not assigned", function() {
     cy.login();
     cy.visit(`/projects/${projectId}`);
+    cy.server();
+    cy.route("GET", apiRoute + "/project.viewDetails*").as("loadPage");
 
     //Create a subproject
-    cy.get("[data-test=subproject-create-button]").click();
+    cy.wait("@loadPage")
+      .get("[data-test=subproject-create-button]")
+      .click();
     cy.get("[data-test=nameinput] input").type("Test");
     cy.get("[data-test=dropdown-sp-dialog-currencies-click]")
       .click()
@@ -43,7 +53,7 @@ describe("Subproject creation", function() {
 
     //Check warning badge
     cy.get("[data-test=warning-badge]").should("be.visible");
-    cy.get("[data-test=spp-button-0]").click();
+    cy.get("[data-test=spp-button-0]").click({ force: true });
     cy.get("[data-test=warning-badge]").should("not.be.checked");
     cy.get("[data-test=permission-submit]").click();
     cy.get("[data-test=warning-badge]").should("not.be.checked");

e2e-test/cypress/integration/subproject_edit_spec.js

@@ -23,6 +23,7 @@ describe("Subproject Edit", function() {
       .then(title => {
         cy.get("[data-test=nameinput] input").type("-changed");
         cy.get("[data-test=submit]").click();
+        cy.get("[data-test=highlighted-displayname]").should("be.visible");
         cy.get("[data-test=subproject-title-0]")
           .invoke("text")
           .should("not.eq", title);

e2e-test/cypress/integration/subproject_search_spec.js

@@ -31,7 +31,9 @@ describe("Subproject Search", function() {
     cy.login();
     cy.visit(`/projects/${projectWithTag.id}`);
   });
+
   it("Check regex highlighting", function() {
+    cy.get("[data-test=subproject-row]").should("be.visible");
     cy.get("[data-test=search-input]")
       .should("be.visible")
       .type("SearchTest");
@@ -44,23 +46,26 @@ describe("Subproject Search", function() {
   });
 
   it("Filter subprojects by display name", function() {
+    cy.get("[data-test=subproject-row]").should("be.visible");
     cy.get("[data-test=sub-projects]")
       .find("[data-test=search-bar]")
       .find("[data-test=search-input]")
       .should("be.visible")
-      .type(projectWithTag.subprojectTitle);
+      .should("not.be.disabled");
+    cy.get("[data-test=search-input").type(projectWithTag.subprojectTitle);
     cy.get("[data-test=highlighted-displayname]").contains(projectWithTag.subprojectTitle);
     //Only one element should should be in the list
     cy.get("[data-test=subproject-title-0]").should("be.visible");
     cy.get("[data-test=subproject-title-1]").should("not.be.visible");
   });
 
   it("Filter subprojects by prefix 'name' and 'status'", function() {
+    cy.get("[data-test=subproject-row]").should("be.visible");
     cy.get("[data-test=sub-projects]")
       .find("[data-test=search-bar]")
       .find("[data-test=search-input]")
-      .should("be.visible")
-      .type("name:" + projectWithTag.subprojectTitle);
+      .should("be.visible");
+    cy.get("[data-test=search-input]").type("name:" + projectWithTag.subprojectTitle);
     cy.get("[data-test=highlighted-displayname]").contains(projectWithTag.subprojectTitle);
     //Only one element should should be in the list
     cy.get("[data-test=subproject-title-0]").should("be.visible");
@@ -69,7 +74,8 @@ describe("Subproject Search", function() {
     cy.get("[data-test=sub-projects]")
       .find("[data-test=search-bar]")
       .find("[data-test=search-input]")
-      .should("be.visible")
+      .should("be.visible");
+    cy.get("[data-test=search-input]")
       .type("{selectall}{backspace}")
       .type("status: open");
     cy.get("[data-test=ssp-table]").contains("Open");
@@ -79,14 +85,15 @@ describe("Subproject Search", function() {
   });
 
   it("Search bar is empty when viewing subproject details", function() {
+    cy.get("[data-test=subproject-row]").should("be.visible");
     // Type into search bar
     cy.get("[data-test=sub-projects]")
       .find("[data-test=search-bar]")
       .find("[data-test=search-input]")
       .should("be.visible");
     cy.get("[data-test=sub-projects]")
       .find("[data-test=search-bar]")
-      .find("[data-test=search-input] input")
+      .find("[data-test=search-input]")
       .type("SearchTestExample");
     // Go into detail view
     cy.get("[data-test=subproject-view-details-0]").click();
@@ -99,15 +106,13 @@ describe("Subproject Search", function() {
   });
 
   it("Search bar is empty and exists when clicking on 'Main' breadcrumb", function() {
+    cy.get("[data-test=subproject-row]").should("be.visible");
     cy.get("[data-test=sub-projects]")
       .find("[data-test=search-bar]")
       .find("[data-test=search-input]")
       .should("be.visible");
     // Type into search bar
-    cy.get("[data-test=sub-projects]")
-      .find("[data-test=search-bar]")
-      .find("[data-test=search-input] input")
-      .type("SearchTestExample");
+    cy.get("[data-test=search-input]").type("SearchTestExample");
     // Navigate via Main breadcrumb
     cy.get("[data-test=breadcrumb-Main]").click();
     // Go back to subproject view
@@ -119,15 +124,14 @@ describe("Subproject Search", function() {
   });
 
   it("Search bar is empty and exists when clicking on 'Projects' breadcrumb", function() {
+    cy.get("[data-test=subproject-row]").should("be.visible");
     cy.get("[data-test=sub-projects]")
       .find("[data-test=search-bar]")
       .find("[data-test=search-input]")
-      .should("be.visible");
+      .should("be.visible")
+      .should("not.be.disabled");
     // Type into search bar
-    cy.get("[data-test=sub-projects]")
-      .find("[data-test=search-bar]")
-      .find("[data-test=search-input] input")
-      .type("SearchTestExample");
+    cy.get("[data-test=search-input]").type("SearchTestExample");
     // Navigate via Projects breadcrumb
     cy.get("[data-test=breadcrumb-Projects]").click();
     // Go back to subproject view

e2e-test/cypress/integration/timestamp_spec.js

@@ -9,7 +9,6 @@ const standardBudget = [
 describe("Timestamps", function() {
   before(function() {
     cy.login("mstein", "test");
-    cy.visit(`/projects`);
     cy.createProject("p-timestamp", "project timestamp test", standardBudget);
   });
 
@@ -23,8 +22,9 @@ describe("Timestamps", function() {
       .last()
       .click();
     cy.get("[data-test=assignee-selection]").click();
-    cy.get("[data-test=assignee-list]")
+    cy.get("[data-test=assignee-selection]")
       .should("be.visible")
+      .get("[data-test=assignee-list]")
       .find("[value=thouse]")
       .click()
       .get("[data-test=confirmation-dialog-confirm]")

e2e-test/cypress/integration/workflowitem_create_spec.js

@@ -70,7 +70,7 @@ describe("Workflowitem create", function() {
     cy.get("[data-test=workflowitem-table]")
       .find("[data-test=show-workflowitem-permissions]")
       .first()
-      .click();
+      .click({ force: true });
     cy.get("[data-test=warning-badge]")
       .first()
       .should("not.be.checked");

e2e-test/cypress/integration/workflowitem_edit_spec.js

@@ -61,7 +61,7 @@ describe("Workflowitem edit", function() {
       // when the workflow item was created
       cy.get("[data-test=edit-workflowitem]")
         .last()
-        .click();
+        .click({ force: true });
       cy.get("[data-test=dropdown-currencies-click]").should("contain", "USD");
 
       // Close the dialog

e2e-test/cypress/integration/workflowitem_history_spec.js

@@ -71,7 +71,7 @@ describe("Workflowitem's history", function() {
   });
 
   it("When changing the tab, the history is fetched correctly", function() {
-    cy.get(".workflowitem-info-button").click();
+    cy.get(`[data-test^='workflowitem-info-button-${workflowitemId}']`).click();
 
     // opens info dialog window..
 

frontend/src/index.js

@@ -39,7 +39,9 @@ const muiTheme = createMuiTheme({
     warning: amber[800],
     info: blue,
     grey: {
-      main: grey[100]
+      light: grey[100],
+      main: grey[400],
+      dark: grey[600]
     },
     tonalOffset: 0.6
   },

frontend/src/languages/english.js

@@ -55,9 +55,22 @@ const en = {
     invalid_tag: "Invalid tag",
     name: "Name",
     next: "Next",
+    no_budget: "No budget found",
+    no_budget_project: "To add a budget for your project, navigate back to the main page.",
+    no_budget_subproject: "To add a budget for your subproject, navigate back to the subproject overview page.",
     no_budget_distribution: "Unable to display distribution if not all items are visible",
+    no_groups: "No groups found",
+    no_groups_text: "Create a new group by pressing the plus button.",
     no_history: "No events",
+    no_items_text: "You can create one by pressing the plus button.",
+    no_nodes: "No requests for additonal nodes found",
+    no_notifications: "No notifications found",
+    no_organizations: "No requests for new organizations found",
     no_resources: "No fields were added to this Resource",
+    no_subprojects: "No subprojects found",
+    no_users: "No users found",
+    no_users_text: "Add a new user by pressing the plus button.",
+    no_workflow_items: "No workflow items found",
     not_assigned_budget: "Not Assigned Budget",
     not_assigned: "Not assigned",
     not_disbursed: "Not disbursed",
@@ -124,11 +137,11 @@ const en = {
 
   nodesDashboard: {
     access: "Access",
-    additional_organization_node: "New nodes for existing organizations",
+    additional_organization_node: "Requests for Additional Nodes",
     address: "Address",
     approve: "Approve",
     network: "Network",
-    new_organization: "New Organizations",
+    new_organization: "Requests for New Organizations",
     nodes: "Nodes",
     permissions: "Permissions"
   },

frontend/src/languages/french.js

@@ -55,9 +55,23 @@ const fr = {
     invalid_tag: "Tag invalide",
     name: "Nom",
     next: "Suivant",
+    no_budget: "Aucun budget trouvé",
+    no_budget_project: "Pour ajouter un budget à votre projet, retournez à la page principale.",
+    no_budget_subproject:
+      "Pour ajouter un budget à votre composante, retournez à la page de présentation du composante.",
     no_budget_distribution: "Impossible d'afficher la distribution si tous les éléments ne sont pas visibles",
+    no_groups: "Aucun groupe trouvé",
+    no_groups_text: "Créez un nouveau groupe en appuyant sur la touche plus.",
     no_history: "Aucun évenement",
+    no_items_text: "Vous pouvez en créer un en appuyant sur la touche plus.",
+    no_nodes: "Aucune demande de nœuds supplémentaires n'a été trouvée",
+    no_notifications: "Aucune notification trouvée",
+    no_organizations: "Aucune demande de nouvelles organisations n'a été trouvée",
     no_resources: "Aucun champ n'a été ajouté à cette ressource",
+    no_subprojects: "Aucun composante trouvé",
+    no_users: "Aucun utilisateur trouvé",
+    no_users_text: "Ajoutez un nouvel utilisateur en appuyant sur le touche plus.",
+    no_workflow_items: "Aucun élément trouvé",
     not_assigned_budget: "Budget non-alloué",
     not_assigned: "Non alloué",
     not_disbursed: "Non décaissé",
@@ -231,11 +245,11 @@ const fr = {
 
   nodesDashboard: {
     access: "Accès",
-    additional_organization_node: "Nouveaux nœuds pour les organisations existantes",
+    additional_organization_node: "Demandes de nœuds supplémentaires",
     address: "Adresse",
     approve: "Approuver",
     network: "Réseau",
-    new_organization: "Nouvelles organisations",
+    new_organization: "Demandes de nouvelles organisations",
     nodes: "Noeuds",
     permissions: "Autorisations"
   },

frontend/src/languages/georgian.js

@@ -55,9 +55,22 @@ const ka = {
     invalid_tag: "თაგი არასწორია",
     name: "სახელი",
     next: "შემდეგ",
+    no_budget: "ბიუჯეტი ვერ მოიძებნა",
+    no_budget_project: "თქვენი პროექტის ბიუჯეტის დასამატებლად გადადით მთავარ გვერდზე.",
+    no_budget_subproject: "თქვენი ქვეპროექტისთვის ბიუჯეტის დასამატებლად გადადით უკან ქვეპროექტის მიმოხილვის გვერდზე.",
     no_budget_distribution: "ბიუჯეტის განაწილება შეუძლებელია თუ ყველა ელემენტი არ ჩანს",
-    no_history: "No events",
-    no_resources: "No fields were added to this Resource",
+    no_groups: "ჯგუფები არ მოიძებნა",
+    no_groups_text: "შექმენით ახალი ჯგუფი plus ღილაკის დაჭერით.",
+    no_history: "არანაირი მოვლენა",
+    no_items_text: "თქვენ შეგიძლიათ შექმნათ პლიუსის ღილაკის დაჭერით.",
+    no_nodes: "დამატებითი კვანძების მოთხოვნა ვერ მოიძებნა",
+    no_notifications: "შეტყობინებები ვერ მოიძებნა",
+    no_organizations: "ახალი ორგანიზაციების მოთხოვნა ვერ მოიძებნა",
+    no_resources: "არცერთი ველი არ დაემატა ამ რესურსს",
+    no_subprojects: "ქვეპროექტი ვერ მოიძებნა",
+    no_users: "მომხმარებლები ვერ მოიძებნა",
+    no_users_text: "დაამატეთ ახალი მომხმარებელი, ღილაკის დამატების ღილაკის დაჭერით.",
+    no_workflow_items: "სამუშაო პროცესის ელემენტები ვერ მოიძებნა",
     not_assigned_budget: "ბიუჯეტი რომელიც განაწილებული არ არის",
     not_assigned: "არ არის გამოყოფილი",
     not_disbursed: "არ არის გადმორიცხული",
@@ -124,11 +137,11 @@ const ka = {
 
   nodesDashboard: {
     access: "წვდომა",
-    additional_organization_node: "ახალი node-ები არსებული ორგანიზაციებისთვის",
+    additional_organization_node: "მოთხოვნები დამატებითი კვანძებისთვის",
     address: "მისამართი",
     approve: "დადასტურება",
     network: "ქსელი",
-    new_organization: "ახალი ორგანიზაციები",
+    new_organization: "მოთხოვნები ახალი ორგანიზაციებისთვის",
     nodes: "Nodes",
     permissions: "ნებართვები"
   },