yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-24 17:08:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI - Add help text for valid and invalid condition (#7180)

Browse Source
This commit is contained in:
Sachin Chaurasiya 2022-09-03 09:13:20 +05:30 committed by GitHub
parent 00e6996ac0
commit 9817dfca89
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,6 +52,7 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
const [validationError, setValidationError] = useState<string>(''); const [validationError, setValidationError] = useState<string>('');
const [isValidatingCondition, setIsvalidating] = useState<boolean>(false); const [isValidatingCondition, setIsvalidating] = useState<boolean>(false);
const [isValidCondition, setIsvalidCondition] = useState<boolean>(false);
/** /**
* Derive the resources from policy resources * Derive the resources from policy resources
@ -146,21 +147,25 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
} }
}; };
const handleConditionValidation = async () => { const handleConditionValidation = async (condition: string) => {
const defaultErrorText = 'Condition is invalid'; const defaultErrorText = 'Condition is invalid';
if (ruleData.condition) { if (condition) {
setIsvalidating(true); setIsvalidating(true);
try { try {
const response = await validateRuleCondition(ruleData.condition); const response = await validateRuleCondition(condition);
/** /**
* If request is successful then we will only get response as success without any data * If request is successful then we will only get response as success without any data
* So, here we have to check the response status code * So, here we have to check the response status code
*/ */
const check = [200, 204].includes(response.status);
[200, 204].includes(response.status) if (check) {
? setValidationError('') setValidationError('');
: setValidationError(defaultErrorText); setIsvalidCondition(true);
setTimeout(() => setIsvalidCondition(false), 2000);
} else {
setValidationError(defaultErrorText);
}
} catch (error) { } catch (error) {
setValidationError(getErrorText(error as AxiosError, defaultErrorText)); setValidationError(getErrorText(error as AxiosError, defaultErrorText));
} finally { } finally {
@ -283,23 +288,28 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
options={conditionOptions} options={conditionOptions}
placeholder="Condition" placeholder="Condition"
value={ruleData.condition} value={ruleData.condition}
onBlur={handleConditionValidation}
onChange={(value) => { onChange={(value) => {
setRuleData((prev: Rule) => ({ ...prev, condition: value })); setRuleData((prev: Rule) => ({ ...prev, condition: value }));
!value && setValidationError(''); !value && setValidationError('');
handleConditionValidation(value);
}} }}
onSearch={handleConditionSearch} onSearch={handleConditionSearch}
/> />
{validationError && ( {validationError && (
<div className="ant-form-item-explain-error" role="alert"> <div className="tw-mt-1" role="alert">
{validationError} {`❌ Invalid condition : ${validationError}`}
</div> </div>
)} )}
{isValidatingCondition && ( {isValidatingCondition && (
<div className="tw-text-grey-body" role="alert"> <div className="tw-mt-1" role="alert">
Validating the condition... Validating the condition...
</div> </div>
)} )}
{isValidCondition && !isValidatingCondition && !validationError && (
<div className="tw-mt-1" role="alert">
✅ Valid condition
</div>
)}
</> </>
</Form.Item> </Form.Item>
</> </>