feat(data-view-share): also display data-view-web-component if no web…

…_component_embedder_url is set improves the web component html formatting as well
geonetwork · Jun 20, 2023 · 1a15c88 · 1a15c88
1 parent 4544c76
commit 1a15c88
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 25 deletions.
diff --git a/conf/default.toml b/conf/default.toml
@@ -24,7 +24,7 @@ proxy_path = ""
 # This optional URL should point to the static html page wc-embedder.html which allows to display a web component (like chart and table) via a permalink. 
 # URLs can be indicated from the root of the same server starting with a "/" or as an external URL. Be conscious of potential CORS issues when using an external URL.
 # The default location in the dockerized datahub app for example is "/datahub/wc-embedder.html".
-# If the URL is indicated, two widgets are displayed in the datahub UI, one displaying the permalink and one displaying the web component HTML.
+# If the URL is not indicated, no permalinks will show up in the UI.
 # web_component_embedder_url = "/datahub/wc-embedder.html"
 
 ### VISUAL THEME

diff --git a/libs/feature/record/src/lib/data-view-share/data-view-share.component.css b/libs/feature/record/src/lib/data-view-share/data-view-share.component.css
@@ -5,3 +5,6 @@
 .tab-header-label-gray {
   @apply text-sm text-gray-700 opacity-75 hover:text-gray-900;
 }
+.single-tab-header-label-gray {
+  @apply text-sm text-gray-900;
+}
diff --git a/libs/feature/record/src/lib/data-view-share/data-view-share.component.html b/libs/feature/record/src/lib/data-view-share/data-view-share.component.html
@@ -1,19 +1,26 @@
-<div *ngIf="wcEmbedderBaseUrl" class="container-lg px-5 my-1 lg:mx-auto">
+<div class="container-lg px-5 my-1 lg:mx-auto">
   <mat-tab-group
     [selectedIndex]="0"
     animationDuration="0ms"
     mat-stretch-tabs="false"
     mat-align-tabs="start"
+    [disableRipple]="!wcEmbedderBaseUrl"
   >
-    <mat-tab>
+    <mat-tab *ngIf="wcEmbedderBaseUrl">
       <ng-template mat-tab-label>
         <span class="tab-header-label-gray" translate>share.tab.permalink</span>
       </ng-template>
       <gn-ui-data-view-permalink></gn-ui-data-view-permalink>
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>
-        <span class="tab-header-label-gray" translate
+        <span
+          [class]="
+            wcEmbedderBaseUrl
+              ? 'tab-header-label-gray'
+              : 'single-tab-header-label-gray'
+          "
+          translate
           >share.tab.webComponent</span
         >
       </ng-template>

diff --git a/libs/feature/record/src/lib/data-view-share/data-view-share.component.spec.ts b/libs/feature/record/src/lib/data-view-share/data-view-share.component.spec.ts
@@ -41,22 +41,25 @@ describe('DataViewShareComponent', () => {
     it('should create', () => {
       expect(component).toBeTruthy()
     })
-    it('does not render a tab group', () => {
+    it('renders a tab group', () => {
       expect(
         fixture.debugElement.queryAll(By.css('mat-tab-group'))[0]
-      ).toBeFalsy()
+      ).toBeTruthy()
+    })
+    it('only renders one tab', () => {
+      expect(fixture.debugElement.queryAll(By.css('mat-tab')).length).toEqual(1)
     })
     it('does not render a data view permalink component', () => {
       expect(
         fixture.debugElement.query(By.directive(MockDataViewPermalinkComponent))
       ).toBeFalsy()
     })
-    it('does not render a data view web component component', () => {
+    it('renders a data view web component component', () => {
       expect(
         fixture.debugElement.query(
           By.directive(MockDataViewWebComponentComponent)
         )
-      ).toBeFalsy()
+      ).toBeTruthy()
     })
   })
   describe('if a WEB_COMPONENT_EMBEDDER_URL is defined', () => {

diff --git a/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts b/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts
@@ -18,23 +18,23 @@ export class DataViewWebComponentComponent {
       if (config) {
         const { aggregation, xProperty, yProperty, chartType } = config
         return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist/gn-wc.js"></script>
-        <gn-dataset-view-chart
-          api-url="${new URL(
-            this.config.basePath,
-            window.location.origin
-          ).toString()}"
-          dataset-id="${metadata.uuid}"
-          aggregation="${aggregation}"
-          x-property="${xProperty}"
-          y-property="${yProperty}"
-          chart-type="${chartType}"
-          primary-color="#0f4395"
-          secondary-color="#8bc832"
-          main-color="#555"
-          background-color="#fdfbff"
-          main-font="'Inter', sans-serif"
-          title-font="'DM Serif Display', serif"
-        ></gn-dataset-view-chart>`
+<gn-dataset-view-chart
+        api-url="${new URL(
+          this.config.basePath,
+          window.location.origin
+        ).toString()}"
+        dataset-id="${metadata.uuid}"
+        aggregation="${aggregation}"
+        x-property="${xProperty}"
+        y-property="${yProperty}"
+        chart-type="${chartType}"
+        primary-color="#0f4395"
+        secondary-color="#8bc832"
+        main-color="#555"
+        background-color="#fdfbff"
+        main-font="'Inter', sans-serif"
+        title-font="'DM Serif Display', serif"
+></gn-dataset-view-chart>`
       }
       return null
     })