Merge pull request #346 from kubeshop/mm/fix/policiesforms

fix: policies form

Author: mortada-codes

src/components/ApiDetails/ApiPaths/ApiPolicies/ApiPolicies.tsx

@@ -14,7 +14,6 @@ import {
   AuthenticationPolicy,
   CORSPolicy,
   CachingPolicy,
-  MockingPolicy,
   QOSPolicy,
   RateLimitingPolicy,
   TargetsPolicy,
@@ -104,9 +103,7 @@ const ApiPolicies = () => {
           {activePolicy === 'websocket' && (
             <WebsocketPolicy xKusk={selectedXKusk} onCancel={onCancelClickHandler} onFinish={onFinishClickHandler} />
           )}
-          {activePolicy === 'mocking' && (
-            <MockingPolicy xKusk={selectedXKusk} onCancel={onCancelClickHandler} onFinish={onFinishClickHandler} />
-          )}
+
           {activePolicy === 'caching' && (
             <CachingPolicy xKusk={selectedXKusk} onCancel={onCancelClickHandler} onFinish={onFinishClickHandler} />
           )}

src/components/Policies/Caching.tsx

@@ -1,4 +1,4 @@
-import {Form, Input, Typography} from 'antd';
+import {Form, Input} from 'antd';
 
 import {FormCard} from '@components/FormComponents';
 
@@ -19,18 +19,18 @@ const Caching = ({xKusk, onFinish, onCancel}: IProps) => {
       subHeading="Current support for caching is experimental"
       helpTopic="Caching"
       helpLink="https://docs.kusk.io/guides/cache"
-      formProps={{onFinish, form}}
+      formProps={{onFinish, form, layout: 'vertical'}}
       cancelEditMode={onCancel}
     >
       <S.CardItem>
-        <Typography.Text type="secondary">Max age (in seconds)</Typography.Text>
         <Form.Item hidden name={['x-kusk', 'cache', 'enabled']} initialValue={Boolean(true)} />
 
         <Form.Item
           name={['x-kusk', 'cache', 'max_age']}
+          label="Max age (in seconds)"
           initialValue={xKusk?.cache?.max_age}
           getValueFromEvent={e => Number(e.target.value)}
-          rules={[{required: true}]}
+          rules={[{required: true, message: 'Set cache max age'}]}
         >
           <Input type="number" placeholder="ex: 60" />
         </Form.Item>

src/components/Policies/Mocking.tsx

@@ -35,17 +35,16 @@ const RateLimiting = ({xKusk, onCancel, onFinish}: IProps) => {
       helpLink="https://docs.kusk.io/extension/#rate-limiting"
       formProps={{onFinish: onSaveClickHandler, form}}
       cancelEditMode={onCancel}
-      enableSaveButton
     >
       <CardLayout>
         <S.CardItem>
           <Typography.Text>Requests per unit</Typography.Text>
           <Form.Item
             name={['x-kusk', 'rate_limit', 'requests_per_unit']}
-            initialValue={xKusk?.rate_limit?.requests_per_unit || 60}
+            initialValue={xKusk?.rate_limit?.requests_per_unit}
             getValueFromEvent={e => Number(e.target.value)}
           >
-            <Input type="number" />
+            <Input type="number" placeholder="ex: 60" />
           </Form.Item>
         </S.CardItem>
 
@@ -64,10 +63,10 @@ const RateLimiting = ({xKusk, onCancel, onFinish}: IProps) => {
           <Typography.Text>Response code</Typography.Text>
           <Form.Item
             name={['x-kusk', 'rate_limit', 'response_code']}
-            initialValue={xKusk?.rate_limit?.response_code || 405}
+            initialValue={xKusk?.rate_limit?.response_code}
             getValueFromEvent={e => Number(e.target.value)}
           >
-            <Input type="number" />
+            <Input type="number" placeholder="ex: 405" />
           </Form.Item>
         </S.CardItem>
       </CardLayout>

src/components/Policies/RateLimiting.tsx

@@ -1,8 +1,14 @@
+import {Button, Form} from 'antd';
+
 import _ from 'lodash';
 
+import {TargetType} from '@models/ui';
+
 import {FormCard} from '@components/FormComponents';
 
-import {TargetForm} from './TargetForm';
+import Mocking from './Targets/Mocking';
+import Redirect from './Targets/Redirect';
+import Upstream from './Targets/Upstream';
 
 import * as S from './styled';
 
@@ -13,6 +19,23 @@ interface IProps {
 }
 
 const Targets = ({xKusk, onFinish, onCancel}: IProps) => {
+  const [form] = Form.useForm();
+
+  const routingType: TargetType = xKusk?.mocking
+    ? 'mocked'
+    : xKusk?.redirect
+    ? 'redirect'
+    : xKusk?.upstream?.host
+    ? 'host'
+    : 'service';
+
+  const targetSelection = Form.useWatch<TargetType>('type', form);
+
+  const xKuskForm = _.set(_.cloneDeep(xKusk), 'upstream.rewrite.rewrite_regex', {
+    pattern: xKusk?.upstream?.rewrite?.pattern,
+    substitution: xKusk?.upstream?.rewrite?.substitution,
+  });
+
   const onSaveClickHandler = (values: any) => {
     let {redirect = null, upstream: {service = null, host = null, rewrite = null} = {}, mocking = null} = values;
     if (rewrite) {
@@ -31,23 +54,108 @@ const Targets = ({xKusk, onFinish, onCancel}: IProps) => {
 
     onFinish(edits);
   };
-  const xKuskForm = _.set(_.cloneDeep(xKusk), 'upstream.rewrite.rewrite_regex', {
-    pattern: xKusk?.upstream?.rewrite?.pattern,
-    substitution: xKusk?.upstream?.rewrite?.substitution,
-  });
+
+  const changeRoutingType = (type: TargetType) => {
+    if (type === 'mocked') {
+      return {
+        type,
+        'x-kusk': {
+          upstream: null,
+          redirect: null,
+          mocking: {
+            enabled: true,
+          },
+        },
+      };
+    }
+    if (type === 'redirect') {
+      return {
+        type,
+        'x-kusk': {
+          upstream: null,
+          mocking: null,
+          redirect: xKusk?.redirect,
+        },
+      };
+    }
+
+    if (type === 'host') {
+      return {
+        type,
+        'x-kusk': {
+          upstream: {service: null, host: xKusk?.upstream?.host},
+          mocking: null,
+          redirect: null,
+        },
+      };
+    }
+    if (type === 'service') {
+      return {
+        type,
+        'x-kusk': {
+          upstream: {host: null, service: xKusk?.upstream?.service},
+          mocking: null,
+          redirect: null,
+        },
+      };
+    }
+  };
 
   return (
     <FormCard
       enableCancelButton
-      enableSaveButton
       heading="Routing"
       subHeading="Define the the upstreams or redirects your API is routing the requests to."
       helpTopic="Routing"
       helpLink="https://docs.kusk.io/guides/routing"
-      formProps={{onFinish: onSaveClickHandler, layout: 'vertical', initialValues: xKuskForm}}
+      formProps={{
+        form,
+        onFinish: onSaveClickHandler,
+        layout: 'vertical',
+        initialValues: {type: routingType, ...xKuskForm},
+      }}
       cancelEditMode={onCancel}
     >
-      <TargetForm />
+      <Form.Item label="Type" name="type">
+        <Button.Group>
+          <Button
+            type={targetSelection === 'service' ? 'primary' : undefined}
+            onClick={() => {
+              form.setFieldsValue(changeRoutingType('service'));
+            }}
+            value="Upstream service"
+          >
+            Upstream service
+          </Button>
+          <Button
+            type={targetSelection === 'host' ? 'primary' : undefined}
+            onClick={() => form.setFieldsValue(changeRoutingType('host'))}
+            value="Upstream host"
+          >
+            Upstream host
+          </Button>
+          <Button
+            type={targetSelection === 'redirect' ? 'primary' : undefined}
+            onClick={() => form.setFieldsValue(changeRoutingType('redirect'))}
+            value="Redirect"
+          >
+            Redirect
+          </Button>
+          <Button
+            type={targetSelection === 'mocked' ? 'primary' : undefined}
+            onClick={() => form.setFieldsValue(changeRoutingType('mocked'))}
+            value="Mocking"
+          >
+            Mock
+          </Button>
+        </Button.Group>
+      </Form.Item>
+      {(targetSelection === 'service' || targetSelection === 'host') && (
+        <Upstream reference={targetSelection === 'service' ? 'service' : 'host'} isRequiredFields />
+      )}
+      {targetSelection === 'redirect' && <Redirect isRequiredFields />}
+      {targetSelection === 'mocked' && <Mocking />}
+
       <S.Divider />
     </FormCard>
   );