@redocly/theme 0.55.0-next.7 → 0.55.0-next.9

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

@@ -0,0 +1,83 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+
+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';
+import { ContactProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty';
+
+type PropertyRenderer = {
+  key: string;
+  condition: (entity: BffCatalogEntity) => boolean;
+  component: React.ComponentType<{ entity: BffCatalogEntity }>;
+};
+
+const propertyRenderers: PropertyRenderer[] = [
+  {
+    key: 'type',
+    condition: (entity) => !!entity.type,
+    component: EntityTypeProperty,
+  },
+  {
+    key: 'contact',
+    condition: (entity) => !!entity.contact?.slack?.channels,
+    component: ContactProperty,
+  },
+  {
+    key: 'git',
+    condition: (entity) => !!entity.git,
+    component: GitProperty,
+  },
+  {
+    key: 'tags',
+    condition: (entity) => !!entity.tags,
+    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,
+    component: UserEmailProperty,
+  },
+  {
+    key: 'domains',
+    condition: (entity) => (entity.domains?.length ?? 0) > 0,
+    component: DomainsProperty,
+  },
+  {
+    key: 'owners',
+    condition: (entity) => (entity.owners?.length ?? 0) > 0,
+    component: OwnersProperty,
+  },
+];
+
+export type CatalogEntityPropertiesProps = {
+  entity: BffCatalogEntity;
+};
+
+export function CatalogEntityProperties({ entity }: CatalogEntityPropertiesProps): JSX.Element {
+  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>
+  );
+}
+
+const CatalogEntityPropertiesGridWrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(325px, 1fr));
+  gap: var(--spacing-base);
+`;

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

@@ -0,0 +1,62 @@
+import React, { ReactNode, JSX } from 'react';
+import styled from 'styled-components';
+
+export type CatalogEntityPropertyCardProps = {
+  header: ReactNode;
+  content: ReactNode;
+  onClick?: () => void;
+};
+
+export function CatalogEntityPropertyCard({
+  header,
+  content,
+  onClick,
+}: CatalogEntityPropertyCardProps): JSX.Element {
+  return (
+    <CatalogEntityPropertyWrapper
+      data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard"
+      onClick={onClick}
+    >
+      <CardHeader>{header}</CardHeader>
+      <CardContent>{content}</CardContent>
+    </CatalogEntityPropertyWrapper>
+  );
+}
+
+const CatalogEntityPropertyWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  color: var(--catalog-card-text-color);
+  background-color: var(--catalog-card-bg-color);
+  border: var(--catalog-card-border-width) var(--catalog-card-border-style)
+    var(--catalog-card-border-color);
+  border-radius: var(--catalog-card-border-radius, 8px);
+  transition: all 0.2s ease-in-out;
+  height: 100%;
+  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);
+  }
+
+  ${(props) =>
+    props.onClick &&
+    `
+    cursor: pointer;
+  `}
+`;
+
+const CardHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-card-content-gap);
+`;
+
+const CardContent = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-card-content-gap);
+  flex-wrap: wrap;
+`;

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

@@ -0,0 +1,36 @@
+import React, { JSX } from 'react';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { SlackIcon } from '@redocly/theme/icons/SlackIcon/SlackIcon';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+
+export type ContactPropertyProps = {
+  entity: BffCatalogEntity;
+};
+
+export function ContactProperty({ entity }: ContactPropertyProps): JSX.Element {
+  const channels = entity.contact?.slack?.channels;
+
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty">
+      <CatalogEntityPropertyCard
+        header={
+          <>
+            <SlackIcon />
+            Slack channels
+          </>
+        }
+        content={
+          <>
+            {channels?.map((channel) => (
+              <Tag key={channel.name} style={{ backgroundColor: 'var(--bg-color)' }}>
+                {channel.name}
+              </Tag>
+            ))}
+          </>
+        }
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,38 @@
+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';
+
+export type DomainsPropertyProps = {
+  entity: BffCatalogEntity;
+};
+
+export function DomainsProperty({ entity }: DomainsPropertyProps): JSX.Element {
+  const { domains = [] } = entity;
+
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty">
+      <CatalogEntityPropertyCard
+        header={
+          <>
+            <GraphIcon />
+            Domains
+          </>
+        }
+        content={
+          <>
+            {domains?.map((domain) => (
+              <Tag key={domain?.id} style={{ backgroundColor: 'var(--bg-color)' }}>
+                <GraphIcon />
+                {domain?.title}
+              </Tag>
+            ))}
+          </>
+        }
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,33 @@
+import React, { JSX } from 'react';
+
+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';
+
+export type EntityTypePropertyProps = {
+  entity: BffCatalogEntity;
+};
+
+export function EntityTypeProperty({ entity }: EntityTypePropertyProps): JSX.Element {
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty">
+      <CatalogEntityPropertyCard
+        header={
+          <>
+            <EntityTypeIcon />
+            Entity type
+          </>
+        }
+        content={
+          <>
+            <CatalogEntityTypeIcon entityType={entity.type} />
+            <strong>{capitalize(entity.type)}</strong>
+          </>
+        }
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,41 @@
+import React, { JSX } from 'react';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { GithubIcon } from '@redocly/theme/icons/GithubIcon/GithubIcon';
+import { removeLeadingSlash } from '@redocly/theme/core/utils';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+
+export type GitPropertyProps = {
+  entity: BffCatalogEntity;
+};
+
+export function GitProperty({ entity }: GitPropertyProps): JSX.Element {
+  const git = entity.git;
+
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/GitProperty">
+      <CatalogEntityPropertyCard
+        header={
+          <>
+            <GithubIcon />
+            Repositories
+          </>
+        }
+        content={
+          <>
+            {git?.map((repo) => {
+              const url = new URL(repo);
+              const repoName = removeLeadingSlash(url.pathname);
+              return (
+                <Tag key={repo} style={{ backgroundColor: 'var(--bg-color)' }}>
+                  {repoName}
+                </Tag>
+              );
+            })}
+          </>
+        }
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,42 @@
+import React, { JSX } from 'react';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+
+export type OwnersPropertyProps = {
+  entity: BffCatalogEntity;
+};
+
+export function OwnersProperty({ entity }: OwnersPropertyProps): JSX.Element {
+  const { owners = [] } = entity;
+
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty">
+      <CatalogEntityPropertyCard
+        header={
+          <>
+            <PeopleIcon />
+            Owners
+          </>
+        }
+        content={
+          <>
+            {owners.map((owner) => (
+              <Tag
+                key={owner?.id}
+                style={{
+                  backgroundColor: 'var(--bg-color)',
+                  borderRadius: 'var(--border-radius-xl)',
+                }}
+              >
+                {owner?.title}
+              </Tag>
+            ))}
+          </>
+        }
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,39 @@
+import React, { JSX } from 'react';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { TagsIcon } from '@redocly/theme/icons/TagsIcon/TagsIcon';
+import { CatalogTagsWithTooltip } from '@redocly/theme';
+import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+
+export type TagsPropertyProps = {
+  entity: BffCatalogEntity;
+};
+
+export function TagsProperty({ entity }: TagsPropertyProps): JSX.Element {
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty">
+      <CatalogEntityPropertyCard
+        header={
+          <>
+            <TagsIcon />
+            Tags
+          </>
+        }
+        content={
+          <CatalogTagsWithTooltip
+            itemsToShow={8}
+            items={entity.tags || []}
+            tagProps={{
+              style: {
+                fontSize: 'var(--font-size-base)',
+                borderRadius: 'var(--border-radius)',
+              },
+              borderless: true,
+              color: 'grey',
+            }}
+          />
+        }
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,31 @@
+import React, { JSX } from 'react';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { EmailIcon } from '@redocly/theme/icons/EmailIcon/EmailIcon';
+import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+import { Email } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogUserEntityCell';
+
+export type UserEmailPropertyProps = {
+  entity: BffCatalogEntity;
+};
+
+export function UserEmailProperty({ entity }: UserEmailPropertyProps): JSX.Element {
+  const email = entity.metadata?.email;
+
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/UserEmailProperty">
+      <CatalogEntityPropertyCard
+        header={
+          <>
+            <EmailIcon />
+            Email
+          </>
+        }
+        content={<Email>{email}</Email>}
+        onClick={() => {
+          window.open(`mailto:${email}`, '_blank');
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,97 @@
+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 { 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';
+
+const columns: CatalogColumn<BffCatalogRelatedEntity>[] = [
+  {
+    key: 'entity',
+    title: 'Entity',
+    render: (entity) => <CatalogEntityCell entity={entity} />,
+    sortable: true,
+    sortKey: 'title',
+  },
+  {
+    key: 'type',
+    title: 'Type',
+    render: (entity) => (
+      <EntityTypeTag color={getEntityTagColor(entity.type as EntityType)}>
+        {entity.type}
+      </EntityTypeTag>
+    ),
+    sortable: true,
+    sortKey: 'type',
+  },
+];
+
+export type CatalogEntityDefaultRelationsProps = {
+  entity: BffCatalogEntity;
+  entitiesCatalogConfig: EntitiesCatalogConfig;
+  catalogConfig: CatalogEntityConfig;
+  relations: BffCatalogRelatedEntity[];
+  query: {
+    fetchNextPage: () => void;
+    isFetchingNextPage: boolean;
+  };
+  searchQuery: string;
+  setSearchQuery: (query: 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 CatalogEntityDefaultRelations({
+  entity,
+  relations,
+  query,
+  searchQuery,
+  setSearchQuery,
+  entitiesCatalogConfig,
+  catalogConfig,
+  sortOption,
+  setSortOption,
+  handleSortClick,
+  isColumnSorted,
+  shouldShowLoadMore,
+}: CatalogEntityDefaultRelationsProps): JSX.Element {
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations">
+      <CatalogEntityRelationsTable
+        entity={entity}
+        catalogConfig={catalogConfig}
+        entitiesCatalogConfig={entitiesCatalogConfig}
+        relations={relations}
+        query={query}
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+        heading="Related entities"
+        columns={columns}
+        sortOption={sortOption}
+        setSortOption={setSortOption}
+        handleSortClick={handleSortClick}
+        isColumnSorted={isColumnSorted}
+        shouldShowLoadMore={shouldShowLoadMore}
+      />
+    </div>
+  );
+}
+
+const EntityTypeTag = styled(Tag)`
+  font-size: var(--font-size-base);
+  background-color: transparent;
+`;

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

@@ -0,0 +1,80 @@
+import React, { JSX } 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';
+
+export type CatalogEntityRelationsProps = {
+  entity: BffCatalogEntity;
+  entitiesCatalogConfig: EntitiesCatalogConfig;
+  catalogConfig: CatalogEntityConfig;
+  initialRelations: BffCatalogRelatedEntityList;
+};
+const LOAD_MORE_THRESHOLD = 10;
+
+export function CatalogEntityRelations({
+  entity,
+  entitiesCatalogConfig,
+  initialRelations,
+  catalogConfig,
+}: CatalogEntityRelationsProps): JSX.Element | null {
+  const { useCatalogSort, useCatalogSearch, useFetchCatalogEntitiesRelations } = useThemeHooks();
+  const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
+  const { searchQuery, setSearchQuery } = useCatalogSearch();
+
+  const { items: relations, query } = useFetchCatalogEntitiesRelations(
+    { entityKey: entity.key, search: searchQuery, sort: sortOption ?? undefined },
+    initialRelations,
+  );
+
+  if (relations.length === 0) {
+    return null;
+  }
+
+  const shouldShowLoadMore =
+    query.hasNextPage ||
+    (query.isPlaceholderData && relations && relations.length >= LOAD_MORE_THRESHOLD);
+
+  switch (entity.type) {
+    case 'team':
+      return (
+        <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations/CatalogEntityTeamRelations">
+          <CatalogEntityTeamRelations
+            entity={entity}
+            catalogConfig={catalogConfig}
+            entitiesCatalogConfig={entitiesCatalogConfig}
+            relations={relations}
+            query={query}
+            searchQuery={searchQuery}
+            setSearchQuery={setSearchQuery}
+            sortOption={sortOption}
+            setSortOption={setSortOption}
+            handleSortClick={handleSortClick}
+            isColumnSorted={isColumnSorted}
+            shouldShowLoadMore={shouldShowLoadMore}
+          />
+        </div>
+      );
+    default:
+      return (
+        <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations/CatalogEntityDefaultRelations">
+          <CatalogEntityDefaultRelations
+            entity={entity}
+            catalogConfig={catalogConfig}
+            entitiesCatalogConfig={entitiesCatalogConfig}
+            relations={relations}
+            query={query}
+            searchQuery={searchQuery}
+            setSearchQuery={setSearchQuery}
+            sortOption={sortOption}
+            setSortOption={setSortOption}
+            handleSortClick={handleSortClick}
+            isColumnSorted={isColumnSorted}
+            shouldShowLoadMore={shouldShowLoadMore}
+          />
+        </div>
+      );
+  }
+}

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

@@ -0,0 +1,92 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import { ArrowDownIcon } from '@redocly/theme/icons/ArrowDownIcon/ArrowDownIcon';
+import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
+import { LoadMore } from '@redocly/theme/components/LoadMore/LoadMore';
+import {
+  CatalogColumn,
+  CatalogTableView,
+} from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+import { CatalogActionsRow } from '@redocly/theme/components/Catalog/CatalogActionsRow';
+import { HighlightContext } from '@redocly/theme/components/Catalog/CatalogHighlight';
+
+export type CatalogEntityRelationsTableProps = {
+  entity: BffCatalogEntity;
+  entitiesCatalogConfig: EntitiesCatalogConfig;
+  catalogConfig: CatalogEntityConfig;
+  relations: BffCatalogRelatedEntity[];
+  query: {
+    fetchNextPage: () => void;
+    isFetchingNextPage: boolean;
+  };
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  heading: string;
+  filter?: string;
+  columns: CatalogColumn<BffCatalogRelatedEntity>[];
+  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 CatalogEntityRelationsTable({
+  entitiesCatalogConfig,
+  catalogConfig,
+  relations,
+  query,
+  searchQuery,
+  setSearchQuery,
+  heading,
+  columns,
+  setSortOption,
+  sortOption,
+  handleSortClick,
+  isColumnSorted,
+  shouldShowLoadMore,
+}: CatalogEntityRelationsTableProps): JSX.Element {
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable">
+      <Heading>{heading}</Heading>
+      <CatalogActionsRow
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+        sortOption={sortOption}
+        setSortOption={setSortOption}
+        style={{ marginBottom: '12px' }}
+      />
+      {relations.length > 0 && (
+        <HighlightContext.Provider value={[searchQuery]}>
+          <CatalogTableView
+            entities={relations}
+            entitiesCatalogConfig={entitiesCatalogConfig}
+            catalogConfig={catalogConfig}
+            columns={columns}
+            setSortOption={setSortOption}
+            currentSortOption={sortOption}
+            handleSortClick={handleSortClick}
+            isColumnSorted={isColumnSorted}
+          />
+        </HighlightContext.Provider>
+      )}
+      {shouldShowLoadMore && (
+        <LoadMore
+          icon={<ArrowDownIcon size="var(--catalog-load-more-icon-size)" />}
+          onClick={query.fetchNextPage}
+          disabled={query.isFetchingNextPage}
+          blinking={query.isFetchingNextPage}
+          label={query.isFetchingNextPage ? 'Loading...' : 'Load More'}
+        />
+      )}
+    </div>
+  );
+}
+
+const Heading = styled.h2`
+  margin: var(--spacing-base) 0;
+  font-size: var(--font-size-md);
+  color: var(--catalog-metadata-heading-color);
+`;