diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts index 759c763122e..e535d84ec4e 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts @@ -211,8 +211,6 @@ test.describe('Activity feed', () => { await toastNotification(page, /Task resolved successfully/); - await page.waitForLoadState('networkidle'); - await checkTaskCount(page, 0, 2); }); @@ -372,8 +370,6 @@ test.describe('Activity feed', () => { await toastNotification(page, /Task resolved successfully/); - await page.waitForLoadState('networkidle'); - await checkTaskCount(page, 0, 2); }); @@ -434,8 +430,6 @@ test.describe('Activity feed', () => { await toastNotification(page, 'Task closed successfully.'); - await page.waitForLoadState('networkidle'); - await checkTaskCount(page, 0, 1); }); @@ -456,12 +450,8 @@ test.describe('Activity feed', () => { await createDescriptionTask(page, value); await openTaskAfterDescriptionResponse; - await page.waitForLoadState('networkidle'); - // open task count after description - const openTask1 = await page.getByTestId('open-task').textContent(); - - expect(openTask1).toContain('1 Open'); + await checkTaskCount(page, 1, 0); await page.getByTestId('schema').click(); @@ -472,8 +462,6 @@ test.describe('Activity feed', () => { await createTagTask(page, { ...value, tag: 'PII.None' }); await openTaskAfterTagResponse; - await page.waitForLoadState('networkidle'); - // open task count after description await checkTaskCount(page, 2, 0); @@ -493,7 +481,6 @@ test.describe('Activity feed', () => { await commentWithCloseTask; await toastNotification(page, 'Task closed successfully.'); - await page.waitForLoadState('networkidle'); // open task count after closing one task await checkTaskCount(page, 1, 1); @@ -857,7 +844,11 @@ base.describe('Activity feed with Data Consumer User', () => { page2.locator('[data-testid="edit-accept-task-dropdown"]') ).not.toBeVisible(); + const tagsSuggestionResponse = page2.waitForResponse( + '/api/v1/search/query?q=***' + ); await page2.getByRole('button', { name: 'Add Tags' }).click(); + await tagsSuggestionResponse; await page2.waitForSelector('[role="dialog"].ant-modal'); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts index a0886947207..d75dba32f47 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts @@ -154,6 +154,8 @@ export const checkTaskCount = async ( openTask = 0, closedTask = 0 ) => { + await page.waitForLoadState('networkidle'); + const openTaskElement = await page.getByTestId('open-task').textContent(); expect(openTaskElement).toContain(`${openTask} Open`); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedDrawer/ActivityFeedDrawer.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedDrawer/ActivityFeedDrawer.tsx index 9140b32f209..6f5880b74a8 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedDrawer/ActivityFeedDrawer.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedDrawer/ActivityFeedDrawer.tsx @@ -16,6 +16,7 @@ import classNames from 'classnames'; import React, { FC } from 'react'; import { useTranslation } from 'react-i18next'; import { Thread, ThreadType } from '../../../generated/entity/feed/thread'; +import { useReserveSidebar } from '../../../hooks/useReserveSidebar'; import Loader from '../../common/Loader/Loader'; import ActivityFeedEditor from '../ActivityFeedEditor/ActivityFeedEditor'; import FeedPanelBodyV1 from '../ActivityFeedPanel/FeedPanelBodyV1'; @@ -33,6 +34,7 @@ const ActivityFeedDrawer: FC = ({ className, }) => { const { t } = useTranslation(); + const { isSidebarReserve } = useReserveSidebar(); const { focusReplyEditor, isDrawerLoading, @@ -71,7 +73,12 @@ const ActivityFeedDrawer: FC = ({ {isDrawerLoading ? ( ) : ( - + = ({ /> - + )} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx index 054095da098..dcc016a28e7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx @@ -17,6 +17,7 @@ import React, { useCallback, useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useLimitStore } from '../../context/LimitsProvider/useLimitsStore'; import { useApplicationStore } from '../../hooks/useApplicationStore'; +import { useReserveSidebar } from '../../hooks/useReserveSidebar'; import { getLimitConfig } from '../../rest/limitsAPI'; import applicationRoutesClass from '../../utils/ApplicationRoutesClassBase'; import Appbar from '../AppBar/Appbar'; @@ -29,6 +30,7 @@ const AppContainer = () => { const { i18n } = useTranslation(); const { Header, Sider, Content } = Layout; const { currentUser } = useApplicationStore(); + const { isSidebarReserve } = useReserveSidebar(); const AuthenticatedRouter = applicationRoutesClass.getRouteElements(); const ApplicationExtras = applicationsClassBase.getApplicationExtension(); const isDirectionRTL = useMemo(() => i18n.dir() === 'rtl', [i18n]); @@ -56,7 +58,7 @@ const AppContainer = () => { { + it('should return false when .floating-button-container is not present', () => { + const { result } = renderHook(() => useReserveSidebar()); + + expect(result.current.isSidebarReserve).toBe(false); + }); + + it('should return true when .floating-button-container is present', () => { + // Create a mock element and append it to the document body + const floatingButtonContainer = document.createElement('div'); + floatingButtonContainer.className = 'floating-button-container'; + document.body.appendChild(floatingButtonContainer); + + const { result } = renderHook(() => useReserveSidebar()); + + expect(result.current.isSidebarReserve).toBe(true); + + // Clean up the mock element + document.body.removeChild(floatingButtonContainer); + }); +}); diff --git a/openmetadata-ui/src/main/resources/ui/src/hooks/useReserveSidebar.ts b/openmetadata-ui/src/main/resources/ui/src/hooks/useReserveSidebar.ts new file mode 100644 index 00000000000..5455ba51535 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/hooks/useReserveSidebar.ts @@ -0,0 +1,32 @@ +/* + * Copyright 2024 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { useEffect, useState } from 'react'; + +type ReserverSidebar = { isSidebarReserve: boolean }; + +/** + * @description Hook to get the if the sidebar should have some reserved space in case of floating button + * @returns {isSidebarReserve: boolean} - boolean value to check if the sidebar should have some reserved space + */ +export const useReserveSidebar = (): ReserverSidebar => { + const [isSidebarReserve, setIsSidebarReserve] = useState(false); + + useEffect(() => { + const element = document.querySelector('.floating-button-container'); + setIsSidebarReserve(Boolean(element)); + }, []); + + return { + isSidebarReserve, + }; +}; diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less index 5e9d57c76df..5a327fe1f3f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less +++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less @@ -824,6 +824,7 @@ a[href].link-text-grey, .appearance-cta-buttons { padding-right: 64px; } + .activity-feed-editor-drawer, .policies-list-table, .roles-list-table, .list-table {