feat(cc-logs-control): init component

[pdesoyres-cc]

Fixes #908

What does this PR do?

3 commits:

• refactor: extract and rework some methods that help for creating fake logs for <cc-logs-*> stories and sandbox
• upgrade remix icon to get a new icon from the library
• implement the new component itself

How to review?

• Overall design
• Code

A review from everyone would be great.

[github-actions]

🔎 A preview has been automatically published : https://clever-components-preview.cellar-c2.services.clever-cloud.com/cc-logs-controller/init/index.html.

This preview will be deleted once this PR is closed.

[florian-sanders-cc]

Well done @pdesoyres-cc this component looks great and the code is easy to read 👍

Most of my comments are nitpicks as usual and here is one more:

• I think we should change the icon for the follow button. I always think I'm going to be able to download the logs and since this button is icon only, we should avoid ambiguous icons. I couldn't find a really good fit within the remix icons project but the scroll down examples form the Noun Project look decent enough to me. Maybe we could create an issue within the Remix project?

[pdesoyres-cc]

let see how it goes

[HeleneAmouzou]

GG @pdesoyres-cc ! 👏
The visual is very nice ! ✨ I went through the code and I have just left one question. Also about the cc-logs-controller, when I saw the scroll to bottom icon I though it was a button to download the logs. I haven't noticed it before and I don't know if I am the only one to have this impression or if there is another icon more appropriate. Otherwise, LGMT !

[hsablonniere]

Hey @pdesoyres-cc, good job on this!! 👏

I added a few remarks and here are some global notes:

• Now that I see the component, I'm not sure cc-logs-options is the right name
• Will we put the future input for text filtering in this component or through the slot?
• I was about to say "why do we need this component, why is it not directly in the main component ?"
  • Looking at the code, I understand why and it's a good way to isolate stuffs, even if it means mirroring a lot of properties
• Can we have a story to show of the fact that we can select other options than the default ones?

[hsablonniere]

Thanks for your feedbacks and new commits 👍

I still have questions:

• I'm not sure cc-logs-options is the right name but I don't want controller either, WDYT?
• Will we put the future input for text filtering in this component or through the slot?
• Can we have a story to show of the fact that we can select other options than the default ones?

[pdesoyres-cc]

I'm not sure cc-logs-options is the right name but I don't want controller either, WDYT?

• I can propose cc-logs-control so that we don't clash with the MVC design pattern's concept of controller.
• I can propose cc-logs-wrapper but I don't like it very much as it doesn't say what it does.
• I can propose cc-logs-tuner, cc-logs-manager, cc-logs-proxy, cc-logs-adapter

Will we put the future input for text filtering in this component or through the slot?

My first idea for the slot was to put the date range input, but there was not enough room.
Also, I wanted to put some loading indicators here, but finally, I found a better place.
The question is: does the text-filtering apply to addon logs, application logs, and access logs? I would say yes.

Having said that, we could get rid of the slot and plan the addition of the text-filtering input.

Can we have a story to show of the fact that we can select other options than the default ones?

yes, I'll do that.

[Galimede]

Nice work Pierre, LGTM! 💪

[hsablonniere]

After a discussion with @pdesoyres-cc

• About the name: cc-logs-control seems to be the better idea
• Maybe we cold rename cc-logs into cc-logs-viewer
  • Pierre will decide on this one
• Let's remove the slot, the text input will be part of this component

[florian-sanders-cc]

👋 Sorry that I did not notice it ealier: we're missing a focus style for checkboxes
Chrome

This should do the trick:

        input:focus {
          outline: var(--cc-focus-outline, #000 solid 2px);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

Apart from that, LGTM!
About the name, we could also go for cc-logs-settings? But I'm fine with cc-logs-control too 😉

[roberttran-cc]

Congrats for the awesome work: there's an issue with a non-working story but LGTM for the rest!

[github-actions]

🔎 The preview has been automatically deleted.