chore(ui): add route and sidebar prop support in app (#13430)

* chore(ui): add children support in app

* fix: assets path

* chore: add support for route and sidebar elements prop

* chore: remove children prop from app

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

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import React, { FunctionComponent } from 'react';
+import React, { FC, ReactNode } from 'react';
 import { HelmetProvider } from 'react-helmet-async';
 import { I18nextProvider } from 'react-i18next';
 import { Router } from 'react-router-dom';
@@ -32,14 +32,21 @@ import { TOAST_OPTIONS } from './constants/Toasts.constants';
 import { history } from './utils/HistoryUtils';
 import i18n from './utils/i18next/LocalUtil';
 
-const App: FunctionComponent = () => {
+interface AppProps {
+  routeElements?: ReactNode;
+  sideBarElements?: ReactNode;
+}
+
+const App: FC<AppProps> = ({ routeElements, sideBarElements }) => {
   return (
     <div className="main-container">
       <div className="content-wrapper" data-testid="content-wrapper">
         <Router history={history}>
           <I18nextProvider i18n={i18n}>
             <ErrorBoundary>
-              <ApplicationConfigProvider>
+              <ApplicationConfigProvider
+                routeElements={routeElements}
+                sideBarElements={sideBarElements}>
                 <AuthProvider childComponentType={AppRouter}>
                   <TourProvider>
                     <HelmetProvider>

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

@@ -21,8 +21,13 @@ import React, {
 import { LogoConfiguration } from '../../generated/configuration/applicationConfiguration';
 import { getCustomLogoConfig } from '../../rest/settingConfigAPI';
 
-export const ApplicationConfigContext = createContext<LogoConfiguration>(
-  {} as LogoConfiguration
+interface ContextConfig extends LogoConfiguration {
+  routeElements?: ReactNode;
+  sideBarElements?: ReactNode;
+}
+
+export const ApplicationConfigContext = createContext<ContextConfig>(
+  {} as ContextConfig
 );
 
 export const useApplicationConfigProvider = () =>
@@ -30,10 +35,14 @@ export const useApplicationConfigProvider = () =>
 
 interface ApplicationConfigProviderProps {
   children: ReactNode;
+  routeElements?: ReactNode;
+  sideBarElements?: ReactNode;
 }
 
 const ApplicationConfigProvider: FC<ApplicationConfigProviderProps> = ({
   children,
+  routeElements,
+  sideBarElements,
 }) => {
   const [applicationConfig, setApplicationConfig] = useState<LogoConfiguration>(
     {} as LogoConfiguration
@@ -57,7 +66,8 @@ const ApplicationConfigProvider: FC<ApplicationConfigProviderProps> = ({
   }, []);
 
   return (
-    <ApplicationConfigContext.Provider value={{ ...applicationConfig }}>
+    <ApplicationConfigContext.Provider
+      value={{ ...applicationConfig, routeElements, sideBarElements }}>
       {children}
     </ApplicationConfigContext.Provider>
   );

openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/slashCommand/items.ts

@@ -11,16 +11,16 @@
  *  limitations under the License.
  */
 import { Editor, Range } from '@tiptap/core';
-import BulletListImage from '../../../assets/img/ic-slash-bullet-list.png';
-import DividerImage from '../../../assets/img/ic-slash-divider.png';
-import H1Image from '../../../assets/img/ic-slash-h1.png';
-import H2Image from '../../../assets/img/ic-slash-h2.png';
-import H3Image from '../../../assets/img/ic-slash-h3.png';
-import NumberedListImage from '../../../assets/img/ic-slash-numbered-list.png';
-import QuoteImage from '../../../assets/img/ic-slash-quote.png';
-import TextImage from '../../../assets/img/ic-slash-text.png';
-import TaskListImage from '../../../assets/img/ic-task-list.png';
-import CodeBlockImage from '../../../assets/svg/ic-format-code-block.svg';
+import BulletListImage from '../../../../assets/img/ic-slash-bullet-list.png';
+import DividerImage from '../../../../assets/img/ic-slash-divider.png';
+import H1Image from '../../../../assets/img/ic-slash-h1.png';
+import H2Image from '../../../../assets/img/ic-slash-h2.png';
+import H3Image from '../../../../assets/img/ic-slash-h3.png';
+import NumberedListImage from '../../../../assets/img/ic-slash-numbered-list.png';
+import QuoteImage from '../../../../assets/img/ic-slash-quote.png';
+import TextImage from '../../../../assets/img/ic-slash-text.png';
+import TaskListImage from '../../../../assets/img/ic-task-list.png';
+import CodeBlockImage from '../../../../assets/svg/ic-format-code-block.svg';
 
 export enum SuggestionItemType {
   BASIC_BLOCKS = 'Basic blocks',

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

@@ -23,10 +23,12 @@ import {
   SIDEBAR_GOVERN_LIST,
   SIDEBAR_LIST,
 } from '../../../constants/LeftSidebar.constants';
+import { useApplicationConfigProvider } from '../../ApplicationConfigProvider/ApplicationConfigProvider';
 import './left-sidebar.less';
 import LeftSidebarItem from './LeftSidebarItem.component';
 
 const LeftSidebar = () => {
+  const { sideBarElements } = useApplicationConfigProvider();
   const { t } = useTranslation();
   const { onLogoutHandler } = useAuthContext();
   const [showConfirmLogoutModal, setShowConfirmLogoutModal] = useState(false);
@@ -113,6 +115,7 @@ const LeftSidebar = () => {
           selectedKeys={subMenuItemSelected}
           triggerSubMenuAction="click"
         />
+        {sideBarElements}
       </Row>
       <Row className="p-y-sm">
         <Col span={24}>

openmetadata-ui/src/main/resources/ui/src/components/router/AuthenticatedAppRouter.tsx

@@ -20,6 +20,7 @@ import { ROUTES } from '../../constants/constants';
 import { Operation } from '../../generated/entity/policies/policy';
 import DataQualityPage from '../../pages/DataQuality/DataQualityPage';
 import { checkPermission, userPermissions } from '../../utils/PermissionsUtils';
+import { useApplicationConfigProvider } from '../ApplicationConfigProvider/ApplicationConfigProvider';
 import { usePermissionProvider } from '../PermissionProvider/PermissionProvider';
 import { ResourceEntity } from '../PermissionProvider/PermissionProvider.interface';
 import AdminProtectedRoute from './AdminProtectedRoute';
@@ -318,6 +319,7 @@ const PageNotFound = withSuspenseFallback(
 
 const AuthenticatedAppRouter: FunctionComponent = () => {
   const { permissions } = usePermissionProvider();
+  const { routeElements } = useApplicationConfigProvider();
 
   const glossaryPermission = useMemo(
     () =>
@@ -841,6 +843,7 @@ const AuthenticatedAppRouter: FunctionComponent = () => {
       <Route exact path={ROUTES.HOME}>
         <Redirect to={ROUTES.MY_DATA} />
       </Route>
+      {routeElements}
       <Route exact component={PageNotFound} path={ROUTES.NOT_FOUND} />
       <Redirect to={ROUTES.NOT_FOUND} />
     </Switch>