Fix edit cookie shows expires as an Invalid Date

[tangweikun]

#4195 Fix Edit Cookie shows Expires as an Invalid Date

Suggestion：Maybe can use DatePicker instead of Input in Expires field

changelog(Fixes): Fixed an issue where editing a cookie wrongfully displayed expiry dates as invalid

[filfreire]

LGTM!

Before - date would show up as invalid, and upon closing cookie modal would dissappear:

Now - it at least doesn't show up as invalid, and isn't deleted:

It doesn't solve all our problems with cookies, but at least gets rid of the invalid date/disappear behaviour, so from my side I think we can merge. Thank you @tangweikun for contributing this 👍

[tangweikun]

LGTM!

Before - date would show up as invalid, and upon closing cookie modal would dissappear:

Now - it at least doesn't show up as invalid, and isn't deleted:

It doesn't solve all our problems with cookies, but at least gets rid of the invalid date/disappear behaviour, so from my side I think we can merge. Thank you @tangweikun for contributing this 👍

What are the other related issues about cookies? You can show me the issues, I can take a deeper look another day. @filfreire

[filfreire]

@tangweikun if you wish to have a look, these are some that are open:

• Unable to create tag for Cookie #2750
• Cookie jar cached when chaining  #4035
• [Bug] Cookie Tag is replaced by fix value #1730

[jackkav]

Its better to use positive naming here isValidDate
also consider using date-fns for validation as we have it installed https://date-fns.org/v2.28.0/docs/isValid

[jackkav]

since this isn't react i'd consider moving it into a condition inside of _renderInputField
if(type==='expires'){
}

[jackkav]

After testing this PR. It is an improvement on the original but could afford to be more clear about what values are acceptable inputs to the expires field.
It seems currently only a datetime expressed as timeSinceEpoch is accepted. eg. 1672531200000
Which is inconvenient as a user experience.

I'm considering if we should either add support for typing in a GMT/UTCString eg. Thu, 21 Oct 2021 07:28:00 GMT
or perhaps just force the input to use a datetime input.
According to https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#write_a_new_cookie the tough-cookie library will always create a GMTstring but it can take string | number | Date | null

;max-age=max-age-in-seconds (e.g., 60*60*24*365 or 31536000 for a year)
;expires=date-in-GMTString-format If neither expires nor max-age specified it will expire at the end of session.

For now I think we can ignore the never state, but I've pushed a commit that addresses the above. What do we think? @tangweikun @filfreire

[tangweikun]

After testing this PR. It is an improvement on the original but could afford to be more clear about what values are acceptable inputs to the expires field. It seems currently only a datetime expressed as timeSinceEpoch is accepted. eg. 1672531200000 Which is inconvenient as a user experience.

I'm considering if we should either add support for typing in a GMT/UTCString eg. Thu, 21 Oct 2021 07:28:00 GMT or perhaps just force the input to use a datetime input. According to https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#write_a_new_cookie the tough-cookie library will always create a GMTstring but it can take string | number | Date | null

;max-age=max-age-in-seconds (e.g., 60*60*24*365 or 31536000 for a year)
;expires=date-in-GMTString-format If neither expires nor max-age specified it will expire at the end of session.

For now I think we can ignore the never state, but I've pushed a commit that addresses the above. What do we think? @tangweikun @filfreire

LGTM!
The interactive experience is better than before.At the same time I think expires row should be made shorter, now the user has to click on the far right to pop up the datepicker, like this:

[jackkav]

@tangweikun I agree, but I don't think we have a half width convention anywhere else yet.

[filfreire]

LGTM!

⚠️ Fyi @jackkav @tangweikun found a few issues:

• Pressing the Clear button doesn't visible delete the date from the input field (though in the background it does seem to delete it. Pressing Clear button a second time seems clear up the date.

1st clear attempt:

2nd clear attempt:

Finally cleared:

• When I try to type a date in one of the input parts, like only the year part, I can't seem to write all 4 digits without that part being reset (e.g. try to write 2022).