feat: add x-tags

src/components/SideMenu/MenuItem.tsx

@@ -49,7 +49,8 @@ export class MenuItem extends React.Component<MenuItemProps> {
           <OperationMenuItemContent {...this.props} item={item as OperationModel} />
         ) : (
           <MenuItemLabel depth={item.depth} active={item.active} type={item.type} ref={this.ref}>
-            <MenuItemTitle title={item.sidebarLabel}>
+            {item.type === 'schema' && <OperationBadge type="schema">schema</OperationBadge>}
+            <MenuItemTitle width="calc(100% - 38px)" title={item.sidebarLabel}>
               {item.sidebarLabel}
               {this.props.children}
             </MenuItemTitle>

src/components/SideMenu/styled.elements.ts

@@ -26,43 +26,47 @@ export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
   margin-top: 2px;
 
   &.get {
-    background-color: ${props => props.theme.colors.http.get};
+    background-color: ${({ theme }) => theme.colors.http.get};
   }
 
   &.post {
-    background-color: ${props => props.theme.colors.http.post};
+    background-color: ${({ theme }) => theme.colors.http.post};
   }
 
   &.put {
-    background-color: ${props => props.theme.colors.http.put};
+    background-color: ${({ theme }) => theme.colors.http.put};
   }
 
   &.options {
-    background-color: ${props => props.theme.colors.http.options};
+    background-color: ${({ theme }) => theme.colors.http.options};
   }
 
   &.patch {
-    background-color: ${props => props.theme.colors.http.patch};
+    background-color: ${({ theme }) => theme.colors.http.patch};
   }
 
   &.delete {
-    background-color: ${props => props.theme.colors.http.delete};
+    background-color: ${({ theme }) => theme.colors.http.delete};
   }
 
   &.basic {
-    background-color: ${props => props.theme.colors.http.basic};
+    background-color: ${({ theme }) => theme.colors.http.basic};
   }
 
   &.link {
-    background-color: ${props => props.theme.colors.http.link};
+    background-color: ${({ theme }) => theme.colors.http.link};
   }
 
   &.head {
-    background-color: ${props => props.theme.colors.http.head};
+    background-color: ${({ theme }) => theme.colors.http.head};
   }
 
   &.hook {
-    background-color: ${props => props.theme.colors.primary.main};
+    background-color: ${({ theme }) => theme.colors.primary.main};
+  }
+
+  &.schema {
+    background-color: ${({ theme }) => theme.colors.http.basic};
   }
 `;
 

src/services/MenuBuilder.ts

@@ -1,4 +1,4 @@
-import type { OpenAPISpec, OpenAPIPaths } from '../types';
+import type { OpenAPISpec, OpenAPIPaths, OpenAPITag, OpenAPISchema } from '../types';
 import { isOperationName, JsonPointer, alphabeticallyByProp } from '../utils';
 import { MarkdownRenderer } from './MarkdownRenderer';
 import { GroupModel, OperationModel } from './models';
@@ -137,7 +137,14 @@ export class MenuBuilder {
         continue;
       }
 
+      const relatedSchemas = this.getTagRelatedSchema({
+        parser,
+        tag,
+        parent: item,
+      });
+
       item.items = [
+        ...relatedSchemas,
         ...MenuBuilder.addMarkdownItems(tag.description || '', item, item.depth + 1, options),
         ...this.getOperationsItems(parser, item, tag, item.depth + 1, options),
       ];
@@ -248,4 +255,33 @@ export class MenuBuilder {
     }
     return tags;
   }
+
+  static getTagRelatedSchema({
+    parser,
+    tag,
+    parent,
+  }: {
+    parser: OpenAPIParser;
+    tag: TagInfo;
+    parent: GroupModel;
+  }): GroupModel[] {
+    return Object.entries(parser.spec.components?.schemas || {})
+      .map(([schemaName, schema]) => {
+        const schemaTags = schema['x-tags'];
+        if (!schemaTags?.includes(tag.name)) return null;
+
+        const item = new GroupModel(
+          'schema',
+          {
+            name: schemaName,
+            'x-displayName': `${(schema as OpenAPISchema).title || schemaName}`,
+            description: `<SchemaDefinition showWriteOnly={true} schemaRef="#/components/schemas/${schemaName}" />`,
+          } as OpenAPITag,
+          parent,
+        );
+        item.depth = parent.depth + 1;
+        return item;
+      })
+      .filter(Boolean) as GroupModel[];
+  }
 }

src/services/types.ts

@@ -83,7 +83,7 @@ export interface TagGroup {
   tags: string[];
 }
 
-export type MenuItemGroupType = 'group' | 'tag' | 'section';
+export type MenuItemGroupType = 'group' | 'tag' | 'section' | 'schema';
 export type MenuItemType = MenuItemGroupType | 'operation';
 
 export interface IMenuItem {