fix: rewrite recursive checks (#2072)

Co-authored-by: Roman Hotsiy <[email protected]>

package.json

@@ -110,6 +110,7 @@
     "license-checker": "^25.0.1",
     "lodash.noop": "^3.0.1",
     "mobx": "^6.3.2",
+    "outdent": "^0.8.0",
     "prettier": "^2.3.2",
     "pretty-quick": "^3.0.0",
     "raf": "^3.4.1",
@@ -193,10 +194,12 @@
     "coveragePathIgnorePatterns": [
       "\\.d\\.ts$",
       "/benchmark/",
-      "/node_modules/"
+      "/node_modules/",
+      "src/services/__tests__/models/helpers.ts"
     ],
     "modulePathIgnorePatterns": [
-      "/benchmark/"
+      "/benchmark/",
+      "src/services/__tests__/models/helpers.ts"
     ],
     "snapshotSerializers": [
       "enzyme-to-json/serializer"

src/components/ContentItems/ContentItems.tsx

@@ -4,8 +4,8 @@ import * as React from 'react';
 import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
 import { AdvancedMarkdown } from '../Markdown/AdvancedMarkdown';
 import { H1, H2, MiddlePanel, Row, Section, ShareLink } from '../../common-elements';
-import { ContentItemModel } from '../../services/MenuBuilder';
-import { GroupModel, OperationModel } from '../../services/models';
+import type { ContentItemModel } from '../../services';
+import type { GroupModel, OperationModel } from '../../services/models';
 import { Operation } from '../Operation/Operation';
 
 @observer

src/components/Schema/RecursiveSchema.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+
+import { RecursiveLabel, TypeName, TypeTitle } from '../../common-elements/fields';
+import { l } from '../../services/Labels';
+import type { SchemaProps } from '.';
+
+export const RecursiveSchema = observer(({ schema }: SchemaProps) => {
+  return (
+    <div>
+      <TypeName>{schema.displayType}</TypeName>
+      {schema.title && <TypeTitle> {schema.title} </TypeTitle>}
+      <RecursiveLabel> {l('recursive')} </RecursiveLabel>
+    </div>
+  );
+});

src/components/Schema/Schema.tsx

@@ -1,16 +1,15 @@
 import { observer } from 'mobx-react';
 import * as React from 'react';
 
-import { RecursiveLabel, TypeName, TypeTitle } from '../../common-elements/fields';
 import { FieldDetails } from '../Fields/FieldDetails';
 
 import { FieldModel, SchemaModel } from '../../services/models';
 
 import { ArraySchema } from './ArraySchema';
 import { ObjectSchema } from './ObjectSchema';
 import { OneOfSchema } from './OneOfSchema';
+import { RecursiveSchema } from './RecursiveSchema';
 
-import { l } from '../../services/Labels';
 import { isArray } from '../../utils/helpers';
 
 export interface SchemaOptions {
@@ -36,13 +35,7 @@ export class Schema extends React.Component<Partial<SchemaProps>> {
     const { type, oneOf, discriminatorProp, isCircular } = schema;
 
     if (isCircular) {
-      return (
-        <div>
-          <TypeName>{schema.displayType}</TypeName>
-          {schema.title && <TypeTitle> {schema.title} </TypeTitle>}
-          <RecursiveLabel> {l('recursive')} </RecursiveLabel>
-        </div>
-      );
+      return <RecursiveSchema schema={schema} />;
     }
 
     if (discriminatorProp !== undefined) {
@@ -52,11 +45,14 @@ export class Schema extends React.Component<Partial<SchemaProps>> {
         );
         return null;
       }
-      return (
+      const activeSchema = oneOf[schema.activeOneOf];
+      return activeSchema.isCircular ? (
+        <RecursiveSchema schema={activeSchema} />
+      ) : (
         <ObjectSchema
           {...rest}
           level={level}
-          schema={oneOf![schema.activeOneOf]}
+          schema={activeSchema}
           discriminator={{
             fieldName: discriminatorProp,
             parentSchema: schema,

src/components/SearchBox/SearchBox.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
 
-import { IMenuItem } from '../../services/MenuStore';
-import { SearchStore } from '../../services/SearchStore';
-import { MenuItem } from '../SideMenu/MenuItem';
-
-import { MarkerService } from '../../services/MarkerService';
-import { SearchResult } from '../../services/SearchWorker.worker';
+import type { IMenuItem, SearchResult } from '../../services/types';
+import type { SearchStore } from '../../services/SearchStore';
+import type { MarkerService } from '../../services/MarkerService';
 
+import { MenuItem } from '../SideMenu/MenuItem';
 import { OptionsContext } from '../OptionsProvider';
 import { bind, debounce } from 'decko';
 import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar';

src/components/SideMenu/MenuItem.tsx

@@ -2,13 +2,14 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 
 import { ShelfIcon } from '../../common-elements/shelfs';
-import { IMenuItem, OperationModel } from '../../services';
+import { OperationModel } from '../../services';
 import { shortenHTTPVerb } from '../../utils/openapi';
 import { MenuItems } from './MenuItems';
 import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements';
 import { l } from '../../services/Labels';
 import { scrollIntoViewIfNeeded } from '../../utils';
 import { OptionsContext } from '../OptionsProvider';
+import type { IMenuItem } from '../../services';
 
 export interface MenuItemProps {
   item: IMenuItem;

src/components/SideMenu/MenuItems.tsx

@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react';
 import * as React from 'react';
 
-import { IMenuItem } from '../../services';
+import type { IMenuItem } from '../../services';
 
 import { MenuItem } from './MenuItem';
 import { MenuItemUl } from './styled.elements';

src/components/SideMenu/SideMenu.tsx

@@ -1,7 +1,8 @@
 import { observer } from 'mobx-react';
 import * as React from 'react';
 
-import { IMenuItem, MenuStore } from '../../services/MenuStore';
+import { MenuStore } from '../../services';
+import type { IMenuItem } from '../../services';
 import { OptionsContext } from '../OptionsProvider';
 import { MenuItems } from './MenuItems';