Used to develop for Full Stack Metrics and Events Component at p13n/sections/manager_fullstack/pages/metrics/page_component.js

page_component.js

/**
 * ATTN: This file will NOT be merged. It's just for manually testing this via the existing Full Stack Experiment manager
 */

import React from 'react';
import PropTypes from 'prop-types';
import { Button, Container, Row, Col, EmptyDashboard } from 'optimizely-oui';

import ui from 'core/ui';
import Immutable, { toImmutable, toJS } from 'optly/immutable';
import { connect, errorBoundary } from 'core/ui/decorators';

import { Form, formPropType } from 'react_components/form';
import RevertSaveRow from 'react_components/revert_save_row';
import { withBeforeLeave } from 'react_components/before_leave_context';
import P13NUIActions from 'bundles/p13n/modules/ui/actions';
import PermissionsFns from 'optly/modules/permissions/fns';
import CurrentLayerGetters from 'bundles/p13n/modules/current_layer/getters';
import CurrentProjectGetters from 'optly/modules/current_project/getters';
import { showSupportDialog } from 'optly/modules/support/actions';

// functionality components
import EventsAndMetricsBuilderWithData from 'bundles/p13n/components/flags_events_and_metrics_builder/events_and_metrics_builder_with_data';
import SidebarComponent from 'bundles/p13n/sections/manager_fullstack/components/sidebar';

/**
 * @name MetricsPage
 * @description Renders the feature-manager settings page
 * @kind component
 * @example
 *  <Settings
 *    featureId={123}
 *  />
 */
@withBeforeLeave
@connect({
  canEditMetrics: [
    CurrentProjectGetters.project,
    PermissionsFns.canUpdateLayer,
  ],
  currentLayer: CurrentLayerGetters.layer,
})
@Form({
  mapPropsToFormData: ({ currentLayer }) => {
    return toImmutable({
      metrics: currentLayer.get('metrics') || [],
    });
  },
  debounceTimeout: __TEST__ ? 0 : 300,
  validateOnChange: false,
})
@errorBoundary({
  alternateContent: (
    <EmptyDashboard
      button={
        <Button onClick={() => showSupportDialog()} style="highlight">
          Optimizely Help Center
        </Button>
      }
      description={
        <div className="reading-column flush--top">
          Don't worry, most issues are minor. Please refresh the page or visit
          our Help Center if the issue persists.
        </div>
      }
      headline="Something went wrong"
      showButtonBelow={true}
    />
  ),
})
class MetricsPage extends React.Component {
  static componentId = 'manager-feature-settings-page';

  static propTypes = {
    canEditMetrics: PropTypes.bool.isRequired,
    currentLayer: PropTypes.instanceOf(Immutable.Map).isRequired,
    form: formPropType.isRequired,
    setBeforeLeave: PropTypes.func.isRequired,
  };

  state = {
    isSaving: false,
  };

  constructor(props) {
    super(props);

    props.setBeforeLeave(this.beforeLeave);

    // Example for POC
    props.form.validators({
      validateMock1: val => {
        return 'This is your first problem.';
      },
      validateMock2: val => {
        return 'And is your second problem.';
      },
    });
  }

  beforeLeave = () => {
    const { form } = this.props;

    return P13NUIActions.confirmNavigation(form.isFormDirty(), 'feature');
  };

  saveMetrics = () => {
    const { form } = this.props;
    this.setState({ isSaving: true });
    form
      .validate()
      .then(() => {
        const toSave = {
          metrics: toJS(form.field('metrics').getValue()),
        };
        return new Promise((resolve, reject) => {
          console.log('METRICS SAVED', toSave);
          resolve(toSave);
        });
      })
      .then(() => {
        ui.showNotification({
          message: tr('Your changes have been saved'),
        });
      })
      .catch(() => {
        if (form.isFormValid()) {
          ui.showNotification({
            message: tr('There was a problem saving this feature'),
            type: 'error',
          });
        } else {
          form.setOptions({ validateOnChange: true });
        }
      })
      .finally(() => {
        this.setState({ isSaving: false });
      });
  };

  render() {
    const { isSaving } = this.state;
    const { canEditMetrics, form } = this.props;

    const canRevert = form.isFormDirty() && !isSaving;
    const canSave =
      form.isFormDirty() && form.isFormValid() && !isSaving && canEditMetrics;

    const onChange = updatedMetrics => {
      form.field('metrics').setValue(toImmutable(updatedMetrics));
    };

    const selectedMetrics = form
      .field('metrics')
      .getValue()
      .toJS();

    return (
      <Container fluid={true}>
        <Row>
          <Col small="fitContent">
            <SidebarComponent />
          </Col>
          <Col
            isReadingColumn={true}
            overflow="overflow-y--scroll"
            small="fillSpace">
            <div
              className="background--light overflow-y--auto soft-quad--sides soft--ends"
              style={{
                boxShadow: '-1px 0px 0px 0px #e0e0e0',
                width: 570,
                height: 1000,
              }}>
              <EventsAndMetricsBuilderWithData
                isDisabled={!canEditMetrics}
                onChange={onChange}
                selectedMetrics={selectedMetrics}
              />
            </div>
            <RevertSaveRow
              canRevert={canRevert}
              canSave={canSave}
              isLoading={isSaving}
              onRevertClick={() => form.revert()}
              onSaveClick={this.saveMetrics}
              testSection="manager-feature-settings-page"
            />
          </Col>
        </Row>
      </Container>
    );
  }
}

export default MetricsPage;