<commit_before>import React from 'react';
import { find } from 'lodash';
import { ExercisePreview } from 'shared';
import { Link } from 'react-router-dom';
import { computed } from 'mobx';
import { observer } from 'mobx-react';
import { CornerRibbon } from 'shared';
import CurrentUser from '../../models/user';

@observer
export default class ExerciseEditingPreview extends React.Component {

  static propTypes = {
    exercise: React.PropTypes.object.isRequired,
    displayEditLink: React.PropTypes.bool,
    showEdit: React.PropTypes.bool,
  };


  @computed get isAuthor() {
    return !!find(this.props.exercise.authors, { user_id: CurrentUser.id });
  }

  render() {
    const { showEdit, exercise, ...previewProps } = this.props;

    return (
      <CornerRibbon
        color="red"
        position="topRight"
        label={
          [<div key="ro">READ ONLY</div>,<div key="n">{exercise.authors.names().join(',')}</div>]
        }
        hidden={this.isAuthor}
      >
        <ExercisePreview
          className='exercise-editing-preview'
          isInteractive
          displayAllTags
          displayFeedback
          displayFormats
          exercise={exercise}
          {...previewProps}
        >
          {showEdit && this.isAuthor && <Link className="btn" to={`/exercise/${exercise.uid}`}>EDIT</Link>}
        </ExercisePreview>
      </CornerRibbon>
    );
  }

}<commit_msg>add label and shadow<commit_after>import React from 'react';
import { find } from 'lodash';
import { ExercisePreview } from 'shared';
import { Link } from 'react-router-dom';
import { computed } from 'mobx';
import { observer } from 'mobx-react';
import { CornerRibbon } from 'shared';
import CurrentUser from '../../models/user';

@observer
export default class ExerciseEditingPreview extends React.Component {

  static propTypes = {
    exercise: React.PropTypes.object.isRequired,
    displayEditLink: React.PropTypes.bool,
    showEdit: React.PropTypes.bool,
  };


  @computed get isAuthor() {
    return !!find(this.props.exercise.authors, { user_id: CurrentUser.id });
  }

  render() {
    const { showEdit, exercise, ...previewProps } = this.props;

    return (
      <CornerRibbon
        shadow
        color="red"
        position="topRight"
        label={
          [<div key="ro">READ ONLY</div>,<div key="n">Author: {exercise.authors.names().join(',')}</div>]
        }
        hidden={this.isAuthor}
      >
        <ExercisePreview
          className='exercise-editing-preview'
          isInteractive
          displayAllTags
          displayFeedback
          displayFormats
          exercise={exercise}
          {...previewProps}
        >
          {showEdit && this.isAuthor && <Link className="btn" to={`/exercise/${exercise.uid}`}>EDIT</Link>}
        </ExercisePreview>
      </CornerRibbon>
    );
  }

}
{'fraction_non_alphanumeric': 0.13959212376933897, 'fraction_numerical': 0.0, 'mean_word_length': 2.6757105943152455, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 23, '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': '2226172', 'n_tokens_mistral': 861, 'n_tokens_neox': 825, 'n_words': 175}