Add empty state for ongoing print jobs

- Displays a message to indicate users that no print jobs are currently
  printing.

Screen shot: https://screenshot.googleplex.com/YSGD579DA0U

Bug: 1053704
Test: browser_tests
Change-Id: I62ce23ac6cafc805e31a153cea4e847b49c3d619
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2244123Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Commit-Queue: jimmy gong <jimmyxgong@chromium.org>
Cr-Commit-Position: refs/heads/master@{#779351}

chrome/test/data/webui/chromeos/print_management/print_management_test.js

@@ -179,6 +179,7 @@ function getHistoryPrintJobEntries(page) {
  * @return {!Array<!HTMLElement>}
  */
 function getOngoingPrintJobEntries(page) {
+  assertTrue(page.$$('#ongoingEmptyState').hidden);
   const entryList = page.$$('#ongoingList');
   return Array.from(
       entryList.querySelectorAll('print-job-entry:not([hidden])'));
@@ -694,6 +695,20 @@ suite('PrintManagementTest', () => {
         });
   });
 
+  test('OngoingPrintJobEmptyState', () => {
+    return initializePrintManagementApp(/*expectedArr=*/[])
+        .then(() => {
+          return mojoApi_.whenCalled('getPrintJobs');
+        })
+        .then(() => {
+          flush();
+          // Assert that ongoing list is empty and the empty state message is
+          // not hidden.
+          assertTrue(!page.$$('#ongoingList'));
+          assertTrue(!page.$$('#ongoingEmptyState').hidden);
+        });
+  });
+
   test('CancelOngoingPrintJob', () => {
     const kId = 'fileA';
     const kTitle = 'titleA';

chromeos/chromeos_strings.grd

@@ -394,6 +394,9 @@ Try tapping the mic to ask me anything.
       <message name="IDS_PRINT_MANAGEMENT_UNKNOWN_ERROR_STATUS" desc="The error status displayed next to a print job to indicate to users that their print job failed due to an unknown error.">
         Failed - Unknown error
       </message>
+      <message name="IDS_PRINT_MANAGEMENT_NO_PRINT_JOBS_IN_PROGRESS_MESSAGE" desc="The message shown to users if they do not have any print jobs in progress i.e. being printed.">
+        No print jobs in progress
+      </message>
     </messages>
   </release>
 </grit>

chromeos/chromeos_strings_grd/IDS_PRINT_MANAGEMENT_NO_PRINT_JOBS_IN_PROGRESS_MESSAGE.png.sha1

+38cd8a71d8f061e914b0a94aed7c38b6124251c1
\ No newline at end of file

chromeos/components/print_management/print_management_ui.cc

@@ -56,6 +56,8 @@ void AddPrintManagementStrings(content::WebUIDataSource* html_source) {
       {"stopped", IDS_PRINT_MANAGEMENT_STOPPED_ERROR_STATUS},
       {"filterFailed", IDS_PRINT_MANAGEMENT_FILTERED_FAILED_ERROR_STATUS},
       {"unknownPrinterError", IDS_PRINT_MANAGEMENT_UNKNOWN_ERROR_STATUS},
+      {"noPrintJobInProgress",
+       IDS_PRINT_MANAGEMENT_NO_PRINT_JOBS_IN_PROGRESS_MESSAGE},
   };
 
   for (const auto& str : kLocalizedStrings) {

chromeos/components/print_management/resources/print_management.html

@@ -32,6 +32,13 @@
     margin-inline-start: 8px;
   }
 
+  #ongoingEmptyState {
+    color: var(--google-grey-600);
+    margin-inline-start: 12px;
+    padding-bottom: 24px;
+    padding-top: 24px;
+  }
+
   h1 {
     font-size: 200%;
     font-weight: 500;
@@ -88,6 +95,10 @@
     </iron-list>
   </template>
 
+  <div id="ongoingEmptyState" hidden="[[ongoingPrintJobs_.length]]">
+    [[i18n('noPrintJobInProgress')]]
+  </div>
+
   <template is="dom-if" if="[[printJobs_.length]]" restamp>
     <div id="historyHeaderContainer" class="column-headers flex-center">
       <div aria-label$="[[i18n('historyToolTip')]]">