<commit_before>import React from 'react';

import classnames from 'classnames';

import { sendToGA, buildSurveyURL, formatDate, createMarkup } from '../lib/utils';

import LoadingPage from './LoadingPage';
import NotFoundPage from './NotFoundPage';

import Header from '../components/Header';
import Footer from '../components/Footer';
import ExperimentRowCard from '../components/ExperimentRowCard';
import ExperimentDisableDialog from '../components/ExperimentDisableDialog';
import ExperimentTourDialog from '../components/ExperimentTourDialog';
import MainInstallButton from '../components/MainInstallButton';

const CHANGE_HEADER_ON = 105;

export default class ExperimentPage extends React.Component {

  constructor(props) {
    super(props);

    const { isExperimentEnabled } = this.props;
    const experiment = this.findCurrentExperiment(props);

    this.state = {
      experiment,
      enabled: isExperimentEnabled(experiment),
      useStickyHeader: false,
      highlightMeasurementPanel: false,
      isEnabling: false,
      isDisabling: false,
      progressButtonWidth: null,
      showDisableDialog: false,
      shouldShowTourDialog: false,
      showTourDialog: false
    };

    // HACK: Set this as a plain object property, so we don't trigger crazy
    // state changes on scrolling events.
    this.didScroll = false;
  }

  componentWillReceiveProps(nextProps) {
    const { shouldShowTourDialog, enabled: prevEnabled } = this.state;
    const { isExperimentEnabled } = nextProps;
    const nextExperiment = this.findCurrentExperiment(nextProps);
    const nextEnabled = nextExperiment && isExperimentEnabled(nextExperiment);

    this.setState({
      experiment: nextExperiment,
      enabled: nextEnabled
    });

    // On enable state change, stop installation indicators & show tour dialog if needed.
    if (prevEnabled !== nextEnabled) {
      // TODO: Tweak experiment install count?
      const showTourDialog = shouldShowTourDialog &&
                             nextExperiment &&
                             !nextExperiment.error;
      this.setState({
        isEnabling: false,
        isDisabling: false,
        shouldShowTourDialog: false,
        showTourDialog
      });
    }
  }

  findCurrentExperiment(props) {
    const { params, experiments } = props;

    if (experiments.length === 0) { return null; }

    const currentExperiment = experiments
      .filter(experiment => experiment.slug === params.slug);

    // Grab the matched experiment.
    return currentExperiment[0];
  }

  render() {
    const { navigateTo, experiments, installed, hasAddon, isFirefox } = this.props;

    // Show the loading animation if experiments haven't been loaded yet.
    if (experiments.length === 0) { return <LoadingPage />; }

    // Show a 404 page if an experiment for this slug wasn't found.
    if (!this.state.experiment) { return <NotFoundPage />; }

    const { experiment, enabled, useStickyHeader, highlightMeasurementPanel,
            showDisableDialog, showTourDialog, isEnabling, isDisabling,
            progressButtonWidth } = this.state;

    const { title, version, statusType, contribute_url,
            bug_report_url, discourse_url, introduction, measurements,
            privacy_notice_url, changelog_url, thumbnail, survey_url,
            contributors, details } = experiment;

    const subtitle = (title === 'No More 404s') ? 'Powered by the Wayback Machine' : '';
    const installation_count = experiment.installation_count.toLocaleString();
    const surveyURL = buildSurveyURL('givefeedback', title, installed, survey_url);
    const modified = formatDate(experiment.modified);
    const completedDate = experiment.completed ? formatDate(experiment.completed) : null;

    return (
      <section id="details" data-hook="experiment-page">

        {showDisableDialog &&<commit_msg>Issue #1307: Fix error/enabled status banner on experiment detail pages<commit_after>import React from 'react';

import classnames from 'classnames';

import { sendToGA, buildSurveyURL, formatDate, createMarkup } from '../lib/utils';

import LoadingPage from './LoadingPage';
import NotFoundPage from './NotFoundPage';

import Header from '../components/Header';
import Footer from '../components/Footer';
import ExperimentRowCard from '../components/ExperimentRowCard';
import ExperimentDisableDialog from '../components/ExperimentDisableDialog';
import ExperimentTourDialog from '../components/ExperimentTourDialog';
import MainInstallButton from '../components/MainInstallButton';

const CHANGE_HEADER_ON = 105;

export default class ExperimentPage extends React.Component {

  constructor(props) {
    super(props);

    const { isExperimentEnabled } = this.props;
    const experiment = this.findCurrentExperiment(props);

    this.state = {
      experiment,
      enabled: isExperimentEnabled(experiment),
      useStickyHeader: false,
      highlightMeasurementPanel: false,
      isEnabling: false,
      isDisabling: false,
      progressButtonWidth: null,
      showDisableDialog: false,
      shouldShowTourDialog: false,
      showTourDialog: false
    };

    // HACK: Set this as a plain object property, so we don't trigger crazy
    // state changes on scrolling events.
    this.didScroll = false;
  }

  componentWillReceiveProps(nextProps) {
    const { shouldShowTourDialog, enabled: prevEnabled } = this.state;
    const { isExperimentEnabled } = nextProps;
    const nextExperiment = this.findCurrentExperiment(nextProps);
    const nextEnabled = nextExperiment && isExperimentEnabled(nextExperiment);

    this.setState({
      experiment: nextExperiment,
      enabled: nextEnabled
    });

    // On enable state change, stop installation indicators & show tour dialog if needed.
    if (prevEnabled !== nextEnabled) {
      // TODO: Tweak experiment install count?
      const showTourDialog = shouldShowTourDialog &&
                             nextExperiment &&
                             !nextExperiment.error;
      this.setState({
        isEnabling: false,
        isDisabling: false,
        shouldShowTourDialog: false,
        showTourDialog
      });
    }
  }

  findCurrentExperiment(props) {
    const { params, experiments } = props;

    if (experiments.length === 0) { return null; }

    const currentExperiment = experiments
      .filter(experiment => experiment.slug === params.slug);

    // Grab the matched experiment.
    return currentExperiment[0];
  }

  render() {
    const { navigateTo, experiments, installed, hasAddon, isFirefox } = this.props;

    // Show the loading animation if experiments haven't been loaded yet.
    if (experiments.length === 0) { return <LoadingPage />; }

    // Show a 404 page if an experiment for this slug wasn't found.
    if (!this.state.experiment) { return <NotFoundPage />; }

    const { experiment, enabled, useStickyHeader, highlightMeasurementPanel,
            showDisableDialog, showTourDialog, isEnabling, isDisabling,
            progressButtonWidth } = this.state;

    const { title, version, contribute_url, bug_report_url, discourse_url,
            introduction, measurements, privacy_notice_url, changelog_url,
            thumbnail, survey_url, contributors, details } = experiment;

    const subtitle = (title === 'No More 404s') ? 'Powered by the Wayback Machine' : '';
    const installation_count = experiment.installation_count.toLocaleString();
    const surveyURL = buildSurveyURL('givefeedback', title, installed, survey_url);
    const modified = formatDate(experiment.modified);
    const completedDate = experiment.completed ? formatDate(experiment.completed) : null;

    let statusType = null;
    if (experiment.error) {
      statusType = 'error';
    } else if (enabled) {
      statusType = 'enabled';
    }

    return (
      <section id="details" data-hook="experiment-page">

        {showDisableDialog &&
{'fraction_non_alphanumeric': 0.09556962025316455, 'fraction_numerical': 0.0035443037974683543, 'mean_word_length': 3.353168044077135, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 11, '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': '2549555', 'n_tokens_mistral': 2131, 'n_tokens_neox': 2023, 'n_words': 578}