Page Header] New page header for integrations and UI updates (#2103) (#…

…2107) * new headers and ui changes for integrations * update snapshots and test * update display name for integration breadcrumb for new nav rendering --------- (cherry picked from commit c655eb5) Signed-off-by: Adam Tackett <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Adam Tackett <[email protected]>
opensearch-project · Aug 28, 2024 · 38bc4ed · 38bc4ed
1 parent cedd32a
commit 38bc4ed
Show file tree

Hide file tree

Showing 19 changed files with 675 additions and 555 deletions.
diff --git a/public/components/datasources/components/__tests__/data_connection.test.tsx b/public/components/datasources/components/__tests__/data_connection.test.tsx
@@ -28,6 +28,9 @@ jest.mock('../../../../../public/framework/core_refs', () => ({
   coreRefs: {
     chrome: {
       setBreadcrumbs: jest.fn(),
+      navGroup: {
+        getNavGroupEnabled: jest.fn().mockReturnValue(false),
+      },
     },
     http: {
       get: jest.fn(),

diff --git a/...omponents/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap b/...omponents/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap
diff --git a/...nts/integrations/components/__tests__/__snapshots__/added_integration_table.test.tsx.snap b/...nts/integrations/components/__tests__/__snapshots__/added_integration_table.test.tsx.snap
diff --git a/...ponents/integrations/components/__tests__/__snapshots__/integration_details.test.tsx.snap b/...ponents/integrations/components/__tests__/__snapshots__/integration_details.test.tsx.snap
@@ -15,9 +15,11 @@ exports[`Available Integration Table View Test Renders nginx integration table v
         Details
       </h2>
     </EuiTitle>
-    <EuiSpacer>
+    <EuiSpacer
+      size="s"
+    >
       <div
-        className="euiSpacer euiSpacer--l"
+        className="euiSpacer euiSpacer--s"
       />
     </EuiSpacer>
     <EuiFlexGroup>

diff --git a/...mponents/integrations/components/__tests__/__snapshots__/integration_fields.test.tsx.snap b/...mponents/integrations/components/__tests__/__snapshots__/integration_fields.test.tsx.snap
@@ -16,10 +16,10 @@ exports[`Available Integration Table View Test Renders nginx integration table v
       </h2>
     </EuiTitle>
     <EuiSpacer
-      size="l"
+      size="s"
     >
       <div
-        className="euiSpacer euiSpacer--l"
+        className="euiSpacer euiSpacer--s"
       />
     </EuiSpacer>
     <EuiInMemoryTable
@@ -65,6 +65,7 @@ exports[`Available Integration Table View Test Renders nginx integration table v
       search={
         Object {
           "box": Object {
+            "compressed": true,
             "incremental": true,
           },
         }
@@ -75,6 +76,7 @@ exports[`Available Integration Table View Test Renders nginx integration table v
         <EuiSearchBar
           box={
             Object {
+              "compressed": true,
               "incremental": true,
             }
           }
@@ -96,6 +98,7 @@ exports[`Available Integration Table View Test Renders nginx integration table v
                   className="euiFlexItem euiSearchBar__searchHolder"
                 >
                   <EuiSearchBox
+                    compressed={true}
                     incremental={true}
                     isInvalid={false}
                     onSearch={[Function]}
@@ -104,7 +107,7 @@ exports[`Available Integration Table View Test Renders nginx integration table v
                   >
                     <EuiFieldSearch
                       aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                      compressed={false}
+                      compressed={true}
                       defaultValue=""
                       fullWidth={true}
                       incremental={true}
@@ -116,13 +119,13 @@ exports[`Available Integration Table View Test Renders nginx integration table v
                       placeholder="Search..."
                     >
                       <EuiFormControlLayout
-                        compressed={false}
+                        compressed={true}
                         fullWidth={true}
                         icon="search"
                         isLoading={false}
                       >
                         <div
-                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                          className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                         >
                           <div
                             className="euiFormControlLayout__childrenWrapper"
@@ -132,23 +135,23 @@ exports[`Available Integration Table View Test Renders nginx integration table v
                             >
                               <input
                                 aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                                className="euiFieldSearch euiFieldSearch--fullWidth"
+                                className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                                 defaultValue=""
                                 onKeyUp={[Function]}
                                 placeholder="Search..."
                                 type="search"
                               />
                             </EuiValidatableControl>
                             <EuiFormControlLayoutIcons
-                              compressed={false}
+                              compressed={true}
                               icon="search"
                               isLoading={false}
                             >
                               <div
                                 className="euiFormControlLayoutIcons"
                               >
                                 <EuiFormControlLayoutCustomIcon
-                                  size="m"
+                                  size="s"
                                   type="search"
                                 >
                                   <span
@@ -157,19 +160,19 @@ exports[`Available Integration Table View Test Renders nginx integration table v
                                     <EuiIcon
                                       aria-hidden="true"
                                       className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
+                                      size="s"
                                       type="search"
                                     >
                                       <EuiIconBeaker
                                         aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         role="img"
                                         style={null}
                                       >
                                         <svg
                                           aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                          className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                           focusable="false"
                                           height={16}
                                           role="img"