Merge #943

943: Add ability to import from experimenter r=jaredkerim a=rehandalal

Needs a little more work:
- [x] Authentication (jkerim to whitelist the recipe endpoint)
- [x] Show comment field and make it blocking
- [x] Error handling

r?

Co-authored-by: Rehan Dalal <rehandalal@gmail.com>

src/components/data/QueryExperiment.js

@@ -0,0 +1,53 @@
+import { notification } from 'antd';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { fetchExperimentRecipeData } from 'console/state/recipes/actions';
+
+@connect(
+  null,
+  {
+    fetchExperimentRecipeData,
+  },
+)
+class QueryActions extends React.PureComponent {
+  static propTypes = {
+    fetchExperimentRecipeData: PropTypes.func.isRequired,
+    slug: PropTypes.string.isRequired,
+  };
+
+  async componentDidMount() {
+    const { slug } = this.props;
+    try {
+      await this.props.fetchExperimentRecipeData(slug);
+    } catch (error) {
+      notification.error({
+        message: 'Import Error',
+        description: error.message,
+        duration: 0,
+      });
+    }
+  }
+
+  async componentDidUpdate(prevProps) {
+    const { slug } = this.props;
+    if (slug !== prevProps.slug) {
+      try {
+        await this.props.fetchExperimentRecipeData(slug);
+      } catch (error) {
+        notification.error({
+          message: 'Import Error',
+          description: error.message,
+          duration: 0,
+        });
+      }
+    }
+  }
+
+  render() {
+    return null;
+  }
+}
+
+export default QueryActions;

src/settings.js

@@ -10,6 +10,11 @@ export const NORMANDY_ADMIN_API_ROOT_URL =
 export const NORMANDY_READONLY_API_ROOT_URL =
   process.env.REACT_APP_NORMANDY_READ_ONLY_API_ROOT_URL || null;
 
+// Experimenter API
+export const EXPERIMENTER_API_ROOT_URL =
+  process.env.REACT_APP_EXPERIMENTER_API_ROOT_URL ||
+  'https://experimenter.services.mozilla.com/api/';
+
 // Insecure authentication
 export const INSECURE_AUTH_ALLOWED = process.env.REACT_APP_INSECURE_AUTH_ALLOWED || false;
 

src/state/action-types.js

@@ -5,6 +5,7 @@ export const ACTIONS_RECEIVE = 'ACTIONS_RECEIVE';
 export const APPROVAL_REQUEST_CREATE = 'APPROVAL_REQUEST_CREATE';
 export const APPROVAL_REQUEST_DELETE = 'APPROVAL_REQUEST_DELETE';
 export const APPROVAL_REQUEST_RECEIVE = 'APPROVAL_REQUEST_RECEIVE';
+export const EXPERIMENT_RECIPE_DATA_RECEIVE = 'EXPERIMENT_RECIPE_DATA_RECEIVE';
 export const EXTENSION_LISTING_COLUMNS_CHANGE = 'EXTENSION_LISTING_COLUMNS_CHANGE';
 export const EXTENSION_PAGE_RECEIVE = 'EXTENSION_PAGE_RECEIVE';
 export const EXTENSION_RECEIVE = 'EXTENSION_RECEIVE';

src/state/actions/selectors.js

@@ -8,6 +8,10 @@ export function getAction(state, id, defaultsTo = null) {
   return state.getIn(['actions', 'items', intId], defaultsTo);
 }
 
+export function getActionByName(state, name, defaultsTo = null) {
+  return state.getIn(['actions', 'items']).find(action => action.get('name') === name);
+}
+
 export function getAllActions(state) {
   return state.getIn(['actions', 'items']);
 }

src/state/recipes/actions.js

@@ -1,13 +1,19 @@
 import {
+  EXPERIMENT_RECIPE_DATA_RECEIVE,
   RECIPE_DELETE,
   RECIPE_LISTING_COLUMNS_CHANGE,
   RECIPE_PAGE_RECEIVE,
   RECIPE_RECEIVE,
   RECIPE_FILTERS_RECEIVE,
   RECIPE_HISTORY_RECEIVE,
 } from 'console/state/action-types';
-import { makeApiRequest, makeNormandyApiRequest } from 'console/state/network/actions';
+import {
+  makeApiRequest,
+  makeNormandyApiRequest,
+  makeRequest,
+} from 'console/state/network/actions';
 import { revisionReceived } from 'console/state/revisions/actions';
+import { EXPERIMENTER_API_ROOT_URL } from 'console/settings';
 
 export function recipeReceived(recipe) {
   return dispatch => {
@@ -199,3 +205,17 @@ export function saveRecipeListingColumns(columns) {
     });
   };
 }
+
+export function fetchExperimentRecipeData(slug) {
+  return async dispatch => {
+    const requestId = `fetch-experiment-recipe-data-${slug}`;
+    const data = await dispatch(
+      makeRequest(requestId, `${EXPERIMENTER_API_ROOT_URL}v1/experiments/${slug}/recipe/`),
+    );
+    dispatch({
+      type: EXPERIMENT_RECIPE_DATA_RECEIVE,
+      slug,
+      data,
+    });
+  };
+}

src/state/recipes/reducers.js

@@ -2,6 +2,7 @@ import { fromJS, Map } from 'immutable';
 import { combineReducers } from 'redux-immutable';
 
 import {
+  EXPERIMENT_RECIPE_DATA_RECEIVE,
   RECIPE_DELETE,
   RECIPE_LISTING_COLUMNS_CHANGE,
   RECIPE_PAGE_RECEIVE,
@@ -87,7 +88,18 @@ function listing(state = new Map(), action) {
   }
 }
 
+function experiments(state = new Map(), action) {
+  switch (action.type) {
+    case EXPERIMENT_RECIPE_DATA_RECEIVE:
+      return state.set(action.slug, fromJS(action.data));
+
+    default:
+      return state;
+  }
+}
+
 export default combineReducers({
+  experiments,
   filters,
   history,
   items,

src/state/recipes/selectors.js

@@ -1,5 +1,6 @@
 import { List, Map } from 'immutable';
 
+import { getActionByName } from 'console/state/actions/selectors';
 import { DEFAULT_RECIPE_LISTING_COLUMNS } from 'console/state/constants';
 import { getRevision } from 'console/state/revisions/selectors';
 
@@ -88,3 +89,12 @@ export function getRecipeApprovalHistory(state, id) {
   const history = getRecipeHistory(state, id);
   return history.filter(revision => revision.get('approval_request'));
 }
+
+export function getExperimentRecipeData(state, slug) {
+  const data = state.getIn(['recipes', 'experiments', slug]);
+
+  if (data) {
+    const action = getActionByName(state, data.get('action_name'));
+    return data.set('action', action).remove('action_name');
+  }
+}

src/tests/state/recipes/index.js

@@ -5,6 +5,7 @@ import { AutoIncrementField, Factory, Field } from 'console/tests/factory';
 import { RevisionFactory } from 'console/tests/state/revisions';
 
 export const INITIAL_STATE = new Map({
+  experiments: new Map(),
   filters: new Map(),
   history: new Map(),
   items: new Map(),

src/workflows/recipes/components/RecipeForm.js

@@ -86,6 +86,7 @@ class RecipeForm extends React.PureComponent {
     form: PropTypes.object.isRequired,
     isLoading: PropTypes.bool,
     isCreationForm: PropTypes.bool,
+    isImportForm: PropTypes.bool,
     onSubmit: PropTypes.func.isRequired,
     revision: PropTypes.instanceOf(Map),
     selectedActionName: PropTypes.string,
@@ -142,6 +143,26 @@ class RecipeForm extends React.PureComponent {
     );
   }
 
+  renderCommentField() {
+    const { isImportForm, isLoading, revision } = this.props;
+
+    if (!isImportForm) {
+      return null;
+    }
+
+    return (
+      <FormItem
+        name="comment"
+        label="Import Instructions (Clear before saving)"
+        required={false}
+        rules={[{ required: false }]}
+        initialValue={revision.get('comment')}
+      >
+        <Input.TextArea disabled={isLoading} rows={4} />
+      </FormItem>
+    );
+  }
+
   render() {
     const { filters, isCreationForm, isLoading, onSubmit, revision, errors } = this.props;
 
@@ -176,6 +197,7 @@ class RecipeForm extends React.PureComponent {
             </FormItem>
           </Col>
         </Row>
+        {this.renderCommentField()}
         <FilterObjectForm
           form={this.props.form}
           disabled={isLoading}

src/workflows/recipes/pages/CreateRecipePage.js

@@ -1,4 +1,4 @@
-import { message } from 'antd';
+import { message, Spin } from 'antd';
 import autobind from 'autobind-decorator';
 import { Map } from 'immutable';
 import { push } from 'connected-react-router';
@@ -7,16 +7,30 @@ import React from 'react';
 import { connect } from 'react-redux';
 
 import AuthenticationAlert from 'console/components/common/AuthenticationAlert';
+import QueryExperiment from 'console/components/data/QueryExperiment';
 import { getUserProfile } from 'console/state/auth/selectors';
 import handleError from 'console/utils/handleError';
 import GenericFormContainer from 'console/workflows/recipes/components/GenericFormContainer';
 import RecipeForm, { cleanRecipeData } from 'console/workflows/recipes/components/RecipeForm';
 import { createRecipe } from 'console/state/recipes/actions';
+import { getExperimentRecipeData } from 'console/state/recipes/selectors';
+import { getUrlParam } from 'console/state/router/selectors';
 import { reverse } from 'console/urls';
 
 @connect(
   state => {
-    return { userProfile: getUserProfile(state) };
+    const experimentSlug = getUrlParam(state, 'experimentSlug');
+
+    let experimentRecipeData;
+    if (experimentSlug) {
+      experimentRecipeData = getExperimentRecipeData(state, experimentSlug);
+    }
+
+    return {
+      userProfile: getUserProfile(state),
+      experimentRecipeData,
+      experimentSlug,
+    };
   },
   {
     createRecipe,
@@ -27,6 +41,8 @@ import { reverse } from 'console/urls';
 class CreateRecipePage extends React.PureComponent {
   static propTypes = {
     createRecipe: PropTypes.func.isRequired,
+    experimentRecipeData: PropTypes.instanceOf(Map),
+    experimentSlug: PropTypes.string,
     push: PropTypes.func.isRequired,
     userProfile: PropTypes.instanceOf(Map),
   };
@@ -36,7 +52,7 @@ class CreateRecipePage extends React.PureComponent {
   };
 
   onFormFailure(err) {
-    handleError(`Recipe cannot be created.`, err);
+    handleError(`Recipe cannot be created: ${err.data}`, err);
   }
 
   onFormSuccess(recipeId) {
@@ -45,12 +61,42 @@ class CreateRecipePage extends React.PureComponent {
   }
 
   async formAction(data) {
-    const cleanedData = cleanRecipeData(data);
+    const { comment, ...recipeData } = data;
+    const cleanedData = cleanRecipeData(recipeData);
+
+    if (comment) {
+      const err = new Error();
+      err.data = 'Empty the comment field to continue.';
+      throw err;
+    }
+
     return this.props.createRecipe(cleanedData);
   }
 
+  renderForm() {
+    const { experimentRecipeData, experimentSlug } = this.props;
+
+    if (experimentSlug && !experimentRecipeData) {
+      return <Spin />;
+    }
+
+    return (
+      <GenericFormContainer
+        form={RecipeForm}
+        formAction={this.formAction}
+        onSuccess={this.onFormSuccess}
+        onFailure={this.onFormFailure}
+        formProps={{
+          isCreationForm: true,
+          isImportForm: !!experimentSlug,
+          revision: experimentRecipeData,
+        }}
+      />
+    );
+  }
+
   render() {
-    const { userProfile } = this.props;
+    const { experimentSlug, userProfile } = this.props;
 
     if (!userProfile) {
       return (
@@ -64,14 +110,9 @@ class CreateRecipePage extends React.PureComponent {
     }
     return (
       <div className="content-wrapper">
-        <h2>Create New Recipe</h2>
-        <GenericFormContainer
-          form={RecipeForm}
-          formAction={this.formAction}
-          onSuccess={this.onFormSuccess}
-          onFailure={this.onFormFailure}
-          formProps={{ isCreationForm: true }}
-        />
+        {experimentSlug ? <QueryExperiment slug={experimentSlug} /> : null}
+        <h2>{experimentSlug ? 'Import Recipe' : 'Create New Recipe'}</h2>
+        {this.renderForm()}
       </div>
     );
   }

src/workflows/recipes/urls.js

@@ -25,6 +25,12 @@ export default {
         crumbText: 'New',
         documentTitle: 'New Recipe',
       },
+      '/import/:experimentSlug': {
+        name: 'recipes.new',
+        component: CreateRecipePage,
+        crumbText: 'Import',
+        documentTitle: 'Import Recipe',
+      },
       '/:recipeId': {
         name: 'recipes.details',
         component: RecipeDetailPage,