Add tooltips and hints to the Create Data Offer page (#796)

CHANGELOG.md

@@ -35,6 +35,7 @@ Bug fixes
 #### Patch
 
 - Added description for fields in asset creation mask
+- Added description for fields in Create Data Offer page
 - Added proper handling of custom JSON properties in edit asset process
 
 ## [v4.1.1] - 2024-08-09

src/app/component-library/edit-asset-form/edit-asset-form-input/edit-asset-form-input.component.html

@@ -10,6 +10,14 @@
     [id]="fieldId"
     [formControl]="ctrl"
     [placeholder]="placeholder" />
+  <button
+    *ngIf="tooltip"
+    class="!scale-[0.8]"
+    mat-icon-button
+    matSuffix
+    [matTooltip]="tooltip">
+    <mat-icon>info_outline</mat-icon>
+  </button>
   <mat-error *ngIf="ctrl.errors?.url">
     {{ validationMessages.invalidUrlMessage }}
   </mat-error>
@@ -25,7 +33,21 @@
   <mat-error *ngIf="ctrl.errors?.exists">
     {{ ctrl.errors?.exists }}
   </mat-error>
+  <mat-hint *ngIf="hint" class="flex flex-row items-center gap-1 mb-1">
+    {{ hint }}
+  </mat-hint>
   <mat-hint *ngIf="!hideHint">
     <ng-content></ng-content>
   </mat-hint>
+  <mat-hint
+    *ngIf="contentTypeHint"
+    class="flex flex-row items-center gap-1 mt-2">
+    Describes the content type of the data as a MIME type, see
+    <a
+      class="link"
+      externalLink
+      href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types"
+      >common types</a
+    >
+  </mat-hint>
 </mat-form-field>

src/app/component-library/edit-asset-form/edit-asset-form-input/edit-asset-form-input.component.ts

@@ -11,7 +11,10 @@ export class EditAssetFormInputComponent {
   @Input() fieldId = 'missing-id-' + Math.random().toString(36).substring(7);
   @Input() label!: string;
   @Input() placeholder: string = '...';
+  @Input() tooltip: string = '';
+  @Input() hint: string = '';
   @Input() hideHint: boolean = false;
+  @Input() contentTypeHint: boolean = false;
 
   constructor(public validationMessages: ValidationMessages) {}
 }

src/app/component-library/edit-asset-form/edit-asset-form/edit-asset-form.component.html

@@ -403,6 +403,7 @@
         fieldId="create-asset-form-name"
         label="Name"
         placeholder="My Asset"
+        tooltip="The main name of your asset. It will also be the name of the data offering displayed in the catalog."
         [ctrl]="form.general.controls.name"></edit-asset-form-input>
 
       <!-- Asset ID -->
@@ -411,6 +412,7 @@
         fieldId="create-asset-form-id"
         placeholder="Asset ID"
         label="Asset ID"
+        tooltip="Asset ID, used internally, is an auto-generated string in a URL-compatible format, combining the asset name and version with a urn:artifact: prefix. You can customize it if needed."
         [ctrl]="ctrl"></edit-asset-form-input>
 
       <!-- Description -->
@@ -422,7 +424,7 @@
         "
         [ctrl]="form.general.controls.description">
         <div class="flex flex-row items-center gap-1 mb-1">
-          The description uses
+          The description supports
           <a
             class="link"
             externalLink
@@ -451,11 +453,12 @@
           label="Version"
           fieldId="create-asset-form-version"
           placeholder="1.0.0"
+          tooltip="The version of your asset. Especially useful if you have iterations of the same asset."
           [ctrl]="form.general.controls.version"></edit-asset-form-input>
 
         <!-- Language -->
         <language-select
-          label="Language"
+          label="Language of the content"
           [control]="form.general.controls.language"></language-select>
       </ng-container>
     </edit-asset-form-group>
@@ -494,7 +497,8 @@
         <edit-asset-form-input
           fieldId="create-asset-form-data-model"
           label="Data Model"
-          placeholder="unspecified"
+          placeholder="proprietary"
+          tooltip="Model for data exchange, e.g. DATEX II, TPEG for traffic and travel information, etc."
           [ctrl]="form.advanced.controls.dataModel"></edit-asset-form-input>
       </ng-container>
     </edit-asset-form-group>
@@ -508,6 +512,7 @@
         label="Endpoint Documentation"
         fieldId="create-asset-form-endpoint-documentation"
         placeholder="https://"
+        tooltip="URL to the technical documentation about the data to be received."
         [ctrl]="
           form.general.controls.endpointDocumentation
         "></edit-asset-form-input>
@@ -517,12 +522,21 @@
         label="Content Type"
         fieldId="create-asset-form-content-type"
         placeholder="application/json"
+        [contentTypeHint]="true"
         [ctrl]="form.general.controls.contentType"></edit-asset-form-input>
 
       <ng-container *ngIf="form.advanced">
         <!-- Data sample URLs -->
         <div class="mt-4">
           <edit-asset-form-label label="Data samples"></edit-asset-form-label>
+          <button
+            class="!scale-[0.9]"
+            mat-icon-button
+            matSuffix
+            matTooltipPosition="right"
+            matTooltip="URLs of Dataset samples if available">
+            <mat-icon>info_outline</mat-icon>
+          </button>
           <div class="mt-6"></div>
           <div
             *ngFor="
@@ -558,6 +572,14 @@
         <div class="mt-4">
           <edit-asset-form-label
             label="Reference files"></edit-asset-form-label>
+          <button
+            class="!scale-[0.9]"
+            mat-icon-button
+            matSuffix
+            matTooltipPosition="right"
+            matTooltip="URLs of Dataset schemas or other references">
+            <mat-icon>info_outline</mat-icon>
+          </button>
           <div class="mt-6"></div>
           <div
             *ngFor="
@@ -600,7 +622,7 @@
             '# My Asset\n\nAt vero eos et accusam et justo duo dolores et ea rebum.\n\n## Details\n\nAt vero eos et accusam et justo duo dolores et ea **rebum**.'
           ">
           <div class="flex flex-row items-center gap-1 mb-1">
-            Additional information regarding the reference files. The field uses
+            Additional information regarding the reference files. Supports
             <a
               class="link"
               externalLink
@@ -633,7 +655,10 @@
               formControlName="toInclusive"
               placeholder="End date (inclusive)" />
           </mat-date-range-input>
-          <mat-hint>DD/MM/YYYY (optional) – DD/MM/YYYY (optional)</mat-hint>
+          <mat-hint
+            >Start and/or end date when the dataset is available for
+            consumption. DD/MM/YYYY (optional) – DD/MM/YYYY (optional)
+          </mat-hint>
           <mat-datepicker-toggle
             matSuffix
             [for]="picker"></mat-datepicker-toggle>
@@ -650,6 +675,7 @@
         fieldId="create-asset-form-data-update-frequency"
         label="Data update frequency"
         placeholder="every month"
+        tooltip="How often is the dataset updated, e.g	'Every 5 min."
         [ctrl]="
           form.advanced.controls.dataUpdateFrequency
         "></edit-asset-form-input>
@@ -659,6 +685,7 @@
         fieldId="create-asset-form-geo-ref-method"
         label="Geo reference method"
         placeholder="Lat/Lon"
+        tooltip="The method used for representing of geographical data, e.g GeoJSON, OpenLR, etc."
         [ctrl]="
           form.advanced.controls.geoReferenceMethod
         "></edit-asset-form-input>
@@ -668,11 +695,20 @@
         fieldId="create-asset-form-geo-location"
         label="Geo location"
         placeholder="40.741895,-73.989308"
+        tooltip="Simple description of the relevant geolocation, e.g. Hamburg and vicinity."
         [ctrl]="form.advanced.controls.geoLocation"></edit-asset-form-input>
 
       <!-- NUTS locations -->
       <div>
         <edit-asset-form-label label="NUTS locations"></edit-asset-form-label>
+        <button
+          class="!scale-[0.9]"
+          mat-icon-button
+          matSuffix
+          matTooltipPosition="right"
+          matTooltip="NUTS codes are regional identifiers in Germany used for statistical and administrative purposes, covering states, districts, and municipalities. (e.g DE60)">
+          <mat-icon>info_outline</mat-icon>
+        </button>
         <div class="mt-6"></div>
         <div
           *ngFor="
@@ -713,23 +749,26 @@
         label="Sovereign"
         fieldId="create-asset-form-sovereign"
         placeholder="Data Owning Company GMBH"
-        [ctrl]="form.advanced.controls.sovereignLegalName"
-        >Legal name of the data owner</edit-asset-form-input
-      >
+        tooltip="Legal name of the data owner"
+        [ctrl]="
+          form.advanced.controls.sovereignLegalName
+        "></edit-asset-form-input>
 
       <!-- Publisher -->
       <edit-asset-form-input
         class="mt-3"
         label="Publisher"
         fieldId="create-asset-form-publisher"
         placeholder="https://"
+        tooltip="URL of the original publisher of the data"
         [ctrl]="form.general.controls.publisher"></edit-asset-form-input>
 
       <!-- Standard License -->
       <edit-asset-form-input
         label="Standard License"
         fieldId="create-asset-form-standard-license"
         placeholder="https://"
+        tooltip="URL of the license under which the data is offered."
         [ctrl]="form.general.controls.standardLicense"></edit-asset-form-input>
 
       <!-- Conditions for use -->
@@ -744,7 +783,7 @@
         ">
         <div class="flex flex-row items-center gap-1 mb-1">
           Additional not legally relevant usage instructions (e.g. how to cite
-          the dataset) The field uses
+          the dataset). The field supports
           <a
             class="link"
             externalLink
@@ -771,12 +810,36 @@
           [formControl]="ctrl">
           <mat-radio-button value="PUBLISH_UNRESTRICTED">
             Publish unrestricted
+            <button
+              class="!scale-[0.9]"
+              mat-icon-button
+              matSuffix
+              matTooltipPosition="right"
+              matTooltip="Your data offer is published and can be accessed by everyone.">
+              <mat-icon>info_outline</mat-icon>
+            </button>
           </mat-radio-button>
           <mat-radio-button value="PUBLISH_RESTRICTED">
             Publish restricted
+            <button
+              class="!scale-[0.9]"
+              mat-icon-button
+              matSuffix
+              matTooltipPosition="right"
+              matTooltip="Your data offer is published with restrictions of your choice.">
+              <mat-icon>info_outline</mat-icon>
+            </button>
           </mat-radio-button>
           <mat-radio-button value="DO_NOT_PUBLISH">
             Create asset only (without data offer)
+            <button
+              class="!scale-[0.9]"
+              mat-icon-button
+              matSuffix
+              matTooltipPosition="right"
+              matTooltip="Create the asset but do not publish your data offer. You can do it later.">
+              <mat-icon>info_outline</mat-icon>
+            </button>
           </mat-radio-button>
         </mat-radio-group>
       </div>

src/app/component-library/edit-asset-form/keyword-select/keyword-select.component.html

@@ -23,4 +23,11 @@
       [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
       (matChipInputTokenEnd)="add($event)" />
   </mat-chip-list>
+  <button
+    class="!scale-[0.9]"
+    mat-icon-button
+    matSuffix
+    matTooltip="Keywords make the data offer easier to find. They appear as tags on 'Assets' and 'Catalog Browser' pages.">
+    <mat-icon>info_outline</mat-icon>
+  </button>
 </mat-form-field>

src/app/component-library/edit-asset-form/language-select/language-select.component.html

@@ -1,6 +1,4 @@
-<edit-asset-form-label
-  label="Language"
-  [ctrl]="control"></edit-asset-form-label>
+<edit-asset-form-label [label]="label" [ctrl]="control"></edit-asset-form-label>
 <mat-form-field class="w-full mt-1" color="accent">
   <mat-select [formControl]="control" [compareWith]="'id' | compareByField">
     <mat-option [value]="null">-</mat-option>

src/app/component-library/edit-asset-form/language-select/language-select.component.ts

@@ -9,7 +9,7 @@ import {LanguageSelectItemService} from './language-select-item.service';
 })
 export class LanguageSelectComponent {
   @Input()
-  label!: string;
+  label: string = 'Language';
 
   @Input()
   control!: FormControl<LanguageSelectItem | null>;

src/app/routes/connector-ui/asset-page/asset-edit-dialog/asset-edit-dialog.component.html

@@ -83,7 +83,7 @@ <h1 mat-dialog-title>
                 '# My Asset\n\nAt vero eos et accusam et justo duo dolores et ea rebum.\n\n## Details\n\nAt vero eos et accusam et justo duo dolores et ea **rebum**.'
               "></textarea>
             <mat-hint class="flex flex-row items-center gap-1 mb-1">
-              The description uses
+              The description supports
               <a
                 class="link"
                 externalLink
@@ -310,6 +310,7 @@ <h1 mat-dialog-title>
               class="!scale-[0.9]"
               mat-icon-button
               matSuffix
+              matTooltipPosition="right"
               matTooltip="NUTS codes are regional identifiers in Germany used for statistical and administrative purposes, covering states, districts, and municipalities. (e.g DE60)">
               <mat-icon>info_outline</mat-icon>
             </button>
@@ -350,6 +351,7 @@ <h1 mat-dialog-title>
               class="!scale-[0.9]"
               mat-icon-button
               matSuffix
+              matTooltipPosition="right"
               matTooltip="URLs of Dataset samples if available">
               <mat-icon>info_outline</mat-icon>
             </button>
@@ -394,6 +396,7 @@ <h1 mat-dialog-title>
               class="!scale-[0.9]"
               mat-icon-button
               matSuffix
+              matTooltipPosition="right"
               matTooltip="URLs of Dataset schemas or other references">
               <mat-icon>info_outline</mat-icon>
             </button>
@@ -570,8 +573,8 @@ <h1 mat-dialog-title>
             <div class="form-section-title">Preferred E-Mail Subject</div>
 
             <div class="mb-[10px] px-[3px] text-sm">
-              Will be added to the mailto-link and displayed to potential
-              consumers to use.
+              When potential customers reach out to you via email, you’ll
+              receive messages with this subject line.
             </div>
 
             <mat-form-field