date-time formate display is not same as user used inside AsyncAPi file.

[mhaque07]

Description

In AsyncAPI spec documentation, when we define the payload and in this payload, one of the type is a string with a format as 'date-time' or 'date' then the value you put into the example will be changed in a different format. Ref as attached:

Expected result The value provided by a user in the examples section needs to be display without any modification

For more ref: one can have a look into discussion under tooling channel : https://asyncapi.slack.com/archives/CQVJXFNQL/p1665137172379359

Actual result

Steps to reproduce

Troubleshooting

[github-actions[bot]]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[Himanshu-370]

@mhaque07 Can you help me locate the file?

[mhaque07]

Hi @Himanshu-370 i haven't added any file here , you can test this with any schema of format "date-time"

You can find more discussion details here: https://asyncapi.slack.com/archives/CQVJXFNQL/p1665137172379359

[aeworxet]

Unquoted date-time is parsed by React as a Date() object, while quoted date-time is parsed as a string and is thus left intact. I think we should use date-fns indeed, as @imabp stated, to bring date-time to a predictable format from the start, without depending on what format the value is in initially.

import { format } from 'date-fns';

const date1 = new Date('2022-04-02T10:05:23.000Z');
const date2 = '2022-04-02T10:05:23.000Z';

const formattedDate1 = format(date1, 'yyyy-MM-dd, HH:MM:SS');
const formattedDate2 = format(Date.parse(date2), 'yyyy-MM-dd, HH:MM:SS');

console.log(formattedDate1); // 2022-04-02, 13:04:00
console.log(formattedDate2); // 2022-04-02, 13:04:00

[imabp]

@magicmatatjahu let me know more, I think it's a medium level issue. @aeworxet can take this up, if he is okay with that.

[aeworxet]

Yes, I can take it.

[aeworxet]

If I add date-time in a non-RFC3339 format to the AsyncAPI Document, the value gets accepted, just is considered a string in free format.

While according to the spec date and date-time should be ONLY in RFC3339 format. Should I write a preliminary regex validation for the specified date/date-time, which will throw error in case this regex validation fails?

[derberg]

@aeworxet validation related to spec should be done in the parser, through https://github.com/asyncapi/spec-json-schemas/blob/master/definitions/2.5.0/schema.json or spectral ruleset.

best would be to open an issue, probably in parser or spec-json-schemas cause we need to discuss where to add validation, but for sure not inside the react component

[magicmatatjahu]

This should be done not in json-schema but in Spectral (a separate rule) to check whether the schema's examples or default field that defines the date or date-time format is compatible with it. Atm we make such a validation in parser (but in v2 version) here https://github.com/asyncapi/parser-js/blob/next-major/src/ruleset/v2/functions/schemaValidation.ts So maybe schema utility function from Spectral is broken (underneath it uses the AJV and its validation functions for most known formats) or I don't know 🤷🏼

[aeworxet]

I have researched the error of 'date-time' regex validation up to ajv and I am ready to start developing the fix, but it came up that it's not understandable for which version should it be coded.

In parser's version up to 1.9.0 the 'ajv' is used directly, and in 2.0 - with spectral. There are different versions of ajv used: parser 1.9.0 uses v6.10 and parser 2.0 uses v8.11. Not to mention that react-component itself in branch master uses parser 1.15.1 and in branch next - parser 1.18.0. @magicmatatjahu suggested that regex validation of 'date-time' format should be done through spectral rule, but then the version of parser the bug was originally opened for remains unfixed, and react-component itself must be updated to use parser 2.0 which is not yet released.

So,

• what are the plans for parser-js migration in react-component
• for which version of what should I provide the fix for ?

[Savio629]

Hello folks, I am a bit late to mention this but I'm assigned this issue via Winter of Code (WOC 3.0) event under Ace (Mentor). Sorry for any trouble caused.

[aeworxet]

@Savio629 Questions remain relevant so you develop the fix for proper versions.

@derberg @AceTheCreator Please take a look at https://github.com/asyncapi/asyncapi-react/issues/651#issuecomment-1436813270 and define.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart: