When we created the first atoms, we decided to put a small margin around input text, button, toggle and others because of the focus ring. This way, it would have been impossible by default to forget that this focus ring may overlap something if no margins.

They is was a bad idea to do it this way. It should always be to the user of a component to space it and lay it our correctly.

• https://twitter.com/markdalgleish/status/1222710937167118336
• https://mxstbr.com/thoughts/margin
• https://csswizardry.com/2012/06/single-direction-margin-declarations/

WARNING: This is a "breaking change" and big refactor.

Right now we have:

• styles/infos-tiles.js
  • export const tileStyles
  • export const instanceDetails
• styles/leaflet.js
  • export const leafletStyles
• styles/skeleton.js
  • export const skeleton
• templates/cc-link.js
  • export const linkStyles

We need to rename instanceDetails and skeleton into instanceDetailsStyles and skeletonStyles.

Reuse experience from onboarding @BlackYoup and @urcadox to improve the docs...

Hi!

I noticed after a first installation, that npm reports two warnings.

npm WARN @clevercloud/[email protected] No repository field.
npm WARN @clevercloud/[email protected] No license field.

Both repository and license entry are missing from the package.json file.

Resources:

• https://docs.npmjs.com/files/package.json#repository
• https://docs.npmjs.com/files/package.json#license

Feel free to tell me if you want me to open the corresponding Pull Request.
But in order to do that I need you to add the corresponding LICENSE file.

Thanks!

<env-var-full> needs to also list the env vars from linked applications.

• We'll need to rework the way we display information about the fact we're loading those (add-ons AND linked apps).
• It's a good opportunity to simplify stuffs we tried with Promise based props

• Move all required data fetching code/logic to clever-client
• Figure out a way to inject/config the warp10 token
• Figure out a way to inject/config the warp10 target URL

• We can reuse the different markdowns in the project
• We should default on the main page when no story is selected

Context

We need a UI component so a user can manage the TCP redirections of an app.

User actions

For a given app:

• A user can see the list of existing TCP redirections
• A user can create a new TCP redirection
• A user can delete an existing TCP redirection

Rules and notes

(some rules may evolve later)

• A user can only create one TCP redirection per namespace for a given app.
  • The namespace must be linked to / authorized for the app's organisation.
• The public TCP port is selected by the system and presented to the user.
• The inner TCP port is always 4040.
• We can assume a given organisation won't have access to lots of namspaces (at least 2, max would be around 5/7).
• WORDING: We should always mention TCP in upper case.
• WORDING: We should always use redirections and not redirs

Input requirements

• For the list of existing redirections, we need:
  • the name of the namespace
  • the port number
  • we may need some metadata about the namespace (is it related to cleverapps.io? Is it related to the custom DNS?)
  • we may need the list of domains (favorite?, cleverapps.io? ...) so we can display help/hint about a redirection.
• For the redirection creation, we need the list of namespaces and if a redirection already exists for this namespace (and this app).
• API for errors to be clarified

Output requirements

• Event on creation
• Event on deletion

UI ideas

• As always, we'd like to avoid "DB driven UI design", so if we can do better than a list with remove buttons and a form to add a line in the list, it would be great.
• The "only one redir per namespace" and the "namespace list will be 2 <= count <= ~7 should help us to find a better idea.

Stories

• Skeleton (no data yet)
  • I don't think we need partial skeleton states
• Empty
  • Data loaded but no redirections yet
  • Data loaded but no redirections yet and no namespace linked to the organisation
• Data loaded with a redirection on cleverapps.io
• Data loaded with a redirection on a custom domain
• Data loaded with a redirection on a "dedicated namespace"
• Data loaded with 10 redirections (10 namespaces)
• Error while loading data
• Error while adding a new redirection
• Error while removing an existing redirection

NOTES:

• We don't need a readonly state yet.

Questions

• One internal state and one update button (like env-vars) vs. each button (create/delete) triggers an event (to trigger an API call)?
  • I think the second option fits the model better API wise
• Do we want to let users interact with the form while we're waiting for the API over a creation or deletion?
  • It would be way easier for us to go this way in terms of state management outside of component and regarding error management and display.

Sub-components?

Depending on the different cases we have in the display of a given redirection, we may want to create a sub component for one redirection like we did with <env-var-input>.

Unknowns

• We don't know much about how this will be billed yet

• Replicate what we did on tags with grid and superposition
• We only need it for multi
• We may want to try to display the lines
• Can we try a toggle mode?
• when we don't wrap, scrolling into the content is kinda broken

Something like this:

+-----------+-----+
|  RESTART  |  V  |
+-----------+-----+

• Restart is a button
• The triangle zone is a button

And like this when opened:

+-----------+-----+
|  RESTART  |  V  |
+-----------+-----+------------+
|  RE-BUILD AND RESTART        |
+------------------------------+
|  RESTART LAST PUSHED COMMIT  |
+------------------------------+

• Both options are buttons
• Click anywhere => close dropdown

Questions

• How do we implement states (hover, active, focus) of the different parts?
• How do we handle keyboard access?
  • up/down between options
  • esc to close the options
• What's the component API?
  • How do you provide the different labels?
  • How do you listen to clicks
• How is it related to <cc-button>?
• Do we need a variant where RESTART and V are one button that trigger the list of options.

• Can we find/create a font-size simulator for storybook?
• Why pixels in button, inputs... ?
• What about 3px instead of 0.2rem for focus-rings?
• What about px for border-radius?

init <cc-map> and <cc-logsmap>

Let's assume the following state in simple mode:

• ONE => 1
• TWO => 2
• THREE => 3

In this simple mode, you are prevented from adding a variable named THREE a second time and it's good.

If you switch to expert mode:

ONE="1"
THREE="3"
TWO="2"

you be able to change the some values but also to type THREE a second time:

ONE="11"
THREE="3"
TWO="22"
THREE="333"

In this case, an error will be displayed:

line 4: be careful, the name THREE is already defined

If you switch back to simple mode, you can see that nothing has changed, even ONE="11" or TWO="22" are not changed.

QUESTION 1: Should we keep this behaviour?

QUESTION 2: Should we prevent the user from switching modes if there is an error?

If you switch again from simple mode to expert mode, you will still see this:

ONE="11"
THREE="3"
TWO="22"
THREE="333"

You won't see the error message :-(

QUESTION 3: Should we display back the error message? => YES!

If you switch to simple, edit ONE to 111 and go back to expert mode, you will see this:

ONE="11"
THREE="3"
TWO="2"

The previous entry is lost.

QUESTION 4: Is this what we want?

When in readonly mode, the loading error has an ok button and users should click on it to try again.

• What is the use case?
• What happens when lots of components do that?

It was brought to my attention that stylelint handles CSS in template literals.

This means our custom ESLint rule for to sort CSS declarations in JavaScript LitElement component files is useless and not the right approach 😭

Do an audit on all components:

https://lit-element.polymer-project.org/guide/properties#accessors

We have a lot of code duplication around skeleton. We need to go through everything a devise a plan to improve this.

In some situation with the value property and undefined or null we don't get an empty string.

Right now, <cc-img> is used for images where we don't know the src URL yet, like avatars or app logos. While we load the data, we want a skeleton blinking animation for the image until we know the URL of the image (via API call) and the image is loaded.

In the rest of the code base we have simple <img> where we almost always know the src URL and we don't reuse the CSS and some logic of <cc-img>.

• We should always use <cc-img> (therefore replace current <img> use)

By doing so, we still have some cases (like in TCP redirs) where the current skeleton behaviour is not what we need. In those cases, we know the URL, but we still want to display the image in a skeleton state while we determine if the current known URL is the right one.

• We should update the behaviour of the skeleton attr of <cc-img>

/!\ This is a BREAKING CHANGE.

• We want to have a fixed skeleton behaviour like anywhere else in the codebase, without the magic "remove skeleton once image is loaded".
• We want to add a new attribute, something like skeleton-until-loaded that will have the current behaviour of skeleton.

Examples:

<cc-img src="https://example.com/image.jpg" skeleton>

• This will always be displayed in a skeleton state.
• The image will be loaded but hidden until skeleton is removed by component user.
• If loading fails, the potential error will be hidden until skeleton is removed by component user.

<cc-img src="https://example.com/image.jpg" skeleton-until-loaded>

• This will be displayed in a skeleton until the image is loaded.
• Once the image is loaded with success, the image is displayed.
• Once the image is loaded with error, the text replacement is used.

NOTE: We still need to decide if skeleton-until-loaded has to be automatically removed by the component (which is often a bad idea) or if it should just be an internal state change.

• We need a way to switch the legend between "map for orga (all apps)" vs "map for on app"
• We need a way to display a message that there is no data

• maybe add a generator tasks

Context

With the new form for env vars (impl with Web Components), we changed the way users do updates.

Before

All those actions triggered 1 API call that updated the whole list of env vars with the "new state":

• add new env var
• edit env var (name and/or value)
• delete env var

This presented a few challenges:

• handle the state properly
• handle errors (validation, network...)
• have a proper saving UI indicator
• editing the name is not really natural
• each line 1 delete button and a 2 step edit process (click on edit, modify name/value, click on save)
• Switching from simple to expert mode was a mess

After

We changed the behaviour to have:

• a managed local state with "local" modification (create, edit, delete)
• detailed client side validations and error messages
• one single button to submit/reset the whole state

This way, you can make several modifications and then send them to the server at once.

• It's the only way to make simple mode behave like expert mode and allow the users to modify the list with both modes before submitting.
• You'll never end up in a case where your application is automatically restarted (scaling, monitoring, image update...) with a partial list of your env vars.
• You're able to reset at any time.

Feedbacks & problems

Users often forget to save/submit their modifications.

Potential reasons:

• Some users are used to the old behaviour.
• The submit button is at the bottom and when the list is long, it's hidden.
• It's not that clear that during modifications, the form is in a dirty state that needs to be submitted.
• Nothing prevents the user from navigating away from the page if the form is in a dirty sate.

NOTE: It seems to happen more often with a "user creates a var, new var appears in the list, user forgets to click on submit button which is so far from the create line".

Solutions

• We could move the reset/submit buttons to the top of the form
  • Same problem, if you edit the last value of a long list, you won't see the button.
  • Good point is that the button will be displayed first and the user has a chance to see it and aknowledge that it exists (before scrolling down to edit the last var for example).
• We could have the reset/submit buttons twice (top and bottom)
  • Seems actually like a good idea, users sees the button first and the natural pattern to finish a form with reset/submit buttons is respected.
  • We could argue that if someone edits a var in the middle of a long list the problem is still there.
• We could move the create new var line closer to the submit buttons (at the bottom)
  • I still think it's more logical to have this line first. This way, it's a choice you have when you start reading the form.
  • It's also better in a case where you add several variables, the position of the create line does not move because the list grows.
• Make dirty states more visible
  • We tried a few ideas around that with colors and we didn't find a good solution, it's still something that needs to be done, especially since we're able to package/deliver SVG icons with our components now.
  • NOTE: The code has everything we need to identify (new values, edited values, deleted values, new/edited values), we even already identify deleted values with a strike through style.
• Prevent the user from navigating away with a confirm
  • This is not doable "as is" with our router in the console, we need to investigate how it can be done properly.
  • It could be done in the clevergrid Vue.js based app.
• Have the button always displayed at the bottom with some kind of position sticky
  • I tried it once, wasn't convinced, hard to impl but we could try again...

FYI: If we want to go back to the old behaviour, here are the pb/questions:

• We need to add a "send" button on each line (think about responsive)
• We need to freeze the UI with a saving state during each API call on each modification.
• The expert mode will always be edited as a whole, so how does it work when users switch between modes in a dirty state?

Inspiration https://github.com/murar8/react-intl-locale-manager

https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/

We have 3 translations where we could keep just one now that <br> are allowed with i18n.

Context

We didn't implement secret in multiline mode because it's not simple to create the equivalent of <input type=password> with a textarea.

What we tried

We naively tried this when multi + secret:

• if secret is hidden => display a <input type=password>
• if secret is revealed => display a <textarea> with the multiline value

Problems

This behaviour is almost what we want, the weird case comes from the fact that you can still edit the <input type=password> and once you edit the value while hidden you lost line breaks when you reveal the secret.

If we decide to do multi + secret while hidden with <input type=password readonly> the result will work with the copy to clipboard button but not with a text selection and a regular copy paste. We would lose line breaks.

Maybe an idea

If we use a filter:blur we could achieve something but I'm not convinced yet and I want feedbacks.

• Extract JSON validation from the CLI CleverCloud/clever-tools#409 and move it to the client CleverCloud/clever-client.js#28
• Create a <cc-env-var-editor-json>
• Use <cc-env-var-editor-json> in <cc-env-var-form>

Introduce the new pattern.

We need a DEPENDENCIES.md at the root of the project which explains why we added dependency X or Y and a system to tag some of them in groups.

I started a side project to automate this from the package.json, we need to finish this...

Webpack does not like import.meta.url by default which is a problem. The setup is possible but a bit hard to figure out. We need docs.