Fit and Finish Changes for DataStreams and Rollups (#1153) (#1161)

* Fit and Finish Changes for DataStreams and Rollups * Makde changes for Rollup page * Notification page changes * Address PR comments * Review comments * Address offline review comments * This commit includes- 1. Remove padding from view Json Modal of rollup details page 2. Make steps smaller for create rollup page. 3. Remove extra padding from bottom buttons of rollup page * Old UI title changes * make gaps between bottom button small * resolve conflicts --------- (cherry picked from commit a7efceb) Signed-off-by: Sandeep Kumawat <skumwt@amazon.com> 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: Sandeep Kumawat <skumwt@amazon.com> Co-authored-by: SuZhou-Joe <suzhou@amazon.com>
opensearch-project · Sep 3, 2024 · 44531cf · 44531cf
1 parent dfd0cc2
commit 44531cf
Show file tree

Hide file tree

Showing 80 changed files with 2,356 additions and 1,943 deletions.
diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx
@@ -64,7 +64,7 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
   const isGhost = color === "ghost";
   const titleContent = (
     <EuiFlexGroup
-      style={{ ...(noExtraPadding ? { marginTop: 0, marginBottom: 0 } : {}), padding: isGhost || accordion ? undefined : "0px 10px" }}
+      style={{ ...(noExtraPadding ? { marginTop: 0, marginBottom: 0 } : {}), padding: isGhost || accordion ? undefined : "0px 16px" }}
       justifyContent="spaceBetween"
       alignItems="flexStart"
     >
@@ -111,7 +111,7 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
       {children ? (
         <div
           style={{
-            padding: isGhost ? undefined : "0px 10px",
+            padding: isGhost ? undefined : "0px 16px",
             ...bodyStyles,
             display: accordion && isAccordionOpen === "closed" ? "none" : undefined,
           }}

diff --git a/public/components/ContentPanel/__snapshots__/ContentPanel.test.tsx.snap b/public/components/ContentPanel/__snapshots__/ContentPanel.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-    style="padding: 0px 10px;"
+    style="padding: 0px 16px;"
   >
     <div
       class="euiFlexItem"
@@ -53,7 +53,7 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
   />
   <div
-    style="padding: 0px 10px;"
+    style="padding: 0px 16px;"
   >
     <div>
       Testing ContentPanel

diff --git a/public/components/DescriptionListHoz/DescriptionListHoz.tsx b/public/components/DescriptionListHoz/DescriptionListHoz.tsx
@@ -13,6 +13,7 @@ const DisplayItem = (
   const { listItem, ...others } = props;
   return (
     <EuiDescriptionList
+      compressed={true}
       listItems={[
         {
           ...listItem,

diff --git a/public/components/DescriptionListHoz/__snapshots__/DescriptionListHoz.test.tsx.snap b/public/components/DescriptionListHoz/__snapshots__/DescriptionListHoz.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<DescriptionListHoz /> spec renders the component 1`] = `
       class="euiFlexItem"
     >
       <dl
-        class="euiDescriptionList euiDescriptionList--row"
+        class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed"
       >
         <dt
           class="euiDescriptionList__title"

diff --git a/public/containers/ClearCacheModal/ClearCacheModal.tsx b/public/containers/ClearCacheModal/ClearCacheModal.tsx
@@ -192,10 +192,14 @@ export default function ClearCacheModal(props: ClearCacheModalProps) {
         )}
       </div>
       <EuiCallOut color="warning" iconType="warning" hidden={blockedItems.length == 0} size="s">
-        <p>{blockHint}</p>
+        <EuiText size="s">
+          <p>{blockHint}</p>
+        </EuiText>
         <ul style={{ listStyleType: "disc", listStylePosition: "inside" }}>
           {blockedItems.map((item) => (
-            <li key={item}>{item}</li>
+            <EuiText size="s">
+              <li key={item}>{item}</li>
+            </EuiText>
           ))}
         </ul>
       </EuiCallOut>
@@ -217,11 +221,9 @@ export default function ClearCacheModal(props: ClearCacheModalProps) {
     <EuiModal onClose={onClose}>
       <EuiModalHeader>
         <EuiModalHeaderTitle>
-          {" "}
           <EuiText size="s">
-            {" "}
-            <h2>Clear cache for {type}</h2>{" "}
-          </EuiText>{" "}
+            <h2>Clear cache for {type}</h2>
+          </EuiText>
         </EuiModalHeaderTitle>
       </EuiModalHeader>
 

diff --git a/public/containers/ClearCacheModal/__snapshots__/ClearCacheModal.test.tsx.snap b/public/containers/ClearCacheModal/__snapshots__/ClearCacheModal.test.tsx.snap
@@ -39,18 +39,14 @@ HTMLCollection [
             <div
               class="euiModalHeader__title"
             >
-               
               <div
                 class="euiText euiText--small"
               >
-                 
                 <h2>
                   Clear cache for 
                   indexes
                 </h2>
-                 
               </div>
-               
             </div>
           </div>
           <div

diff --git a/public/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap b/public/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<ErrorNotification /> spec renders the component 1`] = `
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-    style="padding: 0px 10px;"
+    style="padding: 0px 16px;"
   >
     <div
       class="euiFlexItem"

diff --git a/public/containers/FlushIndexModal/FlushIndexModal.tsx b/public/containers/FlushIndexModal/FlushIndexModal.tsx
@@ -159,18 +159,20 @@ export default function FlushIndexModal(props: FlushIndexModalProps) {
     <EuiModal onClose={onClose}>
       <EuiModalHeader>
         <EuiModalHeaderTitle data-test-subj="flushModalTitle">
-          {" "}
           <EuiText size="s">
-            {" "}
-            <h2>Flush {flushTarget}</h2>{" "}
-          </EuiText>{" "}
+            <h2>Flush {flushTarget}</h2>
+          </EuiText>
         </EuiModalHeaderTitle>
       </EuiModalHeader>
 
       <EuiModalBody>
         <div style={{ lineHeight: 1.5 }}>
           {/* we will not display this part if not flushAll and there is no flushable items */}
-          {flushAll && <p>{flushAllMessage}</p>}
+          {flushAll && (
+            <EuiText size="s">
+              <p>{flushAllMessage}</p>
+            </EuiText>
+          )}
           {!!unBlockedItems.length && (
             <>
               <EuiText size="s">
@@ -187,10 +189,14 @@ export default function FlushIndexModal(props: FlushIndexModalProps) {
           )}
           <EuiSpacer />
           <EuiCallOut data-test-subj="flushBlockedCallout" color="warning" size="s" hidden={!blockedItems.length}>
-            <p>{blockedItemsMessageTemplate(flushTarget)}</p>
+            <EuiText size="s">
+              <p>{blockedItemsMessageTemplate(flushTarget)}</p>
+            </EuiText>
             <ul style={{ listStyleType: "disc", listStylePosition: "inside" }}>
               {blockedItems.map((item) => (
-                <li key={item}>{item}</li>
+                <EuiText size="s">
+                  <li key={item}>{item}</li>
+                </EuiText>
               ))}
             </ul>
           </EuiCallOut>
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,18 +39,14 @@ HTMLCollection [ @@
                 <div
                   class="euiModalHeader__title"
                 >
                   <div
                     class="euiText euiText--small"
                   >
                     <h2>
                       Clear cache for
                       indexes
                     </h2>
                   </div>
                 </div>
               </div>
               <div
@@ Expand Down @@