Fixes small issues on new ISM UI (#88)

* Fixes small issues on new ISM UI Signed-off-by: Drew Baugher <46505179+dbbaughe@users.noreply.github.com> * Updates snapshots Signed-off-by: Drew Baugher <46505179+dbbaughe@users.noreply.github.com> * Updates release notes Signed-off-by: Drew Baugher <46505179+dbbaughe@users.noreply.github.com>
opensearch-project · Sep 10, 2021 · 47e4442 · 47e4442
1 parent 8622f5b
commit 47e4442
Show file tree

Hide file tree

Showing 30 changed files with 269 additions and 186 deletions.
diff --git a/public/components/JSONModal/JSONModal.tsx b/public/components/JSONModal/JSONModal.tsx
@@ -30,13 +30,13 @@ interface JSONModalProps {
 const JSONModal: React.SFC<JSONModalProps> = ({ title, json, onClose }) => {
   return (
     <EuiOverlayMask>
-      <EuiModal onClose={onClose} style={{ padding: "5px 30px" }}>
+      <EuiModal onClose={onClose}>
         <EuiModalHeader>
           <EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
-          <EuiCodeBlock language="json" fontSize="m" paddingSize="m" overflowHeight={600} inline={false} isCopyable>
+          <EuiCodeBlock language="json" fontSize="m" paddingSize="m" inline={false} isCopyable>
             {JSON.stringify(json, null, 4)}
           </EuiCodeBlock>
         </EuiModalBody>

diff --git a/public/components/JSONModal/__snapshots__/JSONModal.test.tsx.snap b/public/components/JSONModal/__snapshots__/JSONModal.test.tsx.snap
@@ -23,7 +23,6 @@ exports[`<JSONModal /> spec renders the component 1`] = `
   >
     <div
       class="euiModal euiModal--maxWidth-default"
-      style="padding: 5px 30px;"
       tabindex="0"
     >
       <button
@@ -53,11 +52,9 @@ exports[`<JSONModal /> spec renders the component 1`] = `
           >
             <div
               class="euiCodeBlock euiCodeBlock--fontMedium euiCodeBlock--paddingMedium euiCodeBlock--hasControls"
-              style="max-height: 600px;"
             >
               <pre
                 class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
-                style="max-height: 600px;"
               >
                 <code
                   class="euiCodeBlock__code json hljs"
@@ -119,13 +116,6 @@ exports[`<JSONModal /> spec renders the component 1`] = `
               <div
                 class="euiCodeBlock__controls"
               >
-                <button
-                  aria-label="Expand"
-                  class="euiButtonIcon euiButtonIcon--text euiCodeBlock__fullScreenButton"
-                  type="button"
-                >
-                  EuiIconMock
-                </button>
                 <div
                   class="euiCodeBlock__copyButton"
                 >

diff --git a/public/pages/PolicyDetails/components/DeleteModal/DeleteModal.tsx b/public/pages/PolicyDetails/components/DeleteModal/DeleteModal.tsx
@@ -13,50 +13,49 @@ import React, { ChangeEvent, Component, Fragment } from "react";
 import { EuiConfirmModal, EuiForm, EuiFormRow, EuiFieldText, EuiOverlayMask, EuiSpacer } from "@elastic/eui";
 
 interface DeleteModalProps {
- policyId: string;
- closeDeleteModal: (event?: any) => void;
- onClickDelete: (event?: any) => void;
+  policyId: string;
+  closeDeleteModal: (event?: any) => void;
+  onClickDelete: (event?: any) => void;
 }
 
 interface DeleteModalState {
- confirmDeleteText: string;
+  confirmDeleteText: string;
 }
 
 export default class DeleteModal extends Component<DeleteModalProps, DeleteModalState> {
- state = { confirmDeleteText: "" };
+  state = { confirmDeleteText: "" };
 
- onChange = (e: ChangeEvent<HTMLInputElement>): void => {
-   this.setState({ confirmDeleteText: e.target.value });
- };
+  onChange = (e: ChangeEvent<HTMLInputElement>): void => {
+    this.setState({ confirmDeleteText: e.target.value });
+  };
 
- render() {
-   const { policyId, closeDeleteModal, onClickDelete } = this.props;
-   const { confirmDeleteText } = this.state;
+  render() {
+    const { policyId, closeDeleteModal, onClickDelete } = this.props;
+    const { confirmDeleteText } = this.state;
 
-   return (
-     <EuiOverlayMask>
-       <EuiConfirmModal
-         title="Delete policy"
-         onCancel={closeDeleteModal}
-         onConfirm={onClickDelete}
-         cancelButtonText="Cancel"
-         confirmButtonText="Delete policy"
-         buttonColor="danger"
-         defaultFocusedButton="confirm"
-         confirmButtonDisabled={confirmDeleteText != "delete"}
-       >
-         <EuiForm>
-           <Fragment>
-             Delete "<strong>{policyId}</strong>" permanently? Indices will no
-             longer be managed using this policy
-           </Fragment>
-           <EuiSpacer size="s" />
-           <EuiFormRow helpText="To confirm deletion, type delete">
-             <EuiFieldText value={confirmDeleteText} placeholder="delete" onChange={this.onChange} data-test-subj="deleteTextField" />
-           </EuiFormRow>
-         </EuiForm>
-       </EuiConfirmModal>
-     </EuiOverlayMask>
-   );
- }
+    return (
+      <EuiOverlayMask>
+        <EuiConfirmModal
+          title="Delete policy"
+          onCancel={closeDeleteModal}
+          onConfirm={onClickDelete}
+          cancelButtonText="Cancel"
+          confirmButtonText="Delete policy"
+          buttonColor="danger"
+          defaultFocusedButton="confirm"
+          confirmButtonDisabled={confirmDeleteText != "delete"}
+        >
+          <EuiForm>
+            <Fragment>
+              Delete "<strong>{policyId}</strong>" permanently? Indices will no longer be managed using this policy.
+            </Fragment>
+            <EuiSpacer size="s" />
+            <EuiFormRow helpText={`To confirm deletion, type "delete".`}>
+              <EuiFieldText value={confirmDeleteText} placeholder="delete" onChange={this.onChange} data-test-subj="deleteTextField" />
+            </EuiFormRow>
+          </EuiForm>
+        </EuiConfirmModal>
+      </EuiOverlayMask>
+    );
+  }
 }
diff --git a/public/pages/PolicyDetails/components/DeleteModal/__snapshots__/DeleteModal.test.tsx.snap b/public/pages/PolicyDetails/components/DeleteModal/__snapshots__/DeleteModal.test.tsx.snap
@@ -69,7 +69,7 @@ exports[`<DeleteModal /> spec renders the component 1`] = `
                   <strong>
                     some_id
                   </strong>
-                  " permanently? Indices will no longer be managed using this policy
+                  " permanently? Indices will no longer be managed using this policy.
                   <div
                     class="euiSpacer euiSpacer--s"
                   />
@@ -101,7 +101,7 @@ exports[`<DeleteModal /> spec renders the component 1`] = `
                         class="euiFormHelpText euiFormRow__text"
                         id="some_html_id-help"
                       >
-                        To confirm deletion, type delete
+                        To confirm deletion, type "delete".
                       </div>
                     </div>
                   </div>

diff --git a/public/pages/VisualCreatePolicy/components/EuiFormCustomLabel/EuiFormCustomLabel.tsx b/public/pages/VisualCreatePolicy/components/EuiFormCustomLabel/EuiFormCustomLabel.tsx
@@ -15,6 +15,7 @@ import { EuiText } from "@elastic/eui";
 interface EuiFormCustomLabelProps {
   title: string;
   helpText?: string;
+  learnMore?: JSX.Element | null | undefined;
   textStyle?: object;
   headerStyle?: object;
   isInvalid?: boolean;
@@ -24,6 +25,7 @@ interface EuiFormCustomLabelProps {
 const EuiFormCustomLabel = ({
   title,
   helpText,
+  learnMore = null,
   textStyle = { marginBottom: "5px" },
   headerStyle = { marginBottom: "2px" },
   isInvalid = false,
@@ -35,7 +37,11 @@ const EuiFormCustomLabel = ({
     <p>
       {" "}
       {/* Keep the <p> tag even if no helpText to remove last child styling on h tags */}
-      {helpText && <span style={{ color: "grey", fontWeight: 200, fontSize: "12px" }}>{helpText}</span>}
+      {helpText && (
+        <span style={{ fontWeight: 200, fontSize: "12px" }}>
+          {helpText} {learnMore}
+        </span>
+      )}
     </p>
   </EuiText>
 );

diff --git a/...CreatePolicy/components/EuiFormCustomLabel/__snapshots__/EuiFormCustomLabel.test.tsx.snap b/...CreatePolicy/components/EuiFormCustomLabel/__snapshots__/EuiFormCustomLabel.test.tsx.snap
@@ -14,9 +14,10 @@ exports[`<EuiFormCustomLabel /> spec renders the component 1`] = `
   <p>
      
     <span
-      style="color: grey; font-weight: 200; font-size: 12px;"
+      style="font-weight: 200; font-size: 12px;"
     >
       Some helpful text
+       
     </span>
   </p>
 </div>

diff --git a/public/pages/VisualCreatePolicy/components/ISMTemplate/ISMTemplate.tsx b/public/pages/VisualCreatePolicy/components/ISMTemplate/ISMTemplate.tsx
@@ -31,6 +31,7 @@ const ISMTemplate = ({ template, onUpdateTemplate, onRemoveTemplate, isFirst }:
       <EuiFlexItem style={{ maxWidth: ISM_TEMPLATE_INPUT_MAX_WIDTH }}>
         <EuiFormRow isInvalid={false} error={null}>
           <EuiComboBox
+            isClearable={false}
             placeholder="Add index patterns"
             noSuggestions
             selectedOptions={template.index_patterns.map((pattern) => ({ label: pattern }))}
@@ -64,7 +65,6 @@ const ISMTemplate = ({ template, onUpdateTemplate, onRemoveTemplate, isFirst }:
               //TODO
               setInvalid(false);
             }}
-            isClearable={true}
             isInvalid={isInvalid}
             data-test-subj="ism-template-index-pattern-input"
           />

diff --git a/...c/pages/VisualCreatePolicy/components/ISMTemplate/__snapshots__/ISMTemplate.test.tsx.snap b/...c/pages/VisualCreatePolicy/components/ISMTemplate/__snapshots__/ISMTemplate.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`<ISMTemplate /> spec renders the component 1`] = `
               class="euiFormControlLayout__childrenWrapper"
             >
               <div
-                class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                class="euiComboBox__inputWrap"
                 data-test-subj="comboBoxInput"
                 tabindex="-1"
               >
@@ -71,18 +71,6 @@ exports[`<ISMTemplate /> spec renders the component 1`] = `
                   />
                 </div>
               </div>
-              <div
-                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-              >
-                <button
-                  aria-label="Clear input"
-                  class="euiFormControlLayoutClearButton"
-                  data-test-subj="comboBoxClearButton"
-                  type="button"
-                >
-                  EuiIconMock
-                </button>
-              </div>
             </div>
           </div>
         </div>

diff --git a/public/pages/VisualCreatePolicy/components/ISMTemplates/ISMTemplates.tsx b/public/pages/VisualCreatePolicy/components/ISMTemplates/ISMTemplates.tsx
@@ -45,7 +45,7 @@ const ISMTemplates = ({ policy, onChangePolicy }: ISMTemplatesProps) => {
         <EuiFlexGroup gutterSize="xs" alignItems="center">
           <EuiFlexItem grow={false}>
             <EuiText>
-              <h3>ISM template</h3>
+              <h3>ISM templates</h3>
             </EuiText>
           </EuiFlexItem>
           <EuiFlexItem>
@@ -57,9 +57,9 @@ const ISMTemplates = ({ policy, onChangePolicy }: ISMTemplatesProps) => {
       }
       titleSize="s"
       subTitleText={
-        <EuiText size="s" style={{ padding: "5px 0px" }}>
-          <p style={{ color: "grey", fontWeight: 200 }}>
-            Specify an ISM template pattern that matches the index to apply the policy.{" "}
+        <EuiText color="subdued" size="s" style={{ padding: "5px 0px" }}>
+          <p style={{ fontWeight: 200 }}>
+            Specify ISM template patterns that match the index to apply the policy.{" "}
             <EuiLink href={DOCUMENTATION_URL} target="_blank">
               Learn more <EuiIcon type="popout" size="s" />
             </EuiLink>

diff --git a/...pages/VisualCreatePolicy/components/ISMTemplates/__snapshots__/ISMTemplates.test.tsx.snap b/...pages/VisualCreatePolicy/components/ISMTemplates/__snapshots__/ISMTemplates.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`<ISMTemplates /> spec renders the component 1`] = `
             class="euiText euiText--medium"
           >
             <h3>
-              ISM template
+              ISM templates
             </h3>
           </div>
         </div>
@@ -46,21 +46,25 @@ exports[`<ISMTemplates /> spec renders the component 1`] = `
         class="euiText euiText--small"
         style="padding: 5px 0px;"
       >
-        <p
-          style="color: grey; font-weight: 200;"
+        <div
+          class="euiTextColor euiTextColor--subdued"
         >
-          Specify an ISM template pattern that matches the index to apply the policy.
-           
-          <a
-            class="euiLink euiLink--primary"
-            href="https://opensearch.org/docs/im-plugin/ism/index/"
-            rel="noopener noreferrer"
-            target="_blank"
+          <p
+            style="font-weight: 200;"
           >
-            Learn more 
-            EuiIconMock
-          </a>
-        </p>
+            Specify ISM template patterns that match the index to apply the policy.
+             
+            <a
+              class="euiLink euiLink--primary"
+              href="https://opensearch.org/docs/im-plugin/ism/index/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Learn more 
+              EuiIconMock
+            </a>
+          </p>
+        </div>
       </div>
     </div>
   </div>

diff --git a/public/pages/VisualCreatePolicy/components/PolicyInfo/__snapshots__/PolicyInfo.test.tsx.snap b/public/pages/VisualCreatePolicy/components/PolicyInfo/__snapshots__/PolicyInfo.test.tsx.snap
@@ -41,9 +41,10 @@ exports[`<PolicyInfo /> spec renders the component 1`] = `
         <p>
            
           <span
-            style="color: grey; font-weight: 200; font-size: 12px;"
+            style="font-weight: 200; font-size: 12px;"
           >
             Specify a unique and descriptive ID that is easy to recognize and remember.
+             
           </span>
         </p>
       </div>
@@ -88,9 +89,10 @@ exports[`<PolicyInfo /> spec renders the component 1`] = `
         <p>
            
           <span
-            style="color: grey; font-weight: 200; font-size: 12px;"
+            style="font-weight: 200; font-size: 12px;"
           >
             Describe the policy.
+             
           </span>
         </p>
       </div>

diff --git a/public/pages/VisualCreatePolicy/components/States/States.tsx b/public/pages/VisualCreatePolicy/components/States/States.tsx
@@ -27,7 +27,7 @@ import { ContentPanel } from "../../../../components/ContentPanel";
 import "brace/theme/github";
 import "brace/mode/json";
 import { Policy, State as StateData } from "../../../../../models/interfaces";
-import { DOCUMENTATION_URL } from "../../../../utils/constants";
+import { STATES_DOCUMENTATION_URL } from "../../../../utils/constants";
 import State from "./State";
 
 interface StatesProps {
@@ -46,12 +46,12 @@ const States = ({ onOpenFlyout, policy, onClickEditState, onClickDeleteState, on
       title={`States (${policy.states.length})`}
       titleSize="s"
       subTitleText={
-        <EuiText size="s" style={{ padding: "5px 0px" }}>
-          <p style={{ color: "grey", fontWeight: 200 }}>
+        <EuiText color="subdued" size="s" style={{ padding: "5px 0px" }}>
+          <p style={{ fontWeight: 200 }}>
             You can think of policies as state machines. "Actions" are the operations ISM performs when an index is in a certain state.
             <br />
             "Transitions" define when to move from one state to another.{" "}
-            <EuiLink href={DOCUMENTATION_URL} target="_blank">
+            <EuiLink href={STATES_DOCUMENTATION_URL} target="_blank">
               Learn more <EuiIcon type="popout" size="s" />
             </EuiLink>
           </p>