@redocly/theme 0.56.0-rc.2 → 0.56.0

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

@@ -3,31 +3,38 @@ import styled from 'styled-components';
 
 export type CatalogEntityInfoBarProps = {
   leftContent: ReactNode;
-  rightContent: ReactNode;
+  rightContent?: ReactNode;
   withSeparator?: boolean;
+  hoverEffect?: boolean;
+  isCodeBlock?: boolean;
 };
 
 export function CatalogEntityInfoBar({
   leftContent,
   rightContent,
   withSeparator = true,
+  hoverEffect = true,
+  isCodeBlock = false,
 }: CatalogEntityInfoBarProps): JSX.Element {
   return (
-    <InfoBarWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityInfoBar">
+    <InfoBarWrapper
+      data-component-name="Catalog/CatalogEntity/CatalogEntityInfoBar"
+      hoverEffect={hoverEffect}
+    >
       <LeftColumn withSeparator={withSeparator}>{leftContent}</LeftColumn>
-      <RightColumn>{rightContent}</RightColumn>
+      {rightContent && <RightColumn isCodeBlock={isCodeBlock}>{rightContent}</RightColumn>}
     </InfoBarWrapper>
   );
 }
 
-const InfoBarWrapper = styled.div`
+const InfoBarWrapper = styled.div<{ hoverEffect: boolean }>`
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-areas: 'left right';
   align-items: center;
 
   color: var(--catalog-card-text-color, inherit);
-  background-color: var(--catalog-card-bg-color, white);
+  background-color: var(--catalog-card-bg-color);
   border: var(--catalog-card-border-width, 1px) var(--catalog-card-border-style)
     var(--catalog-card-border-color);
   border-radius: var(--catalog-card-border-radius);
@@ -35,9 +42,14 @@ const InfoBarWrapper = styled.div`
   height: 100%;
   padding: var(--catalog-card-gap);
 
-  &:hover {
-    border-color: var(--catalog-card-border-color-hover);
-  }
+  ${({ hoverEffect }) =>
+    hoverEffect &&
+    `
+    &:hover {
+      border-color: var(--catalog-card-border-color-hover);
+      background-color: var(--bg-color-active);
+    }
+  `}
 `;
 
 const LeftColumn = styled.div<{ withSeparator?: boolean }>`
@@ -49,12 +61,16 @@ const LeftColumn = styled.div<{ withSeparator?: boolean }>`
   text-align: left;
   border-right: ${({ withSeparator }) =>
     withSeparator ? '1px solid var(--border-color-primary)' : 'none'};
+  height: 100%;
+  display: flex;
+  align-items: center;
 `;
 
-const RightColumn = styled.div`
+const RightColumn = styled.div<{ isCodeBlock?: boolean }>`
   color: var(--catalog-metadata-value-color);
   font-weight: var(--font-weight-medium);
   grid-area: right;
   justify-self: end;
   text-align: right;
+  width: ${({ isCodeBlock }) => (isCodeBlock ? '100%' : 'auto')};
 `;

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
-import { DocumentIcon } from '@redocly/theme/icons/DocumentIcon/DocumentIcon';
+import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
 import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
 import { Link } from '@redocly/theme/components/Link/Link';
 
@@ -22,20 +22,17 @@ export function CatalogEntityLinks({ entity }: CatalogEntityLinksProps) {
     <LinksWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityLinks">
       <Heading>Links</Heading>
       {links.map(([key, value]) => (
-        <CatalogEntityInfoBar
-          key={key}
-          leftContent={
-            <Label>
-              <DocumentIcon /> {value.label}
-            </Label>
-          }
-          rightContent={
-            <Link color="var(--catalog-metadata-link-color)" to={value.url} target="_blank">
-              <LaunchIcon />
-            </Link>
-          }
-          withSeparator={false}
-        />
+        <Link key={key} color="var(--catalog-metadata-link-color)" to={value.url} target="_blank">
+          <CatalogEntityInfoBar
+            leftContent={
+              <Label>
+                <LinkIcon /> {value.label}
+              </Label>
+            }
+            rightContent={<LaunchIcon />}
+            withSeparator={false}
+          />
+        </Link>
       ))}
     </LinksWrapper>
   );

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

@@ -3,7 +3,8 @@ import styled from 'styled-components';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
-import { capitalize } from '@redocly/theme/core/utils';
+import { JsonViewer } from '@redocly/theme/components/JsonViewer/JsonViewer';
+import { capitalize, isPlainObject } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
 
@@ -13,6 +14,30 @@ export type CatalogEntityMetadataProps = {
   entity: BffCatalogEntity;
 };
 
+function renderMetadataValue(value: any): React.JSX.Element {
+  if (isPlainObject(value)) {
+    return <JsonViewerWrapper data={value} expandLevel={3} hideHeader={true} />;
+  }
+
+  if (Array.isArray(value)) {
+    return (
+      <ArrayWrapper>
+        {value.map((item, index) => (
+          <div key={index}>
+            {isPlainObject(item) ? (
+              <JsonViewerWrapper data={item} expandLevel={3} hideHeader={true} />
+            ) : (
+              <span>{String(item)}</span>
+            )}
+          </div>
+        ))}
+      </ArrayWrapper>
+    );
+  }
+
+  return <span>{String(value)}</span>;
+}
+
 export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -25,6 +50,7 @@ export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
   if (!metadata.length) {
     return null;
   }
+
   return (
     <MetadataWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMetadata">
       <Heading>{translate('catalog.entity.metadata.title')}</Heading>
@@ -32,7 +58,9 @@ export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
         <CatalogEntityInfoBar
           key={key}
           leftContent={<Label>{capitalize(key)}:</Label>}
-          rightContent={<Value>{value}</Value>}
+          rightContent={<Value>{renderMetadataValue(value)}</Value>}
+          hoverEffect={false}
+          isCodeBlock={isPlainObject(value) || Array.isArray(value)}
         />
       ))}
       {hasMoreItems && (
@@ -44,6 +72,10 @@ export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
   );
 }
 
+const JsonViewerWrapper = styled(JsonViewer)`
+  text-align: left;
+`;
+
 const MetadataWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -64,6 +96,11 @@ const Value = styled.span`
   font-weight: var(--font-weight-medium);
 `;
 
+const ArrayWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 const Heading = styled.h2`
   margin-bottom: var(--spacing-base);
   margin-top: 0;

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
+import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
+
+export type CatalogEntityMethodAndPathProps = {
+  entity: BffCatalogEntity;
+};
+
+export function CatalogEntityMethodAndPath({ entity }: CatalogEntityMethodAndPathProps) {
+  const method = entity.metadata?.method;
+  const path = entity.metadata?.path;
+
+  if (!method || !path) {
+    return null;
+  }
+
+  return (
+    <LinksWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMethodAndPath">
+      <Heading>Method & Path</Heading>
+      <CatalogEntityInfoBar
+        leftContent={
+          <Label>
+            <MethodTag color={method.toLowerCase()}>{method}</MethodTag>
+            {path}
+          </Label>
+        }
+        withSeparator={false}
+      />
+    </LinksWrapper>
+  );
+}
+
+const MethodTag = styled(HttpTag)`
+  width: auto;
+  justify-content: start;
+  margin-right: var(--spacing-xxs);
+`;
+
+const LinksWrapper = 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;
+`;
+
+const Label = styled.div`
+  display: flex;
+`;
+
+const Heading = styled.h2`
+  margin-bottom: var(--spacing-sm);
+  margin-top: 0;
+  font-size: var(--font-size-md);
+  color: var(--catalog-metadata-heading-color);
+`;

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

@@ -1,5 +1,6 @@
 import React, { JSX } from 'react';
 import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { DocumentIcon, getPathPrefix, Tag, useThemeHooks } from '@redocly/theme';
@@ -25,7 +26,11 @@ export function ApiDescriptionProperty({ entity }: ApiDescriptionPropertyProps):
             {translate('catalog.entity.properties.apiDescription.title')}
           </>
         }
-        content={<Tag>{descriptionFile}</Tag>}
+        content={
+          <Tag textTransform="none">
+            <DescriptionFile>{descriptionFile}</DescriptionFile>
+          </Tag>
+        }
         onClick={() => {
           navigate(`${pathPrefix}/${descriptionFile}`);
         }}
@@ -33,3 +38,9 @@ export function ApiDescriptionProperty({ entity }: ApiDescriptionPropertyProps):
     </div>
   );
 }
+
+const DescriptionFile = styled.span`
+  word-break: break-all;
+  overflow-wrap: break-word;
+  white-space: normal;
+`;

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

@@ -10,6 +10,7 @@ import { UserEmailProperty } from '@redocly/theme/components/Catalog/CatalogEnti
 import { DomainsProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty';
 import { OwnersProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty';
 import { ContactProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty';
+import { FormatProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty';
 
 type PropertyRenderer = {
   key: string;
@@ -23,6 +24,11 @@ const propertyRenderers: PropertyRenderer[] = [
     condition: (entity) => !!entity.type,
     component: EntityTypeProperty,
   },
+  {
+    key: 'format',
+    condition: (entity) => entity.type === 'data-schema' && !!entity.metadata?.specType,
+    component: FormatProperty,
+  },
   {
     key: 'contact',
     condition: (entity) => !!entity.contact?.slack?.channels,
@@ -35,7 +41,7 @@ const propertyRenderers: PropertyRenderer[] = [
   },
   {
     key: 'tags',
-    condition: (entity) => !!entity.tags,
+    condition: (entity) => !!entity.tags?.length,
     component: TagsProperty,
   },
   {

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

@@ -5,17 +5,20 @@ export type CatalogEntityPropertyCardProps = {
   header: ReactNode;
   content: ReactNode;
   onClick?: () => void;
+  hoverEffect?: boolean;
 };
 
 export function CatalogEntityPropertyCard({
   header,
   content,
   onClick,
+  hoverEffect = true,
 }: CatalogEntityPropertyCardProps): JSX.Element {
   return (
     <CatalogEntityPropertyWrapper
       data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard"
       onClick={onClick}
+      hoverEffect={hoverEffect}
     >
       <CardHeader>{header}</CardHeader>
       <CardContent>{content}</CardContent>
@@ -23,7 +26,7 @@ export function CatalogEntityPropertyCard({
   );
 }
 
-const CatalogEntityPropertyWrapper = styled.div`
+const CatalogEntityPropertyWrapper = styled.div<{ hoverEffect: boolean }>`
   display: flex;
   flex-direction: column;
   color: var(--catalog-card-text-color);
@@ -36,9 +39,13 @@ const CatalogEntityPropertyWrapper = styled.div`
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
   gap: var(--catalog-card-content-gap-vertical);
 
-  &:hover {
-    border-color: var(--catalog-card-border-color-hover);
-  }
+  ${({ hoverEffect }) =>
+    hoverEffect &&
+    `
+    &:hover {
+      border-color: var(--catalog-card-border-color-hover);
+    }
+  `}
 
   ${(props) =>
     props.onClick &&
@@ -51,6 +58,7 @@ const CardHeader = styled.div`
   display: flex;
   align-items: center;
   gap: var(--catalog-card-content-gap);
+  font-weight: var(--font-weight-medium);
 `;
 
 const CardContent = styled.div`
@@ -59,4 +67,7 @@ const CardContent = styled.div`
   align-items: center;
   gap: var(--catalog-card-content-gap);
   flex-wrap: wrap;
+  color: var(--text-color-primary);
+  font-size: var(--font-size-lg);
+  line-height: var(--line-height-lg);
 `;

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

@@ -24,7 +24,11 @@ export function ContactProperty({ entity }: ContactPropertyProps): JSX.Element {
         content={
           <>
             {channels?.map((channel) => (
-              <Tag key={channel.name} style={{ backgroundColor: 'var(--bg-color)' }}>
+              <Tag
+                key={channel.name}
+                textTransform="none"
+                style={{ backgroundColor: 'var(--bg-color)' }}
+              >
                 {channel.name}
               </Tag>
             ))}

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

@@ -2,9 +2,8 @@ import React, { JSX } from 'react';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
-import { Tag } from '@redocly/theme';
-
-import { CatalogEntityPropertyCard } from './CatalogEntityPropertyCard';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
 
 export type DomainsPropertyProps = {
   entity: BffCatalogEntity;

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

@@ -4,13 +4,20 @@ import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { EntityTypeIcon } from '@redocly/theme/icons/EntityTypeIcon/EntityTypeIcon';
 import { capitalize } from '@redocly/theme/core/utils';
 import { CatalogEntityTypeIcon } from '@redocly/theme/components/Catalog/CatalogEntityTypeIcon';
-
-import { CatalogEntityPropertyCard } from './CatalogEntityPropertyCard';
+import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
 
 export type EntityTypePropertyProps = {
   entity: BffCatalogEntity;
 };
 
+const formatEntityType = (entityType: string) => {
+  return capitalize(
+    entityType.startsWith('api-')
+      ? entityType.replace('api-', 'API-').replace(/-/g, ' ')
+      : entityType.replace(/-/g, ' '),
+  );
+};
+
 export function EntityTypeProperty({ entity }: EntityTypePropertyProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty">
@@ -24,9 +31,10 @@ export function EntityTypeProperty({ entity }: EntityTypePropertyProps): JSX.Ele
         content={
           <>
             <CatalogEntityTypeIcon entityType={entity.type} />
-            <strong>{capitalize(entity.type)}</strong>
+            {formatEntityType(entity.type)}
           </>
         }
+        hoverEffect={false}
       />
     </div>
   );

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

@@ -0,0 +1,37 @@
+import React, { JSX } from 'react';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { NotesIcon } from '@redocly/theme/icons/NotesIcon/NotesIcon';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+
+export type FormatPropertyProps = {
+  entity: BffCatalogEntity;
+};
+
+export function FormatProperty({ entity }: FormatPropertyProps): JSX.Element {
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty">
+      <CatalogEntityPropertyCard
+        header={
+          <>
+            <NotesIcon />
+            Format
+          </>
+        }
+        content={
+          <>
+            <Tag
+              textTransform="none"
+              key={entity.metadata?.specType}
+              style={{ backgroundColor: 'var(--bg-color)' }}
+            >
+              {entity.metadata?.specType}
+            </Tag>
+          </>
+        }
+        hoverEffect={false}
+      />
+    </div>
+  );
+}

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

@@ -28,7 +28,7 @@ export function GitProperty({ entity }: GitPropertyProps): JSX.Element {
               const url = new URL(repo);
               const repoName = removeLeadingSlash(url.pathname);
               return (
-                <Tag key={repo} style={{ backgroundColor: 'var(--bg-color)' }}>
+                <Tag key={repo} textTransform="none" style={{ backgroundColor: 'var(--bg-color)' }}>
                   {repoName}
                 </Tag>
               );

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

@@ -30,9 +30,11 @@ export function TagsProperty({ entity }: TagsPropertyProps): JSX.Element {
               },
               borderless: true,
               color: 'grey',
+              textTransform: 'none',
             }}
           />
         }
+        hoverEffect={false}
       />
     </div>
   );

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

@@ -1,20 +1,11 @@
 import React, { JSX } from 'react';
-import styled from 'styled-components';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
-import {
-  BffCatalogEntity,
-  BffCatalogRelatedEntity,
-  EntityType,
-  SortOption,
-} from '@redocly/theme/core/types';
-import {
-  CatalogColumn,
-  getEntityTagColor,
-} from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+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';
-import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';
+import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
 import { CatalogEntityRelationCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityRelationCell';
 
 const columns: CatalogColumn<BffCatalogRelatedEntity>[] = [
@@ -29,11 +20,7 @@ const columns: CatalogColumn<BffCatalogRelatedEntity>[] = [
   {
     key: 'type',
     title: 'Type',
-    render: (entity) => (
-      <EntityTypeTag color={getEntityTagColor(entity.type as EntityType)}>
-        {entity.type}
-      </EntityTypeTag>
-    ),
+    render: (entity) => <CatalogEntityTypeTag entityType={entity.type} />,
     sortable: true,
     sortKey: 'type',
     width: '1fr',
@@ -68,6 +55,7 @@ export type CatalogEntityDefaultRelationsProps = {
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
   shouldShowLoadMore: boolean;
+  shouldShowHeading?: boolean;
 };
 
 export function CatalogEntityDefaultRelations({
@@ -83,6 +71,7 @@ export function CatalogEntityDefaultRelations({
   handleSortClick,
   isColumnSorted,
   shouldShowLoadMore,
+  shouldShowHeading = true,
 }: CatalogEntityDefaultRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations">
@@ -94,7 +83,7 @@ export function CatalogEntityDefaultRelations({
         query={query}
         searchQuery={searchQuery}
         setSearchQuery={setSearchQuery}
-        heading="Related entities"
+        heading={shouldShowHeading ? 'Related entities' : undefined}
         columns={columns}
         sortOption={sortOption}
         setSortOption={setSortOption}
@@ -105,8 +94,3 @@ export function CatalogEntityDefaultRelations({
     </div>
   );
 }
-
-const EntityTypeTag = styled(Tag)`
-  font-size: var(--font-size-base);
-  background-color: transparent;
-`;

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

@@ -11,6 +11,8 @@ export type CatalogEntityRelationsProps = {
   entitiesCatalogConfig: EntitiesCatalogConfig;
   catalogConfig: CatalogEntityConfig;
   initialRelations: BffCatalogRelatedEntityList;
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
 };
 const LOAD_MORE_THRESHOLD = 10;
 const ENTITY_DEFAULT_FILTERS: Record<string, string> = {
@@ -22,10 +24,11 @@ export function CatalogEntityRelations({
   entitiesCatalogConfig,
   initialRelations,
   catalogConfig,
+  searchQuery,
+  setSearchQuery,
 }: CatalogEntityRelationsProps): JSX.Element | null {
-  const { useCatalogSort, useCatalogSearch, useFetchCatalogEntitiesRelations } = useThemeHooks();
+  const { useCatalogSort, 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(
@@ -33,10 +36,6 @@ export function CatalogEntityRelations({
     initialRelations,
   );
 
-  if (relations.length === 0) {
-    return null;
-  }
-
   const shouldShowLoadMore =
     query.hasNextPage ||
     (query.isPlaceholderData && relations && relations.length >= LOAD_MORE_THRESHOLD);