incorporate ux feedback

Signed-off-by: Sandeep Kumawat <[email protected]>
opensearch-project · Sep 2, 2024 · 5eb62ab · 5eb62ab
1 parent 6be93cc
commit 5eb62ab
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 43 deletions.
diff --git a/public/components/CustomLabel/CustomLabel.tsx b/public/components/CustomLabel/CustomLabel.tsx
@@ -10,15 +10,14 @@ interface CustomLabelProps {
   title: string | JSX.Element;
   isOptional?: boolean;
   helpText?: string | JSX.Element;
-  checkboxLable?: boolean;
 }
 
-const CustomLabel = ({ title, isOptional = false, helpText, checkboxLable = false }: CustomLabelProps) => (
+const CustomLabel = ({ title, isOptional = false, helpText }: CustomLabelProps) => (
   <>
     {title && typeof title == "string" ? (
       <EuiFlexGroup gutterSize="xs" alignItems="center">
         <EuiFlexItem grow={false}>
-          <EuiText size="s">{checkboxLable ? <h4>{title}</h4> : <h3>{title}</h3>}</EuiText>
+          <EuiText size="s">{<h3>{title}</h3>}</EuiText>
         </EuiFlexItem>
 
         {isOptional ? (
@@ -35,7 +34,7 @@ const CustomLabel = ({ title, isOptional = false, helpText, checkboxLable = fals
 
     {helpText && typeof helpText === "string" ? <span style={{ fontWeight: 200, fontSize: "12px" }}>{helpText}</span> : helpText}
 
-    {checkboxLable ? null : <EuiSpacer size="s" />}
+    <EuiSpacer size="s" />
   </>
 );
 

diff --git a/...ges/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx b/...ges/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx
@@ -6,6 +6,7 @@
 import { EuiCompressedCheckbox, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from "@elastic/eui";
 import CustomLabel from "../../../../components/CustomLabel";
 import React, { ChangeEvent } from "react";
+import { CheckBoxLabel } from "../../../Snapshots/helper";
 
 interface SnapshotAdvancedSettingsProps {
   includeGlobalState: boolean;
@@ -41,7 +42,7 @@ const SnapshotAdvancedSettings = ({
   <div>
     <EuiCompressedCheckbox
       id="include_global_state"
-      label={<CustomLabel title="Include cluster state in snapshots" checkboxLable={true} />}
+      label={<CheckBoxLabel title="Include cluster state in snapshots" />}
       checked={includeGlobalState}
       onChange={onIncludeGlobalStateToggle}
     />
@@ -51,10 +52,9 @@ const SnapshotAdvancedSettings = ({
     <EuiCompressedCheckbox
       id="ignore_unavailable"
       label={
-        <CustomLabel
+        <CheckBoxLabel
           title="Ignore unavailable indices"
           helpText="Instead of failing snapshot, ignore any indexes that are unavailable or do not exist."
-          checkboxLable={true}
         />
       }
       checked={ignoreUnavailable}
@@ -65,13 +65,7 @@ const SnapshotAdvancedSettings = ({
 
     <EuiCompressedCheckbox
       id="partial"
-      label={
-        <CustomLabel
-          title="Allow partial snapshots"
-          helpText="Allow partial snapshots if one or more shards failed to store."
-          checkboxLable={true}
-        />
-      }
+      label={<CheckBoxLabel title="Allow partial snapshots" helpText="Allow partial snapshots if one or more shards failed to store." />}
       checked={partial}
       onChange={onPartialToggle}
     />

diff --git a/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx b/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx
@@ -579,9 +579,9 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
           <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />
         ) : (
           <>
-            <EuiTitle size="l">
+            <EuiText size="s">
               <h1>{isEdit ? "Edit" : "Create"} policy</h1>
-            </EuiTitle>
+            </EuiText>
             {subTitleText}
             <EuiSpacer />
           </>
@@ -928,7 +928,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
 
         <EuiSpacer />
 
-        <EuiFlexGroup justifyContent="flexEnd">
+        <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
           <EuiFlexItem grow={false}>
             <EuiSmallButtonEmpty onClick={this.onClickCancel}>Cancel</EuiSmallButtonEmpty>
           </EuiFlexItem>

diff --git a/.../pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap b/.../pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap
@@ -821,7 +821,7 @@ Object {
             class="euiFlyoutFooter"
           >
             <div
-              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+              class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
               <div
                 class="euiFlexItem euiFlexItem--flexGrowZero"

diff --git a/...ic/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx b/...ic/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx
@@ -426,9 +426,9 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent<SnapshotPolicyDet
           <>
             <EuiFlexGroup style={{ padding: "0px 10px" }} justifyContent="spaceBetween" alignItems="center">
               <EuiFlexItem grow={false}>
-                <EuiTitle size="m">
-                  <span title={policyId}>{_.truncate(policyId)}</span>
-                </EuiTitle>
+                <EuiText size="s">
+                  <h1>{_.truncate(policyId)}</h1>
+                </EuiText>
               </EuiFlexItem>
 
               <EuiFlexItem grow={false}>

diff --git a/public/pages/Snapshots/components/CreateSnapshotFlyout/CreateSnapshotFlyout.tsx b/public/pages/Snapshots/components/CreateSnapshotFlyout/CreateSnapshotFlyout.tsx
@@ -259,7 +259,14 @@ export class CreateSnapshotFlyout extends MDSEnabledComponent<CreateSnapshotProp
 
           <EuiSpacer size="l" />
 
-          <EuiAccordion id="advanced_settings_accordian" buttonContent="Advanced options">
+          <EuiAccordion
+            id="advanced_settings_accordian"
+            buttonContent={
+              <EuiText size="s">
+                <h3>Advanced options</h3>
+              </EuiText>
+            }
+          >
             <EuiSpacer size="m" />
 
             <SnapshotAdvancedSettings

diff --git a/public/pages/Snapshots/containers/Snapshots/Snapshots.tsx b/public/pages/Snapshots/containers/Snapshots/Snapshots.tsx
@@ -294,29 +294,30 @@ export class Snapshots extends MDSEnabledComponent<SnapshotsProps, SnapshotsStat
       if (response.ok) {
         this.onRestore(true, response);
       } else {
-        this.onRestore(false, JSON.parse(response.error).error);
+        this.onRestore(false, response);
       }
     } catch (err) {
       this.context.notifications.toasts.addDanger(getErrorMessage(err, "There was a problem restoring the snapshot."));
     }
   };
 
-  onRestore = (success: boolean, error: object = {}) => {
+  onRestore = (success: boolean, response: object = {}) => {
     const { selectedItems } = this.state;
     let errorMessage: string | undefined;
     if (!success) {
       let optionalMessage = "";
+      const errorString = response.error || JSON.stringify(response);
 
-      if (error.reason.indexOf("open index with same name") >= 0) {
+      if (errorString.indexOf("open index with same name") >= 0) {
         optionalMessage = "You have an index with the same name. Try a different prefix.";
       }
-      errorMessage = `${optionalMessage}`;
+      errorMessage = `${optionalMessage} ${errorString}`;
     }
 
     const toasts = success
-      ? getToasts("success_restore_toast", errorMessage, selectedItems[0].id, this.onClickTab)
+      ? getToasts("success_restore_toast", undefined, selectedItems[0].id, this.onClickTab)
       : getToasts("error_restore_toast", errorMessage, selectedItems[0].id, this.onOpenError);
-    this.setState({ toasts, error: error });
+    this.setState({ toasts, error: response.error });
   };
 
   onOpenError = () => {
@@ -534,7 +535,7 @@ export class Snapshots extends MDSEnabledComponent<SnapshotsProps, SnapshotsStat
       <EuiSmallButton disabled={selectedItems.length !== 1} onClick={this.onClickRestore} color="primary" data-test-subj="restoreButton">
         Restore
       </EuiSmallButton>,
-      <EuiSmallButton onClick={this.onClickCreate} fill={true} data-test-subj="takeSnapshotButton">
+      <EuiSmallButton iconType="plus" onClick={this.onClickCreate} fill={true} data-test-subj="takeSnapshotButton">
         Take snapshot
       </EuiSmallButton>,
     ];
@@ -555,6 +556,7 @@ export class Snapshots extends MDSEnabledComponent<SnapshotsProps, SnapshotsStat
         id: "Take snapshot",
         label: "Take snapshot",
         fill: true,
+        iconType: "plus",
         run: this.onClickCreate,
         testId: "takeSnapshot",
         controlType: "button",
@@ -612,13 +614,11 @@ export class Snapshots extends MDSEnabledComponent<SnapshotsProps, SnapshotsStat
 
     const { HeaderControl } = getNavigationUI();
     const { setAppRightControls, setAppDescriptionControls } = getApplication();
-    const showTitle = useNewUX 
-      ? undefined 
-      : (
-        <EuiText size="s">
-          <h1>Snapshots</h1>
-        </EuiText>
-      );
+    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/Snapshots/helper.tsx b/public/pages/Snapshots/helper.tsx
@@ -71,15 +71,17 @@ export const getToasts = (id: string, message: string | undefined, snapshotId: s
 
 interface CheckboxLabelProps {
   title: string;
-  helpText: string;
+  helpText?: string;
 }
 
 export const CheckBoxLabel = ({ title, helpText }: CheckboxLabelProps) => (
   <>
     <EuiText size="s">{title}</EuiText>
-    <EuiText size="xs" style={{ fontWeight: "200" }}>
-      {helpText}
-    </EuiText>
+    {helpText ? (
+      <EuiText size="xs" style={{ fontWeight: "200" }}>
+        {helpText}
+      </EuiText>
+    ) : null}
   </>
 );
 

diff --git a/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx b/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx
@@ -18,14 +18,20 @@ interface FlyoutFooterProps {
 }
 
 const FlyoutFooter = ({ edit, action, disabledAction = false, onClickCancel, onClickAction, save, restore, text }: FlyoutFooterProps) => (
-  <EuiFlexGroup justifyContent="flexEnd">
+  <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
     <EuiFlexItem grow={false}>
       <EuiSmallButtonEmpty onClick={onClickCancel} flush="left" data-test-subj="flyout-footer-cancel-button">
         Cancel
       </EuiSmallButtonEmpty>
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
-      <EuiSmallButton disabled={disabledAction} onClick={onClickAction} fill data-test-subj="flyout-footer-action-button" iconType={"Add" ? "plusInCircle" : "plus"}>
+      <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
@@ -2,7 +2,7 @@
 
 exports[`<FlyoutFooter /> spec renders the component 1`] = `
 <div
-  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+  class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
 >
   <div
     class="euiFlexItem euiFlexItem--flexGrowZero"