Consume the className prop in OuiSearchBar (#1381)

Also:
* deprecate `aria-label` and `data-test-subj` which have never been consumed despite being defined

Signed-off-by: Miki <[email protected]>

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Deprecations
 
+- Deprecate `aria-label` and `data-test-subj` of OuiSearchBar which have never been consumed despite being defined ([#1381](https://github.com/opensearch-project/oui/pull/1381))
+
 ### 🛡 Security
 
 ### 📈 Features/Enhancements
@@ -13,6 +15,7 @@
 ### 🐛 Bug Fixes
 
 - Fix `compressed` styling of OuiDatePickerRange ([#1380](https://github.com/opensearch-project/oui/pull/1380))
+- Make OuiSearchBar consume a provided `className` ([#1381](https://github.com/opensearch-project/oui/pull/1381))
 
 ### 🚞 Infrastructure
 

src/components/search_bar/__snapshots__/search_bar.test.tsx.snap

@@ -27,6 +27,7 @@ exports[`SearchBar render - box 1`] = `
 exports[`SearchBar render - no config, no query 1`] = `
 <OuiFlexGroup
   alignItems="center"
+  className="testClass1 testClass2"
   gutterSize="m"
   wrap={true}
 >
@@ -48,6 +49,7 @@ exports[`SearchBar render - no config, no query 1`] = `
 exports[`SearchBar render - provided query, filters 1`] = `
 <OuiFlexGroup
   alignItems="center"
+  className="testClass1 testClass2"
   gutterSize="m"
   wrap={true}
 >
@@ -153,6 +155,7 @@ exports[`SearchBar render - provided query, filters 1`] = `
 exports[`SearchBar render - tools 1`] = `
 <OuiFlexGroup
   alignItems="center"
+  className="testClass1 testClass2"
   gutterSize="m"
   wrap={true}
 >

src/components/search_bar/search_bar.tsx

@@ -99,6 +99,12 @@ export interface OuiSearchBarProps extends CommonProps {
   dateFormat?: object;
 
   compressed?: boolean;
+
+  // @deprecated This property has never been consumed despite being defined
+  'aria-label'?: string;
+
+  // @deprecated This property has never been consumed despite being defined
+  'data-test-subj'?: string;
 }
 
 const parseQuery = (
@@ -234,6 +240,7 @@ export class OuiSearchBar extends Component<OuiSearchBarProps, State> {
       toolsLeft,
       toolsRight,
       compressed,
+      className,
     } = this.props;
 
     const toolsLeftEl = this.renderTools(toolsLeft);
@@ -252,7 +259,11 @@ export class OuiSearchBar extends Component<OuiSearchBarProps, State> {
     const toolsRightEl = this.renderTools(toolsRight);
 
     return (
-      <OuiFlexGroup gutterSize="m" alignItems="center" wrap>
+      <OuiFlexGroup
+        gutterSize="m"
+        alignItems="center"
+        className={className}
+        wrap>
         {toolsLeftEl}
         <OuiFlexItem className="ouiSearchBar__searchHolder" grow={true}>
           <OuiSearchBox