From 111106312d61a752cf8b9258d4bb00d1a464717c Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Tue, 5 Jul 2022 21:29:00 +0530
Subject: [PATCH] Fix #5471 Creating a tag with an illegal character prevents
 utilizing the tagging system until manually removed (#5854)

---
 .../src/components/Modals/FormModal/index.tsx |  3 +++
 .../ui/src/constants/regex.constants.ts       |  3 +++
 .../resources/ui/src/pages/tags/index.tsx     | 25 +++++++++++++------
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/FormModal/index.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/FormModal/index.tsx
index 39583bc436f..1f9b5185cf1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/FormModal/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/FormModal/index.tsx
@@ -24,6 +24,7 @@ type FormModalProp = {
   header: string;
   initialData: FormData;
   errorData?: FormErrorData;
+  isSaveButtonDisabled?: boolean;
 };
 type FormRef = {
   fetchMarkDownData: () => string;
@@ -36,6 +37,7 @@ const FormModal = ({
   header,
   initialData,
   errorData,
+  isSaveButtonDisabled,
 }: FormModalProp) => {
   const formRef = useRef<FormRef>();
   const [data, setData] = useState<FormData>(initialData);
@@ -81,6 +83,7 @@ const FormModal = ({
             </Button>
             <Button
               data-testid="saveButton"
+              disabled={isSaveButtonDisabled}
               size="regular"
               theme="primary"
               type="submit"
diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/regex.constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/regex.constants.ts
index 3794aec8851..a5941d2ddb4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/constants/regex.constants.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/constants/regex.constants.ts
@@ -19,3 +19,6 @@ export const FQN_REGEX = new RegExp(
   `("${FQN_SEPARATOR_CHAR}*?"|[^"${FQN_SEPARATOR_CHAR}\\s]+)(?=\\s*.|\\s*$)`,
   'g'
 );
+
+export const delimiterRegex = /[\\[\]\\()\\;\\,\\|\\{}\\``\\/\\<>\\^]/g;
+export const nameWithSpace = /\s/g;
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
index e4dc3466dea..948fb9ff876 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
@@ -15,7 +15,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Card } from 'antd';
 import { AxiosError, AxiosResponse } from 'axios';
 import classNames from 'classnames';
-import { isUndefined, toLower } from 'lodash';
+import { isEmpty, isUndefined, toLower } from 'lodash';
 import { FormErrorData, LoadingState } from 'Models';
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -43,6 +43,7 @@ import ConfirmationModal from '../../components/Modals/ConfirmationModal/Confirm
 import FormModal from '../../components/Modals/FormModal';
 import { ModalWithMarkdownEditor } from '../../components/Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor';
 import { TITLE_FOR_NON_ADMIN_ACTION } from '../../constants/constants';
+import { delimiterRegex, nameWithSpace } from '../../constants/regex.constants';
 import {
   CreateTagCategory,
   TagCategoryType,
@@ -149,8 +150,10 @@ const TagsPage = () => {
       const errData: { [key: string]: string } = {};
       if (!data.name.trim()) {
         errData['name'] = 'Name is required';
-      } else if (/\s/g.test(data.name)) {
+      } else if (nameWithSpace.test(data.name)) {
         errData['name'] = 'Name with space is not allowed';
+      } else if (delimiterRegex.test(data.name)) {
+        errData['name'] = 'Name with delimiters are not allowed';
       } else if (
         !isUndefined(
           categories.find((item) => toLower(item.name) === toLower(data.name))
@@ -308,8 +311,10 @@ const TagsPage = () => {
       const errData: { [key: string]: string } = {};
       if (!data.name.trim()) {
         errData['name'] = 'Name is required';
-      } else if (/\s/g.test(data.name)) {
+      } else if (nameWithSpace.test(data.name)) {
         errData['name'] = 'Name with space is not allowed';
+      } else if (delimiterRegex.test(data.name)) {
+        errData['name'] = 'Name with delimiters are not allowed';
       } else if (
         !isUndefined(
           currentCategory?.children?.find(
@@ -713,10 +718,12 @@ const TagsPage = () => {
                       description: '',
                       categoryType: TagCategoryType.Descriptive,
                     }}
+                    isSaveButtonDisabled={!isEmpty(errorDataCategory)}
                     onCancel={() => setIsAddingCategory(false)}
-                    onChange={(data) =>
-                      onNewCategoryChange(data as TagCategory)
-                    }
+                    onChange={(data) => {
+                      setErrorDataCategory({});
+                      onNewCategoryChange(data as TagCategory);
+                    }}
                     onSave={(data) => createCategory(data as TagCategory)}
                   />
                 )}
@@ -732,8 +739,12 @@ const TagsPage = () => {
                       description: '',
                       categoryType: '',
                     }}
+                    isSaveButtonDisabled={!isEmpty(errorDataTag)}
                     onCancel={() => setIsAddingTag(false)}
-                    onChange={(data) => onNewTagChange(data as TagCategory)}
+                    onChange={(data) => {
+                      setErrorDataTag({});
+                      onNewTagChange(data as TagCategory);
+                    }}
                     onSave={(data) => createPrimaryTag(data as TagCategory)}
                   />
                 )}