feat: replace hints with info boxes in On Request data source

CHANGELOG.md

@@ -22,6 +22,8 @@ the detailed section referring to by linking pull requests or issues.
 
 #### Patch
 
+- Replaced hints with info boxes in On Request data source
+  ([#820](https://github.com/sovity/edc-ui/issues/820))
 - Fixed cropping of Contract Offer Ids on catalog browser page
   ([#795](https://github.com/sovity/edc-ui/issues/795))
 - Used createDataOffer endpoint to create an asset, policies and a contract

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

@@ -559,12 +559,6 @@ <h1 mat-dialog-title>
             <!-- Contact E-Mail -->
             <div class="form-section-title">Contact E-Mail</div>
 
-            <div class="mb-[10px] px-[3px] text-sm">
-              This email address will be offered to potential consumers for
-              contacting you. This is done in place of having an actual data
-              source connected.
-            </div>
-
             <mat-form-field
               *ngIf="form.datasource.controls.contactEmail; let ctrl"
               class="grow">
@@ -573,6 +567,15 @@ <h1 mat-dialog-title>
                 matInput
                 [formControl]="ctrl"
                 [placeholder]="'contact@my-org.com'" />
+              <button
+                class="!scale-[0.9]"
+                mat-icon-button
+                matSuffix
+                matTooltip="This email address will be offered to potential consumers for
+                contacting you. This is done in place of having an actual data
+                source connected.">
+                <mat-icon>info_outline</mat-icon>
+              </button>
               <mat-error *ngIf="ctrl.invalid && ctrl.errors?.email">
                 {{ validationMessages.invalidEmailMessage }}
               </mat-error>
@@ -581,11 +584,6 @@ <h1 mat-dialog-title>
             <!-- Contact E-Mail Preferred Subject -->
             <div class="form-section-title">Preferred E-Mail Subject</div>
 
-            <div class="mb-[10px] px-[3px] text-sm">
-              When potential customers reach out to you via email, you’ll
-              receive messages with this subject line.
-            </div>
-
             <mat-form-field
               *ngIf="
                 form.datasource.controls.contactPreferredEmailSubject;
@@ -597,6 +595,14 @@ <h1 mat-dialog-title>
                 matInput
                 [formControl]="ctrl"
                 [placeholder]="'Data Offer \'xyz\''" />
+              <button
+                class="!scale-[0.9]"
+                mat-icon-button
+                matSuffix
+                matTooltip="When potential customers reach out to you via email, you’ll
+                receive messages with this subject line.">
+                <mat-icon>info_outline</mat-icon>
+              </button>
             </mat-form-field>
           </ng-container>
 

src/app/shared/business/edit-asset-form/edit-asset-form.component.html

@@ -39,23 +39,21 @@
           placeholder="{{
             'create_data_offer.contact_email_placeholder' | translate
           }}"
+          tooltip="'contact_form.contact_email_tooltip' | translate"
           [label]="'create_data_offer.contact_email' | translate"
-          [ctrl]="form.datasource.controls.contactEmail"
-          >{{
-            'create_data_offer.contact_email_descr' | translate
-          }}</edit-asset-form-input
-        >
+          [ctrl]="
+            form.datasource.controls.contactEmail
+          "></edit-asset-form-input>
 
         <!-- Contact E-Mail Subject for On Request Assets -->
         <edit-asset-form-input
           class="mt-5"
           fieldId="create-asset-form-contact-subject"
           label="Preferred E-Mail Subject"
           placeholder="Data Offer 'xyz'"
-          [ctrl]="form.datasource.controls.contactPreferredEmailSubject"
-          >When potential customers reach out to you via email, you’ll receive
-          messages with this subject line.</edit-asset-form-input
-        >
+          tooltip="'contact_form.contact_subject_tooltip' | translate"
+          [ctrl]="form.datasource.controls.contactPreferredEmailSubject">
+        </edit-asset-form-input>
       </ng-container>
 
       <ng-container
@@ -852,7 +850,7 @@
             </button>
           </mat-radio-button>
           <mat-radio-button value="DO_NOT_PUBLISH">
-            Create asset only (without data offer)
+            {{ 'general.pub_asset_only' | translate }}
             <button
               class="!scale-[0.9]"
               mat-icon-button

src/assets/i18n/en.json

@@ -84,7 +84,15 @@
     "header_name": "Header Name",
     "header_value": "Header Value",
     "add_add_header": "Add Additional Header",
-    "page": "Page"
+    "page": "Page",
+    "show_adv_fields": "Show Advanced Fields",
+    "publishing": "Publishing",
+    "pub_desc": "Publish data offer to other data space participants",
+    "pub_unrestr": "Publish unrestricted",
+    "pub_restr": "Publish restricted",
+    "pub_asset_only": "Create asset only (without data offer)",
+    "pub_mode": "Publishing Mode",
+    "doc": "Documentation"
   },
   "tooltip": {
     "negotiate": "Cannot negotiate contracts with your own connector.",
@@ -228,6 +236,14 @@
     "title": "Data Offers",
     "page": "Data Offer Page"
   },
+  "create_data_offer": {
+    "def_datasrc": "Define the datasource of the asset",
+    "data_type": "Datasource Type",
+    "contact_email_placeholder": "contact@my-org.com",
+    "contact_email": "Contact E-Mail",
+    "contact_email_tooltip": "This email address will be offered to potential consumers for contacting you. This is done in place of having an actual data source connected.",
+    "contact_subject_tooltip": "When potential customers reach out to you via email, you’ll receive messages with this subject line."
+  },
   "create_data_offer_page": {
     "title": "Create Data Offer"
   },
@@ -300,7 +316,8 @@
     "date_range": "Date Range",
     "search_pol": "Search policies",
     "create_policy": "Create Policy",
-    "no_pol": "No policy found with given filter."
+    "no_pol": "No policy found with given filter.",
+    "expression": "Policy Expression"
   },
   "create_policy_page": {
     "title": "Create Policy"