@redocly/theme 0.56.0-next.2 → 0.56.0-next.3

package/lib/core/types/search.d.ts

@@ -1,6 +1,6 @@
 import type { ItemBadge, REDOCLY_ROUTE_RBAC } from '@redocly/config';
 import type { ProductConfig } from '../../config';
-import type { AiSearchConversationRole } from '../../core/constants';
+import type { AiSearchConversationRole } from '../constants/search';
 export type OperationParameter = {
     name: string | string[];
     description: string | string[];

package/lib/core/types/sidebar.d.ts

@@ -1,5 +1,5 @@
 import type { REDOCLY_TEAMS_RBAC, REDOCLY_ROUTE_RBAC, MenuStyle, RbacScopeItems, ItemBadge } from '@redocly/config';
-import type { MenuItemType } from '../../core/constants';
+import type { MenuItemType } from '../constants/common';
 export type { MenuStyle } from '@redocly/config';
 export type SidebarNavItem = {
     label?: string;

package/lib/core/utils/download-code-walkthrough.js

@@ -15,21 +15,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.downloadCodeWalkthrough = downloadCodeWalkthrough;
 const file_saver_1 = require("file-saver");
 const jszip_1 = __importDefault(require("jszip"));
-const utils_1 = require("../../core/utils");
+const urls_1 = require("./urls");
+const find_closest_common_directory_1 = require("./find-closest-common-directory");
+const get_code_walkthrough_file_text_1 = require("./get-code-walkthrough-file-text");
 // https://github.com/Stuk/jszip/issues/196#issuecomment-69503828
 jszip_1.default.support.nodebuffer = false;
 function downloadCodeWalkthrough(files, state, inputsState) {
     return __awaiter(this, void 0, void 0, function* () {
         const zip = new jszip_1.default();
         const filePaths = files.map(({ path }) => path);
-        const commonClosestDirectory = (0, utils_1.findClosestCommonDirectory)(filePaths);
+        const commonClosestDirectory = (0, find_closest_common_directory_1.findClosestCommonDirectory)(filePaths);
         for (const file of files) {
-            const fileContent = (0, utils_1.getCodeWalkthroughFileText)(file, state, inputsState);
+            const fileContent = (0, get_code_walkthrough_file_text_1.getCodeWalkthroughFileText)(file, state, inputsState);
             if (commonClosestDirectory === '/') {
                 zip.file(file.path, fileContent);
             }
             else {
-                const filePath = file.path.replace((0, utils_1.removeLeadingSlash)(`${commonClosestDirectory}/`), '');
+                const filePath = file.path.replace((0, urls_1.removeLeadingSlash)(`${commonClosestDirectory}/`), '');
                 zip.file(filePath, fileContent);
             }
         }

package/lib/core/utils/get-code-walkthrough-file-text.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCodeWalkthroughFileText = getCodeWalkthroughFileText;
-const utils_1 = require("../../core/utils");
+const match_code_walkthrough_conditions_1 = require("./match-code-walkthrough-conditions");
+const replace_inputs_with_value_1 = require("./replace-inputs-with-value");
 function getCodeWalkthroughFileText(file, state, inputsState) {
     var _a;
     const contentChunks = (_a = file === null || file === void 0 ? void 0 : file.content.flatMap((node) => getChunkText(node, state, inputsState))) !== null && _a !== void 0 ? _a : [];
@@ -9,11 +10,11 @@ function getCodeWalkthroughFileText(file, state, inputsState) {
 }
 function getChunkText(node, state, inputsState) {
     if (typeof node === 'string') {
-        const replacedNode = (0, utils_1.replaceInputsWithValue)(node, inputsState);
+        const replacedNode = (0, replace_inputs_with_value_1.replaceInputsWithValue)(node, inputsState);
         return [replacedNode];
     }
     else {
-        if (!(0, utils_1.matchCodeWalkthroughConditions)(node.condition || {}, state)) {
+        if (!(0, match_code_walkthrough_conditions_1.matchCodeWalkthroughConditions)(node.condition || {}, state)) {
             return [];
         }
         return node.children.flatMap((child) => getChunkText(child, state, inputsState));

package/lib/core/utils/index.d.ts

@@ -1,35 +1,35 @@
-export * from '../../core/utils/clipboard-service';
-export * from '../../core/utils/css-variables';
-export * from '../../core/utils/add-line-numbers';
-export * from '../../core/utils/media-css';
-export * from '../../core/utils/theme-helpers';
-export * from '../../core/utils/class-names';
-export * from '../../core/utils/args-typecheck';
-export * from '../../core/utils/color';
-export * from '../../core/utils/urls';
-export * from '../../core/utils/js-utils';
-export * from '../../core/utils/tags-parser';
-export * from '../../core/utils/text-transform';
-export * from '../../core/utils/dom';
-export * from '../../core/utils/markdoc';
-export * from '../../core/utils/attribute-parser';
-export * from '../../core/utils/type-guards';
-export * from '../../core/utils/dom';
-export * from '../../core/utils/toc';
-export * from '../../core/utils/menu';
-export * from '../../core/utils/load-and-navigate';
-export * from '../../core/utils/get-scorecard-color-variable';
-export * from '../../core/utils/change-text-casing';
-export * from '../../core/utils/format-date-without-timezone';
-export * from '../../core/utils/details';
-export * from '../../core/utils/get-navbar-element';
-export * from '../../core/utils/with-load-progress';
-export * from '../../core/utils/text-trimmer';
-export * from '../../core/utils/get-code-walkthrough-file-text';
-export * from '../../core/utils/download-code-walkthrough';
-export * from '../../core/utils/get-file-icon';
-export * from '../../core/utils/match-code-walkthrough-conditions';
-export * from '../../core/utils/replace-inputs-with-value';
-export * from '../../core/utils/find-closest-common-directory';
-export * from '../../core/utils/get-user-agent';
-export * from '../../core/utils/parse-style-string';
+export * from './clipboard-service';
+export * from './css-variables';
+export * from './add-line-numbers';
+export * from './media-css';
+export * from './theme-helpers';
+export * from './class-names';
+export * from './args-typecheck';
+export * from './color';
+export * from './urls';
+export * from './js-utils';
+export * from './tags-parser';
+export * from './text-transform';
+export * from './dom';
+export * from './markdoc';
+export * from './attribute-parser';
+export * from './type-guards';
+export * from './dom';
+export * from './toc';
+export * from './menu';
+export * from './load-and-navigate';
+export * from './get-scorecard-color-variable';
+export * from './change-text-casing';
+export * from './format-date-without-timezone';
+export * from './details';
+export * from './get-navbar-element';
+export * from './with-load-progress';
+export * from './text-trimmer';
+export * from './get-code-walkthrough-file-text';
+export * from './download-code-walkthrough';
+export * from './get-file-icon';
+export * from './match-code-walkthrough-conditions';
+export * from './replace-inputs-with-value';
+export * from './find-closest-common-directory';
+export * from './get-user-agent';
+export * from './parse-style-string';

package/lib/core/utils/index.js

@@ -14,39 +14,39 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("../../core/utils/clipboard-service"), exports);
-__exportStar(require("../../core/utils/css-variables"), exports);
-__exportStar(require("../../core/utils/add-line-numbers"), exports);
-__exportStar(require("../../core/utils/media-css"), exports);
-__exportStar(require("../../core/utils/theme-helpers"), exports);
-__exportStar(require("../../core/utils/class-names"), exports);
-__exportStar(require("../../core/utils/args-typecheck"), exports);
-__exportStar(require("../../core/utils/color"), exports);
-__exportStar(require("../../core/utils/urls"), exports);
-__exportStar(require("../../core/utils/js-utils"), exports);
-__exportStar(require("../../core/utils/tags-parser"), exports);
-__exportStar(require("../../core/utils/text-transform"), exports);
-__exportStar(require("../../core/utils/dom"), exports);
-__exportStar(require("../../core/utils/markdoc"), exports);
-__exportStar(require("../../core/utils/attribute-parser"), exports);
-__exportStar(require("../../core/utils/type-guards"), exports);
-__exportStar(require("../../core/utils/dom"), exports);
-__exportStar(require("../../core/utils/toc"), exports);
-__exportStar(require("../../core/utils/menu"), exports);
-__exportStar(require("../../core/utils/load-and-navigate"), exports);
-__exportStar(require("../../core/utils/get-scorecard-color-variable"), exports);
-__exportStar(require("../../core/utils/change-text-casing"), exports);
-__exportStar(require("../../core/utils/format-date-without-timezone"), exports);
-__exportStar(require("../../core/utils/details"), exports);
-__exportStar(require("../../core/utils/get-navbar-element"), exports);
-__exportStar(require("../../core/utils/with-load-progress"), exports);
-__exportStar(require("../../core/utils/text-trimmer"), exports);
-__exportStar(require("../../core/utils/get-code-walkthrough-file-text"), exports);
-__exportStar(require("../../core/utils/download-code-walkthrough"), exports);
-__exportStar(require("../../core/utils/get-file-icon"), exports);
-__exportStar(require("../../core/utils/match-code-walkthrough-conditions"), exports);
-__exportStar(require("../../core/utils/replace-inputs-with-value"), exports);
-__exportStar(require("../../core/utils/find-closest-common-directory"), exports);
-__exportStar(require("../../core/utils/get-user-agent"), exports);
-__exportStar(require("../../core/utils/parse-style-string"), exports);
+__exportStar(require("./clipboard-service"), exports);
+__exportStar(require("./css-variables"), exports);
+__exportStar(require("./add-line-numbers"), exports);
+__exportStar(require("./media-css"), exports);
+__exportStar(require("./theme-helpers"), exports);
+__exportStar(require("./class-names"), exports);
+__exportStar(require("./args-typecheck"), exports);
+__exportStar(require("./color"), exports);
+__exportStar(require("./urls"), exports);
+__exportStar(require("./js-utils"), exports);
+__exportStar(require("./tags-parser"), exports);
+__exportStar(require("./text-transform"), exports);
+__exportStar(require("./dom"), exports);
+__exportStar(require("./markdoc"), exports);
+__exportStar(require("./attribute-parser"), exports);
+__exportStar(require("./type-guards"), exports);
+__exportStar(require("./dom"), exports);
+__exportStar(require("./toc"), exports);
+__exportStar(require("./menu"), exports);
+__exportStar(require("./load-and-navigate"), exports);
+__exportStar(require("./get-scorecard-color-variable"), exports);
+__exportStar(require("./change-text-casing"), exports);
+__exportStar(require("./format-date-without-timezone"), exports);
+__exportStar(require("./details"), exports);
+__exportStar(require("./get-navbar-element"), exports);
+__exportStar(require("./with-load-progress"), exports);
+__exportStar(require("./text-trimmer"), exports);
+__exportStar(require("./get-code-walkthrough-file-text"), exports);
+__exportStar(require("./download-code-walkthrough"), exports);
+__exportStar(require("./get-file-icon"), exports);
+__exportStar(require("./match-code-walkthrough-conditions"), exports);
+__exportStar(require("./replace-inputs-with-value"), exports);
+__exportStar(require("./find-closest-common-directory"), exports);
+__exportStar(require("./get-user-agent"), exports);
+__exportStar(require("./parse-style-string"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/utils/load-and-navigate.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadAndNavigate = loadAndNavigate;
-const utils_1 = require("../../core/utils");
+const with_load_progress_1 = require("./with-load-progress");
 let lastNavigatedPath;
 // this is copy from portal/src/client/app/utils/loadAndNavigate.ts, for case when we need to run Redoc without Realm
 function loadAndNavigate(_a) {
@@ -20,7 +20,7 @@ function loadAndNavigate(_a) {
         const { pathname, hash, search } = new URL(to, window.location.origin + window.location.pathname);
         // use window-shared loader instead of importing to prevent circular import issue
         const loader = window['__LOADER'];
-        const result = yield (0, utils_1.withLoadProgress)(loader.tryLoad(pathname));
+        const result = yield (0, with_load_progress_1.withLoadProgress)(loader.tryLoad(pathname));
         // @ts-ignore
         if (result === null || result === void 0 ? void 0 : result.redirectTo) {
             // @ts-ignore

package/lib/core/utils/match-code-walkthrough-conditions.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.matchCodeWalkthroughConditions = matchCodeWalkthroughConditions;
-const utils_1 = require("../../core/utils");
+const type_guards_1 = require("./type-guards");
 function matchCodeWalkthroughConditions(conditions = {}, state) {
     const { when, unless } = conditions;
     function evaluateCondition(key, value) {
@@ -12,10 +12,10 @@ function matchCodeWalkthroughConditions(conditions = {}, state) {
         }
         return stateValue === value;
     }
-    const matchesWhen = (0, utils_1.isObject)(when)
+    const matchesWhen = (0, type_guards_1.isObject)(when)
         ? Object.entries(when).every(([key, value]) => evaluateCondition(key, value))
         : true;
-    const matchesUnless = (0, utils_1.isObject)(unless)
+    const matchesUnless = (0, type_guards_1.isObject)(unless)
         ? Object.entries(unless).some(([key, value]) => evaluateCondition(key, value))
         : false;
     return matchesWhen && !matchesUnless;

package/lib/core/utils/menu.d.ts

@@ -1,7 +1,8 @@
 import type { ResolvedNavItem, Version } from '@redocly/config';
 import type { Location } from 'react-router-dom';
-import { type Locale, type TFunction, type ItemState } from '../../core/types';
-import { MenuItemType } from '../../core/constants';
+import { type Locale, type TFunction } from '../types/l10n';
+import { type ItemState } from '../types/sidebar';
+import { MenuItemType } from '../constants/common';
 export declare const mapNavbarItems: (items: ResolvedNavItem[], defaultLocale: string, currentLocale: string, locales: Locale[], location: Location) => ItemState[];
 export declare const isItemActive: (item: ResolvedNavItem, defaultLocale: string, currentLocale: string, locales: Locale[], location: Location) => boolean;
 export declare const buildLanguagesGroup: (locales: Locale[], defaultLocale: string, currentLocale: string) => ResolvedNavItem | undefined;

package/lib/core/utils/menu.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildVersionSection = exports.buildLanguagesGroup = exports.isItemActive = exports.mapNavbarItems = void 0;
 exports.getMenuItemType = getMenuItemType;
-const utils_1 = require("../../core/utils");
-const constants_1 = require("../../core/constants");
+const common_1 = require("../constants/common");
+const urls_1 = require("./urls");
 const TRANSLATION_KEYS = {
     version: 'mobileMenu.version',
 };
@@ -21,8 +21,8 @@ const isItemActive = (item, defaultLocale, currentLocale, locales, location) =>
     const pathHash = location.pathname + location.hash;
     const link = item.languageInsensitive
         ? item.link || ''
-        : (0, utils_1.getPathnameForLocale)(item.link || '/', defaultLocale, currentLocale, locales);
-    return pathHash === (0, utils_1.withPathPrefix)(link);
+        : (0, urls_1.getPathnameForLocale)(item.link || '/', defaultLocale, currentLocale, locales);
+    return pathHash === (0, urls_1.withPathPrefix)(link);
 };
 exports.isItemActive = isItemActive;
 const buildLanguagesGroup = (locales, defaultLocale, currentLocale) => {
@@ -36,7 +36,7 @@ const buildLanguagesGroup = (locales, defaultLocale, currentLocale) => {
         items: locales
             .filter((locale) => locale.code !== currentLocale)
             .map((locale) => {
-            const newLangPathname = (0, utils_1.getPathnameForLocale)((0, utils_1.withoutPathPrefix)(location.pathname), defaultLocale, locale.code, locales);
+            const newLangPathname = (0, urls_1.getPathnameForLocale)((0, urls_1.withoutPathPrefix)(location.pathname), defaultLocale, locale.code, locales);
             const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
             return {
                 type: 'link',
@@ -76,19 +76,19 @@ const buildVersionSection = (translate, versions, activeVersion) => {
 exports.buildVersionSection = buildVersionSection;
 function getMenuItemType(item) {
     var _a, _b;
-    if (item.type === constants_1.MenuItemType.Separator) {
-        return constants_1.MenuItemType.Separator;
+    if (item.type === common_1.MenuItemType.Separator) {
+        return common_1.MenuItemType.Separator;
     }
     else if (item.menuStyle === 'drilldown') {
-        return constants_1.MenuItemType.DrillDown;
+        return common_1.MenuItemType.DrillDown;
     }
-    else if (((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) || (item.type === constants_1.MenuItemType.Group && ((_b = item.items) === null || _b === void 0 ? void 0 : _b.length))) {
-        return constants_1.MenuItemType.Group;
+    else if (((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) || (item.type === common_1.MenuItemType.Group && ((_b = item.items) === null || _b === void 0 ? void 0 : _b.length))) {
+        return common_1.MenuItemType.Group;
     }
     else if (item.httpVerb) {
-        return constants_1.MenuItemType.Operation;
+        return common_1.MenuItemType.Operation;
     }
     else
-        return constants_1.MenuItemType.Default;
+        return common_1.MenuItemType.Default;
 }
 //# sourceMappingURL=menu.js.map

package/lib/core/utils/toc.d.ts

@@ -1,4 +1,4 @@
-import type { MdHeading } from '../../core/types';
+import type { MdHeading } from '../types/markdown';
 export declare function getDisplayedHeadings(headings: Array<MdHeading | null> | null | undefined, tocDepth: number): Array<MdHeading | null>;
 export declare function getDisplayedHeadingsIds(headings: Array<MdHeading | null> | null | undefined): Array<string | undefined>;
 export declare function getLeastDepth(headings: Array<MdHeading | null> | null | undefined): number;

package/lib/core/utils/type-guards.d.ts

@@ -3,7 +3,7 @@ export declare function isUndefined<T>(value: T | undefined): value is undefined
 export declare function isNull<T>(value: T | null): value is null;
 export declare function isString<T>(value: T | string): value is string;
 export declare function isNotNull<T>(value: T): value is NonNullable<T>;
-export declare const isObject: (item: unknown) => item is object;
+export declare function isObject(item: unknown): item is object;
 export declare const isNavLinkItem: (item: ResolvedNavItem) => item is ResolvedNavLinkItem;
 export declare const isFromToSelectedOptions: (options: unknown) => options is {
     from: string;

package/lib/core/utils/type-guards.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isFromToSelectedOptions = exports.isNavLinkItem = exports.isObject = void 0;
+exports.isFromToSelectedOptions = exports.isNavLinkItem = void 0;
 exports.isUndefined = isUndefined;
 exports.isNull = isNull;
 exports.isString = isString;
 exports.isNotNull = isNotNull;
+exports.isObject = isObject;
 function isUndefined(value) {
     return value === undefined;
 }
@@ -17,16 +18,15 @@ function isString(value) {
 function isNotNull(value) {
     return !isNull(value);
 }
-const isObject = (item) => {
+function isObject(item) {
     return isNotNull(item) && typeof item === 'object';
-};
-exports.isObject = isObject;
+}
 const isNavLinkItem = (item) => {
     return item.link !== undefined;
 };
 exports.isNavLinkItem = isNavLinkItem;
 const isFromToSelectedOptions = (options) => {
-    return (0, exports.isObject)(options) && 'from' in options && 'to' in options;
+    return isObject(options) && 'from' in options && 'to' in options;
 };
 exports.isFromToSelectedOptions = isFromToSelectedOptions;
 //# sourceMappingURL=type-guards.js.map

package/lib/core/utils/urls.d.ts

@@ -1,4 +1,4 @@
-import type { Locale } from '../../core/types';
+import type { Locale } from '../types/l10n';
 export declare function combineUrls(baseURL: string, ...relativeURLs: (string | undefined)[]): string;
 export declare function withPathPrefix(url: string): string;
 export declare function withoutPathPrefix(pathname: string): string;

package/lib/core/utils/urls.js

@@ -14,7 +14,7 @@ exports.slash = slash;
 exports.addTrailingSlash = addTrailingSlash;
 exports.getPathnameForLocale = getPathnameForLocale;
 exports.getLocaleFromPathname = getLocaleFromPathname;
-const constants_1 = require("../../core/constants");
+const common_1 = require("../constants/common");
 function combineUrls(baseURL, ...relativeURLs) {
     let res = baseURL;
     for (let relativeURL of relativeURLs) {
@@ -107,7 +107,7 @@ function getPathnameForLocale(originalPathname, defaultLocale, newLocale, allLoc
  * @param allLocales - Array of all available locales to check against
  * @returns The locale code from the pathname, or the default locale if none found
  */
-function getLocaleFromPathname(pathname, defaultLocale = constants_1.DEFAULT_LOCALE_PLACEHOLDER, allLocales = []) {
+function getLocaleFromPathname(pathname, defaultLocale = common_1.DEFAULT_LOCALE_PLACEHOLDER, allLocales = []) {
     const maybeLocale = pathname === null || pathname === void 0 ? void 0 : pathname.split('/')[1];
     const locale = allLocales.find((locale) => locale.code.toLowerCase() === maybeLocale);
     return (locale === null || locale === void 0 ? void 0 : locale.code) || defaultLocale;

package/lib/markdoc/components/Tabs/TabList.js

@@ -51,6 +51,8 @@ function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, on
                         el.setAttribute('data-animating', isAnimating.toString());
                     }
                 }, onKeyDown: (event) => handleKeyboard(event, index), onClick: () => {
+                    var _a, _b;
+                    (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
                     onTabClick(label);
                 } }));
         }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.56.0-next.2",
+  "version": "0.56.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations.tsx

@@ -15,6 +15,7 @@ import {
 import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';
+import { CatalogEntityRelationCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityRelationCell';
 
 const columns: CatalogColumn<BffCatalogRelatedEntity>[] = [
   {
@@ -23,6 +24,7 @@ const columns: CatalogColumn<BffCatalogRelatedEntity>[] = [
     render: (entity) => <CatalogEntityCell entity={entity} />,
     sortable: true,
     sortKey: 'title',
+    width: '2.5fr',
   },
   {
     key: 'type',
@@ -34,6 +36,18 @@ const columns: CatalogColumn<BffCatalogRelatedEntity>[] = [
     ),
     sortable: true,
     sortKey: 'type',
+    width: '1fr',
+  },
+  {
+    key: 'relationType',
+    title: 'Relations',
+    render: (entity) => (
+      <CatalogEntityRelationCell
+        relationType={entity.relationType}
+        relationRole={entity.relationRole}
+      />
+    ),
+    width: '1fr',
   },
 ];
 
@@ -48,6 +62,7 @@ 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;

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations.tsx

@@ -1,4 +1,4 @@
-import React, { JSX } from 'react';
+import React, { JSX, useState } from 'react';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
 import { BffCatalogEntity, BffCatalogRelatedEntityList } from '@redocly/theme/core/types';
@@ -13,6 +13,9 @@ export type CatalogEntityRelationsProps = {
   initialRelations: BffCatalogRelatedEntityList;
 };
 const LOAD_MORE_THRESHOLD = 10;
+const ENTITY_DEFAULT_FILTERS: Record<string, string> = {
+  team: 'type:user',
+};
 
 export function CatalogEntityRelations({
   entity,
@@ -23,9 +26,10 @@ export function CatalogEntityRelations({
   const { useCatalogSort, useCatalogSearch, useFetchCatalogEntitiesRelations } = useThemeHooks();
   const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
   const { searchQuery, setSearchQuery } = useCatalogSearch();
+  const [filter, setFilter] = useState<string>(ENTITY_DEFAULT_FILTERS[entity.type] ?? '');
 
   const { items: relations, query } = useFetchCatalogEntitiesRelations(
-    { entityKey: entity.key, search: searchQuery, sort: sortOption ?? undefined },
+    { entityKey: entity.key, search: searchQuery, sort: sortOption ?? undefined, filter },
     initialRelations,
   );
 
@@ -49,6 +53,7 @@ export function CatalogEntityRelations({
             query={query}
             searchQuery={searchQuery}
             setSearchQuery={setSearchQuery}
+            setFilter={setFilter}
             sortOption={sortOption}
             setSortOption={setSortOption}
             handleSortClick={handleSortClick}
@@ -68,6 +73,7 @@ export function CatalogEntityRelations({
             query={query}
             searchQuery={searchQuery}
             setSearchQuery={setSearchQuery}
+            setFilter={setFilter}
             sortOption={sortOption}
             setSortOption={setSortOption}
             handleSortClick={handleSortClick}

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.tsx

@@ -24,7 +24,6 @@ export type CatalogEntityRelationsTableProps = {
   searchQuery: string;
   setSearchQuery: (query: string) => void;
   heading: string;
-  filter?: string;
   columns: CatalogColumn<BffCatalogRelatedEntity>[];
   sortOption: SortOption | null;
   setSortOption: (sortOption: SortOption | null) => void;

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.tsx

@@ -11,6 +11,7 @@ import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';
 import { CatalogUserEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogUserEntityCell';
 import { CatalogEntityDefaultRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations';
+import { CatalogEntityRelationCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityRelationCell';
 
 const teamColumns: CatalogColumn<BffCatalogRelatedEntity>[] = [
   {
@@ -29,6 +30,16 @@ const teamColumns: CatalogColumn<BffCatalogRelatedEntity>[] = [
     render: (entity) => (entity.metadata?.role ? <Tag>{entity.metadata?.role}</Tag> : null),
     width: '2fr',
   },
+  {
+    key: 'relationType',
+    title: 'Relations',
+    render: (entity) => (
+      <CatalogEntityRelationCell
+        relationType={entity.relationType}
+        relationRole={entity.relationRole}
+      />
+    ),
+  },
   {
     key: 'description',
     title: 'Description',
@@ -49,6 +60,7 @@ export type CatalogEntityTeamRelationsProps = {
   };
   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;
@@ -62,6 +74,7 @@ export function CatalogEntityTeamRelations({
   query,
   searchQuery,
   setSearchQuery,
+  setFilter,
   entitiesCatalogConfig,
   catalogConfig,
   sortOption,
@@ -73,7 +86,7 @@ export function CatalogEntityTeamRelations({
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations">
       <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
-        <TabItem label="Members" icon={<PeopleIcon />}>
+        <TabItem label="Members" icon={<PeopleIcon />} onClick={() => setFilter('type:user')}>
           <CatalogEntityRelationsTable
             entity={entity}
             entitiesCatalogConfig={entitiesCatalogConfig}
@@ -83,7 +96,6 @@ export function CatalogEntityTeamRelations({
             searchQuery={searchQuery}
             setSearchQuery={setSearchQuery}
             heading="Members"
-            filter="type:user"
             columns={teamColumns}
             sortOption={sortOption}
             setSortOption={setSortOption}
@@ -92,13 +104,14 @@ export function CatalogEntityTeamRelations({
             shouldShowLoadMore={shouldShowLoadMore}
           />
         </TabItem>
-        <TabItem label="Related entities" icon={<EntityTypeIcon />}>
+        <TabItem label="Related entities" icon={<EntityTypeIcon />} onClick={() => setFilter('')}>
           <CatalogEntityDefaultRelations
             entity={entity}
             relations={relations}
             query={query}
             searchQuery={searchQuery}
             setSearchQuery={setSearchQuery}
+            setFilter={setFilter}
             entitiesCatalogConfig={entitiesCatalogConfig}
             catalogConfig={catalogConfig}
             sortOption={sortOption}

package/src/components/Catalog/CatalogEntityIcon.tsx

@@ -14,6 +14,8 @@ const entityIconMap: Record<EntityType, JSX.Element> = {
   team: <PeopleIcon color={iconColor} />,
   user: <UserIcon color={iconColor} />,
   'api-description': <CodeIcon color={iconColor} />,
+  'data-schema': <CodeIcon color={iconColor} />,
+  'api-operation': <CodeIcon color={iconColor} />,
 };
 
 export type CatalogEntityIconProps = {
@@ -34,6 +36,10 @@ export function CatalogEntityIcon({ entityType }: CatalogEntityIconProps): JSX.E
       return entityIconMap.user;
     case 'api-description':
       return entityIconMap['api-description'];
+    case 'data-schema':
+      return entityIconMap.service;
+    case 'api-operation':
+      return entityIconMap.service;
     default:
       const exhaustiveCheck: never = key;
       throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);