Fix: Glossary and Glossary term page issues. (#4381)

* Fix: Glossary and Glossary term page issues.

* Add unit test

openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx

@@ -48,6 +48,7 @@ const AddGlossary = ({
   const [showErrorMsg, setShowErrorMsg] = useState<{ [key: string]: boolean }>({
     name: false,
     invalidName: false,
+    description: false,
   });
 
   const [name, setName] = useState('');
@@ -55,6 +56,10 @@ const AddGlossary = ({
   const [showRevieweModal, setShowRevieweModal] = useState(false);
   const [reviewer, setReviewer] = useState<Array<FormattedUsersData>>([]);
 
+  const getDescription = () => {
+    return markdownRef.current?.getEditorContent() || undefined;
+  };
+
   const onReviewerModalCancel = () => {
     setShowRevieweModal(false);
   };
@@ -99,6 +104,7 @@ const AddGlossary = ({
     const errMsg = {
       name: !name.trim(),
       invalidName: UrlEntityCharRegEx.test(name.trim()),
+      description: !getDescription()?.trim(),
     };
     setShowErrorMsg(errMsg);
 
@@ -110,7 +116,7 @@ const AddGlossary = ({
       const data: CreateGlossary = {
         name,
         displayName: name,
-        description: markdownRef.current?.getEditorContent() || undefined,
+        description: getDescription(),
         reviewers: reviewer.map((d) => ({ id: d.id, type: d.type })),
         owner: {
           id: getCurrentUserId(),
@@ -210,7 +216,7 @@ const AddGlossary = ({
           <label
             className="tw-block tw-form-label tw-mb-0"
             htmlFor="description">
-            Description:
+            {requiredField('Description:')}
           </label>
           <RichTextEditor
             data-testid="description"
@@ -218,6 +224,7 @@ const AddGlossary = ({
             readonly={!allowAccess}
             ref={markdownRef}
           />
+          {showErrorMsg.description && errorMsg('Description is required.')}
         </Field>
 
         <div>

openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.test.tsx

@@ -79,6 +79,9 @@ describe('Test AddGlossary component', () => {
   });
 
   it('should be able to save', () => {
+    jest.spyOn(React, 'useRef').mockReturnValue({
+      current: { getEditorContent: jest.fn().mockReturnValue('description') },
+    });
     const { container } = render(<AddGlossary {...mockProps} />);
 
     const nameInput = getByTestId(container, 'name');
@@ -98,4 +101,28 @@ describe('Test AddGlossary component', () => {
 
     expect(mockOnSave).toBeCalled();
   });
+
+  it('should not be able to save', () => {
+    jest.spyOn(React, 'useRef').mockReturnValue({
+      current: { getEditorContent: jest.fn().mockReturnValue('') },
+    });
+    const { container } = render(<AddGlossary {...mockProps} />);
+
+    const nameInput = getByTestId(container, 'name');
+    const saveButton = getByTestId(container, 'save-glossary');
+
+    expect(saveButton).toBeInTheDocument();
+
+    fireEvent.change(nameInput, { target: { value: 'Test Glossary' } });
+
+    fireEvent.click(
+      saveButton,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+
+    expect(mockOnSave).not.toBeCalled();
+  });
 });

openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.component.tsx

@@ -63,6 +63,7 @@ const AddGlossaryTerm = ({
     name: false,
     invalidName: false,
     invalidReferences: false,
+    description: false,
   });
 
   const [name, setName] = useState('');
@@ -82,6 +83,10 @@ const AddGlossaryTerm = ({
     }
   }, [glossaryData]);
 
+  const getDescription = () => {
+    return markdownRef.current?.getEditorContent() || undefined;
+  };
+
   const onRelatedTermsModalCancel = () => {
     setShowRelatedTermsModal(false);
   };
@@ -187,6 +192,7 @@ const AddGlossaryTerm = ({
       name: !name.trim(),
       invalidName: !isUrlFriendlyName(name.trim()),
       invalidReferences: !isValidReferences(refs),
+      description: !getDescription()?.trim(),
     };
     setShowErrorMsg(errMsg);
 
@@ -210,7 +216,7 @@ const AddGlossaryTerm = ({
       const data: CreateGlossaryTerm = {
         name,
         displayName: name,
-        description: markdownRef.current?.getEditorContent() || undefined,
+        description: getDescription(),
         reviewers: reviewer.map((r) => ({
           id: r.id,
           type: r.type,
@@ -323,7 +329,7 @@ const AddGlossaryTerm = ({
           <label
             className="tw-block tw-form-label tw-mb-0"
             htmlFor="description">
-            Description:
+            {requiredField('Description:')}
           </label>
           <RichTextEditor
             data-testid="description"
@@ -331,6 +337,7 @@ const AddGlossaryTerm = ({
             readonly={!allowAccess}
             ref={markdownRef}
           />
+          {showErrorMsg.description && errorMsg('Description is required.')}
         </Field>
 
         <Field>

openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.test.tsx

@@ -87,6 +87,10 @@ describe('Test AddGlossaryTerm component', () => {
   });
 
   it('should be able to save', () => {
+    jest.spyOn(React, 'useRef').mockReturnValue({
+      current: { getEditorContent: jest.fn().mockReturnValue('description') },
+    });
+
     const { container } = render(<AddGlossaryTerm {...mockProps} />);
 
     const nameInput = getByTestId(container, 'name');
@@ -106,4 +110,29 @@ describe('Test AddGlossaryTerm component', () => {
 
     expect(mockOnSave).toBeCalled();
   });
+
+  it('should not be able to save', () => {
+    jest.spyOn(React, 'useRef').mockReturnValue({
+      current: { getEditorContent: jest.fn().mockReturnValue('') },
+    });
+
+    const { container } = render(<AddGlossaryTerm {...mockProps} />);
+
+    const nameInput = getByTestId(container, 'name');
+    const saveButton = getByTestId(container, 'save-glossary-term');
+
+    expect(saveButton).toBeInTheDocument();
+
+    fireEvent.change(nameInput, { target: { value: 'Test Glossary Term' } });
+
+    fireEvent.click(
+      saveButton,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+
+    expect(mockOnSave).not.toBeCalled();
+  });
 });

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx

@@ -29,7 +29,6 @@ import { GlossaryTerm } from '../../generated/entity/data/glossaryTerm';
 import { useAuth } from '../../hooks/authHooks';
 import { ModifiedGlossaryData } from '../../pages/GlossaryPage/GlossaryPageV1.component';
 import { generateTreeData, getActionsList } from '../../utils/GlossaryUtils';
-import { dropdownIcon as DropdownIcon } from '../../utils/svgconstant';
 import { Button } from '../buttons/Button/Button';
 import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
 import NonAdminAction from '../common/non-admin-action/NonAdminAction';
@@ -261,26 +260,8 @@ const GlossaryV1 = ({
               size="small"
               theme="primary"
               variant="contained"
-              onClick={() => {
+              onClick={handleAddGlossaryTermClick}>
-                setShowActions((show) => !show);
+              Add term
-              }}>
-              Actions{' '}
-              {showActions ? (
-                <DropdownIcon
-                  style={{
-                    transform: 'rotate(180deg)',
-                    marginTop: '2px',
-                    color: '#fff',
-                  }}
-                />
-              ) : (
-                <DropdownIcon
-                  style={{
-                    marginTop: '2px',
-                    color: '#fff',
-                  }}
-                />
-              )}
             </Button>
           </NonAdminAction>
           {showActions && (