Andrew/catchup api

app/common/containers/forms/ApiForm/index.js

@@ -28,6 +28,7 @@ import styles from './styles.scss';
     request: {
       scheme: 'http',
     },
+    matching_priority: '1',
   },
   validate: reduxFormValidate({
     name: {
@@ -82,18 +83,16 @@ export default class ApiForm extends React.Component {
 
         <div className={classnames(styles.row, styles['row--name'])}>
           <div className={styles.row__field}><Field name="name" labelText="Name *" component={FieldInput} /></div>
-          <div className={styles.row__field}><Field name="description" labelText="Description" component={FieldInput} /></div>
+          <div className={styles.row__field}><Field name="matching_priority" labelText="Matching priority" component={FieldInput} /></div>
         </div>
 
-        <div className={classnames(styles.row, styles['row--small'])}>
-          <Field
-            name="docs_url"
-            labelText="Documentation URL"
-            placeholder="eg. https://docs.annon.apiary.io"
-            component={FieldInput}
-          />
-        </div>
         <Line width="280" />
+
+        <div className={classnames(styles.row, styles['row--name'])}>
+          <div className={styles.row__field}><Field name="docs_url" labelText="Documentation URL" placeholder="eg. https://docs.annon.apiary.io" component={FieldInput} /></div>
+          <div className={styles.row__field}><Field name="description" labelText="Description" component={FieldInput} /></div>
+        </div>
+
         <div className={classnames(styles.row, styles['row--small'])}>
           <Field
             name="health"
@@ -108,14 +107,14 @@ export default class ApiForm extends React.Component {
             ]}
           />
         </div>
+
         <div className={classnames(styles.row, styles['row--small'])}>
           <Field
             name="disclose_status"
             labelText="Disclose API status"
             component={FieldCheckbox}
           />
         </div>
-        <Line width="280" />
 
         <H3>Request</H3>
 

app/common/containers/forms/PluginProxyForm/index.js

@@ -16,17 +16,19 @@ import styles from './styles.scss';
   form: 'plugin-settings-form',
   initialValues: {
     settings: {
-      scheme: 'http',
+      upstream: {
+        scheme: 'http',
+      },
     },
   },
   validate: reduxFormValidate({
-    'settings.host': {
+    'settings.upstream.host': {
       required: true,
     },
-    'settings.port': {
+    'settings.upstream.port': {
       required: true,
     },
-    'settings.path': {
+    'settings.upstream.path': {
       required: true,
     },
   }),
@@ -39,31 +41,33 @@ export default class PluginProxyForm extends React.Component {
     return (
       <form onSubmit={handleSubmit} id="plugin-proxy-form">
         <FormSection name="settings">
-          <div className={styles.columns}>
-            <div>
-              <Field
-                labelText="Schema"
-                name="scheme"
-                component={FiledSelect}
-                options={[
-                  { name: 'http', title: 'http' },
-                  { name: 'https', title: 'https' },
-                ]}
-              />
+          <FormSection name="upstream">
+            <div className={styles.columns}>
+              <div>
+                <Field
+                  labelText="Schema"
+                  name="scheme"
+                  component={FiledSelect}
+                  options={[
+                    { name: 'http', title: 'http' },
+                    { name: 'https', title: 'https' },
+                  ]}
+                />
+              </div>
+              <div>
+                <Field labelText="Host" name="host" component={FieldInput} />
+              </div>
             </div>
-            <div>
-              <Field labelText="Host" name="host" component={FieldInput} />
-            </div>
-          </div>
 
-          <div className={styles.columns}>
-            <div>
-              <Field normalize={a => (isNaN(Number(a)) ? a : Number(a))} labelText="Port" type="tel" name="port" component={FieldInput} />
+            <div className={styles.columns}>
+              <div>
+                <Field normalize={a => (isNaN(Number(a)) ? a : Number(a))} labelText="Port" type="tel" name="port" component={FieldInput} />
+              </div>
+              <div>
+                <Field labelText="Path" name="path" component={FieldInput} />
+              </div>
             </div>
-            <div>
-              <Field labelText="Path" name="path" component={FieldInput} />
-            </div>
-          </div>
+          </FormSection>
 
           <Line width="280" />
 

app/common/containers/pages/ApiEditPage/index.js

@@ -89,7 +89,7 @@ export default class ApiCreatePage extends React.Component {
                   />
               ),
                 actions: (
-                  <Button id={`edit-plugin-button-${item.name}`} theme="link" to={`/apis/${item.api_id}/plugins/${item.id}`}>
+                  <Button id={`edit-plugin-button-${item.name}`} theme="link" to={`/apis/${item.api_id}/plugins/${item.name}`}>
                   Edit&nbsp;plugin
                   </Button>
               ),

app/common/containers/pages/PluginCreatePage/index.js

@@ -14,7 +14,7 @@ import styles from './styles.scss';
 
 @withStyles(styles)
 @provideHooks({
-  fetch: ({ dispatch, params }) => dispatch(pluginsFetch(params.apiId, params.pluginId)),
+  fetch: ({ dispatch, params }) => dispatch(pluginsFetch(params.apiId)),
 })
 @connect(state => ({
   plugins: getPlugins(state, state.pages.PluginCreatePage.plugins).map(i => i.name),

app/common/containers/pages/PluginEditPage/index.js

@@ -9,20 +9,20 @@ import { Confirm } from 'components/Popup';
 import FormPageWrapper from 'containers/blocks/FormPageWrapper';
 import PluginForm from 'containers/forms/PluginForm';
 
-import { getPlugin, getPlugins } from 'reducers';
+import { getPluginByName, getPlugins } from 'reducers';
 
 import { onSubmitEdit, pluginsFetch, onUnbind } from './redux';
 
 import styles from './styles.scss';
 
 @withStyles(styles)
 @provideHooks({
-  fetch: ({ dispatch, params }) => dispatch(pluginsFetch(params.apiId, params.pluginId)),
+  fetch: ({ dispatch, params }) => dispatch(pluginsFetch(params.apiId, params.pluginName)),
 })
 @connect((state, { params }) => ({
   ...state.pages.PluginEditPage,
   plugins: getPlugins(state, state.pages.PluginEditPage.plugins).map(i => i.name),
-  plugin: getPlugin(state, params.pluginId) || {},
+  plugin: getPluginByName(state, params.apiId, params.pluginName) || {},
 }), { onSubmitEdit, onUnbind })
 export default class ApiCreatePage extends React.Component {
   state = {

app/common/containers/pages/PluginEditPage/redux.js

@@ -29,10 +29,10 @@ export const onUnbind = (apiId, name) => dispatch => dispatch(unbindPlugin(apiId
 
 export const setPlugins = createAction('apiEditPage/SET_PLUGINS');
 
-export const pluginsFetch = (apiId, pluginId) => dispatch =>
+export const pluginsFetch = (apiId, pluginName) => dispatch =>
   dispatch(fetchPlugins(apiId))
     .then((action) => {
-      const plugin = action.payload.entities.plugins[pluginId];
+      const plugin = action.payload.entities.plugins[pluginName];
 
       return dispatch([
         setPlugins(action.payload.result),

app/common/reducers/index.js

@@ -52,5 +52,6 @@ export const getApis = (state, apis) => apis.map(id => getApi(state, id));
 export const getRequest = (state, requestId) => state.data.requests[requestId];
 export const getRequests = (state, requests) => requests.map(id => getRequest(state, id));
 
-export const getPlugin = (state, pluginId) => state.data.plugins[pluginId];
+export const getPlugin = (state, id) => state.data.plugins[id];
+export const getPluginByName = (state, apiId, pluginName) => state.data.plugins[[apiId, pluginName].join('.')];
 export const getPlugins = (state, plugins) => plugins.map(id => getPlugin(state, id));

app/common/routes/index.js

@@ -27,7 +27,7 @@ export const configureRoutes = ({ store }) => { // eslint-disable-line
           <Route path=":apiId" component={ApiEditPage} />
           <Route path=":apiId/plugins">
             <Route path="add" component={PluginCreatePage} />
-            <Route path=":pluginId" component={PluginEditPage} />
+            <Route path=":pluginName" component={PluginEditPage} />
           </Route>
         </Route>
         <Route path="requests" component={RequestListPage} />

app/common/schema/index.js

@@ -1,5 +1,11 @@
 import { Schema } from 'normalizr';
+import { get } from 'lodash';
 
 export const apiSchema = new Schema('apis', { idAttribute: 'id' });
 export const requestSchema = new Schema('requests', { idAttribute: 'id' });
-export const pluginsSchema = new Schema('plugins', { idAttribute: 'id' });
+export const pluginsSchema = new Schema('plugins', {
+  idAttribute: value => [
+    get(value, 'api_id'),
+    get(value, 'name'),
+  ].join('.'),
+});

docker-compose.yml

@@ -2,7 +2,7 @@ version: '2'
 services:
   api:
     restart: "always"
-    image: "nebo15/annon_api:0.2.94"
+    image: "nebo15/annon_api:0.14.0"
     links:
       - "postgres:postgres"
     depends_on: