@redocly/theme 0.57.0 → 0.58.0-next.1

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

@@ -3,7 +3,11 @@ import styled from 'styled-components';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import { Route, Routes } from 'react-router-dom';
 
-import type { BffCatalogEntity, BffCatalogRelatedEntityList } from '@redocly/theme/core/types';
+import type {
+  BffCatalogEntity,
+  BffCatalogRelatedEntity,
+  BffCatalogRelatedEntityList,
+} from '@redocly/theme/core/types';
 
 import { breakpoints } from '@redocly/theme/core/utils';
 import { CatalogPageDescription } from '@redocly/theme/components/Catalog/CatalogPageDescription';
@@ -18,16 +22,22 @@ import { CatalogEntityMethodAndPath } from '@redocly/theme/components/Catalog/Ca
 import { CatalogEntityRelationsGraph } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy';
 
 export type CatalogEntityProps = {
+  RedocSchema: React.ComponentType<any>;
+  StoreProvider: React.ComponentType<any>;
+};
+
+type CatalogEntityPageProps = {
+  status: 'success';
   entity: BffCatalogEntity;
+  relatedEntity: BffCatalogRelatedEntity | null;
+  relations: BffCatalogRelatedEntityList;
   entitiesCatalogConfig: EntitiesCatalogConfig;
   catalogConfig: CatalogEntityConfig;
-  initialRelations: BffCatalogRelatedEntityList;
+  sharedDataIds?: Record<string, string>;
 };
 
-const renderEntityContent = (entity: BffCatalogEntity): React.ReactElement => {
+const renderFirstColumnEntitySection = (entity: BffCatalogEntity): React.ReactElement => {
   switch (entity.type) {
-    case 'data-schema':
-      return <CatalogEntitySchema entity={entity} />;
     case 'api-operation':
       return <CatalogEntityMethodAndPath entity={entity} />;
     default:
@@ -35,14 +45,31 @@ const renderEntityContent = (entity: BffCatalogEntity): React.ReactElement => {
   }
 };
 
-export function CatalogEntity({
-  entity,
-  entitiesCatalogConfig,
-  catalogConfig,
-  initialRelations,
-}: CatalogEntityProps) {
-  const { useTranslate, useCatalog } = useThemeHooks();
+const renderDataSchemaSection = (
+  entity: BffCatalogEntity,
+  relatedEntity: BffCatalogRelatedEntity | null,
+  RedocSchema: React.ComponentType<any>,
+  StoreProvider: React.ComponentType<any>,
+): React.ReactElement | null => {
+  if (entity.type !== 'data-schema') {
+    return null;
+  }
+
+  return (
+    <CatalogEntitySchema
+      entity={entity}
+      relatedEntity={relatedEntity}
+      RedocSchema={RedocSchema}
+      StoreProvider={StoreProvider}
+    />
+  );
+};
+
+export function CatalogEntity({ RedocSchema, StoreProvider }: CatalogEntityProps) {
+  const { useTranslate, useCatalog, usePageProps } = useThemeHooks();
   const { translate } = useTranslate();
+  const { entity, relations, catalogConfig, entitiesCatalogConfig, relatedEntity } =
+    usePageProps<CatalogEntityPageProps>();
 
   const linkToMainCatalog = `catalogs/${catalogConfig.slug}`;
   const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
@@ -71,15 +98,16 @@ export function CatalogEntity({
                       tag={entity.key}
                     />
                     <CatalogEntityProperties entity={entity} />
+                    {renderDataSchemaSection(entity, relatedEntity, RedocSchema, StoreProvider)}
                     <CatalogTwoColumnsSection>
-                      {renderEntityContent(entity)}
+                      {renderFirstColumnEntitySection(entity)}
                       <CatalogEntityLinks entity={entity} />
                     </CatalogTwoColumnsSection>
                     <CatalogEntityRelations
                       entity={entity}
                       entitiesCatalogConfig={entitiesCatalogConfig}
                       catalogConfig={catalogConfig}
-                      initialRelations={initialRelations}
+                      initialRelations={relations}
                       searchQuery={searchQuery}
                       setSearchQuery={setSearchQuery}
                     />

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

@@ -41,13 +41,15 @@ function renderMetadataValue(value: any): React.JSX.Element {
 export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
-  const { schema, ...metadataToShow } = entity.metadata || {};
-  const metadata = Object.entries(metadataToShow);
+  const { schema, ...metadata } = entity.metadata || {};
+  const metadataToShow = Object.entries(metadata).filter(
+    ([key]) => !(entity.type === 'api-description' && key === 'descriptionFile'),
+  );
   const [isOn, setIsOn] = useState(false);
-  const hasMoreItems = metadata.length > MAX_INITIAL_ITEMS;
-  const visibleMetadata = isOn ? metadata : metadata.slice(0, MAX_INITIAL_ITEMS);
+  const hasMoreItems = metadataToShow.length > MAX_INITIAL_ITEMS;
+  const visibleMetadata = isOn ? metadataToShow : metadataToShow.slice(0, MAX_INITIAL_ITEMS);
 
-  if (!metadata.length) {
+  if (!metadataToShow.length) {
     return null;
   }
 
@@ -102,7 +104,7 @@ const ArrayWrapper = styled.div`
 `;
 
 const Heading = styled.h2`
-  margin-bottom: var(--spacing-base);
+  margin-bottom: var(--spacing-sm);
   margin-top: 0;
   font-size: var(--catalog-metadata-heading-size);
 `;

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

@@ -5,7 +5,6 @@ import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { EntityTypeProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty';
 import { GitProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/GitProperty';
 import { TagsProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty';
-import { ApiDescriptionProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/ApiDescriptionProperty';
 import { UserEmailProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/UserEmailProperty';
 import { DomainsProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty';
 import { OwnersProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty';
@@ -44,11 +43,6 @@ const propertyRenderers: PropertyRenderer[] = [
     condition: (entity) => !!entity.tags?.length,
     component: TagsProperty,
   },
-  {
-    key: 'api-description',
-    condition: (entity) => entity.type === 'api-description' && !!entity.metadata?.descriptionFile,
-    component: ApiDescriptionProperty,
-  },
   {
     key: 'user-email',
     condition: (entity) => entity.type === 'user' && !!entity.metadata?.email,
@@ -71,19 +65,26 @@ export type CatalogEntityPropertiesProps = {
 };
 
 export function CatalogEntityProperties({ entity }: CatalogEntityPropertiesProps): JSX.Element {
+  const renderers = propertyRenderers.filter((renderer) => renderer.condition(entity));
+
+  const gridTemplateColumns = [1, 2, 4].includes(renderers.length)
+    ? 'repeat(2, 1fr)'
+    : 'repeat(3, 1fr)';
+
   return (
-    <CatalogEntityPropertiesGridWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties">
-      {propertyRenderers
-        .filter((renderer) => renderer.condition(entity))
-        .map((renderer) => (
-          <renderer.component key={renderer.key + entity.id} entity={entity} />
-        ))}
+    <CatalogEntityPropertiesGridWrapper
+      data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties"
+      gridTemplateColumns={gridTemplateColumns}
+    >
+      {renderers.map((renderer) => (
+        <renderer.component key={renderer.key + entity.id} entity={entity} />
+      ))}
     </CatalogEntityPropertiesGridWrapper>
   );
 }
 
-const CatalogEntityPropertiesGridWrapper = styled.div`
+const CatalogEntityPropertiesGridWrapper = styled.div<{ gridTemplateColumns: string }>`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(325px, 1fr));
+  grid-template-columns: ${({ gridTemplateColumns }) => gridTemplateColumns};
   gap: var(--spacing-base);
 `;

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty.tsx

@@ -27,7 +27,12 @@ export function ContactProperty({ entity }: ContactPropertyProps): JSX.Element {
               <Tag
                 key={channel.name}
                 textTransform="none"
-                style={{ backgroundColor: 'var(--bg-color)' }}
+                style={{ backgroundColor: 'var(--bg-color)', cursor: 'pointer' }}
+                onClick={() => {
+                  if (channel.url) {
+                    window.open(channel.url, '_blank');
+                  }
+                }}
               >
                 {channel.name}
               </Tag>

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

@@ -0,0 +1,125 @@
+import React, { JSX, ReactNode } from 'react';
+import styled from 'styled-components';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import { Tabs, TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
+import { EntityTypeIcon } from '@redocly/theme/icons/EntityTypeIcon/EntityTypeIcon';
+import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
+import { CatalogEntityDefaultRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations';
+import { MoleculesIcon } from '@redocly/theme/icons/MoleculesIcon/MoleculesIcon';
+import { NetworkIcon } from '@redocly/theme/icons/NetworkIcon/NetworkIcon';
+
+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 function CatalogEntityApiDescriptionRelations({
+  entity,
+  relations,
+  query,
+  searchQuery,
+  setSearchQuery,
+  setFilter,
+  entitiesCatalogConfig,
+  catalogConfig,
+  sortOption,
+  setSortOption,
+  handleSortClick,
+  isColumnSorted,
+  shouldShowLoadMore,
+}: CatalogEntityApiDescriptionRelationsProps): JSX.Element {
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
+      <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
+        <TabItem
+          label="Operations"
+          icon={<MoleculesIcon />}
+          onClick={() => setFilter('type:api-operation')}
+        >
+          <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"
+          />
+        </TabItem>
+        <TabItem
+          label="Schemas"
+          icon={<NetworkIcon />}
+          onClick={() => setFilter('type:data-schema')}
+        >
+          <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"
+          />
+        </TabItem>
+        <TabItem
+          label="Related entities"
+          icon={<EntityTypeIcon />}
+          onClick={() => setFilter('-type:api-operation,data-schema')}
+        >
+          <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}
+          />
+        </TabItem>
+      </Tabs>
+    </div>
+  );
+}
+
+const TabItem = styled.div<{ label: string; icon?: ReactNode }>`
+  padding: var(--spacing-sm);
+`;

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

@@ -1,6 +1,8 @@
 import React, { JSX } from 'react';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
+import type { ListType } from '@redocly/theme/core/types';
+
 import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
 import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
@@ -49,13 +51,13 @@ 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 function CatalogEntityDefaultRelations({
@@ -72,6 +74,7 @@ export function CatalogEntityDefaultRelations({
   isColumnSorted,
   shouldShowLoadMore,
   shouldShowHeading = true,
+  listType,
 }: CatalogEntityDefaultRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations">
@@ -90,6 +93,7 @@ export function CatalogEntityDefaultRelations({
         handleSortClick={handleSortClick}
         isColumnSorted={isColumnSorted}
         shouldShowLoadMore={shouldShowLoadMore}
+        listType={listType}
       />
     </div>
   );

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

@@ -1,10 +1,11 @@
-import React, { JSX, useState } from 'react';
+import React, { JSX, useState, useEffect } from 'react';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
 import { BffCatalogEntity, BffCatalogRelatedEntityList } from '@redocly/theme/core/types';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { CatalogEntityDefaultRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations';
 import { CatalogEntityTeamRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations';
+import { CatalogEntityApiDescriptionRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations';
 
 export type CatalogEntityRelationsProps = {
   entity: BffCatalogEntity;
@@ -18,6 +19,7 @@ export type CatalogEntityRelationsProps = {
 const LOAD_MORE_THRESHOLD = 10;
 const ENTITY_DEFAULT_FILTERS: Record<string, string> = {
   team: 'type:user',
+  'api-description': 'type:api-operation',
 };
 
 export function CatalogEntityRelations({
@@ -30,7 +32,12 @@ export function CatalogEntityRelations({
 }: CatalogEntityRelationsProps): JSX.Element | null {
   const { useCatalogSort, useFetchCatalogEntitiesRelations } = useThemeHooks();
   const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
-  const [filter, setFilter] = useState<string>();
+
+  const [filter, setFilter] = useState<string | undefined>(ENTITY_DEFAULT_FILTERS[entity.type]);
+
+  useEffect(() => {
+    setFilter(ENTITY_DEFAULT_FILTERS[entity.key]);
+  }, [entity.key]);
 
   const { items: relations, query } = useFetchCatalogEntitiesRelations(
     {
@@ -38,6 +45,7 @@ export function CatalogEntityRelations({
       search: searchQuery,
       sort: sortOption ?? undefined,
       filter: filter ?? ENTITY_DEFAULT_FILTERS[entity.type],
+      limit: 10,
     },
     initialRelations,
   );
@@ -67,6 +75,26 @@ export function CatalogEntityRelations({
           />
         </div>
       );
+    case 'api-description':
+      return (
+        <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
+          <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}
+          />
+        </div>
+      );
     default:
       return (
         <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations/CatalogEntityDefaultRelations">
@@ -78,7 +106,6 @@ 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

@@ -2,11 +2,12 @@ import React, { JSX } from 'react';
 import styled from 'styled-components';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
+import type { ListType } from '@redocly/theme/core/types';
+
 import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
 import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 import { CatalogActionsRow } from '@redocly/theme/components/Catalog/CatalogActionsRow';
-
-import { CatalogEntityRelationsTableContent } from './CatalogEntityRelationsTableContent';
+import { CatalogEntityRelationsTableContent } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent';
 
 export type CatalogEntityRelationsTableProps = {
   entity: BffCatalogEntity;
@@ -26,7 +27,7 @@ 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 function CatalogEntityRelationsTable({

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

@@ -1,6 +1,8 @@
 import React, { JSX } from 'react';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
+import type { ListType } from '@redocly/theme/core/types';
+
 import { ArrowDownIcon } from '@redocly/theme/icons/ArrowDownIcon/ArrowDownIcon';
 import { BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
 import { LoadMore } from '@redocly/theme/components/LoadMore/LoadMore';
@@ -26,7 +28,7 @@ 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 function CatalogEntityRelationsTableContent({

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

@@ -11,7 +11,6 @@ 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>[] = [
   {
@@ -30,16 +29,6 @@ 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',
@@ -117,7 +106,6 @@ export function CatalogEntityTeamRelations({
             query={query}
             searchQuery={searchQuery}
             setSearchQuery={setSearchQuery}
-            setFilter={setFilter}
             entitiesCatalogConfig={entitiesCatalogConfig}
             catalogConfig={catalogConfig}
             sortOption={sortOption}
@@ -134,7 +122,7 @@ export function CatalogEntityTeamRelations({
 }
 
 const TabItem = styled.div<{ label: string; icon?: ReactNode }>`
-  padding: 12px;
+  padding: var(--spacing-sm);
 `;
 
 const EntityDescription = styled.div`

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

@@ -1,36 +1,57 @@
 import React from 'react';
 import styled from 'styled-components';
+import * as Sampler from 'openapi-sampler';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useCatalogEntitySchema } from '@redocly/theme/core/hooks/catalog/useCatalogEntitySchema';
 import { JsonViewer } from '@redocly/theme/components/JsonViewer/JsonViewer';
+import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
 
 export type CatalogEntitySchemaProps = {
   entity: BffCatalogEntity;
+  relatedEntity: BffCatalogRelatedEntity | null;
+  RedocSchema: React.ComponentType<any>;
+  StoreProvider: React.ComponentType<any>;
 };
 
-export function CatalogEntitySchema({ entity }: CatalogEntitySchemaProps) {
+export function CatalogEntitySchema({
+  entity,
+  relatedEntity,
+  RedocSchema,
+  StoreProvider,
+}: CatalogEntitySchemaProps) {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
-  const { schema, ...metadataToShow } = entity.metadata || {};
-  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 } = useCatalogEntitySchema({ entity, relatedEntity });
 
   return (
     <MetadataWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMetadata">
-      <Heading>{translate('catalog.entity.metadata.title')}</Heading>
-      <JsonViewer data={parsedSchema} expandLevel={3} title="JSON" />
+      <HeaderWrapper>
+        <Heading>{translate('catalog.entity.schema.title')}</Heading>
+        <CopyButton
+          data={rawSchema}
+          buttonText="Copy Schema"
+          type="compound"
+          variant="secondary"
+          iconPosition="right"
+          size="medium"
+        ></CopyButton>
+      </HeaderWrapper>
+      <SplitViewWrapper>
+        <SchemaContentWrapper>
+          <StoreProvider definition={definition}>
+            <RedocSchema schema={parsedSchema} />
+          </StoreProvider>
+        </SchemaContentWrapper>
+        <SchemaSampleWrapper>
+          <JsonViewer
+            data={Sampler.sample({ ...parsedSchema })}
+            expandLevel={3}
+            hideHeader={false}
+          />
+        </SchemaSampleWrapper>
+      </SplitViewWrapper>
     </MetadataWrapper>
   );
 }
@@ -38,15 +59,42 @@ export function CatalogEntitySchema({ entity }: CatalogEntitySchemaProps) {
 const MetadataWrapper = styled.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.div`
+  flex: 1;
+  & > div > div {
+    padding-left: 0;
+    padding-top: 0;
+  }
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
 `;
 
 const Heading = styled.h2`
-  margin-bottom: var(--spacing-base);
-  margin-top: 0;
   font-size: var(--catalog-metadata-heading-size);
 `;
+
+const SplitViewWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--spacing-base);
+`;
+
+const SchemaSampleWrapper = styled.div`
+  flex: 1;
+  position: sticky;
+  top: calc(var(--navbar-height) + var(--spacing-md));
+  align-self: flex-start;
+  padding-top: var(--spacing-sm);
+`;

package/src/components/Catalog/CatalogTableView/CatalogEntityRelationCell.tsx

@@ -1,6 +1,6 @@
 import type { BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 
-import { reverseRelationMap } from '@redocly/theme/core/constants';
+import { reverseRelationMap, relationTypeMap } from '@redocly/theme/core/constants';
 
 export type CatalogEntityRelationCellProps = Pick<
   BffCatalogRelatedEntity,
@@ -12,8 +12,8 @@ export function CatalogEntityRelationCell({
   relationRole,
 }: CatalogEntityRelationCellProps) {
   if (relationRole === 'source') {
-    return reverseRelationMap[relationType];
+    return relationTypeMap[reverseRelationMap[relationType]];
   }
 
-  return relationType;
+  return relationTypeMap[relationType];
 }