feat(DH): Include keywords in toggle block, adapt e2e

geonetwork · Dec 20, 2023 · 8622d11 · 8622d11
1 parent eef415d
commit 8622d11
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 35 deletions.
diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
@@ -108,6 +108,7 @@ describe('dataset pages', () => {
           .find('gn-ui-content-ghost')
           .find('gn-ui-max-lines')
           .children('div')
+          .children('div')
           .children('p')
           .should(($element) => {
             const text = $element.text().trim()
@@ -148,8 +149,11 @@ describe('dataset pages', () => {
         cy.get('datahub-record-metadata')
           .find('[id="about"]')
           .find('gn-ui-metadata-info')
+          .find('gn-ui-content-ghost')
+          .find('gn-ui-max-lines')
+          .children('div')
+          .children('div')
           .children('div')
-          .eq(1)
           .children('gn-ui-badge')
           .should('have.length.gt', 0)
       })
@@ -195,22 +199,26 @@ describe('dataset pages', () => {
         cy.get('datahub-record-metadata')
           .find('[id="about"]')
           .find('gn-ui-metadata-info')
+          .find('gn-ui-content-ghost')
+          .find('gn-ui-max-lines')
+          .children('div')
+          .contains('Read more')
+          .click()
+
+        cy.get('datahub-record-metadata')
+          .find('gn-ui-badge')
           .children('div')
-          .eq(1)
-          .children('gn-ui-badge')
           .first()
           .as('keyword')
 
-        cy.get('@keyword')
-          .children('div')
-          .then((key) => {
-            keyword = key.text().toUpperCase()
-            cy.get('@keyword').click()
-            cy.url().should('include', '/search?q=')
-            cy.get('gn-ui-fuzzy-search')
-              .find('input')
-              .should('have.value', keyword)
-          })
+        cy.get('@keyword').then((key) => {
+          keyword = key.text().toUpperCase()
+          cy.get('@keyword').first().click()
+          cy.url().should('include', '/search?q=')
+          cy.get('gn-ui-fuzzy-search')
+            .find('input')
+            .should('have.value', keyword)
+        })
       })
     })
   })
@@ -445,7 +453,7 @@ describe('dataset pages', () => {
           .find('gn-ui-copy-text-button')
           .find('button')
           .first()
-          .click({ force: true })
+          .realClick()
         // attempt to make the whole page focused
         cy.get('body').focus()
         cy.get('body').realClick()

diff --git a/libs/ui/elements/src/lib/max-lines/max-lines.component.html b/libs/ui/elements/src/lib/max-lines/max-lines.component.html
@@ -9,7 +9,7 @@
 <div
   *ngIf="showToggleButton"
   (click)="toggleDisplay()"
-  class="text-primary cursor-pointer pt-2.5"
+  class="text-secondary cursor-pointer pt-2.5"
 >
   {{ (isExpanded ? 'ui.readLess' : 'ui.readMore') | translate }}
 </div>
diff --git a/libs/ui/elements/src/lib/max-lines/max-lines.component.ts b/libs/ui/elements/src/lib/max-lines/max-lines.component.ts
@@ -62,7 +62,7 @@ export class MaxLinesComponent implements AfterViewInit, OnDestroy {
       }
       containerElement.setAttribute(
         'style',
-        `height: ${this.maxHeight}; max-height: ${this.maxHeight}; overflow: hidden`
+        `max-height: ${this.maxHeight}; overflow: hidden`
       )
 
       this.cdr.detectChanges()

diff --git a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html
@@ -7,29 +7,30 @@
 <div class="mb-6 md-description sm:mb-4 sm:pr-16">
   <gn-ui-content-ghost ghostClass="h-32" [showContent]="fieldReady('abstract')">
     <gn-ui-max-lines [maxLines]="6" *ngIf="metadata.abstract">
-      <p
-        class="whitespace-pre-line break-words"
-        [innerHTML]="metadata.abstract"
-      ></p>
+      <div>
+        <p
+          class="whitespace-pre-line break-words sm:mb-4 sm:pr-16"
+          [innerHTML]="metadata.abstract"
+        ></p>
+        <ng-container *ngIf="metadata.keywords?.length">
+          <p class="mb-3 font-medium text-primary text-sm" translate>
+            record.metadata.keywords
+          </p>
+          <div class="sm:pb-4 sm:pr-16">
+            <gn-ui-badge
+              class="inline-block mr-2 mb-2 lowercase"
+              (click)="onKeywordClick(keyword)"
+              [clickable]="true"
+              *ngFor="let keyword of metadata.keywords"
+              >{{ keyword }}</gn-ui-badge
+            >
+          </div>
+        </ng-container>
+      </div>
     </gn-ui-max-lines>
   </gn-ui-content-ghost>
 </div>
 
-<ng-container *ngIf="metadata.keywords?.length">
-  <p class="mb-3 font-medium text-primary text-sm" translate>
-    record.metadata.keywords
-  </p>
-  <div class="mb-9 sm:mb-16">
-    <gn-ui-badge
-      class="inline-block mr-2 mb-2 lowercase"
-      (click)="onKeywordClick(keyword)"
-      [clickable]="true"
-      *ngFor="let keyword of metadata.keywords"
-      >{{ keyword }}</gn-ui-badge
-    >
-  </div>
-</ng-container>
-
 <gn-ui-expandable-panel
   class="metadata-origin"
   *ngIf="