From 7d062c5de1173b69b2b6849910fcbe83b5f33fb0 Mon Sep 17 00:00:00 2001
From: Sean Li <lnse@amazon.com>
Date: Wed, 4 Oct 2023 18:44:00 -0700
Subject: [PATCH] Remove Experimental Tag (#302)

* removing experimental tag

Signed-off-by: Sean Li <lnse@amazon.com>

* changing components to match mockups

Signed-off-by: Sean Li <lnse@amazon.com>

* removing unused imports

Signed-off-by: Sean Li <lnse@amazon.com>

---------

Signed-off-by: Sean Li <lnse@amazon.com>
---
 .../__snapshots__/header.test.tsx.snap        | 292 ++++--------------
 public/components/common/header.tsx           |  42 +--
 .../__snapshots__/create_index.test.tsx.snap  | 292 ++++--------------
 3 files changed, 144 insertions(+), 482 deletions(-)

diff --git a/public/components/common/__test__/__snapshots__/header.test.tsx.snap b/public/components/common/__test__/__snapshots__/header.test.tsx.snap
index dda8e87..e24d651 100644
--- a/public/components/common/__test__/__snapshots__/header.test.tsx.snap
+++ b/public/components/common/__test__/__snapshots__/header.test.tsx.snap
@@ -21,240 +21,76 @@ exports[`Header component Renders header component 1`] = `
         }
       }
     >
-      <EuiPageHeader
-        pageTitle="Compare search results"
-      >
-        <header
-          className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+      <EuiTitle>
+        <h1
+          className="euiTitle euiTitle--medium"
         >
-          <EuiPageHeaderContent
-            pageTitle="Compare search results"
-            responsive={true}
-          >
-            <div
-              className="euiPageHeaderContent"
+          Compare search results
+        </h1>
+      </EuiTitle>
+      <EuiText>
+        <div
+          className="euiText euiText--medium"
+        >
+          <p>
+            Compare results using the same search text with different queries.
+             
+            <EuiLink
+              href="https://opensearch.org/docs/latest/search-plugins/search-relevance"
+              target="_blank"
             >
-              <EuiFlexGroup
-                alignItems="flexStart"
-                className="euiPageHeaderContent__top"
-                gutterSize="l"
-                responsive={true}
-              >
-                <div
-                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
-                >
-                  <EuiFlexItem>
-                    <div
-                      className="euiFlexItem"
-                    >
-                      <EuiTitle
-                        size="l"
-                      >
-                        <h1
-                          className="euiTitle euiTitle--large"
-                        >
-                          Compare search results
-                        </h1>
-                      </EuiTitle>
-                    </div>
-                  </EuiFlexItem>
-                </div>
-              </EuiFlexGroup>
-              <div
-                className="euiPageHeaderContent__bottom"
+              <a
+                className="euiLink euiLink--primary"
+                href="https://opensearch.org/docs/latest/search-plugins/search-relevance"
+                rel="noopener noreferrer"
+                target="_blank"
               >
-                <EuiSpacer>
-                  <div
-                    className="euiSpacer euiSpacer--l"
-                  />
-                </EuiSpacer>
-                <EuiCallOut
-                  iconType="iInCircle"
-                  title="Experimental Feature"
+                Learn more
+                <EuiIcon
+                  aria-label="External link"
+                  className="euiLink__externalIcon"
+                  size="s"
+                  type="popout"
                 >
-                  <div
-                    className="euiCallOut euiCallOut--primary"
+                  <EuiIconEmpty
+                    aria-hidden={true}
+                    aria-label="External link"
+                    className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                    focusable="false"
+                    role="img"
+                    style={null}
                   >
-                    <div
-                      className="euiCallOutHeader"
-                    >
-                      <EuiIcon
-                        aria-hidden="true"
-                        className="euiCallOutHeader__icon"
-                        color="inherit"
-                        size="m"
-                        type="iInCircle"
-                      >
-                        <EuiIconEmpty
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
-                          focusable="false"
-                          role="img"
-                          style={null}
-                        >
-                          <svg
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
-                            focusable="false"
-                            height={16}
-                            role="img"
-                            style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          />
-                        </EuiIconEmpty>
-                      </EuiIcon>
-                      <span
-                        className="euiCallOutHeader__title"
-                      >
-                        Experimental Feature
-                      </span>
-                    </div>
-                    <EuiText
-                      color="default"
-                      size="s"
+                    <svg
+                      aria-hidden={true}
+                      aria-label="External link"
+                      className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                      focusable="false"
+                      height={16}
+                      role="img"
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </EuiIconEmpty>
+                </EuiIcon>
+                <EuiScreenReaderOnly>
+                  <span
+                    className="euiScreenReaderOnly"
+                  >
+                    <EuiI18n
+                      default="(opens in a new tab or window)"
+                      token="euiLink.newTarget.screenReaderOnlyText"
                     >
-                      <div
-                        className="euiText euiText--small"
-                      >
-                        <EuiTextColor
-                          color="default"
-                          component="div"
-                        >
-                          <div
-                            className="euiTextColor euiTextColor--default"
-                          >
-                            <EuiText>
-                              <div
-                                className="euiText euiText--medium"
-                              >
-                                <p>
-                                  Compare results using the same search text with different queries. For more information, see the
-                                   
-                                  <EuiLink
-                                    href="https://opensearch.org/docs/latest/search-plugins/search-relevance"
-                                    target="_blank"
-                                  >
-                                    <a
-                                      className="euiLink euiLink--primary"
-                                      href="https://opensearch.org/docs/latest/search-plugins/search-relevance"
-                                      rel="noopener noreferrer"
-                                      target="_blank"
-                                    >
-                                      Compare Search Results Documentation
-                                      <EuiIcon
-                                        aria-label="External link"
-                                        className="euiLink__externalIcon"
-                                        size="s"
-                                        type="popout"
-                                      >
-                                        <EuiIconEmpty
-                                          aria-hidden={true}
-                                          aria-label="External link"
-                                          className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
-                                          focusable="false"
-                                          role="img"
-                                          style={null}
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            aria-label="External link"
-                                            className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
-                                            focusable="false"
-                                            height={16}
-                                            role="img"
-                                            style={null}
-                                            viewBox="0 0 16 16"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          />
-                                        </EuiIconEmpty>
-                                      </EuiIcon>
-                                      <EuiScreenReaderOnly>
-                                        <span
-                                          className="euiScreenReaderOnly"
-                                        >
-                                          <EuiI18n
-                                            default="(opens in a new tab or window)"
-                                            token="euiLink.newTarget.screenReaderOnlyText"
-                                          >
-                                            (opens in a new tab or window)
-                                          </EuiI18n>
-                                        </span>
-                                      </EuiScreenReaderOnly>
-                                    </a>
-                                  </EuiLink>
-                                  . To leave feedback, visit
-                                   
-                                  <EuiLink
-                                    href="https://forum.opensearch.org/t/feedback-experimental-feature-compare-search-results/11331"
-                                    target="_blank"
-                                  >
-                                    <a
-                                      className="euiLink euiLink--primary"
-                                      href="https://forum.opensearch.org/t/feedback-experimental-feature-compare-search-results/11331"
-                                      rel="noopener noreferrer"
-                                      target="_blank"
-                                    >
-                                      forums.opensearch.com
-                                      <EuiIcon
-                                        aria-label="External link"
-                                        className="euiLink__externalIcon"
-                                        size="s"
-                                        type="popout"
-                                      >
-                                        <EuiIconEmpty
-                                          aria-hidden={true}
-                                          aria-label="External link"
-                                          className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
-                                          focusable="false"
-                                          role="img"
-                                          style={null}
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            aria-label="External link"
-                                            className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
-                                            focusable="false"
-                                            height={16}
-                                            role="img"
-                                            style={null}
-                                            viewBox="0 0 16 16"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          />
-                                        </EuiIconEmpty>
-                                      </EuiIcon>
-                                      <EuiScreenReaderOnly>
-                                        <span
-                                          className="euiScreenReaderOnly"
-                                        >
-                                          <EuiI18n
-                                            default="(opens in a new tab or window)"
-                                            token="euiLink.newTarget.screenReaderOnlyText"
-                                          >
-                                            (opens in a new tab or window)
-                                          </EuiI18n>
-                                        </span>
-                                      </EuiScreenReaderOnly>
-                                    </a>
-                                  </EuiLink>
-                                  .
-                                </p>
-                              </div>
-                            </EuiText>
-                          </div>
-                        </EuiTextColor>
-                      </div>
-                    </EuiText>
-                  </div>
-                </EuiCallOut>
-              </div>
-            </div>
-          </EuiPageHeaderContent>
-        </header>
-      </EuiPageHeader>
+                      (opens in a new tab or window)
+                    </EuiI18n>
+                  </span>
+                </EuiScreenReaderOnly>
+              </a>
+            </EuiLink>
+          </p>
+        </div>
+      </EuiText>
     </div>
   </EuiPanel>
 </Header>
diff --git a/public/components/common/header.tsx b/public/components/common/header.tsx
index 0069d11..fe4633c 100644
--- a/public/components/common/header.tsx
+++ b/public/components/common/header.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiPageHeader, EuiCallOut, EuiText, EuiLink, EuiPanel } from '@elastic/eui';
+import { EuiText, EuiLink, EuiPanel, EuiTitle } from '@elastic/eui';
 
 interface HeaderProps {
   children?: React.ReactNode;
@@ -19,31 +19,21 @@ export const Header = ({ children }: HeaderProps) => {
       borderRadius="none"
       style={{ borderBottom: '1px solid #D3DAE6' }}
     >
-      <EuiPageHeader pageTitle="Compare search results">
-        <EuiCallOut title="Experimental Feature" iconType="iInCircle">
-          <EuiText>
-            <p>
-              Compare results using the same search text with different queries. For more
-              information, see the{' '}
-              <EuiLink
-                href="https://opensearch.org/docs/latest/search-plugins/search-relevance"
-                target="_blank"
-              >
-                Compare Search Results Documentation
-              </EuiLink>
-              . To leave feedback, visit{' '}
-              <EuiLink
-                href="https://forum.opensearch.org/t/feedback-experimental-feature-compare-search-results/11331"
-                target="_blank"
-              >
-                forums.opensearch.com
-              </EuiLink>
-              .
-            </p>
-          </EuiText>
-        </EuiCallOut>
-        {children}
-      </EuiPageHeader>
+      <EuiTitle>
+        <h1>Compare search results</h1>
+      </EuiTitle>
+      <EuiText>
+        <p>
+          Compare results using the same search text with different queries.{' '}
+          <EuiLink
+            href="https://opensearch.org/docs/latest/search-plugins/search-relevance"
+            target="_blank"
+          >
+            Learn more
+          </EuiLink>
+        </p>
+      </EuiText>
+      {children}
     </EuiPanel>
   );
 };
diff --git a/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap b/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap
index 6eca3ff..0db4cbd 100644
--- a/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap
+++ b/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap
@@ -22,240 +22,76 @@ exports[`Create index component Renders create index component 1`] = `
           }
         }
       >
-        <EuiPageHeader
-          pageTitle="Compare search results"
-        >
-          <header
-            className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+        <EuiTitle>
+          <h1
+            className="euiTitle euiTitle--medium"
           >
-            <EuiPageHeaderContent
-              pageTitle="Compare search results"
-              responsive={true}
-            >
-              <div
-                className="euiPageHeaderContent"
+            Compare search results
+          </h1>
+        </EuiTitle>
+        <EuiText>
+          <div
+            className="euiText euiText--medium"
+          >
+            <p>
+              Compare results using the same search text with different queries.
+               
+              <EuiLink
+                href="https://opensearch.org/docs/latest/search-plugins/search-relevance"
+                target="_blank"
               >
-                <EuiFlexGroup
-                  alignItems="flexStart"
-                  className="euiPageHeaderContent__top"
-                  gutterSize="l"
-                  responsive={true}
-                >
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
-                  >
-                    <EuiFlexItem>
-                      <div
-                        className="euiFlexItem"
-                      >
-                        <EuiTitle
-                          size="l"
-                        >
-                          <h1
-                            className="euiTitle euiTitle--large"
-                          >
-                            Compare search results
-                          </h1>
-                        </EuiTitle>
-                      </div>
-                    </EuiFlexItem>
-                  </div>
-                </EuiFlexGroup>
-                <div
-                  className="euiPageHeaderContent__bottom"
+                <a
+                  className="euiLink euiLink--primary"
+                  href="https://opensearch.org/docs/latest/search-plugins/search-relevance"
+                  rel="noopener noreferrer"
+                  target="_blank"
                 >
-                  <EuiSpacer>
-                    <div
-                      className="euiSpacer euiSpacer--l"
-                    />
-                  </EuiSpacer>
-                  <EuiCallOut
-                    iconType="iInCircle"
-                    title="Experimental Feature"
+                  Learn more
+                  <EuiIcon
+                    aria-label="External link"
+                    className="euiLink__externalIcon"
+                    size="s"
+                    type="popout"
                   >
-                    <div
-                      className="euiCallOut euiCallOut--primary"
+                    <EuiIconEmpty
+                      aria-hidden={true}
+                      aria-label="External link"
+                      className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                      focusable="false"
+                      role="img"
+                      style={null}
                     >
-                      <div
-                        className="euiCallOutHeader"
-                      >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiCallOutHeader__icon"
-                          color="inherit"
-                          size="m"
-                          type="iInCircle"
-                        >
-                          <EuiIconEmpty
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
-                          >
-                            <svg
-                              aria-hidden={true}
-                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
-                              focusable="false"
-                              height={16}
-                              role="img"
-                              style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
-                            />
-                          </EuiIconEmpty>
-                        </EuiIcon>
-                        <span
-                          className="euiCallOutHeader__title"
-                        >
-                          Experimental Feature
-                        </span>
-                      </div>
-                      <EuiText
-                        color="default"
-                        size="s"
+                      <svg
+                        aria-hidden={true}
+                        aria-label="External link"
+                        className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </EuiIconEmpty>
+                  </EuiIcon>
+                  <EuiScreenReaderOnly>
+                    <span
+                      className="euiScreenReaderOnly"
+                    >
+                      <EuiI18n
+                        default="(opens in a new tab or window)"
+                        token="euiLink.newTarget.screenReaderOnlyText"
                       >
-                        <div
-                          className="euiText euiText--small"
-                        >
-                          <EuiTextColor
-                            color="default"
-                            component="div"
-                          >
-                            <div
-                              className="euiTextColor euiTextColor--default"
-                            >
-                              <EuiText>
-                                <div
-                                  className="euiText euiText--medium"
-                                >
-                                  <p>
-                                    Compare results using the same search text with different queries. For more information, see the
-                                     
-                                    <EuiLink
-                                      href="https://opensearch.org/docs/latest/search-plugins/search-relevance"
-                                      target="_blank"
-                                    >
-                                      <a
-                                        className="euiLink euiLink--primary"
-                                        href="https://opensearch.org/docs/latest/search-plugins/search-relevance"
-                                        rel="noopener noreferrer"
-                                        target="_blank"
-                                      >
-                                        Compare Search Results Documentation
-                                        <EuiIcon
-                                          aria-label="External link"
-                                          className="euiLink__externalIcon"
-                                          size="s"
-                                          type="popout"
-                                        >
-                                          <EuiIconEmpty
-                                            aria-hidden={true}
-                                            aria-label="External link"
-                                            className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
-                                            focusable="false"
-                                            role="img"
-                                            style={null}
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              aria-label="External link"
-                                              className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
-                                              focusable="false"
-                                              height={16}
-                                              role="img"
-                                              style={null}
-                                              viewBox="0 0 16 16"
-                                              width={16}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            />
-                                          </EuiIconEmpty>
-                                        </EuiIcon>
-                                        <EuiScreenReaderOnly>
-                                          <span
-                                            className="euiScreenReaderOnly"
-                                          >
-                                            <EuiI18n
-                                              default="(opens in a new tab or window)"
-                                              token="euiLink.newTarget.screenReaderOnlyText"
-                                            >
-                                              (opens in a new tab or window)
-                                            </EuiI18n>
-                                          </span>
-                                        </EuiScreenReaderOnly>
-                                      </a>
-                                    </EuiLink>
-                                    . To leave feedback, visit
-                                     
-                                    <EuiLink
-                                      href="https://forum.opensearch.org/t/feedback-experimental-feature-compare-search-results/11331"
-                                      target="_blank"
-                                    >
-                                      <a
-                                        className="euiLink euiLink--primary"
-                                        href="https://forum.opensearch.org/t/feedback-experimental-feature-compare-search-results/11331"
-                                        rel="noopener noreferrer"
-                                        target="_blank"
-                                      >
-                                        forums.opensearch.com
-                                        <EuiIcon
-                                          aria-label="External link"
-                                          className="euiLink__externalIcon"
-                                          size="s"
-                                          type="popout"
-                                        >
-                                          <EuiIconEmpty
-                                            aria-hidden={true}
-                                            aria-label="External link"
-                                            className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
-                                            focusable="false"
-                                            role="img"
-                                            style={null}
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              aria-label="External link"
-                                              className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
-                                              focusable="false"
-                                              height={16}
-                                              role="img"
-                                              style={null}
-                                              viewBox="0 0 16 16"
-                                              width={16}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            />
-                                          </EuiIconEmpty>
-                                        </EuiIcon>
-                                        <EuiScreenReaderOnly>
-                                          <span
-                                            className="euiScreenReaderOnly"
-                                          >
-                                            <EuiI18n
-                                              default="(opens in a new tab or window)"
-                                              token="euiLink.newTarget.screenReaderOnlyText"
-                                            >
-                                              (opens in a new tab or window)
-                                            </EuiI18n>
-                                          </span>
-                                        </EuiScreenReaderOnly>
-                                      </a>
-                                    </EuiLink>
-                                    .
-                                  </p>
-                                </div>
-                              </EuiText>
-                            </div>
-                          </EuiTextColor>
-                        </div>
-                      </EuiText>
-                    </div>
-                  </EuiCallOut>
-                </div>
-              </div>
-            </EuiPageHeaderContent>
-          </header>
-        </EuiPageHeader>
+                        (opens in a new tab or window)
+                      </EuiI18n>
+                    </span>
+                  </EuiScreenReaderOnly>
+                </a>
+              </EuiLink>
+            </p>
+          </div>
+        </EuiText>
       </div>
     </EuiPanel>
   </Header>