Refactor EmptyState macro and update styling for view only empty state based on new designs

templates/applications/index.html

@@ -24,11 +24,8 @@
   {% if not portfolio.applications %}
 
     {{ EmptyState(
-      header="portfolios.applications.empty_state.header"|translate,
-      message="portfolios.applications.empty_state.message"|translate,
-      button_text="portfolios.applications.empty_state.button_text"|translate,
+      resource='applications',
       button_link=url_for("applications.view_new_application_step_1", portfolio_id=portfolio.id),
-      view_only_text="portfolios.applications.empty_state.view_only_text"|translate,
       user_can_create=can_create_applications,
     ) }}
 

templates/components/empty_state.html

@@ -1,14 +1,22 @@
-{% macro EmptyState(header, message, button_text, button_link, view_only_text, user_can_create=True) %}
+{% macro EmptyState(resource, button_link, user_can_create=False) %}
+  {% if user_can_create %}
+    {% set perms = 'edit' %}
+  {% else %}
+    {% set perms = 'view' %}
+  {% endif %}
+
+  {% set header = "empty_state.{}.header.{}".format(resource, perms) | translate | safe %}
+  {% set message = "empty_state.{}.message.{}".format(resource, perms) | translate | safe %}
+  {% set button_text = "empty_state.{}.button_text".format(resource) | translate | safe %}
+
   <div class="empty-state">
     <h3>{{ header }}</h3>
     <p>{{ message }}</p>
-    <hr>
-    <div class="empty-state__footer">
-      {% if user_can_create %}
+    {% if user_can_create -%}
+      <hr>
+      <div class="empty-state__footer">
         <a href="{{ button_link }}" class="usa-button usa-button-primary">{{ button_text }}</a>
-      {% else %}
-        <p>{{ view_only_text }}</p>
-      {% endif %}
-    </div>
+      </div>
+    {%- endif %}
   </div>
 {% endmacro %}

templates/portfolios/reports/application_and_env_spending.html

@@ -6,17 +6,10 @@
   {% if not portfolio.applications %}
 
     {% set can_create_applications = user_can(permissions.CREATE_APPLICATION) %}
-    {% set message = ('portfolios.reports.empty_state.sub_message.can_create_applications' | translate)
-      if can_create_applications
-      else ('portfolios.reports.empty_state.sub_message.cannot_create_applications' | translate)
-    %}
 
     {{ EmptyState(
-      header='portfolios.reports.empty_state.message' | translate,
-      message=message,
-      button_text="portfolios.applications.empty_state.button_text"|translate,
+      resource='applications_reporting',
       button_link=url_for("applications.view_new_application_step_1", portfolio_id=portfolio.id),
-      view_only_text="portfolios.applications.empty_state.view_only_text"|translate,
       user_can_create=can_create_applications,
     ) }}
 

templates/task_orders/index.html

@@ -85,11 +85,8 @@
     {% endcall %}
   {% else %}
     {{ EmptyState(
-      header="task_orders.empty_state.header"|translate,
-      message="task_orders.empty_state.message"|translate,
+      resource="task_orders",
       button_link=url_for('task_orders.form_step_one_add_pdf', portfolio_id=portfolio.id),
-      button_text="task_orders.empty_state.button_text"|translate,
-      view_only_text="task_orders.empty_state.view_only_text"|translate,
       user_can_create=user_can(permissions.CREATE_TASK_ORDER),
     ) }}
   {% endif %}

translations.yaml

@@ -84,6 +84,31 @@ email:
   application_invite: "{inviter_name} has invited you to a JEDI cloud application"
   portfolio_invite: "{inviter_name} has invited you to a JEDI cloud portfolio"
   environment_ready: JEDI cloud environment ready
+empty_state:
+  applications:
+    header:
+      edit: You don’t have any Applications yet
+      view: This portfolio has no Applications
+    message:
+      edit: You can manage multiple Applications within a single Portfolio as long as the funding sources are the same.
+      view: A Portfolio member with <b>Edit Application</b> permissions can add Applications to this Portfolio.
+    button_text: Create Your First Application
+  applications_reporting:
+    header:
+      edit: Nothing to report.
+      view: Nothing to report.
+    message:
+      edit: This portfolio has no cloud environments set up, so there is no spending data to report. Create an application with some cloud environments to get started.
+      view: This portfolio has no cloud environments set up, so there is no spending data to report. Contact the portfolio owner to set up some cloud environments.
+    button_text: Add a new application
+  task_orders:
+    header:
+      edit: Add approved task orders
+      view: This Portfolio has no Task Orders
+    message:
+      edit: Upload your approved Task Order here. You are required to confirm you have the appropriate signature. You will have the ability to add additional approved Task Orders with more funding to this Portfolio in the future.
+      view: A Portfolio member with <b>Edit Funding</b> permissions can fund this Portfolio with approved Task Orders.
+    button_text: Add Task Order
 flash:
   application:
     created:
@@ -370,11 +395,6 @@ portfolios:
     add_member: Add Team Member
     add_another_environment: Add another environment
     create_button: Create Application
-    empty_state:
-      header: You don't have any Applications yet
-      message: You can manage multiple Applications within a single Portfolio as long as the funding sources are the same.
-      button_text: Create Your First Application
-      view_only_text: Contact your portfolio administrator to add an application.
     new:
       step_1_header: Name and Describe New Application
       step_1_button_text: "Next: Add Environments"
@@ -482,12 +502,6 @@ portfolios:
       header: Funding Duration
       tooltip: Funding duration is the period of time that there is a valid task order funding the portfolio.
     estimate_warning: Reports displayed in JEDI are estimates and not a system of record.
-    empty_state:
-      message: Nothing to report.
-      sub_message:
-        can_create_applications: This portfolio has no cloud environments set up, so there is no spending data to report. Create an application with some cloud environments to get started.
-        cannot_create_applications: This portfolio has no cloud environments set up, so there is no spending data to report. Contact the portfolio owner to set up some cloud environments.
-      action_label: "Add a new application"
     total_value:
       header: Total Portfolio Value
       tooltip: Total portfolio value is all obligated and projected funds for all task orders in this portfolio.
@@ -549,11 +563,6 @@ task_orders:
     sticky_header_text: "Add a Task Order"
     sticky_header_review_text: Review Changes
     sticky_header_context: "Step {step} of 5"
-  empty_state:
-    header: Add approved task orders
-    message: Upload your approved Task Order here. You are required to confirm you have the appropriate signature. You will have the ability to add additional approved Task Orders with more funding to this Portfolio in the future.
-    button_text: Add Task Order
-    view_only_text: Contact your portfolio administrator to add a Task Order.
   sign:
     digital_signature_description: I confirm the uploaded Task Order is signed by the appropriate, duly warranted Agency Contracting Officer who authorized me to upload the Task Order.
     confirmation_description: I confirm that the information entered here in matches that of the submitted Task Order.