chore(ui): add base class for left sidebar (#13548)

openmetadata-ui/src/main/resources/ui/src/App.tsx

@@ -34,19 +34,16 @@ import i18n from './utils/i18next/LocalUtil';
 
 interface AppProps {
   routeElements?: ReactNode;
-  sideBarElements?: ReactNode;
 }
 
-const App: FC<AppProps> = ({ routeElements, sideBarElements }) => {
+const App: FC<AppProps> = ({ routeElements }) => {
   return (
     <div className="main-container">
       <div className="content-wrapper" data-testid="content-wrapper">
         <Router history={history}>
           <I18nextProvider i18n={i18n}>
             <ErrorBoundary>
-              <ApplicationConfigProvider
+              <ApplicationConfigProvider routeElements={routeElements}>
-                routeElements={routeElements}
-                sideBarElements={sideBarElements}>
                 <AuthProvider childComponentType={AppRouter}>
                   <TourProvider>
                     <HelmetProvider>

openmetadata-ui/src/main/resources/ui/src/components/ApplicationConfigProvider/ApplicationConfigProvider.tsx

@@ -26,7 +26,6 @@ import { getCustomLogoConfig } from '../../rest/settingConfigAPI';
 
 interface ContextConfig extends LogoConfiguration {
   routeElements?: ReactNode;
-  sideBarElements?: ReactNode;
   selectedPersona: EntityReference;
   updateSelectedPersona: (personaFqn: EntityReference) => void;
 }
@@ -41,13 +40,11 @@ export const useApplicationConfigContext = () =>
 interface ApplicationConfigProviderProps {
   children: ReactNode;
   routeElements?: ReactNode;
-  sideBarElements?: ReactNode;
 }
 
 const ApplicationConfigProvider: FC<ApplicationConfigProviderProps> = ({
   children,
   routeElements,
-  sideBarElements,
 }) => {
   const [applicationConfig, setApplicationConfig] = useState<LogoConfiguration>(
     {} as LogoConfiguration
@@ -81,17 +78,10 @@ const ApplicationConfigProvider: FC<ApplicationConfigProviderProps> = ({
     () => ({
       ...applicationConfig,
       routeElements,
-      sideBarElements,
       selectedPersona,
       updateSelectedPersona,
     }),
-    [
+    [applicationConfig, routeElements, selectedPersona, updateSelectedPersona]
-      applicationConfig,
-      routeElements,
-      sideBarElements,
-      selectedPersona,
-      updateSelectedPersona,
-    ]
   );
 
   return (

openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.component.tsx

@@ -21,14 +21,12 @@ import { useAuthContext } from '../../../components/authentication/auth-provider
 import {
   SETTING_ITEM,
   SIDEBAR_GOVERN_LIST,
-  SIDEBAR_LIST,
 } from '../../../constants/LeftSidebar.constants';
-import { useApplicationConfigContext } from '../../ApplicationConfigProvider/ApplicationConfigProvider';
+import leftSidebarClassBase from '../../../utils/LeftSidebarClassBase';
 import './left-sidebar.less';
 import LeftSidebarItem from './LeftSidebarItem.component';
 
 const LeftSidebar = () => {
-  const { sideBarElements } = useApplicationConfigContext();
   const { t } = useTranslation();
   const { onLogoutHandler } = useAuthContext();
   const [showConfirmLogoutModal, setShowConfirmLogoutModal] = useState(false);
@@ -92,6 +90,9 @@ const LeftSidebar = () => {
     ];
   }, []);
 
+  const sideBarItems = leftSidebarClassBase.getSidebarItems();
+  const SideBarElements = leftSidebarClassBase.getSidebarElements();
+
   const handleLogoutClick = () => {
     setShowConfirmLogoutModal(true);
   };
@@ -103,7 +104,7 @@ const LeftSidebar = () => {
   return (
     <div className="d-flex flex-col justify-between h-full">
       <Row className="p-y-sm">
-        {SIDEBAR_LIST.map((item) => (
+        {sideBarItems.map((item) => (
           <Col key={item.key} span={24}>
             <LeftSidebarItem data={item} />
           </Col>
@@ -115,7 +116,7 @@ const LeftSidebar = () => {
           selectedKeys={subMenuItemSelected}
           triggerSubMenuAction="click"
         />
-        {sideBarElements}
+        {SideBarElements && <SideBarElements />}
       </Row>
       <Row className="p-y-sm">
         <Col span={24}>

openmetadata-ui/src/main/resources/ui/src/utils/LeftSidebarClassBase.ts

@@ -0,0 +1,36 @@
+/*
+ *  Copyright 2023 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 { FC } from 'react';
+import { SIDEBAR_LIST } from '../constants/LeftSidebar.constants';
+
+class LeftSidebarClassBase {
+  /**
+   * getSidebarElements
+   */
+  public getSidebarElements(): FC | null {
+    return null;
+  }
+
+  /**
+   * getSidebarItems
+   */
+  public getSidebarItems(): typeof SIDEBAR_LIST {
+    return SIDEBAR_LIST;
+  }
+}
+
+const leftSidebarClassBase = new LeftSidebarClassBase();
+
+export default leftSidebarClassBase;
+
+export { LeftSidebarClassBase };