added 2 new rules and other changes in db, ingress and deployments

src/components/ingress-routing/IngressRoutingModal.jsx

@@ -88,6 +88,7 @@ const IngressRoutingModal = props => {
     form.validateFields().then(values => {
       values = Object.assign({}, formInitialValues, values)
       try {
+        values.url = values.url.trim()
         if (!values.allowSpecificHosts) values.allowedHosts = ["*"]
         if (!values.allowSpecificMethods) values.allowedMethods = ["*"]
         if (!values.performRewrite) values.rewrite = undefined

src/components/security-rules/configure-rule/ConfigureRule.jsx

@@ -144,18 +144,11 @@ const parseNumber = (value) => {
   return !isNaN(value) ? Number(value) : value
 }
 
-const parseArray = (value, type) => {
-  if (!value.includes(",")) {
-    return value
-  }
-  return value.split(",").map(value => value.trim()).map(value => parseValue(value, type))
-}
-
 const isTypeOfFieldsString = (fields) => {
   return typeof fields === "string"
 }
 
-const rules = ['allow', 'deny', 'authenticated', 'match', 'and', 'or', 'query', 'webhook', 'force', 'remove', 'encrypt', 'decrypt', 'hash'];
+const rules = ['allow', 'deny', 'authenticated', 'match', 'and', 'or', 'query', 'webhook', 'force', 'remove', 'encrypt', 'decrypt', 'hash', 'graphql', 'transform'];
 
 const ConfigureRule = (props) => {
   // form
@@ -181,7 +174,8 @@ const ConfigureRule = (props) => {
     switch (values.rule) {
       case "match":
         if (values.eval === 'in' || values.eval === 'notIn') {
-          values.f2 = parseArray(values.f2, values.type)
+          values.f2 = values.multipleInputFields
+          delete values["multipleInputFields"]
         } else {
           values.f1 = parseValue(values.f1, values.type)
           values.f2 = parseValue(values.f2, values.type)
@@ -213,6 +207,15 @@ const ConfigureRule = (props) => {
           values.template = "go"
         }
 
+        delete values["applyTransformations"]
+        break;
+      case "graphql":
+        break;
+      case "transform":
+        if (values["applyTransformations"]) {
+          values.template = "go"
+        }
+
         delete values["applyTransformations"]
         break;
     }
@@ -223,7 +226,7 @@ const ConfigureRule = (props) => {
       if (!props.selectedRule.clauses) values.clauses = [];
       else values.clauses = props.selectedRule.clauses
     }
-    if (values.rule === "query" || values.rule === "webhook" || values.rule === "force" || values.rule === "remove" || values.rule === "encrypt" || values.rule === "decrypt" || values.rule === "hash") {
+    if (values.rule === "query" || values.rule === "webhook" || values.rule === "force" || values.rule === "remove" || values.rule === "encrypt" || values.rule === "decrypt" || values.rule === "hash" || values.rule === "graphql" || values.rule === "transform") {
       values.clause = props.selectedRule.clause
       values.fields = values.loadVar ? values.singleInputFields : values.multipleInputFields
       delete values["loadVar"]
@@ -393,9 +396,64 @@ const ConfigureRule = (props) => {
               () => {
                 const type = form.getFieldValue("type")
                 return (
-                  <Form.Item name='f2' rules={[{ required: true }, { validator: createValueAndTypeValidator(type, true) }]}>
-                    <ObjectAutoComplete placeholder="Second operand" options={autoCompleteOptions} />
-                  </Form.Item>
+                  <>
+                    <ConditionalFormBlock
+                      dependency='eval'
+                      condition={() => form.getFieldValue('eval') !== 'in' && form.getFieldValue('eval') !== 'notIn'}
+                    >
+                      <Form.Item name='f2' rules={[{ required: true }, { validator: createValueAndTypeValidator(type, true) }]}>
+                        <ObjectAutoComplete placeholder="Second operand" options={autoCompleteOptions} />
+                      </Form.Item>
+                    </ConditionalFormBlock>
+                    <ConditionalFormBlock
+                      dependency='eval'
+                      condition={() => form.getFieldValue('eval') === 'in' || form.getFieldValue('eval') === 'notIn'}
+                    >
+                      <Form.List name='multipleInputFields'>
+                        {(fields, { add, remove }) => {
+                          return (
+                            <>
+                              {fields.map((field, index) => (
+                                <Row key={field.key}>
+                                  <Col span={14}>
+                                    <Form.Item
+                                      name={[field.name]}
+                                      key={[field.name]}
+                                      rules={[
+                                        { required: true },
+                                        { validator: createValueAndTypeValidator(type, true) }
+                                      ]}
+                                    >
+                                      <ObjectAutoComplete placeholder="Second operand" options={autoCompleteOptions} />
+                                    </Form.Item>
+                                  </Col>
+                                  <Col span={2}>
+                                    <CloseOutlined
+                                      style={{ margin: '0 8px' }}
+                                      onClick={() => {
+                                        remove(field.name);
+                                      }}
+                                    />
+                                  </Col>
+                                </Row>
+                              ))}
+                              <Form.Item>
+                                <Button
+                                  type='dashed'
+                                  onClick={() => {
+                                    add();
+                                  }}
+                                  style={{ width: '40%' }}
+                                >
+                                  <PlusOutlined /> Add field
+                                </Button>
+                              </Form.Item>
+                            </>
+                          );
+                        }}
+                      </Form.List>
+                    </ConditionalFormBlock>
+                  </>
                 )
               }
             }
@@ -685,6 +743,77 @@ const ConfigureRule = (props) => {
             </ConditionalFormBlock>
           </ConditionalFormBlock>
         </ConditionalFormBlock>
+        <ConditionalFormBlock
+          dependency='rule'
+          condition={() => form.getFieldValue('rule') === 'graphql'}
+        >
+          <FormItemLabel name='Query' style={{ border: '1px solid #D9D9D9' }} />
+          <Form.Item name="graphqlQuery" rules={[{ required: true }]}>
+            <JSONCodeMirror />
+          </Form.Item>
+          <FormItemLabel name='Variables' style={{ border: '1px solid #D9D9D9' }} />
+          <Form.Item name="graphqlVariables" rules={[{ required: true }]}>
+            <JSONCodeMirror />
+          </Form.Item>
+          <FormItemLabel name="Store" hint="(Optional)" />
+          <FormItem name="store" rules={[{ required: false }]}>
+            <Input placeholder="The variable to store the query response. For example: args.res" />
+          </FormItem>
+        </ConditionalFormBlock>
+        <ConditionalFormBlock
+          dependency="rule"
+          condition={() => form.getFieldValue('rule') === "transform"} >
+          <FormItemLabel name="Store" hint="(Optional)" />
+          <FormItem name="store" rules={[{ required: false }]}>
+            <Input placeholder="The variable to store the transform response. For example: args.res" />
+          </FormItem>
+          <FormItemLabel name='Apply transformations' />
+          <Form.Item name='applyTransformations' valuePropName='checked'>
+            <Checkbox>
+              Transform the request body using templates
+          </Checkbox>
+          </Form.Item>
+          <ConditionalFormBlock
+            dependency='applyTransformations'
+            condition={() => form.getFieldValue('applyTransformations') === true}
+          >
+            <Alert
+              message={<AlertMsgApplyTransformations />}
+              type='info'
+              showIcon
+              style={{ marginBottom: 21 }}
+            />
+            <FormItemLabel name="Template output format" description="Format for parsing the template output" />
+            <Form.Item name="outputFormat">
+              <Select style={{ width: 96 }}>
+                <Option value='yaml'>YAML</Option>
+                <Option value='json'>JSON</Option>
+              </Select>
+            </Form.Item>
+            <FormItemLabel name="JWT claims template" hint="(Optional)" description="Template to generate the transformed claims of the request" />
+            <Form.Item name="claims">
+              <AntCodeMirror style={{ border: "1px solid #D9D9D9" }} options={{
+                mode: { name: 'go' },
+                lineNumbers: true,
+                styleActiveLine: true,
+                matchBrackets: true,
+                autoCloseBrackets: true,
+                tabSize: 2
+              }} />
+            </Form.Item>
+            <FormItemLabel name="Request template" hint="(Optional)" description="Template to generate the transformed request body" />
+            <Form.Item name='requestTemplate' >
+              <AntCodeMirror style={{ border: "1px solid #D9D9D9" }} options={{
+                mode: { name: 'go' },
+                lineNumbers: true,
+                styleActiveLine: true,
+                matchBrackets: true,
+                autoCloseBrackets: true,
+                tabSize: 2
+              }} />
+            </Form.Item>
+          </ConditionalFormBlock>
+        </ConditionalFormBlock>
         <FormItemLabel name='Customize error message' />
         <Form.Item name='errorMsg' valuePropName='checked'>
           <Checkbox checked={error ? true : false}>

src/components/security-rules/graph-editor/GraphEditor.jsx

@@ -152,7 +152,7 @@ function GraphEditor({ rule, setRule, ruleName, ruleMetaData, isCachingEnabled }
               }
               return
             }
-            if (selectedRuleObj.rule === "query" || selectedRuleObj.rule === "force" || selectedRuleObj.rule === "remove" || selectedRuleObj.rule === "encrypt" || selectedRuleObj.rule === "decrypt" || selectedRuleObj.rule === "hash") {
+            if (selectedRuleObj.rule === "query" || selectedRuleObj.rule === "force" || selectedRuleObj.rule === "remove" || selectedRuleObj.rule === "encrypt" || selectedRuleObj.rule === "decrypt" || selectedRuleObj.rule === "hash" || selectedRuleObj.rule === "graphql") {
               if (strippedKey === "root") {
                 setRule(dotProp.set(rule, "clause", copiedRule))
               } else {

src/components/security-rules/graph-editor/generateGraph.js

@@ -33,7 +33,7 @@ const convertRuleToGraph = (rule, id, parentId) => {
     graph.nodes.push({ id: `${id}.clauses.${len}`, label: "+ Add clause", group: "add_rule" })
     graph.edges.push({ from: id, to: `${id}.clauses.${len}` })
   }
-  if (rule.rule === "query" || rule.rule === "force" || rule.rule === "remove" || rule.rule === "encrypt" || rule.rule === "decrypt" || rule.rule === "hash") {
+  if (rule.rule === "query" || rule.rule === "force" || rule.rule === "remove" || rule.rule === "encrypt" || rule.rule === "decrypt" || rule.rule === "hash" || rule.rule === "graphql") {
     if (rule.clause && rule.clause.rule) {
       graph = mergeGraph(graph, convertRuleToGraph(rule.clause, `${id}.clause`, id))
     } else {

src/pages/database/browse/DBBrowse.jsx

@@ -14,7 +14,7 @@ import InfiniteScrollingTable from "../../../components/utils/infinite-scrolling
 import { notify, incrementPendingRequests, decrementPendingRequests } from '../../../utils';
 import { generateSchemaAST } from "../../../graphql";
 import { Button, Select, Popconfirm } from "antd";
-import { FilterOutlined, PlusOutlined } from "@ant-design/icons";
+import { FilterOutlined, PlusOutlined, ReloadOutlined } from "@ant-design/icons";
 import { API, cond } from "space-api";
 import { spaceCloudClusterOrigin, projectModules } from "../../../constants"
 import { getCollectionSchema, getDbType, getTrackedCollections } from '../../../operations/database';
@@ -337,6 +337,14 @@ const Browse = () => {
     })
   }
 
+  const refreshTableData = () => {
+    if (selectedCol) {
+      getTableData();
+    } else {
+      notify("error", "Error", "No column selected");
+    }
+  }
+
   const tableColumns = getColumnNames(colSchemaFields, tableData)
   return (
     <React.Fragment>
@@ -365,6 +373,7 @@ const Browse = () => {
             >
               {collections.map(col => <Select.Option value={col}>{col}</Select.Option>)}
             </Select>
+            <Button onClick={refreshTableData} style={{ marginRight: 24 }}>Refresh <ReloadOutlined /></Button>
             {colSchemaFields && (
               <>
                 <Button onClick={() => setFilterSorterFormVisibility(true)}>Filters & Sorters <FilterOutlined /></Button>

src/pages/deployments/overview/DeploymentsOverview.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useParams, useHistory } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
-import { Button, Table, Popconfirm, Tag, Input, Empty } from "antd";
+import { Button, Table, Popconfirm, Tag, Input, Empty, Typography } from "antd";
 import Sidenav from "../../../components/sidenav/Sidenav";
 import Topbar from "../../../components/topbar/Topbar";
 import DeploymentTabs from "../../../components/deployments/deployment-tabs/DeploymentTabs";
@@ -177,7 +177,7 @@ const DeploymentsOverview = () => {
     {
       title: "Private URL",
       key: "url",
-      render: (_, record) => `${record.id}.${projectID}.svc.cluster.local`
+      render: (_, record) => <Typography.Paragraph copyable={true}>{`${record.id}.${projectID}.svc.cluster.local`}</Typography.Paragraph>
     },
     {
       title: "Status",