<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { omit, map, values } from 'lodash';
import { RefreshCw } from 'react-feather';
import { FormattedMessage, intlShape } from 'react-intl';

import FlexContainer from 'primitives/container/flex-container';
import SectionHeader from 'primitives/text/section-header';
import Dropdown from 'primitives/form/dropdown';
import IconInput from 'primitives/form/icon-input';
import Input from 'primitives/form/input';

import Entities from 'constants/entities';

import EntityTags from './entity-tags';
import './style.css';

// eslint-disable-next-line react/prop-types
const renderAttribute = ({ key, name, attributes }, attribute) => {
  if ((!attributes && !attribute) || (attributes && !attributes[attribute])) {
    return null;
  }

  return (
    <FlexContainer key={key} className="EntityAttributes-Attribute">
      <b className="EntityAttributes-Header">
        <FormattedMessage id={name} />:
      </b>
      <span className="EntityAttributes-Item">
        <FormattedMessage id={attributes[attribute].name} />
      </span>
    </FlexContainer>
  );
};

export default function EntityAttributes({
  isSidebarEditActive,
  entity,
  entityType,
  updateEntityInEdit,
  isAttributesOpen,
  isTagsOpen,
  toggleAttributesOpen,
  toggleTagsOpen,
  isAncestorHidden,
  intl,
}) {
  const noAttributes =
    !entity.attributes || !Object.keys(entity.attributes).length;
  if (!isSidebarEditActive && noAttributes) {
    return null;
  }

  let attributesSection = null;
  const hasNonTagAttributes = values(
    omit({ ...entity.attributes }, 'tags'),
  ).filter(v => v).length;

  if (isSidebarEditActive || hasNonTagAttributes) {
    let nameAttribute = null;
    let hiddenAttribute = null;
    let descriptionAttribute = null;
    if (isSidebarEditActive) {
      nameAttribute = (
        <FlexContainer align="center" className="EntityAttributes-Attribute">
          <b className="EntityAttributes-Header">
            <FormattedMessage id="misc.name" />:
          </b>
          <IconInput
            wrapperClassName="EntityAttributes-Item"
            value={entity.name}
            onChange={({ target }) =>
              updateEntityInEdit({ name: target.value })
            }
            onIconClick={() =>
              updateEntityInEdit({ name: Entities[entityType].nameGenerator() })
            }
            icon={RefreshCw}
          />
        </FlexContainer>
      );
      descriptionAttribute = (
        <FlexContainer align="center" className="EntityAttributes-Attribute">
          <Input
            rows="5"
            type="textarea"
            placeholder="Description"
            value={(entity.attributes || {}).description || ''}
            onChange={({ target } = {}) =>
              updateEntityInEdit({ attributes: { description: target.value } })
            }
          />
        </FlexContainer>
      );
      if (entityType !== Entities.sector.key) {
        hiddenAttribute = (
          <FlexContainer align="center" className="EntityAttributes-Attribute">
            <b className="EntityAttributes-Header">
              <FormattedMessage id="misc.isHidden" />:
            </b>
            <Input
              className="EntityAttributes-Item"
              type="checkbox"
              checked={!!entity.isHidden || isAncestorHidden}
              disabled={isAncestorHidden}
              onChange={({ target } = {}) =>
                updateEntityInEdit({ isHidden: target.checked })
              }
            />
          </FlexContainer>
        );
      }
    } else if ((entity.attributes || {}).description) {
      descriptionAttribute = (
        <FlexContainer
          direction="column"
          className="EntityAttributes-Attribute"
        >
          <b className="EntityAttributes-Header">
            <FormattedMessage id="misc.description" />:
          </b>
          <span className="EntityAttributes-Item EntityAttributes-Item--multiline">
            {(entity.attributes || {}).description}
          </span>
        </FlexContainer>
      );
    }

    // eslint-disable-next-line react/prop-types
    const renderAttributeEdit = ({ key, name, attributes }, attribute) => (
      <FlexContainer
        key={key}
        align="center"
        className="EntityAttributes-Attribute"
      >
        <b className="EntityAttributes-Header">
          <FormattedMessage id={name} />:
        </b>
        <Dropdown
          wrapperClassName="EntityAttributes-Item"
          value={attribute}
          onChange={item =>
            updateEntityInEdit({ attributes: { [key]: (item || {}).value } })
          }
          options={map(attributes, attr => ({
            value: attr.key,
            label: intl.formatMessage({ id: attr.name }),
          }))}
        />
      </FlexContainer>
    );

    let attributes = null;
    if (isAttributesOpen) {
      attributes = (
        <FlexContainer
          direction="column"
          className="EntityAttributes-Attributes"
        >
          {nameAttribute}
          {(Entities[entityType].attributes || []).map(attribute =>
            (isSidebarEditActive ? renderAttributeEdit : renderAttribute)(
              attribute,
              (entity.attributes || {})[attribute.key],
            ),
          )}
          {hiddenAttribute}
          {descriptionAttribute}
        </FlexContainer>
      );
    }

    attributesSection = (
      <div key="attributes"><commit_msg>Allow custom attribute values to be inputted in the dropdowns components<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { omit, map, values } from 'lodash';
import { RefreshCw } from 'react-feather';
import { FormattedMessage, intlShape } from 'react-intl';

import FlexContainer from 'primitives/container/flex-container';
import SectionHeader from 'primitives/text/section-header';
import Dropdown from 'primitives/form/dropdown';
import IconInput from 'primitives/form/icon-input';
import Input from 'primitives/form/input';

import Entities from 'constants/entities';

import EntityTags from './entity-tags';
import './style.css';

// eslint-disable-next-line react/prop-types
const renderAttribute = ({ key, name, attributes }, attribute) => {
  if (!attributes && !attribute) {
    return null;
  }

  return (
    <FlexContainer key={key} className="EntityAttributes-Attribute">
      <b className="EntityAttributes-Header">
        <FormattedMessage id={name} />:
      </b>
      <span className="EntityAttributes-Item">
        {attributes[attribute] ? (
          <FormattedMessage id={attributes[attribute].name} />
        ) : (
          attribute
        )}
      </span>
    </FlexContainer>
  );
};

export default function EntityAttributes({
  isSidebarEditActive,
  entity,
  entityType,
  updateEntityInEdit,
  isAttributesOpen,
  isTagsOpen,
  toggleAttributesOpen,
  toggleTagsOpen,
  isAncestorHidden,
  intl,
}) {
  const noAttributes =
    !entity.attributes || !Object.keys(entity.attributes).length;
  if (!isSidebarEditActive && noAttributes) {
    return null;
  }

  let attributesSection = null;
  const hasNonTagAttributes = values(
    omit({ ...entity.attributes }, 'tags'),
  ).filter(v => v).length;

  if (isSidebarEditActive || hasNonTagAttributes) {
    let nameAttribute = null;
    let hiddenAttribute = null;
    let descriptionAttribute = null;
    if (isSidebarEditActive) {
      nameAttribute = (
        <FlexContainer align="center" className="EntityAttributes-Attribute">
          <b className="EntityAttributes-Header">
            <FormattedMessage id="misc.name" />:
          </b>
          <IconInput
            wrapperClassName="EntityAttributes-Item"
            value={entity.name}
            onChange={({ target }) =>
              updateEntityInEdit({ name: target.value })
            }
            onIconClick={() =>
              updateEntityInEdit({ name: Entities[entityType].nameGenerator() })
            }
            icon={RefreshCw}
          />
        </FlexContainer>
      );
      descriptionAttribute = (
        <FlexContainer align="center" className="EntityAttributes-Attribute">
          <Input
            rows="5"
            type="textarea"
            placeholder="Description"
            value={(entity.attributes || {}).description || ''}
            onChange={({ target } = {}) =>
              updateEntityInEdit({ attributes: { description: target.value } })
            }
          />
        </FlexContainer>
      );
      if (entityType !== Entities.sector.key) {
        hiddenAttribute = (
          <FlexContainer align="center" className="EntityAttributes-Attribute">
            <b className="EntityAttributes-Header">
              <FormattedMessage id="misc.isHidden" />:
            </b>
            <Input
              className="EntityAttributes-Item"
              type="checkbox"
              checked={!!entity.isHidden || isAncestorHidden}
              disabled={isAncestorHidden}
              onChange={({ target } = {}) =>
                updateEntityInEdit({ isHidden: target.checked })
              }
            />
          </FlexContainer>
        );
      }
    } else if ((entity.attributes || {}).description) {
      descriptionAttribute = (
        <FlexContainer
          direction="column"
          className="EntityAttributes-Attribute"
        >
          <b className="EntityAttributes-Header">
            <FormattedMessage id="misc.description" />:
          </b>
          <span className="EntityAttributes-Item EntityAttributes-Item--multiline">
            {(entity.attributes || {}).description}
          </span>
        </FlexContainer>
      );
    }

    // eslint-disable-next-line react/prop-types
    const renderAttributeEdit = ({ key, name, attributes }, attribute) => (
      <FlexContainer
        key={key}
        align="center"
        className="EntityAttributes-Attribute"
      >
        <b className="EntityAttributes-Header">
          <FormattedMessage id={name} />:
        </b>
        <Dropdown
          allowCreate
          wrapperClassName="EntityAttributes-Item"
          value={attribute}
          onChange={item =>
            updateEntityInEdit({ attributes: { [key]: (item || {}).value } })
          }
          options={[
            ...map(attributes, attr => ({
              value: attr.key,
              label: intl.formatMessage({ id: attr.name }),
            })),
            ...(!attributes[attribute]
              ? [{ value: attribute, label: attribute }]
              : []),
          ]}
        />
      </FlexContainer>
    );

    let attributes = null;
    if (isAttributesOpen) {
      attributes = (
        <FlexContainer
          direction="column"
          className="EntityAttributes-Attributes"
        >
          {nameAttribute}
          {(Entities[entityType].attributes || []).map(attribute =>
            (isSidebarEditActive ? renderAttributeEdit : renderAttribute)(
              attribute,
              (entity.attributes || {})[attribute.key],
            ),
          )}
          {hiddenAttribute}
          {descriptionAttribute}
        </FlexContainer>
      );
    }

    attributesSection = (
      <div key="attributes">
{'fraction_non_alphanumeric': 0.1271712158808933, 'fraction_numerical': 0.0001772421127259837, 'mean_word_length': 2.205965909090909, 'pattern_counts': {'":': 0, '<': 81, '<?xml version=': 0, '>': 101, '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': '5567386', 'n_tokens_mistral': 2927, 'n_tokens_neox': 2870, 'n_words': 564}