sentry/static/app/components/alerts/onDemandMetricAlert.tsx

import React from 'react';
import styled from '@emotion/styled';

import Alert from 'sentry/components/alert';
import {Button} from 'sentry/components/button';
import {Tooltip} from 'sentry/components/tooltip';
import {IconClose, IconWarning} from 'sentry/icons';
import {t} from 'sentry/locale';
import {Color} from 'sentry/utils/theme';
import useDismissAlert from 'sentry/utils/useDismissAlert';

const EXTRAPOLATED_AREA_STRIPE_IMG =
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAABkAQMAAACFAjPUAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFpKy5SVlzL3npZAAAAA9JREFUeJxjsD/AMIqIQwBIyGOd43jaDwAAAABJRU5ErkJggg==';

export const extrapolatedAreaStyle = {
  color: {
    repeat: 'repeat',
    image: EXTRAPOLATED_AREA_STRIPE_IMG,
    rotation: 0.785,
    scaleX: 0.5,
  },
  opacity: 1.0,
};

export function OnDemandWarningIcon({
  msg,
  color = 'gray300',
}: {
  msg: React.ReactNode;
  color?: Color;
}) {
  return (
    <Tooltip skipWrapper title={msg}>
      <HoverableIconWarning color={color} />
    </Tooltip>
  );
}

const LOCAL_STORAGE_KEY = 'on-demand-empty-alert-dismissed';

export function OnDemandMetricAlert({
  message,
  dismissable = false,
}: {
  message: React.ReactNode;
  dismissable?: boolean;
}) {
  const {dismiss, isDismissed} = useDismissAlert({key: LOCAL_STORAGE_KEY});

  if (dismissable && isDismissed) {
    return null;
  }

  return (
    <InfoAlert showIcon>
      {message}
      {dismissable && (
        <DismissButton
          priority="link"
          size="sm"
          icon={<IconClose size="xs" />}
          aria-label={t('Close Alert')}
          onClick={dismiss}
        />
      )}
    </InfoAlert>
  );
}

const InfoAlert = styled(Alert)`
  display: flex;
  align-items: flex-start;

  & > span {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;

    line-height: 1.5em;
  }
`;

const DismissButton = styled(Button)`
  pointer-events: all;
  &:hover {
    opacity: 0.5;
  }
`;

const HoverableIconWarning = styled(IconWarning)`
  &:hover {
    cursor: pointer;
  }
`;