[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 <549577+cchaos@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

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'
+    );
+  });
 });

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}
     >