Use a proper tooltip for the Metadata Quality widget #952

gkeimeHDF · 2024-07-29T16:51:15Z

Description

This PR introduces a new Popover component

Architectural changes

The following library now depends on #819

Use tippy instead of create a custom tailwindCSS popover
Add popover component in ui
Use popover component in metadata-quality

Screenshots

Quality Assurance Checklist

Commit history is devoid of any merge commits and readable to facilitate reviews
If new logic ⚙️ is introduced: unit tests were added
If new user stories 🤏 are introduced: E2E tests were added
If new UI components 🕹️ are introduced: corresponding stories in Storybook were created
If breaking changes 🪚 are introduced: add the breaking change label
If bugs 🐞 are fixed: add the backport <release branch> label
The documentation website 📚 has received the love it deserves

This work is sponsored by MEL

gkeimeHDF · 2024-07-30T08:44:23Z

@jahow let tell me if u have any comments

jahow · 2024-07-30T09:47:40Z

Hi, thanks for this contribution. Could you please make sure that the CI is green first? thanks

coveralls · 2024-07-30T10:19:40Z

coverage: 80.975% (-1.9%) from 82.903%
when pulling acc3f23 on gkeimeHDF:main
into 83f4887 on geonetwork:main.

gkeimeHDF · 2024-07-30T10:46:33Z

@jahow i had seen one error then i had fixed it, now it should be fine. if u see another one just tell me

Angi-Kinas

Thanks @gkeimeHDF for creating a new Popover component with tippy.js!
This will make the UX much nicer :)

I added some comments. I think the export is the crucial thing to be added (and maybe the padding). Otherwise it looks good to me.

We could also re-use this new component for the favorite star component instead of tippy. But I'm not sure if this should be part of this PR.

Angi-Kinas · 2024-07-31T09:26:13Z

libs/ui/widgets/src/lib/ui-widgets.module.ts


 @NgModule({
  declarations: [
    ColorScaleComponent,
    ProgressBarComponent,
+    PopoverComponent,


The PopoverComponent is missing in the exports Array otherwise it cannot be used by the metadata-quality component.

export added

Angi-Kinas · 2024-07-31T09:36:25Z

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

 </div>
+<ng-template #popoverItems>
+  <div class="mb-4 font-bold" translate>record.metadata.quality.details</div>


I would add a bit of padding to the content by adding a div around it with a class with some padding. For example:<div class="p-2 py-4">

This will make the component look a bit nicer:
from:

to:

What do you think?

i will look to add a padding.

padding added

Angi-Kinas · 2024-07-31T09:37:32Z

libs/ui/widgets/src/lib/popover/popover.component.ts

+export class PopoverComponent implements AfterViewInit, OnChanges, OnDestroy {
+  @ViewChild('popoverContent', { static: false }) popoverContent: ElementRef
+  @Input() content: string | TemplateRef<any>
+  @Input() theme: 'light' | 'light-border' | 'translucent' | 'material' | ''


Somehow the theming doesn't seem to get applied. Not in the storybook nor in the datahub. Is there something I'm missing?

my screenshoot come from the story-book using light-border. Your screenshoot looks like the default theming same as ''. I don't know yet why it doesn't apply on your side. Which browser do you use?
I had added only light-border on datahub and the differents on storybook.

Now the theming works on my side as well. Not sure what was the issue. Never mind! Looks good to me.

Angi-Kinas · 2024-07-31T12:34:28Z

The PR looks good to me, I'm just hesitant to approve because of the failing pipeline. The e2e are a bit flaky and sometimes pass after rerunning them.
I don't know about the Snyk Security part. @jahow do you know why it's failing?

jahow · 2024-07-31T13:19:39Z

That's right, PRs coming from forks will have failures on some workflows (this is a known problem). As long as the E2E failures do not seem related to the PR it's fine to approve.

jahow

Hey, thanks! I noticed the new UI component was not standalone, could you lease mak it so? thanks in advance

jahow · 2024-07-31T13:20:40Z

libs/ui/widgets/src/lib/popover/popover.component.ts

+@Component({
+  selector: 'gn-ui-popover',
+  templateUrl: './popover.component.html',
+  styleUrls: ['./popover.component.css'],


Could you please make this component standalone? this is what we do for every new component now

what is standalone component, and what does it apply ? i had based my code on ProgressBarComponent which is not standalone

https://blog.angular-university.io/angular-standalone-components/

@jahow I have done it yersterday, and i fixed the lint error this morning should be ok now

Angi-Kinas · 2024-08-01T11:18:00Z

@gkeimeHDF Thanks for making the component standalone! In order to be able to use it in the metadata-quality component you need to import the PopoverComponent in the inputs array of libs/ui/elements/src/lib/ui-elements.module.ts. Thank you

gkeimeHDF · 2024-08-01T11:31:09Z

@Angi-Kinas are you sure i need import in ui-elements? if it's standalone it should not be imported there no?. For sample PopupAlert is not imported in ui-widget.
Or i miss something?
@jahow

PS: And i had supposed u speak about libs/ui/widgets/src/lib/ui-widgets.module.ts. Maybe u really need speak about libs/ui/elements/src/lib/ui-elements.module.ts so are you sure i need import the component there if yes i can add but i don't see why i need to do this.

Angi-Kinas · 2024-08-01T11:44:04Z

Usually with standalone components you can easily import the component inside another component that uses it. E.g. the PopupAlertComponent is imported in the AutocompleteComponent. But since the metadata-quality component is not standalone we need to import it in libs/ui/elements/src/lib/ui-elements.module.ts where the MetadataQualityComponent is declared.
Does that make sense?

gkeimeHDF · 2024-08-01T12:08:12Z

@Angi-Kinas Yes perfectly clear, i had changed the import.

Angi-Kinas

Perfect! The code looks good to me now :)
The e2e tests are still failing and one is related to the metadata-quality component.
I ran that particular e2e test locally and it passes.
@jahow can we still merge it?

jahow · 2024-08-01T15:13:22Z

failures look unrelated :) @Angi-Kinas feel free to approve and merge, thanks!

Angi-Kinas

Thanks again to @gkeimeHDF for this feature!
I'll approve and merge.

gkeimeHDF force-pushed the main branch from c6e7c8d to 2c5ab45 Compare July 29, 2024 17:11

gkeimeHDF force-pushed the main branch 2 times, most recently from 6711ba8 to f554938 Compare July 30, 2024 10:14

Angi-Kinas reviewed Jul 31, 2024

View reviewed changes

jahow requested changes Jul 31, 2024

View reviewed changes

gkeimeHDF force-pushed the main branch from 2cadb23 to 62a5751 Compare August 1, 2024 08:23

gkeimeHDF requested review from jahow and Angi-Kinas August 1, 2024 08:54

fix MEL use tippy & fix Angi-Kinas & fix jahow

e501f27

gkeimeHDF force-pushed the main branch from 62a5751 to e501f27 Compare August 1, 2024 12:07

Angi-Kinas reviewed Aug 1, 2024

View reviewed changes

Angi-Kinas approved these changes Aug 1, 2024

View reviewed changes

Angi-Kinas merged commit a1bcfe2 into geonetwork:main Aug 1, 2024
6 of 10 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use a proper tooltip for the Metadata Quality widget #952

Use a proper tooltip for the Metadata Quality widget #952

gkeimeHDF commented Jul 29, 2024 •

edited

Loading

gkeimeHDF commented Jul 30, 2024

jahow commented Jul 30, 2024

coveralls commented Jul 30, 2024 •

edited

Loading

gkeimeHDF commented Jul 30, 2024 •

edited

Loading

Angi-Kinas left a comment

Angi-Kinas Jul 31, 2024

gkeimeHDF Jul 31, 2024

Angi-Kinas Jul 31, 2024

gkeimeHDF Jul 31, 2024

gkeimeHDF Jul 31, 2024

Angi-Kinas Jul 31, 2024

gkeimeHDF Jul 31, 2024

Angi-Kinas Jul 31, 2024

Angi-Kinas commented Jul 31, 2024

jahow commented Jul 31, 2024

jahow left a comment

jahow Jul 31, 2024

gkeimeHDF Jul 31, 2024

jahow Jul 31, 2024

gkeimeHDF Aug 1, 2024

Angi-Kinas commented Aug 1, 2024

gkeimeHDF commented Aug 1, 2024 •

edited

Loading

Angi-Kinas commented Aug 1, 2024

gkeimeHDF commented Aug 1, 2024

Angi-Kinas left a comment

jahow commented Aug 1, 2024

Angi-Kinas left a comment

Use a proper tooltip for the Metadata Quality widget #952

Use a proper tooltip for the Metadata Quality widget #952

Conversation

gkeimeHDF commented Jul 29, 2024 • edited Loading

Description

Architectural changes

Screenshots

Quality Assurance Checklist

gkeimeHDF commented Jul 30, 2024

jahow commented Jul 30, 2024

coveralls commented Jul 30, 2024 • edited Loading

gkeimeHDF commented Jul 30, 2024 • edited Loading

Angi-Kinas left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Angi-Kinas commented Jul 31, 2024

jahow commented Jul 31, 2024

jahow left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Angi-Kinas commented Aug 1, 2024

gkeimeHDF commented Aug 1, 2024 • edited Loading

Angi-Kinas commented Aug 1, 2024

gkeimeHDF commented Aug 1, 2024

Angi-Kinas left a comment

Choose a reason for hiding this comment

jahow commented Aug 1, 2024

Angi-Kinas left a comment

Choose a reason for hiding this comment

gkeimeHDF commented Jul 29, 2024 •

edited

Loading

coveralls commented Jul 30, 2024 •

edited

Loading

gkeimeHDF commented Jul 30, 2024 •

edited

Loading

gkeimeHDF commented Aug 1, 2024 •

edited

Loading