[KibanaPageTemplate] Fix custom sidebar classes overriding kbnPageTem…

…plate class (#103715) * Fix .kbnPageTemplate__pageSideBar getting overriden by passed classes - due to it existing in ...rest, and ...rest coming after pageSideBarProps * Add test * Fix `sideBarClasses` Co-authored-by: Caroline Horn <[email protected]> Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Caroline Horn <[email protected]>
elastic · Jul 14, 2021 · 99d21b5 · 99d21b5
1 parent 5a08cae
commit 99d21b5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/src/plugins/kibana_react/public/page_template/page_template.test.tsx b/src/plugins/kibana_react/public/page_template/page_template.test.tsx
@@ -125,4 +125,20 @@ describe('KibanaPageTemplate', () => {
     );
     expect(component).toMatchSnapshot();
   });
+
+  test('render sidebar classes', () => {
+    const component = shallow(
+      <KibanaPageTemplate
+        solutionNav={{
+          name: 'Solution',
+          icon: 'solution',
+          items: navItems,
+        }}
+        pageSideBarProps={{ className: 'customClass' }}
+      />
+    );
+    expect(component.prop('pageSideBarProps').className).toEqual(
+      'kbnPageTemplate__pageSideBar customClass'
+    );
+  });
 });
diff --git a/src/plugins/kibana_react/public/page_template/page_template.tsx b/src/plugins/kibana_react/public/page_template/page_template.tsx
@@ -48,6 +48,7 @@ export const KibanaPageTemplate: FunctionComponent<KibanaPageTemplateProps> = ({
   isEmptyState,
   restrictWidth = true,
   pageSideBar,
+  pageSideBarProps,
   solutionNav,
   ...rest
 }) => {
@@ -117,8 +118,8 @@ export const KibanaPageTemplate: FunctionComponent<KibanaPageTemplateProps> = ({
       pageSideBar={pageSideBar}
       pageSideBarProps={{
         paddingSize: solutionNav ? 'none' : 'l',
-        ...rest.pageSideBarProps,
-        className: classNames(sideBarClasses, rest.pageSideBarProps?.className),
+        ...pageSideBarProps,
+        className: classNames(sideBarClasses, pageSideBarProps?.className),
       }}
       {...rest}
     >