MINOR: added check to append reserve-sidebar class to body (#18141)

* added check to append reserve-sidebar class to body

* added application value as dependency to re-run in case application refetch

* fix the unit test

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<ActivityFeedDrawerProps> = ({
   className,
 }) => {
   const { t } = useTranslation();
-  const { isSidebarReserve } = useReserveSidebar();
   const {
     focusReplyEditor,
     isDrawerLoading,
@@ -73,12 +71,7 @@ const ActivityFeedDrawer: FC<ActivityFeedDrawerProps> = ({
       {isDrawerLoading ? (
         <Loader />
       ) : (
-        <Row
+        <Row gutter={[0, 16]} id="feed-panel">
-          className={classNames({
-            ['reserve-right-sidebar']: isSidebarReserve,
-          })}
-          gutter={[0, 16]}
-          id="feed-panel">
           <Col span={24}>
             <FeedPanelBodyV1
               isOpenInDrawer

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

@@ -25,6 +25,17 @@ jest.mock('../../hooks/useApplicationStore', () => {
   };
 });
 
+jest.mock(
+  '../Settings/Applications/ApplicationsProvider/ApplicationsProvider',
+  () => {
+    return {
+      useApplicationsProvider: jest.fn(() => ({
+        applications: [],
+      })),
+    };
+  }
+);
+
 jest.mock('../../components/MyData/LeftSidebar/LeftSidebar.component', () =>
   jest.fn().mockReturnValue(<p>Sidebar</p>)
 );

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 (
     <Layout>
       <LimitBanner />
       <Layout
         className={classNames('app-container', {
           ['extra-banner']: Boolean(bannerDetails),
-          ['reserve-right-sidebar']: isSidebarReserve,
         })}>
         <Sider
           className={classNames('left-sidebar-col', {

openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/AppDetails/ApplicationsClassBase.ts

@@ -12,7 +12,7 @@
  */
 
 import { FC } from 'react';
-import { AppType } from '../../../../generated/entity/applications/app';
+import { App, AppType } from '../../../../generated/entity/applications/app';
 import { getScheduleOptionsFromSchedules } from '../../../../utils/ScheduleUtils';
 
 class ApplicationsClassBase {
@@ -34,6 +34,16 @@ class ApplicationsClassBase {
     return null;
   }
 
+  public getFloatingApplicationEntityList(): string[] {
+    return [];
+  }
+
+  public isFloatingButtonPresent(applications: App[]) {
+    return applications.some((app) =>
+      this.getFloatingApplicationEntityList().includes(app.name)
+    );
+  }
+
   public importAppScreenshot(screenshotName: string) {
     return import(`../../../../assets/img/appScreenshots/${screenshotName}`);
   }

openmetadata-ui/src/main/resources/ui/src/hooks/useReserveSidebar.test.ts

@@ -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);
-  });
-});

openmetadata-ui/src/main/resources/ui/src/hooks/useReserveSidebar.ts

@@ -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<boolean>(false);
-
-  useEffect(() => {
-    const element = document.querySelector('.floating-button-container');
-    setIsSidebarReserve(Boolean(element));
-  }, []);
-
-  return {
-    isSidebarReserve,
-  };
-};