Fix #8490 Wrong message in the required message on Policy page (#8522)

* Fix #8490 Wrong message in the required message on Policy page

* Fix unit test

* rename functions to conditionFunctions

* Address review comments

* Address review comments

* Fix cypress test data test id.

* FIx unit test
This commit is contained in:
Sachin Chaurasiya 2022-11-04 11:20:36 +05:30 committed by GitHub
parent a49c261cbe
commit aa7c31ec31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 53 additions and 32 deletions

View File

@ -59,7 +59,7 @@ const addRule = (rulename, ruleDescription, descriptionIndex) => {
.scrollIntoView()
.type(ruleDescription);
//Select resource dropdown
cy.get('[data-testid="resuorces"]')
cy.get('[data-testid="resources"]')
.scrollIntoView()
.should('be.visible')
.click();

View File

@ -201,7 +201,14 @@
"end-date": "End Date",
"show-deleted": "Show deleted",
"add-bot": "Add Bot",
"search-for-bots": "Search for bots..."
"search-for-bots": "Search for bots...",
"condition-is-invalid": "Condition is invalid",
"rule-name": "Rule Name",
"write-your-description": "Write your description",
"select-resource": "Select Resources",
"select-rule-effect": "Select Rule Effect",
"field-required": "{{field}} is required",
"field-required-plural": "{{field}} are required"
},
"message": {
"service-email-required": "Service account Email is required",

View File

@ -78,7 +78,7 @@ describe('Test Add Policy Page', () => {
const ruleName = await screen.findByTestId('rule-name');
const resources = await screen.findByTestId('resuorces');
const resources = await screen.findByTestId('resources');
const operations = await screen.findByTestId('operations');
const effect = await screen.findByTestId('effect');

View File

@ -65,7 +65,7 @@ describe('Test Rule Form Component', () => {
const ruleName = await screen.findByTestId('rule-name');
const resources = await screen.findByTestId('resuorces');
const resources = await screen.findByTestId('resources');
const operations = await screen.findByTestId('operations');
const effect = await screen.findByTestId('effect');

View File

@ -16,6 +16,7 @@ import { BaseOptionType } from 'antd/lib/select';
import { AxiosError } from 'axios';
import { capitalize, startCase, uniq, uniqBy } from 'lodash';
import React, { FC, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
getPolicyFunctions,
getPolicyResources,
@ -40,6 +41,7 @@ export interface RuleFormProps {
}
const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
const { t } = useTranslation();
const [policyResources, setPolicyResources] = useState<ResourceDescriptor[]>(
[]
);
@ -51,8 +53,8 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
);
const [validationError, setValidationError] = useState<string>('');
const [isValidatingCondition, setIsvalidating] = useState<boolean>(false);
const [isValidCondition, setIsvalidCondition] = useState<boolean>(false);
const [isValidatingCondition, setIsValidating] = useState<boolean>(false);
const [isValidCondition, setIsValidCondition] = useState<boolean>(false);
/**
* Derive the resources from policy resources
@ -108,15 +110,18 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
return option;
}, [ruleData.resources, policyResources]);
const getConditionOptions = (funtions: Function[]) => {
return funtions.reduce((prev: BaseOptionType[], curr: Function) => {
const getConditionOptions = (conditionFunctions: Function[]) => {
return conditionFunctions.reduce(
(prev: BaseOptionType[], curr: Function) => {
const currentValues = (curr.examples || []).map((example: string) => ({
label: example,
value: example,
}));
return uniqBy([...prev, ...currentValues], 'value');
}, []);
},
[]
);
};
const handleConditionSearch = (value: string) => {
@ -138,7 +143,7 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
}
};
const fetchPolicyFuntions = async () => {
const fetchPolicyFunctions = async () => {
try {
const data = await getPolicyFunctions();
setPolicyFunctions(data.data || []);
@ -148,9 +153,10 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
};
const handleConditionValidation = async (condition: string) => {
const defaultErrorText = 'Condition is invalid';
const defaultErrorText = t('label.condition-is-invalid');
if (condition) {
setIsvalidating(true);
setIsValidating(true);
try {
const response = await validateRuleCondition(condition);
@ -161,22 +167,22 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
const check = [200, 204].includes(response.status);
if (check) {
setValidationError('');
setIsvalidCondition(true);
setIsValidCondition(true);
} else {
setValidationError(defaultErrorText);
}
} catch (error) {
setValidationError(getErrorText(error as AxiosError, defaultErrorText));
setIsvalidCondition(false);
setIsValidCondition(false);
} finally {
setIsvalidating(false);
setIsValidating(false);
}
}
};
useEffect(() => {
fetchPolicyResources();
fetchPolicyFuntions();
fetchPolicyFunctions();
}, []);
useEffect(() => {
@ -186,18 +192,19 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
return (
<>
<Form.Item
label="Rule Name:"
label={`${t('label.rule-name')}:`}
name="ruleName"
rules={[
{
required: true,
max: 128,
min: 1,
message: t('label.field-required', { field: t('label.rule-name') }),
},
]}>
<Input
data-testid="rule-name"
placeholder="Rule Name"
placeholder={t('label.rule-name')}
type="text"
value={ruleData.name}
onChange={(e) =>
@ -205,11 +212,11 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
}
/>
</Form.Item>
<Form.Item label="Description:" name="ruleDescription">
<Form.Item label={t('label.description')} name="ruleDescription">
<RichTextEditor
height="200px"
initialValue={ruleData.description || ''}
placeHolder="Write your description"
placeHolder={t('label.write-your-description')}
style={{ margin: 0 }}
onTextChange={(value) =>
setRuleData((prev: Rule) => ({ ...prev, description: value }))
@ -217,18 +224,21 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
/>
</Form.Item>
<Form.Item
label="Resources:"
label={`${t('label.resources')}:`}
name="resources"
rules={[
{
required: true,
message: t('label.field-required-plural', {
field: t('label.resources'),
}),
},
]}>
<TreeSelect
treeCheckable
className="tw-w-full"
data-testid="resuorces"
placeholder="Select Resources"
data-testid="resources"
placeholder={t('label.select-resource')}
showCheckedStrategy={TreeSelect.SHOW_PARENT}
treeData={resourcesOptions}
onChange={(values) => {
@ -240,11 +250,14 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
/>
</Form.Item>
<Form.Item
label="Operations:"
label={`${t('label.operations')}:`}
name="operations"
rules={[
{
required: true,
message: t('label.field-required-plural', {
field: t('label.operations'),
}),
},
]}>
<TreeSelect
@ -263,16 +276,17 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
/>
</Form.Item>
<Form.Item
label="Effect:"
label={`${t('label.effect')}:`}
name="ruleEffect"
rules={[
{
required: true,
message: t('label.field-required', { field: t('label.effect') }),
},
]}>
<Select
data-testid="effect"
placeholder="Select Rule Effect"
placeholder={t('label.select-rule-effect')}
value={ruleData.effect}
onChange={(value) =>
setRuleData((prev: Rule) => ({ ...prev, effect: value }))
@ -281,7 +295,7 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
<Option key={Effect.Deny}>{capitalize(Effect.Deny)}</Option>
</Select>
</Form.Item>
<Form.Item label="Condition:" name="condition">
<Form.Item label={`${t('label.condition')}:`} name="condition">
<>
<AutoComplete
data-testid="condition"