integrationRow.tsx

import styled from '@emotion/styled';
import startCase from 'lodash/startCase';

import {Alert} from 'sentry/components/core/alert';
import {Tag} from 'sentry/components/core/badge/tag';
import {LinkButton} from 'sentry/components/core/button';
import Link from 'sentry/components/links/link';
import PanelItem from 'sentry/components/panels/panelItem';
import {t} from 'sentry/locale';
import PluginIcon from 'sentry/plugins/components/pluginIcon';
import {space} from 'sentry/styles/space';
import type {
  IntegrationInstallationStatus,
  PluginWithProjectList,
  SentryApp,
  SentryAppStatus,
} from 'sentry/types/integrations';
import type {Organization} from 'sentry/types/organization';
import {
  convertIntegrationTypeToSnakeCase,
  trackIntegrationAnalytics,
} from 'sentry/utils/integrationUtil';

import AlertContainer from './integrationAlertContainer';
import IntegrationStatus from './integrationStatus';
import PluginDeprecationAlert from './pluginDeprecationAlert';

type Props = {
  categories: string[];
  configurations: number;
  displayName: string;
  organization: Organization;
  publishStatus: SentryAppStatus;
  slug: string;
  type: 'plugin' | 'firstParty' | 'sentryApp' | 'docIntegration';
  /**
   * If provided, render an alert message with this text.
   */
  alertText?: string;
  customAlert?: React.ReactNode;
  customIcon?: React.ReactNode;
  plugin?: PluginWithProjectList;
  /**
   * If `alertText` was provided, this text overrides the "Resolve now" message
   * in the alert.
   */
  resolveText?: string;
  status?: IntegrationInstallationStatus;
};

const urlMap = {
  plugin: 'plugins',
  firstParty: 'integrations',
  sentryApp: 'sentry-apps',
  docIntegration: 'document-integrations',
};

function IntegrationRow(props: Props) {
  const {
    organization,
    type,
    slug,
    displayName,
    status,
    publishStatus,
    configurations,
    categories,
    alertText,
    resolveText,
    plugin,
    customAlert,
    customIcon,
  } = props;

  const baseUrl =
    publishStatus === 'internal'
      ? `/settings/${organization.slug}/developer-settings/${slug}/`
      : `/settings/${organization.slug}/${urlMap[type]}/${slug}/`;

  const renderDetails = () => {
    if (type === 'sentryApp') {
      return publishStatus !== 'published' && <PublishStatus status={publishStatus} />;
    }
    // TODO: Use proper translations
    return configurations > 0 ? (
      <StyledLink to={`${baseUrl}?tab=configurations`}>{`${configurations} Configuration${
        configurations > 1 ? 's' : ''
      }`}</StyledLink>
    ) : null;
  };

  const renderStatus = () => {
    // status should be undefined for document integrations
    if (status) {
      return <IntegrationStatus status={status} />;
    }
    return <LearnMore to={baseUrl}>{t('Learn More')}</LearnMore>;
  };

  return (
    <PanelRow noPadding data-test-id={slug}>
      <FlexContainer>
        {customIcon ?? <PluginIcon size={36} pluginId={slug} />}
        <TitleContainer>
          <IntegrationName to={baseUrl}>{displayName}</IntegrationName>
          <IntegrationDetails>
            {renderStatus()}
            {renderDetails()}
          </IntegrationDetails>
        </TitleContainer>
        <TagsContainer>
          {categories?.map(category => (
            <Tag
              key={category}
              type={category === publishStatus ? 'highlight' : 'default'}
            >
              {category === 'api' ? 'API' : startCase(category)}
            </Tag>
          ))}
        </TagsContainer>
      </FlexContainer>
      {alertText && (
        <AlertContainer>
          <Alert.Container>
            <Alert
              type="warning"
              showIcon
              trailingItems={
                <ResolveNowButton
                  href={`${baseUrl}?tab=configurations&referrer=directory_resolve_now`}
                  size="xs"
                  onClick={() =>
                    trackIntegrationAnalytics('integrations.resolve_now_clicked', {
                      integration_type: convertIntegrationTypeToSnakeCase(type),
                      integration: slug,
                      organization,
                    })
                  }
                >
                  {resolveText || t('Resolve Now')}
                </ResolveNowButton>
              }
            >
              {alertText}
            </Alert>
          </Alert.Container>
        </AlertContainer>
      )}
      {customAlert}
      {plugin?.deprecationDate && (
        <PluginDeprecationAlertWrapper>
          <PluginDeprecationAlert organization={organization} plugin={plugin} />
        </PluginDeprecationAlertWrapper>
      )}
    </PanelRow>
  );
}

const PluginDeprecationAlertWrapper = styled('div')`
  padding: 0px ${space(3)} 0px 68px;
`;

const PanelRow = styled(PanelItem)`
  flex-direction: column;
`;

const FlexContainer = styled('div')`
  display: flex;
  align-items: center;
  padding: ${space(2)};
`;

const TitleContainer = styled('div')`
  flex: 1;
  padding: 0 16px;
  white-space: nowrap;
`;

const TagsContainer = styled('div')`
  flex: 3;
  padding: 0 ${space(2)};
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: ${space(1)};
  justify-content: flex-end;
`;

const IntegrationName = styled(Link)`
  font-weight: ${p => p.theme.fontWeightBold};
`;

const IntegrationDetails = styled('div')`
  display: flex;
  align-items: center;
  font-size: ${p => p.theme.fontSizeSmall};
`;

const StyledLink = styled(Link)`
  color: ${p => p.theme.subText};
  &:before {
    content: '|';
    color: ${p => p.theme.subText};
    margin-right: ${space(0.75)};
  }
`;

const LearnMore = styled(Link)`
  color: ${p => p.theme.subText};
`;

type PublishStatusProps = {status: SentryApp['status']};

const PublishStatus = styled(({status, ...props}: PublishStatusProps) => (
  <div {...props}>{status}</div>
))`
  color: ${p => (p.status === 'published' ? p.theme.success : p.theme.gray300)};
  font-weight: light;
  margin-right: ${space(0.75)};
  text-transform: capitalize;
  &:before {
    content: '|';
    color: ${p => p.theme.subText};
    margin-right: ${space(0.75)};
    font-weight: ${p => p.theme.fontWeightNormal};
  }
`;

const ResolveNowButton = styled(LinkButton)`
  color: ${p => p.theme.subText};
  float: right;
`;

export default IntegrationRow;