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

openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/Policies.spec.js

@@ -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();

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -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",

openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/AddPolicyPage/AddPolicyPage.test.tsx

@@ -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');

openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/RuleForm/RuleForm.test.tsx

@@ -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');

openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/RuleForm/RuleForm.tsx

@@ -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 [isValidatingCondition, setIsValidating] = useState<boolean>(false);
-  const [isValidCondition, setIsvalidCondition] = 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[]) => {
+  const getConditionOptions = (conditionFunctions: Function[]) => {
-    return funtions.reduce((prev: BaseOptionType[], curr: Function) => {
+    return conditionFunctions.reduce(
-      const currentValues = (curr.examples || []).map((example: string) => ({
+      (prev: BaseOptionType[], curr: Function) => {
-        label: example,
+        const currentValues = (curr.examples || []).map((example: string) => ({
-        value: example,
+          label: example,
-      }));
+          value: example,
+        }));
 
-      return uniqBy([...prev, ...currentValues], 'value');
+        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"
+          data-testid="resources"
-          placeholder="Select 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"