<commit_before>/* @flow */

import * as React from 'react';
import { Link } from 'react-router-dom';
import Linkify from 'react-linkify';
import { Localized } from 'fluent-react';

import './Metadata.css';

import Screenshots from './Screenshots';

import type { Locale } from 'core/locales';
import type { DbEntity } from 'modules/entitieslist';


type PropertyProps = {|
    +title: string,
    +className: string,
    +children: React.Node,
|};


/**
 * Component to dislay a property of an entity.
 *
 * Only used by Metadata.
 */
class Property extends React.Component<PropertyProps> {
    render(): React.Node {
        const { children, className, title } = this.props;
        return <p className={ className }>
            <span className="title">{ title }</span>
            <span className="content">{ children }</span>
        </p>;
    }
}


type Props = {|
    +entity: DbEntity,
    +locale: Locale,
    +pluralForm: number,
    +openLightbox: Function,
|};


/**
 * Component showing metadata of an entity.
 *
 * Shows:
 *  - the original string
 *  - a comment (if any)
 *  - a context (if any)
 *  - a list of source files (if any)
 *  - a link to the resource
 *  - a link to the project
 */
export default class Metadata extends React.Component<Props> {
    renderOriginal(entity: DbEntity): React.Node {
        const { pluralForm, locale } = this.props;

        if (pluralForm === -1) {
            return <p className="original">{ entity.original }</p>;
        }

        let title = <Localized id='entitydetails-metadata-plural'>
            <h2>Plural</h2>
        </Localized>;
        let original = entity.original_plural;

        if (locale.cldrPlurals[pluralForm] === 1) {
            title = <Localized id='entitydetails-metadata-singular'>
                <h2>Singular</h2>
            </Localized>;
            original = entity.original;
        }

        return <React.Fragment>
            { title }
            <p className="original">{ original }</p>
        </React.Fragment>;
    }

    renderComment(entity: DbEntity): React.Node {
        if (!entity.comment) {
            return null;
        }

        let comment = entity.comment;

        const parts = entity.comment.split('\n');
        if (parts[0].startsWith('MAX_LENGTH')) {
            // This comment contains a max length instruction. Remove that part.
            parts.shift();
            comment = parts.join('\n');
        }

        return <Localized id='entitydetails-metadata-comment' attrs={ { title: true } }>
            <Property title='Comment' className='comment'>
                <Linkify properties={ { target: '_blank', rel: 'noopener noreferrer' } }>
                    { comment }
                </Linkify>
            </Property>
        </Localized>;
    }

    renderContext(entity: DbEntity): React.Node {
        if (!entity.key) {
            return null;
        }

        return <Localized id='entitydetails-metadata-context' attrs={ { title: true } }>
            <Property title='Context' className='context'>
                { entity.key }
            </Property>;
        </Localized>
    }

    renderSourceArray(source: Array<Array<string>>): React.Node {
        if (!source.length || (source.length === 1 && !source[0])) {
            return null;
        }

        return <ul>{ source.map((value, key) => {
            return <li key={ key }><span className="title">#:</span>{ value.join(':') }</li>;
        }) }</ul>;
    }

    renderSourceObject(source: Object): React.Node {
        const examples = Object.keys(source).map(value => {<commit_msg>No bug - Fix typo in JS code. (#1125)<commit_after>/* @flow */

import * as React from 'react';
import { Link } from 'react-router-dom';
import Linkify from 'react-linkify';
import { Localized } from 'fluent-react';

import './Metadata.css';

import Screenshots from './Screenshots';

import type { Locale } from 'core/locales';
import type { DbEntity } from 'modules/entitieslist';


type PropertyProps = {|
    +title: string,
    +className: string,
    +children: React.Node,
|};


/**
 * Component to dislay a property of an entity.
 *
 * Only used by Metadata.
 */
class Property extends React.Component<PropertyProps> {
    render(): React.Node {
        const { children, className, title } = this.props;
        return <p className={ className }>
            <span className="title">{ title }</span>
            <span className="content">{ children }</span>
        </p>;
    }
}


type Props = {|
    +entity: DbEntity,
    +locale: Locale,
    +pluralForm: number,
    +openLightbox: Function,
|};


/**
 * Component showing metadata of an entity.
 *
 * Shows:
 *  - the original string
 *  - a comment (if any)
 *  - a context (if any)
 *  - a list of source files (if any)
 *  - a link to the resource
 *  - a link to the project
 */
export default class Metadata extends React.Component<Props> {
    renderOriginal(entity: DbEntity): React.Node {
        const { pluralForm, locale } = this.props;

        if (pluralForm === -1) {
            return <p className="original">{ entity.original }</p>;
        }

        let title = <Localized id='entitydetails-metadata-plural'>
            <h2>Plural</h2>
        </Localized>;
        let original = entity.original_plural;

        if (locale.cldrPlurals[pluralForm] === 1) {
            title = <Localized id='entitydetails-metadata-singular'>
                <h2>Singular</h2>
            </Localized>;
            original = entity.original;
        }

        return <React.Fragment>
            { title }
            <p className="original">{ original }</p>
        </React.Fragment>;
    }

    renderComment(entity: DbEntity): React.Node {
        if (!entity.comment) {
            return null;
        }

        let comment = entity.comment;

        const parts = entity.comment.split('\n');
        if (parts[0].startsWith('MAX_LENGTH')) {
            // This comment contains a max length instruction. Remove that part.
            parts.shift();
            comment = parts.join('\n');
        }

        return <Localized id='entitydetails-metadata-comment' attrs={ { title: true } }>
            <Property title='Comment' className='comment'>
                <Linkify properties={ { target: '_blank', rel: 'noopener noreferrer' } }>
                    { comment }
                </Linkify>
            </Property>
        </Localized>;
    }

    renderContext(entity: DbEntity): React.Node {
        if (!entity.key) {
            return null;
        }

        return <Localized id='entitydetails-metadata-context' attrs={ { title: true } }>
            <Property title='Context' className='context'>
                { entity.key }
            </Property>
        </Localized>;
    }

    renderSourceArray(source: Array<Array<string>>): React.Node {
        if (!source.length || (source.length === 1 && !source[0])) {
            return null;
        }

        return <ul>{ source.map((value, key) => {
            return <li key={ key }><span className="title">#:</span>{ value.join(':') }</li>;
        }) }</ul>;
    }

    renderSourceObject(source: Object): React.Node {
        const examples = Object.keys(source).map(value => {
{'fraction_non_alphanumeric': 0.14295599225020758, 'fraction_numerical': 0.003044561306393579, 'mean_word_length': 2.1435406698564594, 'pattern_counts': {'":': 0, '<': 83, '<?xml version=': 0, '>': 87, 'https://': 0, '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': '2011221', 'n_tokens_mistral': 2109, 'n_tokens_neox': 2052, 'n_words': 543}