Address Hayk and Xavi's comments

src/pages/IstioConfigNew/AuthorizationPolicyForm/From/SourceBuilder.tsx

@@ -109,12 +109,13 @@ class SourceBuilder extends React.Component<Props, State> {
   // Helper to identify when some values are valid
   isValidSource = (): [boolean, string] => {
     if (this.state.newSourceField === 'ipBlocks' || this.state.newSourceField === 'notIpBlocks') {
-      const validIp = isValidIp(this.state.newValues);
+      const validIp = this.state.newValues.split(',').every((ip) => isValidIp(ip));
       if (!validIp) {
         return [false, 'Not valid IP'];
       }
     }
-    if (this.state.newValues.length === 0) {
+    const emptyValues = this.state.newValues.split(',').every((v) => v.length === 0);
+    if (emptyValues) {
       return [false, 'Empty value'];
     }
     return [true, ''];
@@ -149,14 +150,15 @@ class SourceBuilder extends React.Component<Props, State> {
 
   rows = () => {
     const [isValidSource, invalidText] = this.isValidSource();
-    return Object.keys(this.state.source)
-      .map((sourceField, i) => {
-        return {
-          key: 'sourceKey' + i,
-          cells: [<>{sourceField}</>, <>{this.state.source[sourceField].join(',')}</>, <></>],
-        };
-      })
-      .concat([
+
+    const sourceRows = Object.keys(this.state.source).map((sourceField, i) => {
+      return {
+        key: 'sourceKey' + i,
+        cells: [<>{sourceField}</>, <>{this.state.source[sourceField].join(',')}</>, <></>],
+      };
+    });
+    if (this.state.sourceFields.length > 0) {
+      return sourceRows.concat([
         {
           key: 'sourceKeyNew',
           cells: [
@@ -202,6 +204,8 @@ class SourceBuilder extends React.Component<Props, State> {
           ],
         },
       ]);
+    }
+    return sourceRows;
   };
 
   render() {

src/pages/IstioConfigNew/AuthorizationPolicyForm/To/OperationBuilder.tsx

@@ -25,24 +25,24 @@ const INIT_OPERATION_FIELDS = [
   'methods',
   'notMethods',
   'paths',
-  'notPaths'
+  'notPaths',
 ].sort();
 
 const headerCells: ICell[] = [
   {
     title: 'Operation Field',
     transforms: [cellWidth(20) as any],
-    props: {}
+    props: {},
   },
   {
     title: 'Values',
     transforms: [cellWidth(80) as any],
-    props: {}
+    props: {},
   },
   {
     title: '',
-    props: {}
-  }
+    props: {},
+  },
 ];
 
 class OperationBuilder extends React.Component<Props, State> {
@@ -52,24 +52,24 @@ class OperationBuilder extends React.Component<Props, State> {
       operationFields: Object.assign([], INIT_OPERATION_FIELDS),
       operation: {},
       newOperationField: INIT_OPERATION_FIELDS[0],
-      newValues: ''
+      newValues: '',
     };
   }
 
   onAddNewOperationField = (value: string, _) => {
     this.setState({
-      newOperationField: value
+      newOperationField: value,
     });
   };
 
   onAddNewValues = (value: string, _) => {
     this.setState({
-      newValues: value
+      newValues: value,
     });
   };
 
   onAddOperation = () => {
-    this.setState(prevState => {
+    this.setState((prevState) => {
       const i = prevState.operationFields.indexOf(prevState.newOperationField);
       if (i > -1) {
         prevState.operationFields.splice(i, 1);
@@ -79,7 +79,7 @@ class OperationBuilder extends React.Component<Props, State> {
         operationFields: prevState.operationFields,
         operation: prevState.operation,
         newOperationField: prevState.operationFields[0],
-        newValues: ''
+        newValues: '',
       };
     });
   };
@@ -91,7 +91,7 @@ class OperationBuilder extends React.Component<Props, State> {
         operationFields: Object.assign([], INIT_OPERATION_FIELDS),
         operation: {},
         newOperationField: INIT_OPERATION_FIELDS[0],
-        newValues: ''
+        newValues: '',
       },
       () => {
         this.props.onAddTo(toItem);
@@ -107,18 +107,18 @@ class OperationBuilder extends React.Component<Props, State> {
       onClick: (event, rowIndex, rowData, extraData) => {
         // Fetch sourceField from rowData, it's a fixed string on children
         const removeOperationField = rowData.cells[0].props.children.toString();
-        this.setState(prevState => {
+        this.setState((prevState) => {
           prevState.operationFields.push(removeOperationField);
           delete prevState.operation[removeOperationField];
           const newOperationFields = prevState.operationFields.sort();
           return {
             operationFields: newOperationFields,
             operation: prevState.operation,
             newOperationField: newOperationFields[0],
-            newValues: ''
+            newValues: '',
           };
         });
-      }
+      },
     };
     if (rowIndex < Object.keys(this.state.operation).length) {
       return [removeAction];
@@ -127,14 +127,14 @@ class OperationBuilder extends React.Component<Props, State> {
   };
 
   rows = () => {
-    return Object.keys(this.state.operation)
-      .map((operationField, i) => {
-        return {
-          key: 'operationKey' + i,
-          cells: [<>{operationField}</>, <>{this.state.operation[operationField].join(',')}</>, <></>]
-        };
-      })
-      .concat([
+    const operatorRows = Object.keys(this.state.operation).map((operationField, i) => {
+      return {
+        key: 'operationKey' + i,
+        cells: [<>{operationField}</>, <>{this.state.operation[operationField].join(',')}</>, <></>],
+      };
+    });
+    if (this.state.operationFields.length > 0) {
+      return operatorRows.concat([
         {
           key: 'operationKeyNew',
           cells: [
@@ -165,10 +165,12 @@ class OperationBuilder extends React.Component<Props, State> {
               {this.state.operationFields.length > 0 && (
                 <Button variant="link" icon={<PlusCircleIcon />} onClick={this.onAddOperation} />
               )}
-            </>
-          ]
-        }
+            </>,
+          ],
+        },
       ]);
+    }
+    return operatorRows;
   };
 
   render() {

src/pages/IstioConfigNew/RequestAuthorizationForm/JwtRuleBuilder.tsx

@@ -4,6 +4,8 @@ import { cellWidth, ICell, Table, TableBody, TableHeader } from '@patternfly/rea
 import { Button, FormSelect, FormSelectOption } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons';
 import { TextInputBase as TextInput } from '@patternfly/react-core/dist/js/components/TextInput/TextInput';
+import { style } from 'typestyle';
+import { PfColors } from '../../../components/Pf/PfColors';
 
 type Props = {
   onAddJwtRule: (rule: JWTRule) => void;
@@ -44,12 +46,24 @@ const headerCells: ICell[] = [
   },
 ];
 
+const noValidStyle = style({
+  color: PfColors.Red100,
+});
+
+const warningStyle = style({
+  marginLeft: 25,
+  color: PfColors.Red100,
+  textAlign: 'center',
+});
+
 export const formatJwtField = (jwtField: string, jwtRule: JWTRule): string => {
   switch (jwtField) {
     case 'issuer':
       return jwtRule.issuer ? jwtRule.issuer : '';
     case 'audiences':
       return jwtRule.audiences ? jwtRule.audiences.join(',') : '';
+    case 'jwks':
+      return jwtRule.jwks ? jwtRule.jwks : '';
     case 'jwksUri':
       return jwtRule.jwksUri ? jwtRule.jwksUri : '';
     case 'fromHeaders':
@@ -111,6 +125,9 @@ class JwtRuleBuilder extends React.Component<Props, State> {
         case 'audiences':
           prevState.jwtRule.audiences = prevState.newValues.split(',');
           break;
+        case 'jwks':
+          prevState.jwtRule.jwks = prevState.newValues;
+          break;
         case 'jwksUri':
           prevState.jwtRule.jwksUri = prevState.newValues;
           break;
@@ -194,19 +211,28 @@ class JwtRuleBuilder extends React.Component<Props, State> {
     return [];
   };
 
+  isJwtFieldValid = (): [boolean, string] => {
+    const isEmptyValue = this.state.newValues.split(',').every((v) => v.length === 0);
+    if (isEmptyValue) {
+      return [false, 'Value cannot be empty'];
+    }
+    return [true, ''];
+  };
+
   isJwtRuleValid = (): boolean => {
     return this.state.jwtRule.issuer ? this.state.jwtRule.issuer.length > 0 : false;
   };
 
   rows = () => {
-    return Object.keys(this.state.jwtRule)
-      .map((jwtField, i) => {
-        return {
-          key: 'jwtField' + i,
-          cells: [<>{jwtField}</>, <>{formatJwtField(jwtField, this.state.jwtRule)}</>, <></>],
-        };
-      })
-      .concat([
+    const jwtRuleRows = Object.keys(this.state.jwtRule).map((jwtField, i) => {
+      return {
+        key: 'jwtField' + i,
+        cells: [<>{jwtField}</>, <>{formatJwtField(jwtField, this.state.jwtRule)}</>, <></>],
+      };
+    });
+    if (this.state.jwtRuleFields.length > 0) {
+      const [isJwtFieldValid, validText] = this.isJwtFieldValid();
+      return jwtRuleRows.concat([
         {
           key: 'jwtFieldKeyNew',
           cells: [
@@ -232,15 +258,33 @@ class JwtRuleBuilder extends React.Component<Props, State> {
                 name="addNewValues"
                 onChange={this.onAddNewValues}
               />
+              {this.state.newJwtField === 'fromHeaders' && (
+                <div key="fromHeadersHelperText">
+                  List of header locations from which JWT is expected. <br />
+                  I.e. "x-jwt-assertion: Bearer ,Authorization: Bearer "
+                </div>
+              )}
+              {!isJwtFieldValid && (
+                <div key="hostsHelperText" className={noValidStyle}>
+                  {validText}
+                </div>
+              )}
             </>,
             <>
               {this.state.jwtRuleFields.length > 0 && (
-                <Button variant="link" icon={<PlusCircleIcon />} onClick={this.onUpdateJwtRule} />
+                <Button
+                  variant="link"
+                  icon={<PlusCircleIcon />}
+                  onClick={this.onUpdateJwtRule}
+                  isDisabled={!isJwtFieldValid}
+                />
               )}
             </>,
           ],
         },
       ]);
+    }
+    return jwtRuleRows;
   };
 
   render() {
@@ -263,6 +307,7 @@ class JwtRuleBuilder extends React.Component<Props, State> {
           onClick={this.onAddJwtRuleToList}
         >
           Add JWT Rule
+          {!this.isJwtRuleValid() && <span className={warningStyle}>A JWT Rule needs an "issuer"</span>}
         </Button>
       </>
     );