@redocly/theme 0.58.0-next.0 → 0.58.0-next.2

package/lib/components/Buttons/CopyButton.d.ts

@@ -17,5 +17,6 @@ export type CopyButtonProps = {
     fullWidth?: ButtonProps['fullWidth'];
     tone?: ButtonProps['tone'];
     extraClass?: ButtonProps['extraClass'];
+    iconPosition?: ButtonProps['iconPosition'];
 };
 export declare const CopyButton: React.NamedExoticComponent<CopyButtonProps>;

package/lib/components/Buttons/CopyButton.js

@@ -30,7 +30,7 @@ const hooks_1 = require("../../core/hooks");
 const Button_1 = require("../../components/Button/Button");
 const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
 const Tooltip_1 = require("../../components/Tooltip/Tooltip");
-function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', toasterText, toasterDuration, buttonText, onCopyClick, dataTestId = 'copy-button', className, variant = 'text', size = 'small', disabled, fullWidth, tone, extraClass, }) {
+function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', toasterText, toasterDuration, buttonText, onCopyClick, dataTestId = 'copy-button', className, variant = 'text', size = 'small', disabled, fullWidth, tone, extraClass, iconPosition, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const tooltip = (0, hooks_1.useControl)();
     const { translate } = useTranslate();
@@ -47,8 +47,8 @@ function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', to
         onCopyClick === null || onCopyClick === void 0 ? void 0 : onCopyClick(e);
     };
     return (react_1.default.createElement(Tooltip_1.Tooltip, { className: `copy-button ${className ? className : ''}`, tip: translate('codeSnippet.copy.buttonText', toasterText || 'Copied!'), isOpen: tooltip.isOpened, placement: toasterPlacement, width: "fit-content" },
-        react_1.default.createElement(Button_1.Button, { "data-component-name": "Buttons/CopyButton", onClick: (e) => copy(e, toasterDuration), "data-testid": dataTestId, icon: type === 'icon' || type === 'compound' ? react_1.default.createElement(CopyIcon_1.CopyIcon, null) : undefined, size: size, variant: variant, disabled: disabled, fullWidth: fullWidth, tone: tone, extraClass: extraClass }, (type === 'text' || type === 'compound') &&
-            translate('codeSnippet.copy.toasterText', buttonText || 'Copy'))));
+        react_1.default.createElement(Button_1.Button, { "data-component-name": "Buttons/CopyButton", onClick: (e) => copy(e, toasterDuration), "data-testid": dataTestId, icon: type === 'icon' || type === 'compound' ? react_1.default.createElement(CopyIcon_1.CopyIcon, null) : undefined, size: size, variant: variant, disabled: disabled, fullWidth: fullWidth, tone: tone, extraClass: extraClass, iconPosition: iconPosition }, (type === 'text' || type === 'compound') &&
+            (buttonText || translate('codeSnippet.copy.toasterText', 'Copy')))));
 }
 exports.CopyButton = (0, react_1.memo)(CopyButtonComponent);
 //# sourceMappingURL=CopyButton.js.map

package/lib/components/Catalog/Catalog.js

@@ -18,6 +18,19 @@ const FilterInput_1 = require("../../components/Filter/FilterInput");
 const CatalogViewModeToggle_1 = require("../../components/Catalog/CatalogViewModeToggle");
 const CatalogSortButton_1 = require("../../components/Catalog/CatalogSortButton");
 const CatalogEntities_1 = require("../../components/Catalog/CatalogEntities");
+const customCatalogOptionsCasing = (str) => {
+    if (!str)
+        return str;
+    const words = str.split(/[\s-_]+/);
+    return words
+        .map((word, index) => {
+        if (index === 0 && word.toLowerCase() === 'api') {
+            return 'API';
+        }
+        return word[0].toUpperCase() + word.slice(1).toLowerCase();
+    })
+        .join(' ');
+};
 function Catalog(props) {
     const { catalogConfig, entitiesTypes, initialEntitiesList, catalogSwitcherItems } = props;
     const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
@@ -25,7 +38,7 @@ function Catalog(props) {
     const { filters, searchQuery, setSearchQuery, filterQuery, sortOption, setSortOption, handleSortClick, isColumnSorted, viewMode, setViewMode, entitiesCounter, setEntitiesCounter, onChangeViewClick, onChangeCollapseSidebarClick, layout, collapsedSidebar, } = useCatalog(catalogConfig, (initialEntitiesList === null || initialEntitiesList === void 0 ? void 0 : initialEntitiesList.page.total) || 0);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(CatalogPageWrapper, { "data-component-name": "Catalog/Catalog" },
-            react_1.default.createElement(FiltersSidebar, { collapsed: collapsedSidebar, header: collapsedSidebar ? null : (react_1.default.createElement(CatalogSelector_1.CatalogSelector, { catalogSwitcherItems: catalogSwitcherItems, setSearchQuery: setSearchQuery, setSortOption: setSortOption })), menu: react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setSearchQuery, filters: filters, filterTerm: searchQuery, hideSearch: true, showCounter: false, filterValuesCasing: "sentence" }), footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),
+            react_1.default.createElement(FiltersSidebar, { collapsed: collapsedSidebar, header: collapsedSidebar ? null : (react_1.default.createElement(CatalogSelector_1.CatalogSelector, { catalogSwitcherItems: catalogSwitcherItems, setSearchQuery: setSearchQuery, setSortOption: setSortOption })), menu: react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setSearchQuery, filters: filters, filterTerm: searchQuery, hideSearch: true, showCounter: false, filterValuesCasing: customCatalogOptionsCasing }), footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),
             react_1.default.createElement(CatalogPageContent, null,
                 react_1.default.createElement(CatalogPageDescription, null,
                     react_1.default.createElement(CatalogTitleWrapper, null,
@@ -113,7 +126,6 @@ const CatalogPageWrapper = styled_components_1.default.div `
   }
 `;
 const CatalogPageDescription = styled_components_1.default.div `
-  margin: var(--catalog-heading-margin);
   display: var(--catalog-page-description-display-mobile);
 
   @media screen and (min-width: ${utils_1.breakpoints.medium}) {

package/lib/components/Catalog/CatalogEntitiesEmptyState.d.ts

@@ -1,6 +1,7 @@
 import { JSX } from 'react';
+import type { ListType } from '../../core/types';
 interface CatalogEntitiesEmptyStateProps {
-    listType?: 'default' | 'team';
+    listType?: ListType;
 }
 export declare function CatalogEntitiesEmptyState({ listType, }: CatalogEntitiesEmptyStateProps): JSX.Element;
 export {};

package/lib/components/Catalog/CatalogEntitiesEmptyState.js

@@ -7,21 +7,42 @@ exports.CatalogEntitiesEmptyState = CatalogEntitiesEmptyState;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const HexagonIcon_1 = require("../../icons/HexagonIcon/HexagonIcon");
-function CatalogEntitiesEmptyState({ listType = 'default', }) {
-    if (listType === 'team') {
-        return (react_1.default.createElement(EmptyStateWrapper, { "data-component-name": "Catalog/CatalogEntitiesEmptyState" },
-            react_1.default.createElement(EmptyStateIconWrapper, null,
-                react_1.default.createElement(HexagonIcon_1.HexagonIcon, { size: "21px", color: "var(--color-warm-grey-7)" })),
-            react_1.default.createElement(EmptyStateHeader, null, "No team members yet"),
-            react_1.default.createElement(EmptyStateText, null, "Your team members will appear here"),
-            react_1.default.createElement(EmptyStateText, null, "once they've been added to the team.")));
+const getEmptyStateContent = (listType) => {
+    switch (listType) {
+        case 'team':
+            return {
+                header: 'No team members yet',
+                paragraph1: 'Your team members will appear here',
+                paragraph2: "once they've been added to the team.",
+            };
+        case 'api-operation':
+            return {
+                header: 'No operations yet',
+                paragraph1: 'Your operations will appear here',
+                paragraph2: "once they've been added to the API description.",
+            };
+        case 'data-schema':
+            return {
+                header: 'No schemas yet',
+                paragraph1: 'Your schemas will appear here',
+                paragraph2: "once they've been added to the API description.",
+            };
+        default:
+            return {
+                header: 'No entities found',
+                paragraph1: 'Try adjusting your search criteria or',
+                paragraph2: 'check back later for new additions.',
+            };
     }
+};
+function CatalogEntitiesEmptyState({ listType = 'default', }) {
+    const { header, paragraph1, paragraph2 } = getEmptyStateContent(listType);
     return (react_1.default.createElement(EmptyStateWrapper, { "data-component-name": "Catalog/CatalogEntitiesEmptyState" },
         react_1.default.createElement(EmptyStateIconWrapper, null,
             react_1.default.createElement(HexagonIcon_1.HexagonIcon, { size: "21px", color: "var(--color-warm-grey-7)" })),
-        react_1.default.createElement(EmptyStateHeader, null, "No entities found"),
-        react_1.default.createElement(EmptyStateText, null, "Try adjusting your search criteria or"),
-        react_1.default.createElement(EmptyStateText, null, "check back later for new additions.")));
+        react_1.default.createElement(EmptyStateHeader, null, header),
+        react_1.default.createElement(EmptyStateText, null, paragraph1),
+        react_1.default.createElement(EmptyStateText, null, paragraph2)));
 }
 const EmptyStateWrapper = styled_components_1.default.div `
   display: flex;

package/lib/components/Catalog/CatalogEntity/CatalogEntity.d.ts

@@ -1,10 +1,6 @@
 import React from 'react';
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import type { BffCatalogEntity, BffCatalogRelatedEntityList } from '../../../core/types';
 export type CatalogEntityProps = {
-    entity: BffCatalogEntity;
-    entitiesCatalogConfig: EntitiesCatalogConfig;
-    catalogConfig: CatalogEntityConfig;
-    initialRelations: BffCatalogRelatedEntityList;
+    RedocSchema: React.ComponentType<any>;
+    StoreProvider: React.ComponentType<any>;
 };
-export declare function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRelations, }: CatalogEntityProps): React.JSX.Element;
+export declare function CatalogEntity({ RedocSchema, StoreProvider }: CatalogEntityProps): React.JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntity.js

@@ -18,20 +18,25 @@ const hooks_1 = require("../../../core/hooks");
 const CatalogEntitySchema_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntitySchema");
 const CatalogEntityMethodAndPath_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityMethodAndPath");
 const CatalogEntityRelationsGraph_lazy_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy");
-const renderEntityContent = (entity) => {
+const renderFirstColumnEntitySection = (entity) => {
     switch (entity.type) {
-        case 'data-schema':
-            return react_1.default.createElement(CatalogEntitySchema_1.CatalogEntitySchema, { entity: entity });
         case 'api-operation':
             return react_1.default.createElement(CatalogEntityMethodAndPath_1.CatalogEntityMethodAndPath, { entity: entity });
         default:
             return react_1.default.createElement(CatalogEntityMetadata_1.CatalogEntityMetadata, { entity: entity });
     }
 };
-function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRelations, }) {
+const renderDataSchemaSection = (entity, relatedEntity, RedocSchema, StoreProvider) => {
+    if (entity.type !== 'data-schema') {
+        return null;
+    }
+    return (react_1.default.createElement(CatalogEntitySchema_1.CatalogEntitySchema, { entity: entity, relatedEntity: relatedEntity, RedocSchema: RedocSchema, StoreProvider: StoreProvider }));
+};
+function CatalogEntity({ RedocSchema, StoreProvider }) {
     var _a;
-    const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useCatalog, usePageProps } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
+    const { entity, relations, catalogConfig, entitiesCatalogConfig, relatedEntity } = usePageProps();
     const linkToMainCatalog = `catalogs/${catalogConfig.slug}`;
     const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
     const { searchQuery, setSearchQuery } = useCatalog();
@@ -47,10 +52,11 @@ function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRe
                         react_1.default.createElement(react_router_dom_1.Route, { index: true, element: react_1.default.createElement(react_1.default.Fragment, null,
                                 react_1.default.createElement(CatalogPageDescription_1.CatalogPageDescription, { title: entity.title, description: (_a = entity.summary) !== null && _a !== void 0 ? _a : '', tag: entity.key }),
                                 react_1.default.createElement(CatalogEntityProperties_1.CatalogEntityProperties, { entity: entity }),
+                                renderDataSchemaSection(entity, relatedEntity, RedocSchema, StoreProvider),
                                 react_1.default.createElement(CatalogTwoColumnsSection, null,
-                                    renderEntityContent(entity),
+                                    renderFirstColumnEntitySection(entity),
                                     react_1.default.createElement(CatalogEntityLinks_1.CatalogEntityLinks, { entity: entity })),
-                                react_1.default.createElement(CatalogEntityRelations_1.CatalogEntityRelations, { entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, initialRelations: initialRelations, searchQuery: searchQuery, setSearchQuery: setSearchQuery })) }),
+                                react_1.default.createElement(CatalogEntityRelations_1.CatalogEntityRelations, { entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, initialRelations: relations, searchQuery: searchQuery, setSearchQuery: setSearchQuery })) }),
                         react_1.default.createElement(react_router_dom_1.Route, { path: "relations-graph", element: react_1.default.createElement(CatalogEntityRelationsGraph_lazy_1.CatalogEntityRelationsGraph, { entity: entity }) })))))));
 }
 const CatalogPageWrapper = styled_components_1.default.div `

package/lib/components/Catalog/CatalogEntity/CatalogEntityMetadata.js

@@ -58,12 +58,12 @@ function renderMetadataValue(value) {
 function CatalogEntityMetadata({ entity }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const _a = entity.metadata || {}, { schema } = _a, metadataToShow = __rest(_a, ["schema"]);
-    const metadata = Object.entries(metadataToShow);
+    const _a = entity.metadata || {}, { schema } = _a, metadata = __rest(_a, ["schema"]);
+    const metadataToShow = Object.entries(metadata).filter(([key]) => !(entity.type === 'api-description' && key === 'descriptionFile'));
     const [isOn, setIsOn] = (0, react_1.useState)(false);
-    const hasMoreItems = metadata.length > MAX_INITIAL_ITEMS;
-    const visibleMetadata = isOn ? metadata : metadata.slice(0, MAX_INITIAL_ITEMS);
-    if (!metadata.length) {
+    const hasMoreItems = metadataToShow.length > MAX_INITIAL_ITEMS;
+    const visibleMetadata = isOn ? metadataToShow : metadataToShow.slice(0, MAX_INITIAL_ITEMS);
+    if (!metadataToShow.length) {
         return null;
     }
     return (react_1.default.createElement(MetadataWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityMetadata" },
@@ -101,7 +101,7 @@ const ArrayWrapper = styled_components_1.default.div `
   flex-direction: column;
 `;
 const Heading = styled_components_1.default.h2 `
-  margin-bottom: var(--spacing-base);
+  margin-bottom: var(--spacing-sm);
   margin-top: 0;
   font-size: var(--catalog-metadata-heading-size);
 `;

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties.js

@@ -9,7 +9,6 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const EntityTypeProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty");
 const GitProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/GitProperty");
 const TagsProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty");
-const ApiDescriptionProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/ApiDescriptionProperty");
 const UserEmailProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/UserEmailProperty");
 const DomainsProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty");
 const OwnersProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty");
@@ -41,11 +40,6 @@ const propertyRenderers = [
         condition: (entity) => { var _a; return !!((_a = entity.tags) === null || _a === void 0 ? void 0 : _a.length); },
         component: TagsProperty_1.TagsProperty,
     },
-    {
-        key: 'api-description',
-        condition: (entity) => { var _a; return entity.type === 'api-description' && !!((_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.descriptionFile); },
-        component: ApiDescriptionProperty_1.ApiDescriptionProperty,
-    },
     {
         key: 'user-email',
         condition: (entity) => { var _a; return entity.type === 'user' && !!((_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.email); },
@@ -63,13 +57,15 @@ const propertyRenderers = [
     },
 ];
 function CatalogEntityProperties({ entity }) {
-    return (react_1.default.createElement(CatalogEntityPropertiesGridWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties" }, propertyRenderers
-        .filter((renderer) => renderer.condition(entity))
-        .map((renderer) => (react_1.default.createElement(renderer.component, { key: renderer.key + entity.id, entity: entity })))));
+    const renderers = propertyRenderers.filter((renderer) => renderer.condition(entity));
+    const gridTemplateColumns = [1, 2, 4].includes(renderers.length)
+        ? 'repeat(2, 1fr)'
+        : 'repeat(3, 1fr)';
+    return (react_1.default.createElement(CatalogEntityPropertiesGridWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties", gridTemplateColumns: gridTemplateColumns }, renderers.map((renderer) => (react_1.default.createElement(renderer.component, { key: renderer.key + entity.id, entity: entity })))));
 }
 const CatalogEntityPropertiesGridWrapper = styled_components_1.default.div `
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(325px, 1fr));
+  grid-template-columns: ${({ gridTemplateColumns }) => gridTemplateColumns};
   gap: var(--spacing-base);
 `;
 //# sourceMappingURL=CatalogEntityProperties.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty.js

@@ -14,6 +14,10 @@ function ContactProperty({ entity }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(SlackIcon_1.SlackIcon, null),
-                "Slack channels"), content: react_1.default.createElement(react_1.default.Fragment, null, channels === null || channels === void 0 ? void 0 : channels.map((channel) => (react_1.default.createElement(Tag_1.Tag, { key: channel.name, textTransform: "none", style: { backgroundColor: 'var(--bg-color)' } }, channel.name)))) })));
+                "Slack channels"), content: react_1.default.createElement(react_1.default.Fragment, null, channels === null || channels === void 0 ? void 0 : channels.map((channel) => (react_1.default.createElement(Tag_1.Tag, { key: channel.name, textTransform: "none", style: { backgroundColor: 'var(--bg-color)', cursor: 'pointer' }, onClick: () => {
+                    if (channel.url) {
+                        window.open(channel.url, '_blank');
+                    }
+                } }, channel.name)))) })));
 }
 //# sourceMappingURL=ContactProperty.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.d.ts

@@ -0,0 +1,23 @@
+import { JSX } from 'react';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
+export type CatalogEntityApiDescriptionRelationsProps = {
+    entity: BffCatalogEntity;
+    catalogConfig: CatalogEntityConfig;
+    entitiesCatalogConfig: EntitiesCatalogConfig;
+    relations: BffCatalogRelatedEntity[];
+    query: {
+        fetchNextPage: () => void;
+        isFetchingNextPage: boolean;
+        hasNextPage: boolean;
+    };
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    setFilter: (filter?: string) => void;
+    sortOption: SortOption | null;
+    setSortOption: (sortOption: SortOption | null) => void;
+    handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+    isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+    shouldShowLoadMore: boolean;
+};
+export declare function CatalogEntityApiDescriptionRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }: CatalogEntityApiDescriptionRelationsProps): JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityApiDescriptionRelations = CatalogEntityApiDescriptionRelations;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Tabs_1 = require("../../../../markdoc/components/Tabs/Tabs");
+const EntityTypeIcon_1 = require("../../../../icons/EntityTypeIcon/EntityTypeIcon");
+const CatalogEntityDefaultRelations_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations");
+const MoleculesIcon_1 = require("../../../../icons/MoleculesIcon/MoleculesIcon");
+const NetworkIcon_1 = require("../../../../icons/NetworkIcon/NetworkIcon");
+function CatalogEntityApiDescriptionRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
+    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations" },
+        react_1.default.createElement(Tabs_1.Tabs, { forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
+            react_1.default.createElement(TabItem, { label: "Operations", icon: react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, null), onClick: () => setFilter('type:api-operation') },
+                react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "operations-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false, listType: "api-operation" })),
+            react_1.default.createElement(TabItem, { label: "Schemas", icon: react_1.default.createElement(NetworkIcon_1.NetworkIcon, null), onClick: () => setFilter('type:data-schema') },
+                react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "schemas-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false, listType: "data-schema" })),
+            react_1.default.createElement(TabItem, { label: "Related entities", icon: react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null), onClick: () => setFilter('-type:api-operation,data-schema') },
+                react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "related-entities-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false })))));
+}
+const TabItem = styled_components_1.default.div `
+  padding: var(--spacing-sm);
+`;
+//# sourceMappingURL=CatalogEntityApiDescriptionRelations.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations.d.ts

@@ -1,5 +1,6 @@
 import { JSX } from 'react';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { ListType } from '../../../../core/types';
 import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
 export type CatalogEntityDefaultRelationsProps = {
     entity: BffCatalogEntity;
@@ -12,12 +13,12 @@ export type CatalogEntityDefaultRelationsProps = {
     };
     searchQuery: string;
     setSearchQuery: (query: string) => void;
-    setFilter: (filter: string) => void;
     sortOption: SortOption | null;
     setSortOption: (sortOption: SortOption | null) => void;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
     shouldShowLoadMore: boolean;
     shouldShowHeading?: boolean;
+    listType?: ListType;
 };
-export declare function CatalogEntityDefaultRelations({ entity, relations, query, searchQuery, setSearchQuery, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, shouldShowHeading, }: CatalogEntityDefaultRelationsProps): JSX.Element;
+export declare function CatalogEntityDefaultRelations({ entity, relations, query, searchQuery, setSearchQuery, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, shouldShowHeading, listType, }: CatalogEntityDefaultRelationsProps): JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations.js

@@ -33,8 +33,8 @@ const columns = [
         width: '1fr',
     },
 ];
-function CatalogEntityDefaultRelations({ entity, relations, query, searchQuery, setSearchQuery, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, shouldShowHeading = true, }) {
+function CatalogEntityDefaultRelations({ entity, relations, query, searchQuery, setSearchQuery, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, shouldShowHeading = true, listType, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations" },
-        react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { entity: entity, catalogConfig: catalogConfig, entitiesCatalogConfig: entitiesCatalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, heading: shouldShowHeading ? 'Related entities' : undefined, columns: columns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore })));
+        react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { entity: entity, catalogConfig: catalogConfig, entitiesCatalogConfig: entitiesCatalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, heading: shouldShowHeading ? 'Related entities' : undefined, columns: columns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: listType })));
 }
 //# sourceMappingURL=CatalogEntityDefaultRelations.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations.js

@@ -28,19 +28,25 @@ const react_1 = __importStar(require("react"));
 const hooks_1 = require("../../../../core/hooks");
 const CatalogEntityDefaultRelations_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations");
 const CatalogEntityTeamRelations_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations");
+const CatalogEntityApiDescriptionRelations_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations");
 const LOAD_MORE_THRESHOLD = 10;
 const ENTITY_DEFAULT_FILTERS = {
     team: 'type:user',
+    'api-description': 'type:api-operation',
 };
 function CatalogEntityRelations({ entity, entitiesCatalogConfig, initialRelations, catalogConfig, searchQuery, setSearchQuery, }) {
     const { useCatalogSort, useFetchCatalogEntitiesRelations } = (0, hooks_1.useThemeHooks)();
     const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
-    const [filter, setFilter] = (0, react_1.useState)();
+    const [filter, setFilter] = (0, react_1.useState)(ENTITY_DEFAULT_FILTERS[entity.type]);
+    (0, react_1.useEffect)(() => {
+        setFilter(ENTITY_DEFAULT_FILTERS[entity.key]);
+    }, [entity.key]);
     const { items: relations, query } = useFetchCatalogEntitiesRelations({
         entityKey: entity.key,
         search: searchQuery,
         sort: sortOption !== null && sortOption !== void 0 ? sortOption : undefined,
         filter: filter !== null && filter !== void 0 ? filter : ENTITY_DEFAULT_FILTERS[entity.type],
+        limit: 10,
     }, initialRelations);
     const shouldShowLoadMore = query.hasNextPage ||
         (query.isPlaceholderData && relations && relations.length >= LOAD_MORE_THRESHOLD);
@@ -48,9 +54,12 @@ function CatalogEntityRelations({ entity, entitiesCatalogConfig, initialRelation
         case 'team':
             return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations/CatalogEntityTeamRelations" },
                 react_1.default.createElement(CatalogEntityTeamRelations_1.CatalogEntityTeamRelations, { entity: entity, catalogConfig: catalogConfig, entitiesCatalogConfig: entitiesCatalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, setFilter: setFilter, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore })));
+        case 'api-description':
+            return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations/CatalogEntityApiDescriptionRelations" },
+                react_1.default.createElement(CatalogEntityApiDescriptionRelations_1.CatalogEntityApiDescriptionRelations, { entity: entity, catalogConfig: catalogConfig, entitiesCatalogConfig: entitiesCatalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, setFilter: setFilter, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore })));
         default:
             return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations/CatalogEntityDefaultRelations" },
-                react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { entity: entity, catalogConfig: catalogConfig, entitiesCatalogConfig: entitiesCatalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, setFilter: setFilter, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore })));
+                react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { entity: entity, catalogConfig: catalogConfig, entitiesCatalogConfig: entitiesCatalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore })));
     }
 }
 //# sourceMappingURL=CatalogEntityRelations.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.d.ts

@@ -1,5 +1,6 @@
 import { JSX } from 'react';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { ListType } from '../../../../core/types';
 import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
 import { CatalogColumn } from '../../../../components/Catalog/CatalogTableView/CatalogTableView';
 export type CatalogEntityRelationsTableProps = {
@@ -20,6 +21,6 @@ export type CatalogEntityRelationsTableProps = {
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
     shouldShowLoadMore: boolean;
-    listType?: 'default' | 'team';
+    listType?: ListType;
 };
 export declare function CatalogEntityRelationsTable({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, setSearchQuery, heading, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, }: CatalogEntityRelationsTableProps): JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.js

@@ -7,7 +7,7 @@ exports.CatalogEntityRelationsTable = CatalogEntityRelationsTable;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CatalogActionsRow_1 = require("../../../../components/Catalog/CatalogActionsRow");
-const CatalogEntityRelationsTableContent_1 = require("./CatalogEntityRelationsTableContent");
+const CatalogEntityRelationsTableContent_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent");
 function CatalogEntityRelationsTable({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, setSearchQuery, heading, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable" },
         heading && react_1.default.createElement(Heading, null, heading),

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent.d.ts

@@ -1,5 +1,6 @@
 import { JSX } from 'react';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { ListType } from '../../../../core/types';
 import { BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
 import { CatalogColumn } from '../../../../components/Catalog/CatalogTableView/CatalogTableView';
 export type CatalogEntityRelationsTableContentProps = {
@@ -17,6 +18,6 @@ export type CatalogEntityRelationsTableContentProps = {
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
     shouldShowLoadMore: boolean;
-    listType?: 'default' | 'team';
+    listType?: ListType;
 };
 export declare function CatalogEntityRelationsTableContent({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, }: CatalogEntityRelationsTableContentProps): JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.js

@@ -13,7 +13,6 @@ const Tag_1 = require("../../../../components/Tag/Tag");
 const CatalogEntityRelationsTable_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable");
 const CatalogUserEntityCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogUserEntityCell");
 const CatalogEntityDefaultRelations_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations");
-const CatalogEntityRelationCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogEntityRelationCell");
 const teamColumns = [
     {
         key: 'entity',
@@ -32,11 +31,6 @@ const teamColumns = [
         render: (entity) => { var _a, _b; return (((_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.role) ? react_1.default.createElement(Tag_1.Tag, null, (_b = entity.metadata) === null || _b === void 0 ? void 0 : _b.role) : null); },
         width: '2fr',
     },
-    {
-        key: 'relationType',
-        title: 'Relations',
-        render: (entity) => (react_1.default.createElement(CatalogEntityRelationCell_1.CatalogEntityRelationCell, { relationType: entity.relationType, relationRole: entity.relationRole })),
-    },
     {
         key: 'description',
         title: 'Description',
@@ -50,10 +44,10 @@ function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, set
             react_1.default.createElement(TabItem, { label: "Members", icon: react_1.default.createElement(PeopleIcon_1.PeopleIcon, null), onClick: () => setFilter('type:user') },
                 react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { key: "members-table", entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, columns: teamColumns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: "team" })),
             react_1.default.createElement(TabItem, { label: "Related entities", icon: react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null), onClick: () => setFilter('-type:user') },
-                react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "related-entities-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, setFilter: setFilter, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false })))));
+                react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "related-entities-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false })))));
 }
 const TabItem = styled_components_1.default.div `
-  padding: 12px;
+  padding: var(--spacing-sm);
 `;
 const EntityDescription = styled_components_1.default.div `
   font-size: var(--catalog-table-entity-summary-font-size);

package/lib/components/Catalog/CatalogEntity/CatalogEntitySchema.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
-import { BffCatalogEntity } from '../../../core/types';
+import { BffCatalogEntity, BffCatalogRelatedEntity } from '../../../core/types';
 export type CatalogEntitySchemaProps = {
     entity: BffCatalogEntity;
+    relatedEntity: BffCatalogRelatedEntity | null;
+    RedocSchema: React.ComponentType<any>;
+    StoreProvider: React.ComponentType<any>;
 };
-export declare function CatalogEntitySchema({ entity }: CatalogEntitySchemaProps): React.JSX.Element | null;
+export declare function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, }: CatalogEntitySchemaProps): React.JSX.Element;