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 6f5880b74a8..e6e7fd49c60 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,7 +16,6 @@ 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'; @@ -34,7 +33,6 @@ const ActivityFeedDrawer: FC = ({ className, }) => { const { t } = useTranslation(); - const { isSidebarReserve } = useReserveSidebar(); const { focusReplyEditor, isDrawerLoading, @@ -73,12 +71,7 @@ const ActivityFeedDrawer: FC = ({ {isDrawerLoading ? ( ) : ( - + { }; }); +jest.mock( + '../Settings/Applications/ApplicationsProvider/ApplicationsProvider', + () => { + return { + useApplicationsProvider: jest.fn(() => ({ + applications: [], + })), + }; + } +); + jest.mock('../../components/MyData/LeftSidebar/LeftSidebar.component', () => jest.fn().mockReturnValue(

Sidebar

) ); 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 dcc016a28e7..58d344f6af9 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,20 +17,20 @@ 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'; import { LimitBanner } from '../common/LimitBanner/LimitBanner'; import LeftSidebar from '../MyData/LeftSidebar/LeftSidebar.component'; import applicationsClassBase from '../Settings/Applications/AppDetails/ApplicationsClassBase'; +import { useApplicationsProvider } from '../Settings/Applications/ApplicationsProvider/ApplicationsProvider'; import './app-container.less'; const AppContainer = () => { const { i18n } = useTranslation(); const { Header, Sider, Content } = Layout; const { currentUser } = useApplicationStore(); - const { isSidebarReserve } = useReserveSidebar(); + const { applications } = useApplicationsProvider(); const AuthenticatedRouter = applicationRoutesClass.getRouteElements(); const ApplicationExtras = applicationsClassBase.getApplicationExtension(); const isDirectionRTL = useMemo(() => i18n.dir() === 'rtl', [i18n]); @@ -46,19 +46,29 @@ const AppContainer = () => { } }, []); + const appendReserveRightSidebarClass = useCallback(() => { + const element = document.getElementsByTagName('body'); + element[0].classList.add('reserve-right-sidebar'); + }, []); + useEffect(() => { if (currentUser?.id) { fetchLimitConfig(); } }, [currentUser?.id]); + useEffect(() => { + if (applicationsClassBase.isFloatingButtonPresent(applications)) { + appendReserveRightSidebarClass(); + } + }, [applications]); + return ( + this.getFloatingApplicationEntityList().includes(app.name) + ); + } + public importAppScreenshot(screenshotName: string) { return import(`../../../../assets/img/appScreenshots/${screenshotName}`); } diff --git a/openmetadata-ui/src/main/resources/ui/src/hooks/useReserveSidebar.test.ts b/openmetadata-ui/src/main/resources/ui/src/hooks/useReserveSidebar.test.ts deleted file mode 100644 index 14723954718..00000000000 --- a/openmetadata-ui/src/main/resources/ui/src/hooks/useReserveSidebar.test.ts +++ /dev/null @@ -1,36 +0,0 @@ -/* - * 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 { renderHook } from '@testing-library/react-hooks'; -import { useReserveSidebar } from './useReserveSidebar'; - -describe('useReserveSidebar', () => { - 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 deleted file mode 100644 index 5455ba51535..00000000000 --- a/openmetadata-ui/src/main/resources/ui/src/hooks/useReserveSidebar.ts +++ /dev/null @@ -1,32 +0,0 @@ -/* - * 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, - }; -};