[Look & Feel] Consistency and Density Changes for Snapshot Management (…

…#1148) * initial changes Signed-off-by: Shey Gao <sheygao@amazon.com> * fixed unit tests Signed-off-by: Shey Gao <sheygao@amazon.com> --------- Signed-off-by: Shey Gao <sheygao@amazon.com> Co-authored-by: Shey Gao <sheygao@amazon.com> Co-authored-by: Hailong Cui <ihailong@amazon.com> (cherry picked from commit a7d317a) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Sep 2, 2024 · fbc47eb · fbc47eb
1 parent 706acd0
commit fbc47eb
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 18 deletions.
diff --git a/...ges/CreateSnapshotPolicy/components/SnapshotIndicesRepoInput/SnapshotIndicesRepoInput.tsx b/...ges/CreateSnapshotPolicy/components/SnapshotIndicesRepoInput/SnapshotIndicesRepoInput.tsx
@@ -94,7 +94,7 @@ const SnapshotIndicesRepoInput = ({
 
         {showFlyout != null && (
           <EuiFlexItem grow={false}>
-            <EuiSmallButton onClick={openFlyout}>Create repository</EuiSmallButton>
+            <EuiSmallButton onClick={openFlyout} iconType="plus">Create repository</EuiSmallButton>
           </EuiFlexItem>
         )}
       </EuiFlexGroup>

diff --git a/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx b/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx
@@ -698,7 +698,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
               <EuiAccordion id="additional_delete_conditions" buttonContent="Additional settings">
                 <EuiSpacer size="m" />
 
-                <EuiText>Number of snapshots retained</EuiText>
+                <EuiText size="s">Number of snapshots retained</EuiText>
                 <EuiSpacer size="s" />
 
                 <EuiFlexGroup alignItems="flexStart">
@@ -726,7 +726,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
 
                 <EuiSpacer size="m" />
 
-                <EuiText>Deletion frequency</EuiText>
+                <EuiText size="s">Deletion frequency</EuiText>
                 <span style={{ color: "grey", fontWeight: 200, fontSize: "12px" }}>
                   Configure when to check retention conditions and delete snapshots.
                 </span>

diff --git a/.../pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap b/.../pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap
@@ -860,6 +860,7 @@ Object {
                   <span
                     class="euiButtonContent euiButton__content"
                   >
+                    EuiIconMock
                     <span
                       class="euiButton__text"
                     >

diff --git a/public/pages/Repositories/components/CreateRepositoryFlyout/CreateRepositoryFlyout.tsx b/public/pages/Repositories/components/CreateRepositoryFlyout/CreateRepositoryFlyout.tsx
@@ -231,13 +231,15 @@ export class CreateRepositoryFlyout extends MDSEnabledComponent<CreateRepository
       configuration = (
         <>
           <EuiCallOut title="Install and configure custom repository types">
-            <p>
-              To use a custom repository, such as Amazon S3, Azure Blob Storage or similar, install and configure the respective repository
-              plugin on OpenSearch and then define the repository configuration below.{" "}
-              <EuiLink href={REPOSITORY_DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer">
-                Learn more
-              </EuiLink>
-            </p>
+            <EuiText size="s">
+              <p>
+                To use a custom repository, such as Amazon S3, Azure Blob Storage or similar, install and configure the respective repository
+                plugin on OpenSearch and then define the repository configuration below.{" "}
+                <EuiLink href={REPOSITORY_DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer">
+                  Learn more
+                </EuiLink>
+              </p>
+            </EuiText>
           </EuiCallOut>
 
           <EuiSpacer size="s" />
@@ -272,7 +274,7 @@ export class CreateRepositoryFlyout extends MDSEnabledComponent<CreateRepository
     return (
       <EuiFlyout ownFocus={false} onClose={onCloseFlyout} maxWidth={600} size="m" hideCloseButton>
         <EuiFlyoutHeader hasBorder>
-          <EuiTitle size="m">
+          <EuiTitle size="s">
             <h2 id="flyoutTitle">{!!editRepo ? "Edit" : "Create"} repository</h2>
           </EuiTitle>
         </EuiFlyoutHeader>

diff --git a/public/pages/Repositories/containers/Repositories/Repositories.tsx b/public/pages/Repositories/containers/Repositories/Repositories.tsx
@@ -248,7 +248,7 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
       <EuiSmallButton disabled={!selectedItems.length} onClick={this.showDeleteModal} data-test-subj="deleteButton" color="danger">
         Delete
       </EuiSmallButton>,
-      <EuiSmallButton onClick={this.onClickCreate} fill={true}>
+      <EuiSmallButton onClick={this.onClickCreate} fill={true} iconType="plus">
         Create repository
       </EuiSmallButton>,
     ];
@@ -341,7 +341,13 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
 
     const { HeaderControl } = getNavigationUI();
     const { setAppRightControls, setAppDescriptionControls } = getApplication();
-    const useTitle = useNewUX ? undefined : "Repositories";
+    const useTitle = useNewUX 
+      ? undefined 
+      : (
+        <EuiText size="s">
+          <h1>Repositories</h1>
+        </EuiText>
+      );  
     const useActions = useNewUX ? undefined : actions;
     const useSubTitleText = useNewUX ? undefined : subTitleText;
 

diff --git a/public/pages/SnapshotPolicies/containers/SnapshotPolicies/SnapshotPolicies.tsx b/public/pages/SnapshotPolicies/containers/SnapshotPolicies/SnapshotPolicies.tsx
@@ -483,7 +483,7 @@ export class SnapshotPolicies extends MDSEnabledComponent<SnapshotPoliciesProps,
       >
         <EuiContextMenuPanel items={popoverActionItems} size="s" />
       </EuiPopover>,
-      <EuiSmallButton onClick={this.onClickCreate} fill={true}>
+      <EuiSmallButton onClick={this.onClickCreate} fill={true} iconType="plus">
         Create policy
       </EuiSmallButton>,
     ];
@@ -508,7 +508,7 @@ export class SnapshotPolicies extends MDSEnabledComponent<SnapshotPoliciesProps,
           </EuiText>
         }
         actions={
-          <EuiSmallButton onClick={this.onClickCreate} fill={true}>
+          <EuiSmallButton onClick={this.onClickCreate} fill={true} iconType="plus">
             Create policy
           </EuiSmallButton>
         }
@@ -569,7 +569,15 @@ export class SnapshotPolicies extends MDSEnabledComponent<SnapshotPoliciesProps,
 
     return !this.state.useNewUx ? (
       <>
-        <ContentPanel title="Snapshot policies" actions={actions} subTitleText={subTitleText}>
+        <ContentPanel 
+          title={
+            <EuiText size="s">
+              <h1>Snapshot policies</h1>
+            </EuiText>
+          }  
+          actions={actions} 
+          subTitleText={subTitleText}
+        >
           <EuiSearchBar
             box={{
               placeholder: "Search snapshot policies",

diff --git a/public/pages/Snapshots/containers/Snapshots/Snapshots.tsx b/public/pages/Snapshots/containers/Snapshots/Snapshots.tsx
@@ -574,7 +574,13 @@ export class Snapshots extends MDSEnabledComponent<SnapshotsProps, SnapshotsStat
 
     const { HeaderControl } = getNavigationUI();
     const { setAppRightControls, setAppDescriptionControls } = getApplication();
-    const showTitle = useNewUX ? undefined : "Snapshots";
+    const showTitle = useNewUX 
+      ? undefined 
+      : (
+        <EuiText size="s">
+          <h1>Snapshots</h1>
+        </EuiText>
+      );
     const SnapshotTabName = useNewUX ? "Index snapshots" : "Snapshots";
     const useActions = useNewUX ? undefined : actions;
     const useSubTitle = useNewUX ? undefined : subTitleText;

diff --git a/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx b/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx
@@ -36,7 +36,7 @@ const FlyoutFooter = ({
       </EuiSmallButtonEmpty>
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
-      <EuiSmallButton disabled={disabledAction} onClick={onClickAction} fill data-test-subj="flyout-footer-action-button">
+      <EuiSmallButton disabled={disabledAction} onClick={onClickAction} fill data-test-subj="flyout-footer-action-button" iconType={"Add" ? "plusInCircle" : "plus"}>
         {text ? text : restore ? "Restore snapshot" : !save ? `${edit ? "Edit" : "Add"} ${action}` : save ? "Save" : "Create"}
       </EuiSmallButton>
     </EuiFlexItem>

diff --git a/...pages/VisualCreatePolicy/components/FlyoutFooter/__snapshots__/FlyoutFooter.test.tsx.snap b/...pages/VisualCreatePolicy/components/FlyoutFooter/__snapshots__/FlyoutFooter.test.tsx.snap
@@ -34,6 +34,7 @@ exports[`<FlyoutFooter /> spec renders the component 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
+        EuiIconMock
         <span
           class="euiButton__text"
         >
-Original file line number
+Diff line change
@@ Expand Up / @@ -860,6 +860,7 @@ Object { @@
                       <span
                         class="euiButtonContent euiButton__content"
                       >
+                        EuiIconMock
                         <span
                           class="euiButton__text"
                         >
@@ Expand Down @@