From ffd495157edea7b40c3a79af34a6387258a524a0 Mon Sep 17 00:00:00 2001
From: Shubh Sahu <shubhvs@amazon.com>
Date: Mon, 2 Sep 2024 14:42:11 +0530
Subject: [PATCH] rebaseing

Signed-off-by: Shubh Sahu <shubhvs@amazon.com>
---
 .../CreateComposableTemplate.test.tsx.snap    | 292 +-----------------
 .../TemplateDetail.test.tsx.snap              | 164 +++++++---
 .../ConfigurePolicy.test.tsx.snap             |  16 +-
 .../__snapshots__/DefinePolicy.test.tsx.snap  |  16 +-
 .../__snapshots__/CreatePolicy.test.tsx.snap  |  32 +-
 .../PolicySettings.test.tsx.snap              |  16 +-
 .../__snapshots__/PolicyInfo.test.tsx.snap    |  16 +-
 .../States/__snapshots__/States.test.tsx.snap |  29 +-
 8 files changed, 169 insertions(+), 412 deletions(-)

diff --git a/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/__snapshots__/CreateComposableTemplate.test.tsx.snap b/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/__snapshots__/CreateComposableTemplate.test.tsx.snap
index 37a25e900..584a12512 100644
--- a/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/__snapshots__/CreateComposableTemplate.test.tsx.snap
+++ b/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/__snapshots__/CreateComposableTemplate.test.tsx.snap
@@ -10,87 +10,7 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
         class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
-          class="euiText"
-        >
-          <h1
-            title="good_template"
-          >
-            good_template
-          </h1>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem euiFlexItem--flexGrowZero"
-        style="flex-direction: row;"
-      >
-        <button
-          class="euiButton euiButton--primary euiButton--small"
-          style="margin-right: 20px;"
-          type="button"
-        >
-          <span
-            class="euiButtonContent euiButton__content"
-          >
-            <span
-              class="euiButton__text"
-            >
-              View JSON
-            </span>
-          </span>
-        </button>
-        <button
-          class="euiButton euiButton--danger euiButton--small"
-          data-test-subj="deleteAction"
-          type="button"
-        >
-          <span
-            class="euiButtonContent euiButton__content"
-          >
-            <span
-              class="euiButton__text"
-            >
-              Delete
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="euiSpacer euiSpacer--l"
-    />
-    <div
-      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    >
-      <div
-        class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-      >
-        <div
-          class="euiText euiText--small"
-        >
-          <div
-            class="euiText euiText--small"
-          >
-            <h1>
-              Define component template
-              <span
-                class="panel-header-count"
-              >
-                 
-                 
-              </span>
-            </h1>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-      />
-      <div
-        class="euiDescribedFormGroup euiDescribedFormGroup--fullWidth"
-        role="group"
-      >
-        <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiFlexItem"
         >
           <div
             class="euiText euiText--small"
@@ -444,7 +364,22 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
                   id="some_html_id-help-0"
                 >
                   <div>
-                    Index alias
+                    Define how documents and their fields are stored and indexed.
+                     
+                    <a
+                      class="euiLink euiLink--primary"
+                      href="https://opensearch.org/docs/undefined/opensearch/mappings/"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      Learn more
+                      EuiIconMock
+                      <span
+                        class="euiScreenReaderOnly"
+                      >
+                        (opens in a new tab or window)
+                      </span>
+                    </a>
                   </div>
                 </div>
               </div>
@@ -503,199 +438,6 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
         />
       </div>
     </div>
-    <div
-      class="euiSpacer euiSpacer--l"
-    />
-    <div
-      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-      style="padding: 0px 0px 0px 0px;"
-    >
-      <div
-        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-        style="margin-top: 0px; margin-bottom: 0px; padding: 0px 16px;"
-      >
-        <div
-          class="euiFlexItem"
-        >
-          <div
-            class="euiText euiText--small"
-          >
-            <h1>
-              Index settings
-              <span
-                class="panel-header-count"
-              >
-                 
-                 
-              </span>
-            </h1>
-          </div>
-        </div>
-        <div
-          class="euiFlexItem euiFlexItem--flexGrowZero"
-        >
-          <div
-            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-          >
-            <div
-              class="euiFlexItem"
-            >
-              <div>
-                <span
-                  class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
-                >
-                  <div>
-                    <div
-                      class="euiSwitch euiSwitch--primary euiSwitch--compressed"
-                    >
-                      <button
-                        aria-checked="false"
-                        aria-labelledby="some_html_id"
-                        class="euiSwitch__button"
-                        id="some_html_id"
-                        role="switch"
-                        type="button"
-                      >
-                        <span
-                          class="euiSwitch__body"
-                        >
-                          <span
-                            class="euiSwitch__thumb"
-                          />
-                          <span
-                            class="euiSwitch__track"
-                          />
-                        </span>
-                      </button>
-                      <span
-                        class="euiSwitch__label"
-                        id="some_html_id"
-                      >
-                        Use configuration
-                      </span>
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="euiHorizontalRule euiHorizontalRule--full"
-      />
-    </div>
-    <div
-      class="euiSpacer euiSpacer--l"
-    />
-    <div
-      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-      style="padding: 0px 0px 0px 0px;"
-    >
-      <div
-        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-        style="margin-top: 0px; margin-bottom: 0px; padding: 0px 16px;"
-      >
-        <div
-          class="euiFlexItem"
-        >
-          <div
-            class="euiText euiText--small"
-          >
-            <h2
-              class="euiTitle euiTitle--medium"
-            >
-              Index mapping
-            </h2>
-          </div>
-          <div
-            class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
-            id="some_html_id-row"
-          >
-            <div
-              class="euiFormRow__fieldWrapper"
-            >
-              <div
-                class="euiFormHelpText euiFormRow__text"
-                id="some_html_id-help-0"
-              >
-                <div>
-                  Define how documents and their fields are stored and indexed.
-                   
-                  <a
-                    class="euiLink euiLink--primary"
-                    href="https://opensearch.org/docs/undefined/opensearch/mappings/"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
-                    Learn more
-                    EuiIconMock
-                    <span
-                      class="euiScreenReaderOnly"
-                    >
-                      (opens in a new tab or window)
-                    </span>
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="euiFlexItem euiFlexItem--flexGrowZero"
-        >
-          <div
-            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-          >
-            <div
-              class="euiFlexItem"
-            >
-              <span
-                class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
-              >
-                <div>
-                  <div
-                    class="euiSwitch euiSwitch--primary euiSwitch--compressed"
-                  >
-                    <button
-                      aria-checked="false"
-                      aria-labelledby="some_html_id"
-                      class="euiSwitch__button"
-                      id="some_html_id"
-                      role="switch"
-                      type="button"
-                    >
-                      <span
-                        class="euiSwitch__body"
-                      >
-                        <span
-                          class="euiSwitch__thumb"
-                        />
-                        <span
-                          class="euiSwitch__track"
-                        />
-                      </span>
-                    </button>
-                    <span
-                      class="euiSwitch__label"
-                      id="some_html_id"
-                    >
-                      Use configuration
-                    </span>
-                  </div>
-                </div>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="euiHorizontalRule euiHorizontalRule--full"
-      />
-    </div>
-    <div
-      class="euiSpacer euiSpacer--l"
-    />
   </div>
 </div>
 `;
diff --git a/public/pages/CreateComposableTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap b/public/pages/CreateComposableTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
index e1530927c..5f6b8944f 100644
--- a/public/pages/CreateComposableTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
+++ b/public/pages/CreateComposableTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
@@ -7,16 +7,85 @@ exports[`<TemplateDetail /> spec render component 1`] = `
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
-        class="euiText"
+        class="euiFlexItem"
       >
-        <h1>
-          Create component template
-        </h1>
+        <div
+          class="euiText euiText--small"
+        >
+          <h1
+            class="euiTitle euiTitle--large"
+          >
+            Create component template
+          </h1>
+        </div>
+        <div
+          class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
+          id="some_html_id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              class="euiFormHelpText euiFormRow__text"
+              style="padding-top: 0px; padding-bottom: 4px;"
+            >
+              <div>
+                Component templates are reusable building blocks for composing index or data stream templates. You can define component templates with common index configurations and associate them to an index template.
+                 
+                <button
+                  class="euiLink euiLink--primary"
+                  type="button"
+                >
+                  Learn more
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
+    </div>
+    <div
+      class="euiSpacer euiSpacer--l"
+    />
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <div
+        class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <div
+          class="euiText euiText--small"
+        >
+          <h2>
+            Define component template
+          </h2>
+        </div>
+      </div>
+      <hr
+        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+      />
       <div
         class="euiFormRow euiFormRow--compressed"
+        data-test-subj="form-row-name"
         id="some_html_id-row"
       >
+        <div
+          class="euiFormRow__labelWrapper"
+        >
+          <label
+            aria-invalid="false"
+            class="euiFormLabel euiFormRow__label"
+            for="some_html_id"
+          >
+            <div
+              class="euiText euiText--small"
+            >
+              <h3>
+                Name
+              </h3>
+            </div>
+          </label>
+        </div>
         <div
           class="euiFormRow__fieldWrapper"
         >
@@ -25,37 +94,48 @@ exports[`<TemplateDetail /> spec render component 1`] = `
             style="padding-top: 0px; padding-bottom: 4px;"
           >
             <div>
-              Must be in lowercase letters. Cannot begin with underscores. Spaces, commas, and characters *, # are not allowed.
+              Name cannot be changed after the component template is created.
             </div>
           </div>
+          <span
+            class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
+          >
+            <div
+              class="euiFormControlLayout euiFormControlLayout--compressed"
+            >
+              <div
+                class="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  class="euiFieldText euiFieldText--compressed"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </span>
         </div>
       </div>
       <div
-        class="euiText euiText--small"
+        class="euiFormRow euiFormRow--compressed"
+        id="some_html_id-row"
       >
         <div
-          class="euiText euiText--small"
+          class="euiFormRow__fieldWrapper"
         >
-          <h1>
-            Define component template
-            <span
-              class="panel-header-count"
-            >
-               
-               
-            </span>
-          </h1>
+          <div
+            class="euiFormHelpText euiFormRow__text"
+            style="padding-top: 0px; padding-bottom: 4px;"
+          >
+            <div>
+              Must be in lowercase letters. Cannot begin with underscores. Spaces, commas, and characters *, # are not allowed.
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-    <hr
-      class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-    />
-    <div
-      class="euiFormRow euiFormRow--compressed"
-      data-test-subj="form-row-name"
-      id="some_html_id-row"
-    >
+      <div
+        class="euiSpacer euiSpacer--l"
+      />
       <div
         class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-row-_meta.description"
@@ -325,7 +405,22 @@ exports[`<TemplateDetail /> spec render component 1`] = `
                 id="some_html_id-help-0"
               >
                 <div>
-                  Index alias
+                  Define how documents and their fields are stored and indexed.
+                   
+                  <a
+                    class="euiLink euiLink--primary"
+                    href="https://opensearch.org/docs/undefined/opensearch/mappings/"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    Learn more
+                    EuiIconMock
+                    <span
+                      class="euiScreenReaderOnly"
+                    >
+                      (opens in a new tab or window)
+                    </span>
+                  </a>
                 </div>
               </div>
             </div>
@@ -389,23 +484,6 @@ exports[`<TemplateDetail /> spec render component 1`] = `
     <div
       class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
-      <div
-        class="euiFlexItem"
-      >
-        <div
-          class="euiText euiText--small"
-        >
-          <h1>
-            Index settings
-            <span
-              class="panel-header-count"
-            >
-               
-               
-            </span>
-          </h1>
-        </div>
-      </div>
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
diff --git a/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap b/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap
index 03eb019d0..c791cf2db 100644
--- a/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap
+++ b/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap
@@ -10,19 +10,9 @@ exports[`<ConfigurePolicy /> spec renders the component 1`] = `
     <div
       class="euiText euiText--small"
     >
-      <div
-        class="euiText euiText--small"
-      >
-        <h1>
-          Name policy
-          <span
-            class="panel-header-count"
-          >
-             
-             
-          </span>
-        </h1>
-      </div>
+      <h2>
+        Name policy
+      </h2>
     </div>
   </div>
   <hr
diff --git a/public/pages/CreatePolicy/components/DefinePolicy/__snapshots__/DefinePolicy.test.tsx.snap b/public/pages/CreatePolicy/components/DefinePolicy/__snapshots__/DefinePolicy.test.tsx.snap
index 14bce1ed9..1f52eef04 100644
--- a/public/pages/CreatePolicy/components/DefinePolicy/__snapshots__/DefinePolicy.test.tsx.snap
+++ b/public/pages/CreatePolicy/components/DefinePolicy/__snapshots__/DefinePolicy.test.tsx.snap
@@ -10,19 +10,9 @@ exports[`<DefinePolicy /> spec renders the component 1`] = `
     <div
       class="euiText euiText--small"
     >
-      <div
-        class="euiText euiText--small"
-      >
-        <h1>
-          Define policy
-          <span
-            class="panel-header-count"
-          >
-             
-             
-          </span>
-        </h1>
-      </div>
+      <h2>
+        Define policy
+      </h2>
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
diff --git a/public/pages/CreatePolicy/containers/CreatePolicy/__snapshots__/CreatePolicy.test.tsx.snap b/public/pages/CreatePolicy/containers/CreatePolicy/__snapshots__/CreatePolicy.test.tsx.snap
index d3b17bec5..334b5a4ed 100644
--- a/public/pages/CreatePolicy/containers/CreatePolicy/__snapshots__/CreatePolicy.test.tsx.snap
+++ b/public/pages/CreatePolicy/containers/CreatePolicy/__snapshots__/CreatePolicy.test.tsx.snap
@@ -22,19 +22,9 @@ exports[`<CreatePolicy /> spec renders the create component 1`] = `
       <div
         class="euiText euiText--small"
       >
-        <div
-          class="euiText euiText--small"
-        >
-          <h1>
-            Name policy
-            <span
-              class="panel-header-count"
-            >
-               
-               
-            </span>
-          </h1>
-        </div>
+        <h2>
+          Name policy
+        </h2>
       </div>
     </div>
     <hr
@@ -365,19 +355,9 @@ exports[`<CreatePolicy /> spec renders the edit component 1`] = `
       <div
         class="euiText euiText--small"
       >
-        <div
-          class="euiText euiText--small"
-        >
-          <h1>
-            Name policy
-            <span
-              class="panel-header-count"
-            >
-               
-               
-            </span>
-          </h1>
-        </div>
+        <h2>
+          Name policy
+        </h2>
       </div>
     </div>
     <hr
diff --git a/public/pages/PolicyDetails/components/PolicySettings/__snapshots__/PolicySettings.test.tsx.snap b/public/pages/PolicyDetails/components/PolicySettings/__snapshots__/PolicySettings.test.tsx.snap
index 89214424a..120041937 100644
--- a/public/pages/PolicyDetails/components/PolicySettings/__snapshots__/PolicySettings.test.tsx.snap
+++ b/public/pages/PolicyDetails/components/PolicySettings/__snapshots__/PolicySettings.test.tsx.snap
@@ -10,19 +10,9 @@ exports[`<PolicySettings /> spec renders the component 1`] = `
     <div
       class="euiText euiText--small"
     >
-      <div
-        class="euiText euiText--small"
-      >
-        <h1>
-          Policy settings
-          <span
-            class="panel-header-count"
-          >
-             
-             
-          </span>
-        </h1>
-      </div>
+      <h2>
+        Policy settings
+      </h2>
     </div>
   </div>
   <hr
diff --git a/public/pages/VisualCreatePolicy/components/PolicyInfo/__snapshots__/PolicyInfo.test.tsx.snap b/public/pages/VisualCreatePolicy/components/PolicyInfo/__snapshots__/PolicyInfo.test.tsx.snap
index e0ece5337..5946ed290 100644
--- a/public/pages/VisualCreatePolicy/components/PolicyInfo/__snapshots__/PolicyInfo.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/components/PolicyInfo/__snapshots__/PolicyInfo.test.tsx.snap
@@ -10,19 +10,9 @@ exports[`<PolicyInfo /> spec renders the component 1`] = `
     <div
       class="euiText euiText--small"
     >
-      <div
-        class="euiText euiText--small"
-      >
-        <h1>
-          Policy info
-          <span
-            class="panel-header-count"
-          >
-             
-             
-          </span>
-        </h1>
-      </div>
+      <h2>
+        Policy info
+      </h2>
     </div>
   </div>
   <hr
diff --git a/public/pages/VisualCreatePolicy/components/States/__snapshots__/States.test.tsx.snap b/public/pages/VisualCreatePolicy/components/States/__snapshots__/States.test.tsx.snap
index 119f70718..39b9c6c13 100644
--- a/public/pages/VisualCreatePolicy/components/States/__snapshots__/States.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/components/States/__snapshots__/States.test.tsx.snap
@@ -10,22 +10,19 @@ exports[`<States /> spec renders the component 1`] = `
     <div
       class="euiText euiText--small"
     >
-      <div
-        class="euiText euiText--small"
-      >
-        <h1>
-          States (2)
-          <span
-            class="panel-header-count"
-          >
-             
-             
-          </span>
-        </h1>
-      </div>
-      <div
-        class="euiText euiText--small"
-        style="padding: 5px 0px;"
+      <h2>
+        States (2)
+      </h2>
+    </div>
+  </div>
+  <div
+    class="euiText euiText--extraSmall"
+  >
+    <div
+      class="euiTextColor euiTextColor--subdued"
+    >
+      <p
+        style="font-weight: 350;"
       >
         You can think of policies as state machines. "Actions" are the operations ISM performs when an index is in a certain state.
         <br />