Adds <btrix-details> to org dashboard table (#1311)

- Updates text with "Elapsed Time" label in the table
- Makes the table collapsible and collapsed by default.

frontend/src/pages/org/crawl-detail.ts

@@ -627,7 +627,7 @@ export class CrawlDetail extends LiteElement {
                       ></sl-format-date>`
                     : html`<span class="text-0-400">${msg("Pending")}</span>`}
                 </btrix-desc-list-item>
-                <btrix-desc-list-item label=${msg("Duration")}>
+                <btrix-desc-list-item label=${msg("Elapsed Time")}>
                   ${this.crawl!.finished
                     ? html`${RelativeDuration.humanize(
                         new Date(`${this.crawl!.finished}Z`).valueOf() -

frontend/src/pages/org/dashboard.ts

@@ -528,10 +528,10 @@ export class Dashboard extends LiteElement {
       </sl-tooltip>
     `,
     html`
-      ${msg("Total Crawl Duration")}
+      ${msg("Elapsed Time")}
       <sl-tooltip>
         <div slot="content" style="text-transform: initial">
-          ${msg("Total time elapsed between when crawl starts and ends")}
+          ${msg("Total time elapsed between when crawls started and ended")}
         </div>
         <sl-icon name="info-circle" style="vertical-align: -.175em"></sl-icon>
       </sl-tooltip>
@@ -560,15 +560,15 @@ export class Dashboard extends LiteElement {
         ];
       });
     return html`
-      <h2 class="text-lg font-semibold leading-none mb-6">
-        ${msg("Usage History")}
-      </h2>
-      <div class="border rounded overflow-hidden">
-        <btrix-data-table
-          .columns=${this.usageTableCols}
-          .rows=${rows}
-        ></btrix-data-table>
-      </div>
+      <btrix-details>
+        <span slot="title">${msg("Usage History")}</span>
+        <div class="border rounded overflow-hidden">
+          <btrix-data-table
+            .columns=${this.usageTableCols}
+            .rows=${rows}
+          ></btrix-data-table>
+        </div>
+      </btrix-details>
     `;
   }