Page MenuHomeSoftware Heritage

Add a button to the deposit admin UI to show deposit metadata
ClosedPublic

Authored by vlorentz on Nov 15 2021, 6:32 PM.

Details

Summary

as a modal

I can't figure how to make the button look like the other ones.

I also can't find how to adapt the modal's width to its content,
as it defaults to 500px, and I can't find an easy way to ignore this.

@anlambert Can you take this diff from here?

Test Plan

I also can't find how to test the Python side :/

I'll write Cypress tests if you're fine with the design

Diff Detail

Repository
rDWAPPS Web applications
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.

Event Timeline

Build is green

Patch application report for D6640 (id=24138)

Rebasing onto e2659cfed5...

Current branch diff-target is up to date.
Changes applied before test
commit 0b57f734b52bf2cafa04009abc29f909760c00e4
Author: Valentin Lorentz <vlorentz@softwareheritage.org>
Date:   Mon Nov 15 18:30:36 2021 +0100

    Add a button to the deposit admin UI to show deposit metadata
    
    as a modal

See https://jenkins.softwareheritage.org/job/DWAPPS/job/tests-on-diff/1232/ for more details.

@anlambert Can you take this diff from here?

I will take a closer look once I am done with T3724.

assets/src/bundles/admin/deposit.js
85

Use class="btn btn-default metadata" to match other buttons design.

assets/src/bundles/admin/deposit.js
85

Already tried it, they look like this:

assets/src/bundles/admin/deposit.js
85

nvm, it works this time for some reason...

add button style, remove debug prints, hide button if no metadata

Build is green

Patch application report for D6640 (id=24142)

Rebasing onto e2659cfed5...

Current branch diff-target is up to date.
Changes applied before test
commit 85589a75d747782f94bbd2910a545f6b6ba9efbd
Author: Valentin Lorentz <vlorentz@softwareheritage.org>
Date:   Mon Nov 15 18:30:36 2021 +0100

    Add a button to the deposit admin UI to show deposit metadata
    
    as a modal

See https://jenkins.softwareheritage.org/job/DWAPPS/job/tests-on-diff/1236/ for more details.

@vlorentz What's the status of this diff in the end?

Looks good but some cosmetic improvements can be added, notably:

  • use a dedicated column in the table to display the "Show metadata" button
  • highlight metadata xml code
  • restrain the height of of the popover dialog to avoid overflow when metadata file is large

You can obtain the following result with the diff below:


14:48 $ git diff
diff --git a/assets/src/bundles/admin/deposit.js b/assets/src/bundles/admin/deposit.js
index 4f5324ad..198bcf43 100644
--- a/assets/src/bundles/admin/deposit.js
+++ b/assets/src/bundles/admin/deposit.js
@@ -87,11 +87,15 @@ export function initDepositAdmin(username, isStaff) {
           },
           {
             data: 'status',
-            name: 'status',
+            name: 'status'
+          },
+          {
+            data: 'metadata',
+            name: 'metadata',
             render: (data, type, row) => {
               if (type === 'display') {
                 if (row.raw_metadata) {
-                  return `${data} <button class="btn btn-default metadata">metadata</button>`;
+                  return `<button class="btn btn-default metadata">Show</button>`;
                 }
               }
               return data;
@@ -158,7 +162,10 @@ export function initDepositAdmin(username, isStaff) {
       var row = depositsTable.row(this.parentNode.parentNode).data();
       var metadata = row.raw_metadata;
       var escapedMetadata = $('<div/>').text(metadata).html();
-      swh.webapp.showModalHtml(`Metadata of deposit ${row.id}`, `<pre>${escapedMetadata}</pre>`, '90%');
+      swh.webapp.showModalHtml(`Metadata of deposit ${row.id}`,
+                               `<pre style="max-height: 75vh;"><code class="xml">${escapedMetadata}</code></pre>`,
+                               '90%');
+      swh.webapp.highlightCode();
     });
 
     // Adding exclusion pattern update behavior, when typing, update search
diff --git a/swh/web/templates/admin/deposit.html b/swh/web/templates/admin/deposit.html
index ba4e8b23..e8f22fda 100644
--- a/swh/web/templates/admin/deposit.html
+++ b/swh/web/templates/admin/deposit.html
@@ -33,9 +33,10 @@ See top-level LICENSE file for more information
     <a class="toggle-col" href="#" data-column="1">origin</a> -
     <a class="toggle-col" href="#" data-column="2">reception date</a> -
     <a class="toggle-col" href="#" data-column="3">status</a> -
-    <a class="toggle-col col-hidden" href="#" data-column="4">status detail</a> -
-    <a class="toggle-col col-hidden" href="#" data-column="5">directory</a> -
-    <a class="toggle-col col-hidden" href="#" data-column="6">directory with context</a>
+    <a class="toggle-col" href="#" data-column="4">metadata</a> -
+    <a class="toggle-col col-hidden" href="#" data-column="5">status detail</a> -
+    <a class="toggle-col col-hidden" href="#" data-column="6">directory</a> -
+    <a class="toggle-col col-hidden" href="#" data-column="7">directory with context</a>
   </div>
   <br/>
   <table id="swh-admin-deposit-list" class="table swh-table swh-table-striped" width="100%">
@@ -45,6 +46,7 @@ See top-level LICENSE file for more information
         <th>origin</th>
         <th>reception date</th>
         <th>status</th>
+        <th>metadata</th>
         <th>status detail</th>
         <th>directory</th>
         <th>directory with context</th>

Also a cypress test should be added checking the popover is correctly displayed when clicking on the button.

This revision now requires changes to proceed.Nov 24 2021, 2:55 PM
  • rebase
  • move button to its own column
  • add XML highlighting
  • add cypress test

@anlambert thanks, done (finally).

cypress tests are failing because cy.get('body').type('{esc}'); has no effect, and I don't understand why. I tried other selectors than 'body' with no success. Pressing Esc manually works, though.

Any idea?

Build was aborted

Patch application report for D6640 (id=27009)

Rebasing onto f8e4ad3a51...

First, rewinding head to replay your work on top of it...
Applying: Add a button to the deposit admin UI to show deposit metadata
Changes applied before test
commit 946b7baa6809672511c6df6b724aff6c86fc93c7
Author: Valentin Lorentz <vlorentz@softwareheritage.org>
Date:   Mon Nov 15 18:30:36 2021 +0100

    Add a button to the deposit admin UI to show deposit metadata
    
    as a modal

Link to build: https://jenkins.softwareheritage.org/job/DWAPPS/job/tests-on-diff/1624/
See console output for more information: https://jenkins.softwareheritage.org/job/DWAPPS/job/tests-on-diff/1624/console

cypress/integration/deposit-admin.spec.js
175

It looks like there is a race condition between the cypress test runner and the javascript code of swh-web.

So when you hit the escape key, the key press event handlers have not been set yet for the modal and thus nothing happens.

A workaround is to wait a little bit before typing: cy.get('body').wait(500).type('{esc}').

cypress/integration/deposit-admin.spec.js
175

ah, good catch. Waiting for the close button to appear seems to be good enough.

Build has FAILED

Patch application report for D6640 (id=27111)

Rebasing onto e28c8b5e78...

Current branch diff-target is up to date.
Changes applied before test
commit 5f2c146a5003a534f22aa1087d10dc034847781b
Author: Valentin Lorentz <vlorentz@softwareheritage.org>
Date:   Mon Nov 15 18:30:36 2021 +0100

    Add a button to the deposit admin UI to show deposit metadata
    
    as a modal

Link to build: https://jenkins.softwareheritage.org/job/DWAPPS/job/tests-on-diff/1643/
See console output for more information: https://jenkins.softwareheritage.org/job/DWAPPS/job/tests-on-diff/1643/console

Nice to know that this is almost done!!
Thank you @vlorentz for the diff. Also thank you @anlambert and @ardumont for the review.
Looking forward to test this.

Build has FAILED

Patch application report for D6640 (id=27111)

Rebasing onto ad5add7d36...

First, rewinding head to replay your work on top of it...
Applying: Add a button to the deposit admin UI to show deposit metadata
Changes applied before test
commit 741d2653b50b506fdca0ec9a5a4bf9b4b6d6f0df
Author: Valentin Lorentz <vlorentz@softwareheritage.org>
Date:   Mon Nov 15 18:30:36 2021 +0100

    Add a button to the deposit admin UI to show deposit metadata
    
    as a modal

Link to build: https://jenkins.softwareheritage.org/job/DWAPPS/job/tests-on-diff/1656/
See console output for more information: https://jenkins.softwareheritage.org/job/DWAPPS/job/tests-on-diff/1656/console

@vlorentz, the following patch makes the deposits cypress tests stable.

For the record, waiting for the close button of the modal to be in the DOM was not enough for the
modal event handlers to be setup, I often got stuck on the type command.
Waiting a little bit before typing escape is the only way I found for the test to succeed every time.

For some reason, a contains command was also failing since the changes in that diff so I turned
it into a similar assertion guaranteed to work.

11:33 $ git diff
diff --git a/cypress/integration/deposit-admin.spec.js b/cypress/integration/deposit-admin.spec.js
index 36ee28c2..f3e18a49 100644
--- a/cypress/integration/deposit-admin.spec.js
+++ b/cypress/integration/deposit-admin.spec.js
@@ -169,11 +169,13 @@ describe('Test admin deposit page', function() {
         }
 
         if (deposit.raw_metadata !== null) {
-          cy.get('button.metadata', {withinSubject: row}).click();
+          cy.get('button.metadata', {withinSubject: row})
+            .should('exist')
+            .click({force: true});
           cy.get('#swh-web-modal-html code.xml').should('be.visible');
 
           // Dismiss the modal
-          cy.get('#swh-web-modal-html button.close').type('{esc}');
+          cy.get('body').wait(500).type('{esc}');
           cy.get('#swh-web-modal-html code.xml').should('not.be.visible');
         } else {
           cy.get('button.metadata', {withinSubject: row}).should('not.exist');
@@ -191,7 +193,7 @@ describe('Test admin deposit page', function() {
           const expectedOrigin = expectedOrigins[deposit.id];
 
           // ensure it's in the dom
-          cy.contains(deposit.id).should('not.exist');
+          expect(row).to.not.contain(deposit.id);
           if (deposit.status !== 'rejected') {
             expect(row).to.not.contain(deposit.external_id);
             expect(row).to.contain(expectedOrigin);

Build is green

Patch application report for D6640 (id=27214)

Rebasing onto 902039b683...

First, rewinding head to replay your work on top of it...
Applying: Add a button to the deposit admin UI to show deposit metadata
Changes applied before test
commit 8f72b0d52c8a107d11e85f39c883ec0d0d99344d
Author: Valentin Lorentz <vlorentz@softwareheritage.org>
Date:   Mon Nov 15 18:30:36 2021 +0100

    Add a button to the deposit admin UI to show deposit metadata
    
    as a modal

See https://jenkins.softwareheritage.org/job/DWAPPS/job/tests-on-diff/1669/ for more details.

This revision is now accepted and ready to land.Apr 5 2022, 12:30 PM

Build is green

Patch application report for D6640 (id=27221)

Rebasing onto 902039b683...

Current branch diff-target is up to date.
Changes applied before test
commit fc890a1e2a546dd09e330ea5036217e390b2b964
Author: Valentin Lorentz <vlorentz@softwareheritage.org>
Date:   Mon Nov 15 18:30:36 2021 +0100

    Add a button to the deposit admin UI to show deposit metadata
    
    as a modal

See https://jenkins.softwareheritage.org/job/DWAPPS/job/tests-on-diff/1677/ for more details.