<commit_before>/* @flow */
import * as React from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';

import { sanitizeHTML, nl2br } from 'core/utils';
import translate from 'core/i18n/translate';
import Notice from 'ui/components/Notice';
import type { I18nType } from 'core/types/i18n';
import type { AppState } from 'amo/store';

import './styles.scss';

type Props = {||};

type MappedProps = {|
  siteIsReadOnly: boolean,
  siteNotice: string | null,
|};

type InternalProps = {|
  ...Props,
  ...MappedProps,
  i18n: I18nType,
|};

// This is needed because of https://github.com/mozilla/addons-frontend/issues/8616
//
// We cannot use `sanitizeUserHTML()` on a `<span />`, which is required to
// avoid the UI glitch so we configure our own sanitize function to make sure
// it is safe to use `<span />`.
const sanitizeNoticeHTML = (text: string): string => {
  return sanitizeHTML(nl2br(text), ['a', 'b', 'br', 'em', 'i', 'strong']);
};

export class SiteNoticesBase extends React.Component<InternalProps> {
  render() {
    const { i18n, siteIsReadOnly, siteNotice } = this.props;

    const notices = [];

    if (siteNotice) {
      notices.push(
        <Notice className="SiteNotices" id="amo-site-notice" type="warning">
          <span
            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML={sanitizeNoticeHTML(siteNotice)}
          />
        </Notice>,
      );
    }

    if (siteIsReadOnly) {
      notices.push(
        <Notice className="SiteNotices" id="amo-site-read-only" type="warning"><commit_msg>[fix]: Fixed console warning by adding keys to the items (#9256)<commit_after>/* @flow */
import * as React from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';

import { sanitizeHTML, nl2br } from 'core/utils';
import translate from 'core/i18n/translate';
import Notice from 'ui/components/Notice';
import type { I18nType } from 'core/types/i18n';
import type { AppState } from 'amo/store';

import './styles.scss';

type Props = {||};

type MappedProps = {|
  siteIsReadOnly: boolean,
  siteNotice: string | null,
|};

type InternalProps = {|
  ...Props,
  ...MappedProps,
  i18n: I18nType,
|};

// This is needed because of https://github.com/mozilla/addons-frontend/issues/8616
//
// We cannot use `sanitizeUserHTML()` on a `<span />`, which is required to
// avoid the UI glitch so we configure our own sanitize function to make sure
// it is safe to use `<span />`.
const sanitizeNoticeHTML = (text: string): string => {
  return sanitizeHTML(nl2br(text), ['a', 'b', 'br', 'em', 'i', 'strong']);
};

export class SiteNoticesBase extends React.Component<InternalProps> {
  render() {
    const { i18n, siteIsReadOnly, siteNotice } = this.props;

    const notices = [];

    if (siteNotice) {
      notices.push(
        <Notice
          className="SiteNotices"
          id="amo-site-notice"
          type="warning"
          key="amo-site-notice"
        >
          <span
            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML={sanitizeNoticeHTML(siteNotice)}
          />
        </Notice>,
      );
    }

    if (siteIsReadOnly) {
      notices.push(
        <Notice
          className="SiteNotices"
          id="amo-site-read-only"
          type="warning"
          key="amo-site-read-only"
        >
{'fraction_non_alphanumeric': 0.14653641207815277, 'fraction_numerical': 0.011841326228537596, 'mean_word_length': 2.947429906542056, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 19, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1873435', 'n_tokens_mistral': 1113, 'n_tokens_neox': 1066, 'n_words': 287}