feat: custom extension rendering #994

ductaily · 2024-04-22T16:46:30Z

Description

Changes proposed in this pull request:

Extends the Extension component
Allows customized rendering of extensions passed as configuration

Example

import * as React from "react";
import { render } from "react-dom";
import AsyncApiComponent, { ConfigInterface } from "@asyncapi/react-component";
import { ExtensionComponentProps }  from "@asyncapi/react-component/src/components/Extensions"

const schema = `
asyncapi: '2.0.0'
info:
  title: Example
  version: '0.1.0'
channels:
  example-channel:
    subscribe:
      message:
        payload:
          type: object
          x-custom-extension: 'Customized Extension'
          properties:
            exampleField:
              type: string
            exampleNumber:
              type: number
            exampleDate:
              type: string
              format: date-time
`;

function MyCustomExtensionRender(props: ExtensionComponentProps) {
  return (
    <div className="flex py-2">
      <div className="min-w-1/4 mr-2">
        <span className="break-anywhere text-sm italic">
          {props.propertyName}
        </span>
      </div>

      <div className="text-sm prose">
        <a target="_blank" href="#">
          {props.propertyValue}
        </a>
      </div>
    </div>
  )
}

const config: ConfigInterface = {
  schemaID: 'custom-spec',
  show: {
    operations: false,
    errors: false,
  },
  extensions: {
  'x-custom-extension': MyCustomExtensionRender
 }
};

const App = () => <AsyncApiComponent schema={schema} config={config} />;

render(<App />, document.getElementById("root"));

Related issue(s)

See also #819

github-actions

Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide 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.

derberg

I assume that docs, test and playground showcase is not here yet as you first what to have us look at implementation to give green light for more?

than please at least extend PR with default extensions components that are supported by react component by default? probably best if they are in new dir like /library/src/components/extensions. You can take x-x and x-linkedin as first official extensions under info object

magicmatatjahu · 2024-04-23T10:42:52Z

@ductaily Hi! Great work, but you shouldn't override the logic for Schema component, but for Extensions like in my #819 (comment) comment. By this you will be able to add extension not only for schemas but also for another sections of spec with possibility to define extensions, like channels, operations etc.

ductaily · 2024-04-24T09:39:21Z

@ductaily Hi! Great work, but you shouldn't override the logic for Schema component, but for Extensions like in my #819 (comment) comment. By this you will be able to add extension not only for schemas but also for another sections of spec with possibility to define extensions, like channels, operations etc.

Hi, thank you for reviewing.
We don't understand the difference between our changes and how it would if we made the changes in the Extensions.tsx component.

import React, { useContext, useState } from 'react';

import { Schema } from './Schema';

import { SchemaHelpers } from '../helpers';
import { AsyncAPIDocumentInterface } from '@asyncapi/parser';
import { useConfig, useSpec } from '../contexts';
import { CollapseButton } from './CollapseButton';

interface Props {
  name?: string;
  item: any;
}

export interface ExtensionComponentProps<V = any> {
  propertyName: string;
  propertyValue: V;
  document: AsyncAPIDocumentInterface;
}

const SchemaContext = React.createContext({
  reverse: false,
});

export const Extensions: React.FunctionComponent<Props> = ({
  name = 'Extensions',
  item,
}) => {
  const { reverse } = useContext(SchemaContext);
  const [expanded, setExpanded] = useState(false);
  const [deepExpand, setDeepExpand] = useState(false);

  const config = useConfig();
  const document = useSpec();

  const extensions = SchemaHelpers.getCustomExtensions(item);
  if (!extensions || !Object.keys(extensions).length) {
    return null;
  }

  if (!config.extensions || !Object.keys(config.extensions).length) {
    const schema = SchemaHelpers.jsonToSchema(extensions);
    return (
      schema && (
        <div className="mt-2">
          <Schema schemaName={name} schema={schema} onlyTitle={true} />
        </div>
      )
    );
  }

  return (
    <div>
      <div className="flex py-2">
        <div className="min-w-1/4">
          <>
            <CollapseButton
              onClick={() => setExpanded(prev => !prev)}
              expanded={expanded}
            >
              <span className={`break-anywhere text-sm ${name}`}>{name}</span>
            </CollapseButton>
            <button
              type="button"
              onClick={() => setDeepExpand(prev => !prev)}
              className="ml-1 text-sm text-gray-500"
            >
              {deepExpand ? 'Collapse all' : 'Expand all'}
            </button>
          </>
        </div>
      </div>
      <div
        className={`rounded p-4 py-2 border bg-gray-100 ${
          reverse ? 'bg-gray-200' : ''
        } ${expanded ? 'block' : 'hidden'}`}
      >
        {Object.keys(extensions).map(extensionKey => {
          if (config.extensions && config.extensions[extensionKey]) {
            const CustomExtensionComponent = config.extensions[extensionKey];
            return (
              <CustomExtensionComponent
                propertyName={extensionKey}
                propertyValue={extensions[extensionKey]}
                document={document}
              />
            );
          } else {
            const extensionSchema = SchemaHelpers.jsonToSchema(
              extensions[extensionKey],
            );
            return (
              <div className="mt-2">
                <Schema schemaName={extensionKey} schema={extensionSchema} />
              </div>
            );
          }
        })}
      </div>
    </div>
  );
};

It would duplicate lots of logic of the Schema component.
Should we have a call?

asyncapi-bot · 2024-04-24T09:39:33Z

Hello, @ductaily! 👋🏼

    I'm 🧞🧞🧞 Genie 🧞🧞🧞 from the magic lamp. Looks like somebody needs a hand!

    At the moment the following comments are supported in pull requests:

    - `/please-take-a-look` or `/ptal` - This comment will add a comment to the PR asking for attention from the reviewrs who have not reviewed the PR yet.
    - `/ready-to-merge` or `/rtm` - This comment will trigger automerge of PR in case all required checks are green, approvals in place and do-not-merge label is not added
    - `/do-not-merge` or `/dnm` - This comment will block automerging even if all conditions are met and ready-to-merge label is added
    - `/autoupdate` or `/au` - This comment will add `autoupdate` label to the PR and keeps your PR up-to-date to the target branch's future changes. Unless there is a merge conflict or it is a draft PR. (Currently only works for upstream branches.)
    - `/update` or `/u` - This comment will update the PR with the latest changes from the target branch. Unless there is a merge conflict or it is a draft PR. NOTE: this only updates the PR once, so if you need to update again, you need to call the command again.

ductaily · 2024-04-24T09:43:50Z

/please-take-a-look

asyncapi-bot · 2024-04-24T09:44:03Z

@fmvilas @magicmatatjahu Please take a look at this PR. Thanks! 👋

magicmatatjahu · 2024-04-24T12:20:18Z

@ductaily Hi! From the perspective of code maybe it looks like the code duplication, but extensions are not a "extended" schemas, but separate sections of spec, so even if in code it's better to have new logic inside Schema component, from spec perspective (and user) is better to have separate component. Also, if you will add logic in Schema component, new logic will be executed for all schemas in spec. Atm we treat extensions as schemas - we don't have logic to render extensions in custom way so it was ok, now it is not. Also, some people uses the Schema component outside the AsyncAPI component in their code, so using useSpec and useConfig hooks (in my perspective) is not allowed - even if we will use default values for React context.

Next thing, I added (in my comment #819 (comment)) parent prop to the custom extension component not in vain. You can have extension with this same name in two different places, e.g. channel and operation objects and you should be able to write logic base on that info, if you operate on operation extension or channel extension or another one.

Also as I know, you can have a problem with circular references between extension. It's not a problem for extension because if extension allows to have circular refs, then author for custom component should focus on resolving that problem - still if extension won't have a custom component, then Schema component should render it and it should be handled (I see in your new example, and you handled that case).

A couple of comments for the new code:

please add that parent prop (you can pass item prop from ExtensionsProps)

render all extensions with custom components before all extensions without them, you can even put all rest extensions to single Schema and render it as:

const schema = SchemaHelpers.jsonToSchema(restExtensions);
return (
  schema && (
    <div className="mt-2">
      <Schema schemaName={name} schema={schema} onlyTitle={true} />
    </div>
  )
);

so you will end with less code.

If you will have a problems, lets us know!

pavelkornev · 2024-04-25T14:21:39Z

@magicmatatjahu

render all extensions with custom components before all extensions without them, you can even put all rest extensions to single Schema and render it as:

I would oppose to this requirement. It's better to sort extensions by name (alphabetically) and render in that order. In our use case (SAP) we have some fields with shared prefixes. Some of those fields will have a custom component and some won't. It would mean they will be rendered apart from each other.

Example:

x-sap-odm-entity-name (for this field we plan to have a custom component with a link to elsewhere from the field value)
x-sap-odm-oid (no need for a custom component)

Expected behaviour: both fields are rendered close to each other in UI.

…component

…er' into feat/custom-extension-value-render # Conflicts: # library/src/components/Extensions.tsx

magicmatatjahu · 2024-04-29T08:39:35Z

@pavelkornev HI! Sorry for delay!

I would oppose to this requirement. It's better to sort extensions by name (alphabetically) and render in that order. In our use case (SAP) we have some fields with shared prefixes. Some of those fields will have a custom component and some won't. It would mean they will be rendered apart from each other.

Ok, I understand :)

magicmatatjahu

Some things what I noticed. I have to also run that code locally and check some edge cases. Please update branch with latest changes. I hope it won't be a problem if I will have to change slighty the code in branch? But overall, great job! :)

library/src/components/Extensions.tsx

Co-authored-by: Maciej Urbańczyk <urbanczyk.maciej.95@gmail.com>

ductaily · 2024-04-30T07:38:08Z

I assume that docs, test and playground showcase is not here yet as you first what to have us look at implementation to give green light for more?

than please at least extend PR with default extensions components that are supported by react component by default? probably best if they are in new dir like /library/src/components/extensions. You can take x-x and x-linkedin as first official extensions under info object

@derberg I will add the docs, test and playground showcase.

Regarding your second comment just to clarify.
If I understood you correctly, you want to add in library/src/config/default.ts the following:

 ...
  extensions: {
    'x-x': DefaultExtensionComponent,
    'x-linkedin': DefaultExtensionComponent,
  },

Having something like library/src/components/supportedExtensionComponents/DefaultExtensionComponent.tsx with the content:

export default function DefaultExtensionComponent(
  props: ExtensionComponentProps,
) {
  return (
    <div className="mt-2">
      <div className="flex py-2">
        <div className="min-w-1/4 mr-2">
          <span className="break-anywhere text-sm italic">
            {props.propertyName}
          </span>
        </div>
        <div>
          <div className="text-sm prose">{props.propertyValue}</div>
        </div>
      </div>
    </div>
  );
}

Is that correct?

derberg · 2024-04-30T08:57:35Z

@ductaily not default component, but specific component for each extension, just like you will have probably some specific component for x-sap-odm-oid

so in case of x-x there is a component that renders X logo that is a clickable link pointing to twitter. Same with LinkedIn.

so they are default in a way they are included in the library, but still custom, if you know what I mean.

great is that they will be a nice, production showcase how to add extensions

pavelkornev · 2024-05-02T10:53:19Z

@derberg you mean to keep all extension components within this repo? We have use cases where we would need to set internal links, therefore we cannot commit such components to this public repo. I think both use cases can co-exist.

sonarqubecloud · 2024-06-12T07:23:51Z

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

sonarqubecloud · 2024-06-25T10:56:15Z

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

# Conflicts: # package-lock.json

…er' into feat/custom-extension-value-render

derberg · 2024-07-25T17:38:38Z

sorry for being late, we had some issues. Me and few other maintainers lost funding https://www.asyncapi.com/blog/2024-june-summary#postman-partnership-changes. Please join AsyncAPI Slack where you can ping me when you see an unusual delay on review

I am unsure how the changes for the Playground showcases should look like. Could you please guide me here

just add example x-x: AsyncAPISpec to https://github.com/asyncapi/asyncapi-react/blob/master/playground/specs/streetlights.ts so when playground is loaded, the example is showcased there and visible

also, once you do it, please add a screen shot to show where it can be found. I have to admit I quickly added it and could not locate where it is rendered

ductaily · 2024-07-31T13:04:39Z

sorry for being late, we had some issues. Me and few other maintainers lost funding https://www.asyncapi.com/blog/2024-june-summary#postman-partnership-changes. Please join AsyncAPI Slack where you can ping me when you see an unusual delay on review

I am unsure how the changes for the Playground showcases should look like. Could you please guide me here

just add example x-x: AsyncAPISpec to https://github.com/asyncapi/asyncapi-react/blob/master/playground/specs/streetlights.ts so when playground is loaded, the example is showcased there and visible

also, once you do it, please add a screen shot to show where it can be found. I have to admit I quickly added it and could not locate where it is rendered

Hey @derberg, thank you for the guidance :)
I added an example:

sonarqubecloud · 2024-07-31T13:05:23Z

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

derberg

the only problem is that x-x extension should be used only in info object level, not channel

https://github.com/asyncapi/extensions-catalog/blob/master/extensions/x.md

@magicmatatjahu can you also have a look please

pavelkornev · 2024-09-02T10:58:48Z

the only problem is that x-x extension should be used only in info object level, not channel

https://github.com/asyncapi/extensions-catalog/blob/master/extensions/x.md

@magicmatatjahu can you also have a look please

Custom extensions from Info block are not rendered by UI at all. We can replace the example with some other custom field. Which field can you recommend to use instead as an example?

sonarqubecloud · 2024-09-02T10:59:34Z

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

AceTheCreator · 2024-12-19T12:34:21Z

library/src/components/Extensions.tsx

 export const Extensions: React.FunctionComponent<Props> = ({
  name = 'Extensions',
  item,
 }) => {
+  const [expanded, setExpanded] = useState(false);
+  const [deepExpand, setDeepExpand] = useState(false);


This deepExpand is set but seems like an incomplete functionality. I think you should remove it if you don't see it adding any functionality to your changes.

I agree with you. I removed deepExpand.

AceTheCreator · 2024-12-19T12:37:59Z

library/src/components/Extensions.tsx

+export interface ExtensionComponentProps<V = any> {
+  propertyName: string;
+  propertyValue: V;
+  document: AsyncAPIDocumentInterface;
+  parent: BaseModel;
+}
+


You should probably move this to the types file.

I moved it into the types file

…er' into feat/custom-extension-value-render

sonarqubecloud · 2024-12-19T14:00:45Z

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

AceTheCreator · 2024-12-19T18:08:53Z

library/src/components/supportedExtensions/XExtension.tsx

+    <div
+      title={`https://x.com/${propertyValue}`}
+      style={{ display: 'inline-block' }}
+    >
+      <svg
+        onClick={onClickHandler}
+        style={{ cursor: 'pointer' }}
+        width="15px"
+        height="15px"
+        viewBox="0 0 1200 1227"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
+          fill="black"
+        />
+      </svg>
+    </div>


Out of curiosity why aren't we wrapping it an anchor tag?

AceTheCreator · 2024-12-19T18:09:46Z

library/src/components/supportedExtensions/XExtension.tsx

+  propertyValue,
+}: ExtensionComponentProps<string>) {
+  const onClickHandler = () => {
+    window.open(`https://x.com/${propertyValue}`, '_blank');


I think for best practices we should include the noopener,noreferrer attribute

Custom extension value render

db17606

ductaily requested review from magicmatatjahu, derberg, fmvilas and asyncapi-bot-eve as code owners April 22, 2024 16:46

github-actions bot reviewed Apr 22, 2024

View reviewed changes

ductaily changed the title ~~feat: Custom extension rendering~~ feat: custom extension rendering Apr 22, 2024

pavelkornev mentioned this pull request Apr 22, 2024

SwaggerEditor@next: does not render model extensions within SwaggerUI swagger-api/swagger-editor#4493

Open

derberg reviewed Apr 23, 2024

View reviewed changes

Merge branch 'master' into feat/custom-extension-value-render

a52c230

derberg mentioned this pull request Apr 25, 2024

MVP integration of extensions catalog with AsyncAPI tools to make extension catalog useful asyncapi/extensions-catalog#78

Closed

Duc Tai Ly added 3 commits April 25, 2024 16:33

Add parent to ExtensionComponentProps and move changes to Extensions …

22f07b3

…component

Merge remote-tracking branch 'origin/feat/custom-extension-value-rend…

18654d2

…er' into feat/custom-extension-value-render # Conflicts: # library/src/components/Extensions.tsx

Address Sonar issue

9b978b8

magicmatatjahu requested changes Apr 29, 2024

View reviewed changes

library/src/components/Extensions.tsx Outdated Show resolved Hide resolved

library/src/components/Extensions.tsx Outdated Show resolved Hide resolved

library/src/components/Extensions.tsx Outdated Show resolved Hide resolved

ductaily and others added 2 commits April 30, 2024 09:13

Merge branch 'master' into feat/custom-extension-value-render

de451e8

Apply suggestions from code review

13a8a6c

Co-authored-by: Maciej Urbańczyk <urbanczyk.maciej.95@gmail.com>

Clean up Extension class

23401a9

Merge branch 'refs/heads/master' into feat/custom-extension-value-render

6c4f19f

Merge branch 'master' into feat/custom-extension-value-render

979777d

Duc Tai Ly and others added 3 commits June 19, 2024 10:18

Update package-lock.json

a34f50a

Fix lint error

32cf262

Merge branch 'master' into feat/custom-extension-value-render

c630f89

Duc Tai Ly added 2 commits July 23, 2024 14:14

Merge branch 'refs/heads/master' into feat/custom-extension-value-render

eed70c4

# Conflicts: # package-lock.json

Merge remote-tracking branch 'origin/feat/custom-extension-value-rend…

350646a

…er' into feat/custom-extension-value-render

ductaily and others added 2 commits July 31, 2024 14:12

Merge branch 'master' into feat/custom-extension-value-render

d91df2a

Add x-x extensions example.

3e57a3f

Merge branch 'master' into feat/custom-extension-value-render

1740980

derberg reviewed Aug 1, 2024

View reviewed changes

Merge branch 'master' into feat/custom-extension-value-render

361a2c2

Merge branch 'master' into feat/custom-extension-value-render

aa7423b

Merge branch 'master' into feat/custom-extension-value-render

8384cd8

ductaily requested a review from AceTheCreator as a code owner December 16, 2024 16:47

ductaily requested review from magicmatatjahu and derberg December 17, 2024 09:05

Duc Tai Ly and others added 2 commits December 17, 2024 14:02

Add x-x extensions example in info component

3563ab1

Merge branch 'master' into feat/custom-extension-value-render

df932da

AceTheCreator requested changes Dec 19, 2024

View reviewed changes

Duc Tai Ly added 2 commits December 19, 2024 15:00

Address review comments

a25f1d2

Merge remote-tracking branch 'origin/feat/custom-extension-value-rend…

ec52216

…er' into feat/custom-extension-value-render

AceTheCreator reviewed Dec 19, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: custom extension rendering #994

feat: custom extension rendering #994

ductaily commented Apr 22, 2024

github-actions bot left a comment

derberg left a comment

magicmatatjahu commented Apr 23, 2024

ductaily commented Apr 24, 2024

asyncapi-bot commented Apr 24, 2024

ductaily commented Apr 24, 2024

asyncapi-bot commented Apr 24, 2024

magicmatatjahu commented Apr 24, 2024

pavelkornev commented Apr 25, 2024 •

edited

Loading

magicmatatjahu commented Apr 29, 2024

magicmatatjahu left a comment

ductaily commented Apr 30, 2024

derberg commented Apr 30, 2024

pavelkornev commented May 2, 2024

sonarqubecloud bot commented Jun 12, 2024

sonarqubecloud bot commented Jun 25, 2024

derberg commented Jul 25, 2024

ductaily commented Jul 31, 2024

sonarqubecloud bot commented Jul 31, 2024

derberg left a comment

pavelkornev commented Sep 2, 2024

sonarqubecloud bot commented Sep 2, 2024

AceTheCreator Dec 19, 2024

ductaily Dec 19, 2024

AceTheCreator Dec 19, 2024

ductaily Dec 19, 2024

sonarqubecloud bot commented Dec 19, 2024

AceTheCreator Dec 19, 2024

AceTheCreator Dec 19, 2024

feat: custom extension rendering #994

Are you sure you want to change the base?

feat: custom extension rendering #994

Conversation

ductaily commented Apr 22, 2024

github-actions bot left a comment

Choose a reason for hiding this comment

derberg left a comment

Choose a reason for hiding this comment

magicmatatjahu commented Apr 23, 2024

ductaily commented Apr 24, 2024

asyncapi-bot commented Apr 24, 2024

ductaily commented Apr 24, 2024

asyncapi-bot commented Apr 24, 2024

magicmatatjahu commented Apr 24, 2024

pavelkornev commented Apr 25, 2024 • edited Loading

magicmatatjahu commented Apr 29, 2024

magicmatatjahu left a comment

Choose a reason for hiding this comment

ductaily commented Apr 30, 2024

derberg commented Apr 30, 2024

pavelkornev commented May 2, 2024

sonarqubecloud bot commented Jun 12, 2024

Quality Gate passed

sonarqubecloud bot commented Jun 25, 2024

Quality Gate passed

derberg commented Jul 25, 2024

ductaily commented Jul 31, 2024

sonarqubecloud bot commented Jul 31, 2024

Quality Gate passed

derberg left a comment

Choose a reason for hiding this comment

pavelkornev commented Sep 2, 2024

sonarqubecloud bot commented Sep 2, 2024

Quality Gate passed

AceTheCreator Dec 19, 2024

Choose a reason for hiding this comment

ductaily Dec 19, 2024

Choose a reason for hiding this comment

AceTheCreator Dec 19, 2024

Choose a reason for hiding this comment

ductaily Dec 19, 2024

Choose a reason for hiding this comment

sonarqubecloud bot commented Dec 19, 2024

Quality Gate passed

AceTheCreator Dec 19, 2024

Choose a reason for hiding this comment

AceTheCreator Dec 19, 2024

Choose a reason for hiding this comment

pavelkornev commented Apr 25, 2024 •

edited

Loading