[Datahub][Redesign] Details exapandable panel

apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts

@@ -128,6 +128,10 @@ describe('dataset pages', () => {
             expect(text).not.to.equal('')
           })
       })
+      it('should display the keywords', () => {
+        cy.get('gn-ui-expandable-panel').eq(2).click()
+        cy.get('gn-ui-badge').should('have.length.gt', 0)
+      })
       it('should display the lineage and usage tabs', () => {
         cy.get('datahub-record-metadata')
           .find('[id="about"]')
@@ -160,6 +164,20 @@ describe('dataset pages', () => {
         cy.get('[data-cy="organization-name"]').click()
         cy.url().should('include', '/search?publisher=')
       })
+      it('should go to dataset search page when clicking on keyword and filter by keyword', () => {
+        cy.get('gn-ui-expandable-panel').eq(2).click()
+
+        cy.get('gn-ui-badge').should('have.length.gt', 0).eq(1).as('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)
+        })
+      })
     })
   })
 

apps/datahub/src/app/record/record-metadata/record-metadata.component.html

@@ -19,6 +19,7 @@
           class="sm:block"
           [metadata]="facade.metadata$ | async"
           [incomplete]="facade.isIncomplete$ | async"
+          (keyword)="onInfoKeywordClick($event)"
         >
         </gn-ui-metadata-info>
       </div>

libs/ui/elements/src/lib/metadata-info/metadata-info.component.css

@@ -7,3 +7,7 @@
   padding-bottom: 10px;
   @apply border-b border-gray-300;
 }
+
+:host ::ng-deep gn-ui-copy-text-button button mat-icon {
+  transform: scale(0.8);
+}

libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -75,12 +75,61 @@
   *ngIf="metadata.landingPage"
   [title]="'record.metadata.details' | translate"
 >
-  <div class="py-5 px-5 rounded bg-gray-100 text-gray-700">
-    <p class="text-sm" translate>record.metadata.sheet</p>
-    <p class="text-primary font-medium mt-1" translate>
-      <a [href]="metadata.landingPage" target="_blank">
-        <span class="break-all" gnUiLinkify>{{ metadata.landingPage }}</span>
-      </a>
-    </p>
+  <div class="flex flex-col gap-4 mr-4 py-5 rounded text-gray-700">
+    <div *ngIf="metadata.recordUpdated">
+      <p class="text-sm" translate>record.metadata.updatedOn</p>
+      <p class="text-primary font-medium">
+        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}
+      </p>
+    </div>
+    <div *ngIf="metadata.landingPage">
+      <p class="text-sm" translate>record.metadata.sheet</p>
+      <p class="text-primary font-medium" translate>
+        <a [href]="metadata.landingPage" target="_blank">
+          <span class="break-all" gnUiLinkify>{{ metadata.landingPage }}</span>
+        </a>
+      </p>
+    </div>
+    <div *ngIf="metadata.ownerOrganization">
+      <p class="text-sm" translate>record.metadata.owner</p>
+      <p class="text-primary font-medium">
+        {{ metadata.ownerOrganization.name }}
+      </p>
+    </div>
+    <div *ngIf="metadata.uniqueIdentifier">
+      <p class="text-sm" translate>record.metadata.uniqueId</p>
+      <div class="flex flex-row content-align items-end gap-1">
+        <gn-ui-copy-text-button
+          [text]="metadata.uniqueIdentifier"
+          [tooltipText]="'tooltip.id.copy' | translate"
+          [displayText]="false"
+        ></gn-ui-copy-text-button>
+        <p class="text-primary font-medium">
+          {{ metadata.uniqueIdentifier }}
+        </p>
+      </div>
+    </div>
+    <div *ngIf="metadata.themes?.length">
+      <p class="text-sm mb-1" translate>record.metadata.themes</p>
+      <div class="sm:pb-4 sm:pr-16">
+        <gn-ui-badge
+          class="inline-block mr-2 lowercase"
+          *ngFor="let theme of metadata.themes"
+          >{{ theme }}</gn-ui-badge
+        >
+      </div>
+    </div>
+    <div *ngIf="metadata.keywords?.length">
+      <p class="text-sm mb-1" 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>
+    </div>
   </div>
 </gn-ui-expandable-panel>

libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts

@@ -52,4 +52,13 @@ export class MetadataInfoComponent {
   fieldReady(propName: string) {
     return !this.incomplete || propName in this.metadata
   }
+
+  onKeywordClick(keyword: string) {
+    this.keyword.emit(keyword)
+  }
+
+  copyText() {
+    navigator.clipboard.writeText(this.metadata.uniqueIdentifier)
+    ;(event.target as HTMLElement).blur()
+  }
 }

translations/de.json

@@ -218,7 +218,7 @@
   "record.metadata.catalog": "Katalog",
   "record.metadata.contact": "Kontakt",
   "record.metadata.createdOn": "Erstellt am",
-  "record.metadata.details": "Details",
+  "record.metadata.details": "Technische Informationen",
   "record.metadata.download": "Downloads",
   "record.metadata.formats": "",
   "record.metadata.isOpenData": "Open Data",
@@ -227,6 +227,7 @@
   "record.metadata.links": "Links",
   "record.metadata.noUsage": "Für diesen Datensatz sind keine Verwendungsbedingungen angegeben.",
   "record.metadata.origin": "Über die Daten",
+  "record.metadata.owner": "",
   "record.metadata.preview": "Vorschau",
   "record.metadata.publications": "Veröffentlichungen",
   "record.metadata.quality": "",
@@ -249,8 +250,10 @@
   "record.metadata.quality.updateFrequency.success": "",
   "record.metadata.related": "Ähnliche Datensätze",
   "record.metadata.sheet": "Weitere Informationen erhalten Sie unter :",
+  "record.metadata.themes": "",
   "record.metadata.title": "Titel",
   "record.metadata.type": "",
+  "record.metadata.uniqueId": "",
   "record.metadata.updateFrequency": "Aktualisierungsfrequenz der Daten",
   "record.metadata.updateStatus": "Aktualisierungsstatus der Daten",
   "record.metadata.updatedOn": "Letzte Aktualisierung der Dateninformationen",
@@ -314,6 +317,7 @@
   "table.object.count": "Objekte in diesem Datensatz",
   "table.select.data": "Datenquelle",
   "tooltip.html.copy": "HTML kopieren",
+  "tooltip.id.copy": "",
   "tooltip.url.copy": "URL kopieren",
   "tooltip.url.open": "URL öffnen",
   "ui.readLess": "Weniger lesen",

translations/en.json

@@ -218,7 +218,7 @@
   "record.metadata.catalog": "Catalog",
   "record.metadata.contact": "Contact",
   "record.metadata.createdOn": "Created on",
-  "record.metadata.details": "Details",
+  "record.metadata.details": "Technical information",
   "record.metadata.download": "Downloads",
   "record.metadata.formats": "Formats",
   "record.metadata.isOpenData": "Open Data",
@@ -227,6 +227,7 @@
   "record.metadata.links": "Links",
   "record.metadata.noUsage": "No usage conditions specified for this record.",
   "record.metadata.origin": "About the data",
+  "record.metadata.owner": "Catalog of origin",
   "record.metadata.preview": "Preview",
   "record.metadata.publications": "publications",
   "record.metadata.quality": "Metadata Quality",
@@ -248,12 +249,14 @@
   "record.metadata.quality.updateFrequency.failed": "Update frequency is not completed",
   "record.metadata.quality.updateFrequency.success": "Update frequency is completed",
   "record.metadata.related": "Related records",
-  "record.metadata.sheet": "More information available from:",
+  "record.metadata.sheet": "Original metadata",
+  "record.metadata.themes": "Categories",
   "record.metadata.title": "Title",
   "record.metadata.type": "Geographical dataset",
+  "record.metadata.uniqueId": "Unique Identifier",
   "record.metadata.updateFrequency": "Data Update Frequency",
   "record.metadata.updateStatus": "Data Update Status",
-  "record.metadata.updatedOn": "Last Data Information Update",
+  "record.metadata.updatedOn": "Metadata's last update",
   "record.metadata.usage": "Usage & constraints",
   "record.more.details": "Read more",
   "record.tab.chart": "Chart",
@@ -314,6 +317,7 @@
   "table.object.count": "objects in this dataset",
   "table.select.data": "Data source",
   "tooltip.html.copy": "Copy HTML",
+  "tooltip.id.copy": "Copy unique identifier",
   "tooltip.url.copy": "Copy URL",
   "tooltip.url.open": "Open URL",
   "ui.readLess": "Read less",

translations/es.json

@@ -227,6 +227,7 @@
   "record.metadata.links": "",
   "record.metadata.noUsage": "",
   "record.metadata.origin": "",
+  "record.metadata.owner": "",
   "record.metadata.preview": "",
   "record.metadata.publications": "",
   "record.metadata.quality": "",
@@ -249,8 +250,10 @@
   "record.metadata.quality.updateFrequency.success": "",
   "record.metadata.related": "",
   "record.metadata.sheet": "",
+  "record.metadata.themes": "",
   "record.metadata.title": "",
   "record.metadata.type": "",
+  "record.metadata.uniqueId": "",
   "record.metadata.updateFrequency": "",
   "record.metadata.updateStatus": "",
   "record.metadata.updatedOn": "",
@@ -314,6 +317,7 @@
   "table.object.count": "",
   "table.select.data": "",
   "tooltip.html.copy": "",
+  "tooltip.id.copy": "",
   "tooltip.url.copy": "",
   "tooltip.url.open": "",
   "ui.readLess": "",

translations/fr.json

@@ -218,7 +218,7 @@
   "record.metadata.catalog": "Catalogue",
   "record.metadata.contact": "Contact",
   "record.metadata.createdOn": "Créé le",
-  "record.metadata.details": "Détails",
+  "record.metadata.details": "Informations techniques",
   "record.metadata.download": "Téléchargements",
   "record.metadata.formats": "Formats",
   "record.metadata.isOpenData": "Donnée Ouverte",
@@ -227,6 +227,7 @@
   "record.metadata.links": "Liens",
   "record.metadata.noUsage": "Aucune condition d'utilisation spécifiée pour ces données",
   "record.metadata.origin": "À propos des données",
+  "record.metadata.owner": "Catalogue d'origine",
   "record.metadata.preview": "Aperçu",
   "record.metadata.publications": "données",
   "record.metadata.quality": "Qualité des métadonnées",
@@ -248,12 +249,14 @@
   "record.metadata.quality.updateFrequency.failed": "Fréquence de mise à jour n'est pas renseignée",
   "record.metadata.quality.updateFrequency.success": "Fréquence de mise à jour est renseignée",
   "record.metadata.related": "Voir aussi",
-  "record.metadata.sheet": "Plus d'informations à l'adresse suivante :",
+  "record.metadata.sheet": "Fiche de métadonnées d'origine",
+  "record.metadata.themes": "Catégories",
   "record.metadata.title": "Titre",
   "record.metadata.type": "Donnée géographique",
+  "record.metadata.uniqueId": "Identificateur de ressource unique",
   "record.metadata.updateFrequency": "Fréquence de mise à jour des données",
   "record.metadata.updateStatus": "Statut de mise à jour des données",
-  "record.metadata.updatedOn": "Dernière mise à jour des informations sur les données",
+  "record.metadata.updatedOn": "Mise à jour de la fiche de métadonnée",
   "record.metadata.usage": "Conditions d'utilisation",
   "record.more.details": "Détails",
   "record.tab.chart": "Graphique",
@@ -314,6 +317,7 @@
   "table.object.count": "enregistrements dans ces données",
   "table.select.data": "Source de données",
   "tooltip.html.copy": "Copier le HTML",
+  "tooltip.id.copy": "Copier l'identifiant unique",
   "tooltip.url.copy": "Copier l'URL",
   "tooltip.url.open": "Ouvrir l'URL",
   "ui.readLess": "Réduire",

translations/it.json

@@ -218,7 +218,7 @@
   "record.metadata.catalog": "Catalogo",
   "record.metadata.contact": "Contatto",
   "record.metadata.createdOn": "Creato il",
-  "record.metadata.details": "Dettagli",
+  "record.metadata.details": "Informazioni tecniche",
   "record.metadata.download": "Download",
   "record.metadata.formats": "Formati",
   "record.metadata.isOpenData": "Data aperta",
@@ -227,6 +227,7 @@
   "record.metadata.links": "Collegamenti",
   "record.metadata.noUsage": "Nessuna condizione d'uso specificata per questi dati",
   "record.metadata.origin": "Informazioni sui dati",
+  "record.metadata.owner": "Catalogo originale",
   "record.metadata.preview": "Anteprima",
   "record.metadata.publications": "pubblicazioni",
   "record.metadata.quality": "Qualità dei metadati",
@@ -248,12 +249,14 @@
   "record.metadata.quality.updateFrequency.failed": "La frequenza di aggiornamento non è specificata",
   "record.metadata.quality.updateFrequency.success": "La frequenza di aggiornamento è specificata",
   "record.metadata.related": "Vedi anche",
-  "record.metadata.sheet": "Per ulteriori informazioni, cliccate qui:",
+  "record.metadata.sheet": "Origine del metadata",
+  "record.metadata.themes": "Categorie",
   "record.metadata.title": "Titolo",
   "record.metadata.type": "Dati geografici",
+  "record.metadata.uniqueId": "Identificatore unico di risorsa",
   "record.metadata.updateFrequency": "Frequenza di aggiornamento dei dati",
   "record.metadata.updateStatus": "Stato di aggiornamento dei dati",
-  "record.metadata.updatedOn": "Ultimo aggiornamento delle informazioni sui dati",
+  "record.metadata.updatedOn": "Ultimo aggiornamento del metadata",
   "record.metadata.usage": "Condizioni d'uso",
   "record.more.details": "Dettagli",
   "record.tab.chart": "Grafico",
@@ -314,6 +317,7 @@
   "table.object.count": "record in questi dati",
   "table.select.data": "Sorgente dati",
   "tooltip.html.copy": "Copiare il HTML",
+  "tooltip.id.copy": "Copiare l'identificatore unico",
   "tooltip.url.copy": "Copiare l'URL",
   "tooltip.url.open": "Aprire l'URL",
   "ui.readLess": "Ridurre",

translations/nl.json

@@ -227,6 +227,7 @@
   "record.metadata.links": "",
   "record.metadata.noUsage": "",
   "record.metadata.origin": "",
+  "record.metadata.owner": "",
   "record.metadata.preview": "",
   "record.metadata.publications": "",
   "record.metadata.quality": "",
@@ -249,8 +250,10 @@
   "record.metadata.quality.updateFrequency.success": "",
   "record.metadata.related": "",
   "record.metadata.sheet": "",
+  "record.metadata.themes": "",
   "record.metadata.title": "",
   "record.metadata.type": "",
+  "record.metadata.uniqueId": "",
   "record.metadata.updateFrequency": "",
   "record.metadata.updateStatus": "",
   "record.metadata.updatedOn": "",
@@ -314,6 +317,7 @@
   "table.object.count": "",
   "table.select.data": "",
   "tooltip.html.copy": "",
+  "tooltip.id.copy": "",
   "tooltip.url.copy": "",
   "tooltip.url.open": "",
   "ui.readLess": "",

translations/pt.json

@@ -227,6 +227,7 @@
   "record.metadata.links": "",
   "record.metadata.noUsage": "",
   "record.metadata.origin": "",
+  "record.metadata.owner": "",
   "record.metadata.preview": "",
   "record.metadata.publications": "",
   "record.metadata.quality": "",
@@ -249,8 +250,10 @@
   "record.metadata.quality.updateFrequency.success": "",
   "record.metadata.related": "",
   "record.metadata.sheet": "",
+  "record.metadata.themes": "",
   "record.metadata.title": "",
   "record.metadata.type": "",
+  "record.metadata.uniqueId": "",
   "record.metadata.updateFrequency": "",
   "record.metadata.updateStatus": "",
   "record.metadata.updatedOn": "",
@@ -314,6 +317,7 @@
   "table.object.count": "",
   "table.select.data": "",
   "tooltip.html.copy": "",
+  "tooltip.id.copy": "",
   "tooltip.url.copy": "",
   "tooltip.url.open": "",
   "ui.readLess": "",