Fix creation of Glossary when domain is selected (#23650)

* Fix creation of Glossary when domain is selected

* fix the playwright test around creation when there is active domain on project level

* fix the being scrolled when screen is scrolling

---------

Co-authored-by: Ashish Gupta <ashish@getcollate.io>

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Glossary.spec.ts

@@ -13,6 +13,7 @@
 import test, { expect } from '@playwright/test';
 import { get } from 'lodash';
 import { SidebarItem } from '../../constant/sidebar';
+import { Domain } from '../../support/domain/Domain';
 import { DashboardClass } from '../../support/entity/DashboardClass';
 import { EntityTypeEndpoint } from '../../support/entity/Entity.interface';
 import { TableClass } from '../../support/entity/TableClass';
@@ -24,6 +25,7 @@ import { UserClass } from '../../support/user/UserClass';
 import { performAdminLogin } from '../../utils/admin';
 import {
   clickOutside,
+  descriptionBox,
   getRandomLastName,
   redirectToHomePage,
   toastNotification,
@@ -87,6 +89,7 @@ const user2 = new UserClass();
 const team = new TeamClass();
 const user3 = new UserClass();
 const user4 = new UserClass();
+const adminUser = new UserClass();
 
 test.describe('Glossary tests', () => {
   test.beforeAll(async ({ browser }) => {
@@ -95,6 +98,8 @@ test.describe('Glossary tests', () => {
     await user1.create(apiContext);
     await user3.create(apiContext);
     await user4.create(apiContext);
+    await adminUser.create(apiContext);
+    await adminUser.setAdminRole(apiContext);
     team.data.users = [user2.responseData.id];
     await team.create(apiContext);
     await afterAction();
@@ -1706,6 +1711,79 @@ test.describe('Glossary tests', () => {
     }
   });
 
+  test('Glossary creation with domain selection', async ({ browser }) => {
+    test.slow(true);
+
+    const { afterAction, apiContext } = await performAdminLogin(browser);
+    const { page: page1, afterAction: afterActionUser1 } =
+      await performUserLogin(browser, adminUser);
+    const domain = new Domain();
+    const glossary = new Glossary();
+
+    try {
+      await test.step('Create domain', async () => {
+        await domain.create(apiContext);
+      });
+
+      await test.step('Navigate to Glossary page', async () => {
+        await redirectToHomePage(page1);
+        await sidebarClick(page1, SidebarItem.GLOSSARY);
+
+        await page1.getByTestId('domain-dropdown').click();
+
+        const searchDomain = page1.waitForResponse(
+          `/api/v1/search/query?q=*${encodeURIComponent(domain.data.name)}*`
+        );
+        await page1
+          .getByTestId('domain-selectable-tree')
+          .getByTestId('searchbar')
+          .fill(domain.data.name);
+        await searchDomain;
+
+        await page1.getByTestId(`tag-"${domain.data.name}"`).click();
+
+        await page1.waitForLoadState('networkidle');
+        await page1.waitForSelector('[data-testid="loader"]', {
+          state: 'detached',
+        });
+      });
+
+      await test.step('Open Add Glossary form', async () => {
+        await page1.click('[data-testid="add-glossary"]');
+        await page1.waitForSelector('[data-testid="form-heading"]');
+
+        await expect(page1.locator('[data-testid="form-heading"]')).toHaveText(
+          'Add Glossary'
+        );
+
+        await page1.fill('[data-testid="name"]', glossary.data.name);
+        await page1.locator(descriptionBox).fill(glossary.data.description);
+      });
+
+      await test.step(
+        'Save glossary and verify creation with domain',
+        async () => {
+          const glossaryResponse = page1.waitForResponse('/api/v1/glossaries');
+          await page1.click('[data-testid="save-glossary"]');
+          await glossaryResponse;
+
+          await expect(page1).toHaveURL(/\/glossary\//);
+
+          await expect(
+            page1.locator('[data-testid="entity-header-name"]')
+          ).toContainText(glossary.data.name);
+
+          await expect(
+            page1.locator('[data-testid="domain-link"]')
+          ).toContainText(domain.data.displayName);
+        }
+      );
+    } finally {
+      await afterAction();
+      await afterActionUser1();
+    }
+  });
+
   test.afterAll(async ({ browser }) => {
     const { afterAction, apiContext } = await performAdminLogin(browser);
     await user1.delete(apiContext);

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

@@ -25,7 +25,11 @@ import {
   FormItemLayout,
   HelperTextType,
 } from '../../../interface/FormUtils.interface';
-import { generateFormFields, getField } from '../../../utils/formUtils';
+import {
+  generateFormFields,
+  getField,
+  getPopupContainer,
+} from '../../../utils/formUtils';
 
 import { NAME_FIELD_RULES } from '../../../constants/Form.constants';
 import { EntityType } from '../../../enums/entity.enum';
@@ -202,6 +206,10 @@ const AddGlossary = ({
     type: FieldTypes.USER_TEAM_SELECT,
     props: {
       hasPermission: true,
+      popoverProps: {
+        placement: 'topLeft',
+        getPopupContainer: getPopupContainer,
+      },
       children: (
         <Button
           data-testid="add-owner"
@@ -227,7 +235,10 @@ const AddGlossary = ({
     type: FieldTypes.USER_TEAM_SELECT,
     props: {
       hasPermission: true,
-      popoverProps: { placement: 'topLeft' },
+      popoverProps: {
+        placement: 'topLeft',
+        getPopupContainer: getPopupContainer,
+      },
       children: (
         <Button
           data-testid="add-reviewers"
@@ -254,7 +265,13 @@ const AddGlossary = ({
     label: t('label.domain-plural'),
     type: FieldTypes.DOMAIN_SELECT,
     props: {
-      selectedDomain: activeDomainEntityRef,
+      selectedDomain: activeDomainEntityRef
+        ? [activeDomainEntityRef]
+        : undefined,
+      popoverProps: {
+        placement: 'topLeft',
+        getPopupContainer: getPopupContainer,
+      },
       children: (
         <Button
           data-testid="add-domain"
@@ -269,7 +286,7 @@ const AddGlossary = ({
     formItemProps: {
       valuePropName: 'selectedDomain',
       trigger: 'onUpdate',
-      initialValue: activeDomainEntityRef,
+      initialValue: activeDomainEntityRef ? [activeDomainEntityRef] : undefined,
     },
   };