Function renderEntry

packages/react/src/pages/integrations.tsx:495–531

(integration: Integration)

  const items = useMemo(() => groupIntegrations(props.integrations), [props.integrations]);

  const renderEntry = (integration: Integration) => {
    const pluginKey = KIND_TO_PLUGIN_KEY[integration.kind] ?? integration.kind;
    const plugin = pluginByKind.get(pluginKey);
    const SummaryComponent = plugin?.summary;
    const slug = String(integration.slug);
    const name = integration.name || slug;
    return (
      <CardStackEntry key={slug} asChild searchText={`${name} ${slug} ${integration.kind}`}>
        <Link
          to="/{-$orgSlug}/integrations/$namespace"
          params={{ namespace: slug }}
          data-testid={`integration-entry-${slug}`}
        >
          <IntegrationIconWithAccount
            icon={integrationPresetIconUrl(
              { id: slug, kind: integration.kind, name, url: integration.displayUrl },
              integrationPlugins,
            )}
            integrationId={slug}
            url={integration.displayUrl ?? integrationInferredUrl({ id: slug, name }) ?? undefined}
          />
          <CardStackEntryContent>
            <CardStackEntryTitle>{name}</CardStackEntryTitle>
            <CardStackEntryDescription>{slug}</CardStackEntryDescription>
          </CardStackEntryContent>
          <CardStackEntryActions>
            {SummaryComponent && (
              <Suspense fallback={null}>
                <SummaryComponent integrationId={slug} />
              </Suspense>
            )}
            <IntegrationHealthSummary integration={integration.slug} />
          </CardStackEntryActions>
        </Link>
      </CardStackEntry>
    );
  };

  const rendered: ReactNode[] = [];
  let flatRun: Integration[] = [];