@redocly/theme/lib/components/Catalog/CatalogEntity/CatalogEntity.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CatalogEntity = CatalogEntity;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const react_router_dom_1 = require("react-router-dom");
const utils_1 = require("../../../core/utils");
const CatalogPageDescription_1 = require("../../../components/Catalog/CatalogPageDescription");
const CatalogEntityProperties_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties");
const CatalogEntityMetadata_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityMetadata");
const CatalogEntityLinks_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityLinks");
const Breadcrumbs_1 = require("../../../components/Breadcrumbs/Breadcrumbs");
const CatalogEntityRelations_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations");
const hooks_1 = require("../../../core/hooks");
const CatalogEntitySchema_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntitySchema");
const CatalogEntityMethodAndPath_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityMethodAndPath");
const CatalogEntityRelationsGraph_lazy_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy");
const CatalogEntityHistorySidebar_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar");
const renderFirstColumnEntitySection = (entity) => {
    switch (entity.type) {
        case 'api-operation':
            return react_1.default.createElement(CatalogEntityMethodAndPath_1.CatalogEntityMethodAndPath, { entity: entity });
        default:
            return react_1.default.createElement(CatalogEntityMetadata_1.CatalogEntityMetadata, { entity: entity });
    }
};
const renderDataSchemaSection = ({ entity, relatedEntity, catalogConfig, RedocSchema, StoreProvider, GraphqlTypeRenderer, }) => {
    if (entity.type !== 'data-schema') {
        return null;
    }
    return (react_1.default.createElement(CatalogEntitySchema_1.CatalogEntitySchema, { entity: entity, relatedEntity: relatedEntity, catalogConfig: catalogConfig, RedocSchema: RedocSchema, StoreProvider: StoreProvider, GraphqlTypeRenderer: GraphqlTypeRenderer }));
};
function CatalogEntity({ RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
    var _a;
    const { useTranslate, useCatalog, usePageProps } = (0, hooks_1.useThemeHooks)();
    const { translate } = useTranslate();
    const { entity, relations, catalogConfig, entitiesCatalogConfig, relatedEntity } = usePageProps();
    const [searchParams] = (0, react_router_dom_1.useSearchParams)();
    const revision = searchParams.get('revision') || undefined;
    const version = searchParams.get('version') || undefined;
    const linkToMainCatalog = `catalogs/${catalogConfig.slug}`;
    const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
    const { searchQuery, setSearchQuery } = useCatalog();
    return (react_1.default.createElement(CatalogPageWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntity" },
        react_1.default.createElement(CatalogEntityHistorySidebar_1.CatalogEntityHistorySidebar, { entityKey: entity.key, revision: revision, version: version }),
        react_1.default.createElement(CatalogPageContent, null,
            react_1.default.createElement(Breadcrumbs_1.Breadcrumbs, { additionalBreadcrumbs: [
                    { label: linkToMainCatalogLabel, link: linkToMainCatalog },
                    { label: entity.title },
                ] }),
            react_1.default.createElement(CatalogEntityPageWrapper, null,
                react_1.default.createElement(react_router_dom_1.Routes, null,
                    react_1.default.createElement(react_router_dom_1.Route, { path: `${catalogConfig.slug}/entities/${entity.key}` },
                        react_1.default.createElement(react_router_dom_1.Route, { index: true, element: react_1.default.createElement(react_1.default.Fragment, null,
                                react_1.default.createElement(CatalogPageDescription_1.CatalogPageDescription, { title: entity.title, description: (_a = entity.summary) !== null && _a !== void 0 ? _a : '', tag: entity.key }),
                                react_1.default.createElement(CatalogEntityProperties_1.CatalogEntityProperties, { entity: entity }),
                                renderDataSchemaSection({
                                    entity,
                                    relatedEntity,
                                    catalogConfig,
                                    RedocSchema,
                                    StoreProvider,
                                    GraphqlTypeRenderer,
                                }),
                                react_1.default.createElement(CatalogTwoColumnsSection, null,
                                    renderFirstColumnEntitySection(entity),
                                    react_1.default.createElement(CatalogEntityLinks_1.CatalogEntityLinks, { entity: entity })),
                                react_1.default.createElement(CatalogEntityRelations_1.CatalogEntityRelations, { entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, initialRelations: relations, searchQuery: searchQuery, setSearchQuery: setSearchQuery })) }),
                        react_1.default.createElement(react_router_dom_1.Route, { path: "relations-graph", element: react_1.default.createElement(CatalogEntityRelationsGraph_lazy_1.CatalogEntityRelationsGraph, { entity: entity }) })))))));
}
const CatalogPageWrapper = styled_components_1.default.div `
  max-width: var(--catalog-entity-max-width);
  margin: var(--catalog-entity-margin);
  padding: var(--catalog-entity-padding);

  @media screen and (max-width: ${utils_1.breakpoints.large}) {
    padding: var(--catalog-entity-padding-large);
  }

  @media screen and (max-width: ${utils_1.breakpoints.medium}) {
    padding: var(--catalog-entity-padding-medium);
  }

  @media screen and (max-width: ${utils_1.breakpoints.small}) {
    padding: var(--catalog-entity-padding-small);
  }

  --sidebar-width: var(--catalog-sidebar-width);
  --link-color-primary: var(--breadcrumbs-text-color);

  display: flex;
  flex-direction: column;

  font-weight: var(--font-weight-regular);

  color: var(--text-color-secondary);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);

  a:not([role='button']) {
    text-decoration: none;
    color: var(--link-color-primary);
    font-weight: var(--link-font-weight);
  }
`;
const CatalogPageContent = styled_components_1.default.main `
  flex: 1;
  width: 100%;
  margin: 0 auto;
`;
const CatalogEntityPageWrapper = styled_components_1.default.div `
  display: flex;
  flex-direction: column;

  font-weight: var(--font-weight-regular);

  color: var(--text-color-secondary);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);
`;
const CatalogTwoColumnsSection = styled_components_1.default.section `
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
`;
//# sourceMappingURL=CatalogEntity.js.map