<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { DropdownCaret } from 'react-components';
import { getInitial } from 'proton-shared/lib/helpers/string';

const UserDropdownButton = ({ user, isOpen, buttonRef, ...rest }) => {
    const { Email, DisplayName } = user;
    const initials = getInitial(DisplayName);

    return (
        <button type="button" className="color-white inline-flex" aria-expanded={isOpen} ref={buttonRef} {...rest}>
            <span className="alignright">
                <span className="bl capitalize">{DisplayName}</span>
                {Email ? <span className="bl smaller m0 opacity-30 lh100">{Email}</span> : null}
            </span>
            <DropdownCaret isOpen={isOpen} className="icon-12p ml0-5 mr0-5 expand-caret mtauto mbauto" />
            <span className="mtauto mbauto bordered rounded50 p0-5 inbl dropDown-logout-initials">{initials}</span>
        </button>
    );
};

UserDropdownButton.propTypes = {
    user: PropTypes.object,
    className: PropTypes.string,
    isOpen: PropTypes.bool,
    buttonRef: PropTypes.object
};
<commit_msg>DisplayName is null for VPN users without any addresses<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { DropdownCaret } from 'react-components';
import { getInitial } from 'proton-shared/lib/helpers/string';

const UserDropdownButton = ({ user, isOpen, buttonRef, ...rest }) => {
    const { Email, DisplayName, Name } = user;
    // DisplayName is null for VPN users without any addresses, cast to undefined in case Name would be null too.
    const initials = getInitial(DisplayName || Name || undefined);

    return (
        <button type="button" className="color-white inline-flex" aria-expanded={isOpen} ref={buttonRef} {...rest}>
            <span className="alignright">
                <span className="bl capitalize">{DisplayName}</span>
                {Email ? <span className="bl smaller m0 opacity-30 lh100">{Email}</span> : null}
            </span>
            <DropdownCaret isOpen={isOpen} className="icon-12p ml0-5 mr0-5 expand-caret mtauto mbauto" />
            <span className="mtauto mbauto bordered rounded50 p0-5 inbl dropDown-logout-initials">{initials}</span>
        </button>
    );
};

UserDropdownButton.propTypes = {
    user: PropTypes.object,
    className: PropTypes.string,
    isOpen: PropTypes.bool,
    buttonRef: PropTypes.object
};

{'fraction_non_alphanumeric': 0.12915129151291513, 'fraction_numerical': 0.013120131201312012, 'mean_word_length': 3.288224956063269, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 27, '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': '1691574', 'n_tokens_mistral': 719, 'n_tokens_neox': 712, 'n_words': 184}