@redocly/theme 0.57.0 → 0.58.0-next.1

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

@@ -1,14 +1,26 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -17,39 +29,61 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntitySchema = CatalogEntitySchema;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const Sampler = __importStar(require("openapi-sampler"));
 const hooks_1 = require("../../../core/hooks");
+const useCatalogEntitySchema_1 = require("../../../core/hooks/catalog/useCatalogEntitySchema");
 const JsonViewer_1 = require("../../../components/JsonViewer/JsonViewer");
-function CatalogEntitySchema({ entity }) {
+const CopyButton_1 = require("../../../components/Buttons/CopyButton");
+function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const _a = entity.metadata || {}, { schema } = _a, metadataToShow = __rest(_a, ["schema"]);
-    const metadata = Object.entries(metadataToShow);
-    if (!metadata.length) {
-        return null;
-    }
-    let parsedSchema;
-    try {
-        parsedSchema = JSON.parse(schema);
-    }
-    catch (error) {
-        return null;
-    }
+    const { definition, parsedSchema, rawSchema } = (0, useCatalogEntitySchema_1.useCatalogEntitySchema)({ entity, relatedEntity });
     return (react_1.default.createElement(MetadataWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityMetadata" },
-        react_1.default.createElement(Heading, null, translate('catalog.entity.metadata.title')),
-        react_1.default.createElement(JsonViewer_1.JsonViewer, { data: parsedSchema, expandLevel: 3, title: "JSON" })));
+        react_1.default.createElement(HeaderWrapper, null,
+            react_1.default.createElement(Heading, null, translate('catalog.entity.schema.title')),
+            react_1.default.createElement(CopyButton_1.CopyButton, { data: rawSchema, buttonText: "Copy Schema", type: "compound", variant: "secondary", iconPosition: "right", size: "medium" })),
+        react_1.default.createElement(SplitViewWrapper, null,
+            react_1.default.createElement(SchemaContentWrapper, null,
+                react_1.default.createElement(StoreProvider, { definition: definition },
+                    react_1.default.createElement(RedocSchema, { schema: parsedSchema }))),
+            react_1.default.createElement(SchemaSampleWrapper, null,
+                react_1.default.createElement(JsonViewer_1.JsonViewer, { data: Sampler.sample(Object.assign({}, parsedSchema)), expandLevel: 3, hideHeader: false })))));
 }
 const MetadataWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
-  transition: all 0.2s ease-in-out;
-  margin: var(--spacing-lg) 0;
+  margin-top: var(--spacing-base);
+  margin-bottom: var(--spacing-xs);
+`;
+const SchemaContentWrapper = styled_components_1.default.div `
+  flex: 1;
+  & > div > div {
+    padding-left: 0;
+    padding-top: 0;
+  }
+`;
+const HeaderWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
 `;
 const Heading = styled_components_1.default.h2 `
-  margin-bottom: var(--spacing-base);
-  margin-top: 0;
   font-size: var(--catalog-metadata-heading-size);
 `;
+const SplitViewWrapper = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--spacing-base);
+`;
+const SchemaSampleWrapper = styled_components_1.default.div `
+  flex: 1;
+  position: sticky;
+  top: calc(var(--navbar-height) + var(--spacing-md));
+  align-self: flex-start;
+  padding-top: var(--spacing-sm);
+`;
 //# sourceMappingURL=CatalogEntitySchema.js.map

package/lib/components/Catalog/CatalogTableView/CatalogEntityRelationCell.d.ts

@@ -1,3 +1,3 @@
 import type { BffCatalogRelatedEntity } from '../../../core/types';
 export type CatalogEntityRelationCellProps = Pick<BffCatalogRelatedEntity, 'relationType' | 'relationRole'>;
-export declare function CatalogEntityRelationCell({ relationType, relationRole, }: CatalogEntityRelationCellProps): "partOf" | "hasParts" | "creates" | "createdBy" | "owns" | "ownedBy" | "implements" | "implementedBy" | "dependsOn" | "dependencyOf" | "uses" | "usedBy" | "produces" | "consumes" | "linksTo" | "supersedes" | "supersededBy" | "compatibleWith" | "extends" | "extendedBy" | "relatesTo" | "hasMember" | "memberOf" | "triggers" | "triggeredBy";
+export declare function CatalogEntityRelationCell({ relationType, relationRole, }: CatalogEntityRelationCellProps): string;

package/lib/components/Catalog/CatalogTableView/CatalogEntityRelationCell.js

@@ -4,8 +4,8 @@ exports.CatalogEntityRelationCell = CatalogEntityRelationCell;
 const constants_1 = require("../../../core/constants");
 function CatalogEntityRelationCell({ relationType, relationRole, }) {
     if (relationRole === 'source') {
-        return constants_1.reverseRelationMap[relationType];
+        return constants_1.relationTypeMap[constants_1.reverseRelationMap[relationType]];
     }
-    return relationType;
+    return constants_1.relationTypeMap[relationType];
 }
 //# sourceMappingURL=CatalogEntityRelationCell.js.map

package/lib/components/Catalog/variables.js

@@ -15,7 +15,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-filter-padding-vertical-mobile: 0;
   --catalog-filter-padding-horizontal-mobile: var(--spacing-base);
 
-  --catalog-heading-margin: 0 0 var(--spacing-xl) 0;
+  --catalog-heading-margin: 0 0 var(--spacing-sm) 0;
   --catalog-sidebar-width: 285px;
 
   /**

package/lib/components/Filter/FilterContent.d.ts

@@ -5,7 +5,7 @@ export type FilterContentProps = {
     setFilterTerm: (value: string) => void;
     filters: ResolvedFilter[];
     filterTerm: string;
-    filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'];
+    filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'] | ((str: string) => string);
     hideSearch?: boolean;
     showCounter?: boolean;
 };

package/lib/components/Tooltip/Tooltip.js

@@ -151,17 +151,17 @@ const PLACEMENTS = {
     bottom: (0, styled_components_1.css) `
     ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
         ? (0, styled_components_1.css) `
-            transform: translate(0, -100%);
-            margin-top: -10px;
+            transform: translate(0, 10px);
+            margin-top: 0;
           `
         : arrowPosition === 'right'
             ? (0, styled_components_1.css) `
-              transform: translate(-100%, -100%);
-              margin-top: -10px;
+              transform: translate(-100%, 10px);
+              margin-top: 0;
             `
             : (0, styled_components_1.css) `
-              transform: translate(-50%, -100%);
-              margin-top: -10px;
+              transform: translate(-50%, 10px);
+              margin-top: 0;
             `}
 
     ${({ withArrow, arrowPosition }) => withArrow &&

package/lib/core/constants/catalog.d.ts

@@ -2,6 +2,7 @@ import type { EntityRelationType } from '../types/catalog';
 export declare const CATALOG_TAG_MAX_LENGTH = 15;
 export declare const ENTITY_RELATION_TYPES: readonly ["partOf", "hasParts", "creates", "createdBy", "owns", "ownedBy", "implements", "implementedBy", "dependsOn", "dependencyOf", "uses", "usedBy", "produces", "consumes", "linksTo", "supersedes", "supersededBy", "compatibleWith", "extends", "extendedBy", "relatesTo", "hasMember", "memberOf", "triggers", "triggeredBy"];
 export declare const reverseRelationMap: Record<EntityRelationType, EntityRelationType>;
+export declare const relationTypeMap: Record<EntityRelationType, string>;
 export declare enum GraphHandleType {
     Target = "target",
     Source = "source"

package/lib/core/constants/catalog.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GraphCustomEdgeType = exports.GraphCustomNodeType = exports.GraphHandleType = exports.reverseRelationMap = exports.ENTITY_RELATION_TYPES = exports.CATALOG_TAG_MAX_LENGTH = void 0;
+exports.GraphCustomEdgeType = exports.GraphCustomNodeType = exports.GraphHandleType = exports.relationTypeMap = exports.reverseRelationMap = exports.ENTITY_RELATION_TYPES = exports.CATALOG_TAG_MAX_LENGTH = void 0;
 exports.CATALOG_TAG_MAX_LENGTH = 15;
 exports.ENTITY_RELATION_TYPES = [
     'partOf',
@@ -56,6 +56,33 @@ exports.reverseRelationMap = {
     triggers: 'triggeredBy',
     triggeredBy: 'triggers',
 };
+exports.relationTypeMap = {
+    partOf: 'Part of',
+    hasParts: 'Has parts',
+    creates: 'Creates',
+    createdBy: 'Created by',
+    owns: 'Owns',
+    ownedBy: 'Owned by',
+    implements: 'Implements',
+    implementedBy: 'Implemented by',
+    dependsOn: 'Depends on',
+    dependencyOf: 'Dependency of',
+    uses: 'Uses',
+    usedBy: 'Used by',
+    produces: 'Produces',
+    consumes: 'Consumes',
+    linksTo: 'Links to',
+    supersedes: 'Supersedes',
+    supersededBy: 'Superseded by',
+    compatibleWith: 'Compatible with',
+    extends: 'Extends',
+    extendedBy: 'Extended by',
+    relatesTo: 'Relates to',
+    hasMember: 'Has member',
+    memberOf: 'Member of',
+    triggers: 'Triggers',
+    triggeredBy: 'Triggered by',
+};
 var GraphHandleType;
 (function (GraphHandleType) {
     GraphHandleType["Target"] = "target";

package/lib/core/hooks/catalog/useCatalogEntitySchema.d.ts

@@ -0,0 +1,11 @@
+import { BffCatalogEntity, BffCatalogRelatedEntity } from '../../types';
+type CatalogEntitySchemaProps = {
+    entity: BffCatalogEntity;
+    relatedEntity: BffCatalogRelatedEntity | null;
+};
+export declare function useCatalogEntitySchema({ entity, relatedEntity }: CatalogEntitySchemaProps): {
+    definition: any;
+    parsedSchema: any;
+    rawSchema: any;
+};
+export {};

package/lib/core/hooks/catalog/useCatalogEntitySchema.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCatalogEntitySchema = useCatalogEntitySchema;
+function useCatalogEntitySchema({ entity, relatedEntity }) {
+    var _a, _b;
+    const { schema } = entity.metadata || {};
+    let parsedSchema;
+    try {
+        parsedSchema = JSON.parse(schema);
+    }
+    catch (error) {
+        parsedSchema = undefined;
+    }
+    let parsedApiDefinition;
+    try {
+        parsedApiDefinition = ((_a = relatedEntity === null || relatedEntity === void 0 ? void 0 : relatedEntity.metadata) === null || _a === void 0 ? void 0 : _a.schema)
+            ? JSON.parse(relatedEntity.metadata.schema)
+            : undefined;
+    }
+    catch (err) {
+        parsedApiDefinition = undefined;
+    }
+    const definition = !parsedApiDefinition || ((_b = relatedEntity === null || relatedEntity === void 0 ? void 0 : relatedEntity.metadata) === null || _b === void 0 ? void 0 : _b.specType) !== 'openapi'
+        ? {
+            openapi: '3.0.0',
+            info: { version: '1', description: 'test', title: 'test' },
+            paths: {},
+            components: {
+                schemas: {},
+            },
+        }
+        : parsedApiDefinition;
+    return {
+        definition,
+        parsedSchema,
+        rawSchema: schema,
+    };
+}
+//# sourceMappingURL=useCatalogEntitySchema.js.map

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

@@ -31,6 +31,11 @@ export type UseCatalogSearchResponse = {
     searchQuery: string;
     setSearchQuery: (query: string) => void;
 };
+export type UseCatalogFilterResponse = {
+    filters: ResolvedFilter[];
+    filterQuery: string;
+    setFilterQuery: (filterQuery: string) => void;
+};
 export type FilteredCatalog = {
     groups: {
         title: string;
@@ -135,6 +140,7 @@ export type BffCatalogEntity = {
         slack?: {
             channels?: Array<{
                 name: string;
+                url?: string;
             }>;
         };
     };
@@ -166,3 +172,4 @@ export type Page = {
     total: number;
 };
 export type EntityRelationType = (typeof ENTITY_RELATION_TYPES)[number];
+export type ListType = 'default' | 'team' | 'api-operation' | 'data-schema';

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

@@ -4,7 +4,7 @@ export type FilterProps = {
     filter: ResolvedFilter & {
         selectedOptions: any;
     };
-    filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'];
+    filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'] | ((str: string) => string);
     showCounter?: boolean;
 };
 export type FilterTypes = NonNullable<FilterProps['filter']['type']>;

package/lib/core/utils/change-text-casing.d.ts

@@ -1,3 +1,3 @@
 type Casing = 'original' | 'lowercase' | 'uppercase' | 'sentence';
-export declare function changeTextCasing(str: string, casing?: Casing): string | undefined;
+export declare function changeTextCasing(str: string, casing?: Casing | ((str: string) => string)): string | undefined;
 export {};

package/lib/core/utils/change-text-casing.js

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.changeTextCasing = changeTextCasing;
 function changeTextCasing(str, casing = 'original') {
+    if (casing instanceof Function) {
+        return casing(str);
+    }
     if (casing === 'original' || !str)
         return str;
     if (casing === 'lowercase') {

package/lib/ext/configure.d.ts

@@ -18,6 +18,7 @@ export type ConfigureRequestValues = {
     cookie?: Record<string, string>;
     security?: SecurityDetails;
     envVariables?: Record<string, string>;
+    serverVariables?: Record<string, string>;
 };
 export type ConfigureServerRequestValues = {
     [serverUrl: string]: ConfigureRequestValues;

package/lib/ext/configure.js

@@ -37,13 +37,16 @@ function configure(_context) {
     //   envVariables: {
     //     customLocation: 'prod'
     //   },
+    //   serverVariables: {
+    //     version: 'v1',
+    //   },
     // };
     // const { servers } = _context;
     //   const serverRequestValues: ConfigureServerRequestValues = {};
     // for (const server of servers) {
     //   if (server.url === 'https://dev.api.fake-museum-example.com') {
     //     serverRequestValues[server.url] = exampleDevRequestValues;
-    //   } else if (server.url === 'https://api.fake-museum-example.com') {
+    //   } else if (server.url === 'https://api.fake-museum-example.com/{version}') {
     //     serverRequestValues[server.url] = exampleProdRequestValues;
     //   } else {
     //     serverRequestValues[server.url] = exampleDefaultRequestValues;

package/lib/ext/useConfigureReplay.d.ts

@@ -0,0 +1,18 @@
+import type { ConfigureRequestValues, ConfigureServerRequestValues } from '../ext/configure';
+import type { UserClaims, OpenAPIServer } from '../core/types';
+type ContextProps = {
+    operation: {
+        name: string;
+        path: string;
+        operationId: string;
+        href: string;
+        method: string;
+    };
+    servers: OpenAPIServer[];
+    userClaims: UserClaims;
+};
+export declare function useConfigureReplay(context: ContextProps, isOpened: boolean): {
+    config: ConfigureRequestValues | ConfigureServerRequestValues | null | undefined;
+    refresh: () => Promise<void>;
+};
+export {};

package/lib/ext/useConfigureReplay.js

@@ -0,0 +1,64 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConfigureReplay = useConfigureReplay;
+const react_1 = require("react");
+function getReplayConfiguration(_context) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // Customize this function to fetch replay configuration from your API endpoint
+        // STEP 1: Uncomment the fetch code below and update the URL to your API endpoint
+        // try {
+        //   const response = await fetch(`/api/replay-config/${_context.operation.operationId}`, {
+        //     method: 'GET',
+        //     headers: {
+        //       'Content-Type': 'application/json',
+        //     },
+        //   });
+        //   if (!response.ok) {
+        //     throw new Error(`HTTP error! status: ${response.status}`);
+        //   }
+        //   const { token } = await response.json();
+        //
+        //   return {
+        //     security: {
+        //       token: {
+        //         access_token: token,
+        //       }
+        //     }
+        //   };
+        // } catch (error) {
+        //   console.warn('Failed to fetch replay configuration:', error);
+        //   throw error;
+        // }
+        // STEP 2: Remove this return null statement once you've implemented the fetch above
+        return null;
+    });
+}
+function useConfigureReplay(context, isOpened) {
+    const [config, setConfig] = (0, react_1.useState)();
+    const refresh = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
+        try {
+            const result = yield getReplayConfiguration(context);
+            setConfig(result);
+        }
+        catch (error) {
+            console.warn('Failed to configure replay for operation:', context.operation.operationId, error);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }), []);
+    (0, react_1.useEffect)(() => {
+        if (isOpened) {
+            refresh();
+        }
+    }, [isOpened, refresh]);
+    return { config, refresh };
+}
+//# sourceMappingURL=useConfigureReplay.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.57.0",
+  "version": "0.58.0-next.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -84,10 +84,11 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
     "nprogress": "0.2.0",
+    "openapi-sampler": "1.6.1",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/realm-asyncapi-sdk": "0.3.0",
-    "@redocly/config": "0.29.0"
+    "@redocly/config": "0.29.1",
+    "@redocly/realm-asyncapi-sdk": "0.4.0-next.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Buttons/CopyButton.tsx

@@ -28,6 +28,7 @@ export type CopyButtonProps = {
   fullWidth?: ButtonProps['fullWidth'];
   tone?: ButtonProps['tone'];
   extraClass?: ButtonProps['extraClass'];
+  iconPosition?: ButtonProps['iconPosition'];
 };
 
 function CopyButtonComponent({
@@ -46,6 +47,7 @@ function CopyButtonComponent({
   fullWidth,
   tone,
   extraClass,
+  iconPosition,
 }: CopyButtonProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const tooltip = useControl();
@@ -85,9 +87,10 @@ function CopyButtonComponent({
         fullWidth={fullWidth}
         tone={tone}
         extraClass={extraClass}
+        iconPosition={iconPosition}
       >
         {(type === 'text' || type === 'compound') &&
-          translate('codeSnippet.copy.toasterText', buttonText || 'Copy')}
+          (buttonText || translate('codeSnippet.copy.toasterText', 'Copy'))}
       </Button>
     </Tooltip>
   );

package/src/components/Catalog/Catalog.tsx

@@ -24,6 +24,20 @@ export type CatalogProps = {
   catalogSwitcherItems: CatalogSwitcherItem[];
 };
 
+const customCatalogOptionsCasing = (str: string): string => {
+  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(' ');
+};
+
 export function Catalog(props: CatalogProps): JSX.Element {
   const { catalogConfig, entitiesTypes, initialEntitiesList, catalogSwitcherItems } = props;
 
@@ -71,7 +85,7 @@ export function Catalog(props: CatalogProps): JSX.Element {
               filterTerm={searchQuery}
               hideSearch={true}
               showCounter={false}
-              filterValuesCasing="sentence"
+              filterValuesCasing={customCatalogOptionsCasing}
             />
           }
           footer={
@@ -209,7 +223,6 @@ const CatalogPageWrapper = styled.div`
 `;
 
 const CatalogPageDescription = styled.div`
-  margin: var(--catalog-heading-margin);
   display: var(--catalog-page-description-display-mobile);
 
   @media screen and (min-width: ${breakpoints.medium}) {

package/src/components/Catalog/CatalogEntitiesEmptyState.tsx

@@ -1,35 +1,58 @@
 import React, { JSX } from 'react';
 import styled from 'styled-components';
 
+import type { ListType } from '@redocly/theme/core/types';
+
 import { HexagonIcon } from '@redocly/theme/icons/HexagonIcon/HexagonIcon';
 
 interface CatalogEntitiesEmptyStateProps {
-  listType?: 'default' | 'team';
+  listType?: ListType;
 }
 
+const getEmptyStateContent = (
+  listType: ListType,
+): { header: string; paragraph1: string; paragraph2: string } => {
+  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.',
+      };
+  }
+};
+
 export function CatalogEntitiesEmptyState({
   listType = 'default',
 }: CatalogEntitiesEmptyStateProps): JSX.Element {
-  if (listType === 'team') {
-    return (
-      <EmptyStateWrapper data-component-name="Catalog/CatalogEntitiesEmptyState">
-        <EmptyStateIconWrapper>
-          <HexagonIcon size="21px" color="var(--color-warm-grey-7)" />
-        </EmptyStateIconWrapper>
-        <EmptyStateHeader>No team members yet</EmptyStateHeader>
-        <EmptyStateText>Your team members will appear here</EmptyStateText>
-        <EmptyStateText>once they&apos;ve been added to the team.</EmptyStateText>
-      </EmptyStateWrapper>
-    );
-  }
+  const { header, paragraph1, paragraph2 } = getEmptyStateContent(listType);
+
   return (
     <EmptyStateWrapper data-component-name="Catalog/CatalogEntitiesEmptyState">
       <EmptyStateIconWrapper>
         <HexagonIcon size="21px" color="var(--color-warm-grey-7)" />
       </EmptyStateIconWrapper>
-      <EmptyStateHeader>No entities found</EmptyStateHeader>
-      <EmptyStateText>Try adjusting your search criteria or</EmptyStateText>
-      <EmptyStateText>check back later for new additions.</EmptyStateText>
+      <EmptyStateHeader>{header}</EmptyStateHeader>
+      <EmptyStateText>{paragraph1}</EmptyStateText>
+      <EmptyStateText>{paragraph2}</EmptyStateText>
     </EmptyStateWrapper>
   );
 }