Fit and Finish UX changes (#1179)

* Fixed some Fit and Finish UX changes Signed-off-by: Kshitij Tandon <tandonks@amazon.com> * Fixed a minor issue in Notification modal Signed-off-by: Kshitij Tandon <tandonks@amazon.com> * Updated artifacts to v3 Signed-off-by: Kshitij Tandon <tandonks@amazon.com> --------- Signed-off-by: Kshitij Tandon <tandonks@amazon.com>
opensearch-project · Sep 19, 2024 · 8d4e01f · 8d4e01f
1 parent a343286
commit 8d4e01f
Show file tree

Hide file tree

Showing 21 changed files with 220 additions and 201 deletions.
diff --git a/.github/workflows/cypress-workflow.yml b/.github/workflows/cypress-workflow.yml
@@ -82,13 +82,13 @@ jobs:
           wait-on: 'http://localhost:5601'
           browser: chrome
       # Screenshots are only captured on failure, will change this once we do visual regression tests
-      - uses: actions/upload-artifact@v1
+      - uses: actions/upload-artifact@v3
         if: failure()
         with:
           name: cypress-screenshots
           path: OpenSearch-Dashboards/plugins/index-management-dashboards-plugin/cypress/screenshots
       # Test run video was always captured, so this action uses "always()" condition
-      - uses: actions/upload-artifact@v1
+      - uses: actions/upload-artifact@v3
         if: always()
         with:
           name: cypress-videos

diff --git a/...exTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap b/...exTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap
@@ -211,7 +211,7 @@ exports[`<CreateIndexTemplate /> spec render template pages 1`] = `
       </button>
     </div>
     <div
-      class="euiSpacer euiSpacer--l"
+      class="euiSpacer euiSpacer--m"
     />
     <div
       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"

diff --git a/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx b/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
@@ -387,7 +387,7 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
               </EuiTab>
             ))}
           </EuiTabs>
-          <EuiSpacer />
+          <EuiSpacer size="m" />
         </>
       ) : null}
       {subCompontentProps.readonly ? null : (

diff --git a/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx b/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
@@ -150,7 +150,7 @@ export default function IndexDetail(props: IndexDetailModalProps) {
         mode: IndicesUpdateMode.settings,
         content: (
           <>
-            <EuiSpacer />
+            <EuiSpacer size="m" />
             <EuiPanel>
               <EuiText size="s">
                 <h2>Index settings</h2>
@@ -168,7 +168,7 @@ export default function IndexDetail(props: IndexDetailModalProps) {
         mode: IndicesUpdateMode.mappings,
         content: (
           <>
-            <EuiSpacer />
+            <EuiSpacer size="m" />
             <EuiPanel>
               <EuiText size="s">
                 <h2>Index mappings</h2>
@@ -206,7 +206,7 @@ export default function IndexDetail(props: IndexDetailModalProps) {
         mode: IndicesUpdateMode.alias,
         content: (
           <>
-            <EuiSpacer />
+            <EuiSpacer size="m" />
             <EuiPanel>
               <EuiText size="s">
                 <h2>Index alias</h2>

diff --git a/public/pages/Indices/components/IndexControls/IndexControls.tsx b/public/pages/Indices/components/IndexControls/IndexControls.tsx
@@ -15,6 +15,7 @@ import {
   EuiSearchBar,
   EuiCompressedSwitch,
   EuiButtonEmpty,
+  EuiToolTip,
 } from "@elastic/eui";
 import { DataStream, ManagedCatIndex } from "../../../../../server/models/interfaces";
 import IndicesActions from "../../containers/IndicesActions";
@@ -96,7 +97,9 @@ export default class IndexControls extends Component<IndexControlsProps, IndexCo
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButtonIcon iconType="refresh" data-test-subj="refreshButton" display="base" size="s" />
+            <EuiToolTip content="Refresh">
+              <EuiButtonIcon iconType="refresh" data-test-subj="refreshButton" display="base" size="s" onClick={onRefresh} />
+            </EuiToolTip>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <IndicesActions

diff --git a/public/pages/Indices/components/NotificationModal/NotificationModal.tsx b/public/pages/Indices/components/NotificationModal/NotificationModal.tsx
@@ -190,142 +190,136 @@ const Notifications = ({ onClose, visible }: NotificationsProps) => {
           </EuiText>
         </EuiModalHeaderTitle>
         <EuiFlexItem grow={false}>
-          <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
+          <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank" iconSide="right">
             Manage channels
           </EuiSmallButton>
         </EuiFlexItem>
       </EuiModalHeader>
       <EuiModalBody>
-        <>
-          {noPermission ? (
-            <EuiPanel>
-              <EuiEmptyPrompt
-                iconType="alert"
-                iconColor="danger"
-                title={
-                  <EuiText size="s">
-                    {" "}
-                    <h2>Error loading Notification settings</h2>{" "}
-                  </EuiText>
-                }
-                body={
-                  <EuiText size="s">
-                    {" "}
-                    <p>You do not have permissions to view Notification settings. Contact your administrator to request permissions.</p>
-                  </EuiText>
-                }
-              />
-            </EuiPanel>
-          ) : (
-            <EuiPanel>
-              {submitClicked && allErrors.length ? (
-                <EuiCallOut iconType="iInCircle" color="danger" title="Address the following error(s) in the form">
-                  <ul>
-                    {allErrors.reduce((total, [key, errors]) => {
-                      const pattern = /^dataSource\.(\d+)\.(\w+)$/;
-                      const matchResult = key.match(pattern);
-                      if (matchResult) {
-                        const index = matchResult[1];
-                        const itemField = matchResult[2];
-                        const notificationItem = (field.getValues().dataSource || [])[parseInt(index, 10)];
-                        const errorMessagePrefix = `${notificationItem.title} — ${
-                          FieldMapLabel[itemField as keyof typeof FieldMapLabel]
-                        }: `;
-                        return [
-                          ...total,
-                          ...(errors || []).map((item) => (
-                            <li key={`${errorMessagePrefix}${item}`} className="ISM-notifications-first-letter-uppercase">
-                              {errorMessagePrefix}
-                              {item}
-                            </li>
-                          )),
-                        ];
-                      }
+        {noPermission ? (
+          <EuiEmptyPrompt
+            iconType="alert"
+            iconColor="danger"
+            title={
+              <EuiText size="s">
+                {" "}
+                <h2>Error loading Notification settings</h2>{" "}
+              </EuiText>
+            }
+            body={
+              <EuiText size="s">
+                {" "}
+                <p>You do not have permissions to view Notification settings. Contact your administrator to request permissions.</p>
+              </EuiText>
+            }
+          />
+        ) : (
+          <>
+            {submitClicked && allErrors.length ? (
+              <EuiCallOut iconType="iInCircle" color="danger" title="Address the following error(s) in the form">
+                <ul>
+                  {allErrors.reduce((total, [key, errors]) => {
+                    const pattern = /^dataSource\.(\d+)\.(\w+)$/;
+                    const matchResult = key.match(pattern);
+                    if (matchResult) {
+                      const index = matchResult[1];
+                      const itemField = matchResult[2];
+                      const notificationItem = (field.getValues().dataSource || [])[parseInt(index, 10)];
+                      const errorMessagePrefix = `${notificationItem.title} — ${FieldMapLabel[itemField as keyof typeof FieldMapLabel]}: `;
+                      return [
+                        ...total,
+                        ...(errors || []).map((item) => (
+                          <li key={`${errorMessagePrefix}${item}`} className="ISM-notifications-first-letter-uppercase">
+                            {errorMessagePrefix}
+                            {item}
+                          </li>
+                        )),
+                      ];
+                    }
 
-                      return total;
-                    }, [] as ReactChild[])}
-                  </ul>
-                </EuiCallOut>
-              ) : null}
-              <EuiSpacer />
-              {(values.dataSource || []).map((record) => {
-                const { value, onChange, ...others } = field.registerField<ILronPlainConfig["channels"]>({
-                  name: ["dataSource", `${record.index}`, FieldEnum.channels],
-                  rules: [
-                    {
-                      validator(rule, value) {
-                        const values = field.getValues();
-                        const item = values.dataSource?.[record.index];
-                        if (item?.[FieldEnum.failure] || item?.[FieldEnum.success]) {
-                          if (!value || !value.length) {
-                            return Promise.reject(VALIDATE_ERROR_FOR_CHANNELS);
-                          }
+                    return total;
+                  }, [] as ReactChild[])}
+                </ul>
+              </EuiCallOut>
+            ) : null}
+            <EuiSpacer />
+            {(values.dataSource || []).map((record) => {
+              const { value, onChange, ...others } = field.registerField<ILronPlainConfig["channels"]>({
+                name: ["dataSource", `${record.index}`, FieldEnum.channels],
+                rules: [
+                  {
+                    validator(rule, value) {
+                      const values = field.getValues();
+                      const item = values.dataSource?.[record.index];
+                      if (item?.[FieldEnum.failure] || item?.[FieldEnum.success]) {
+                        if (!value || !value.length) {
+                          return Promise.reject(VALIDATE_ERROR_FOR_CHANNELS);
                         }
+                      }
 
-                        return Promise.resolve("");
-                      },
+                      return Promise.resolve("");
                     },
-                  ],
-                });
-                return (
-                  <CustomFormRow
-                    label={
-                      <div className="ISM-notifications-first-letter-uppercase">
-                        <EuiText size="s">
-                          {" "}
-                          <h3>{record.title}</h3>{" "}
-                        </EuiText>
-                      </div>
-                    }
-                    helpText={ActionTypeMapDescription[getKeyByValue(ActionTypeMapTitle, record.title) as ActionType]}
-                    direction="hoz"
-                    key={record.action_name}
-                  >
-                    <>
-                      <CustomFormRow label={LABEL_FOR_CONDITION}>
-                        <EuiFlexGroup alignItems="flexStart">
-                          <EuiFlexItem>
-                            <AllBuiltInComponents.CheckBox
-                              {...field.registerField({
-                                name: ["dataSource", `${record.index}`, FieldEnum.failure],
-                              })}
-                              data-test-subj={["dataSource", `${record.index}`, FieldEnum.failure].join(".")}
-                              label="Has failed"
-                            />
-                          </EuiFlexItem>
-                          <EuiFlexItem>
-                            <AllBuiltInComponents.CheckBox
-                              {...field.registerField({
-                                name: ["dataSource", `${record.index}`, FieldEnum.success],
-                              })}
-                              data-test-subj={["dataSource", `${record.index}`, FieldEnum.success].join(".")}
-                              label="Has completed"
-                            />
-                          </EuiFlexItem>
-                        </EuiFlexGroup>
-                      </CustomFormRow>
-                      {field.getValue(["dataSource", `${record.index}`, FieldEnum.failure]) ||
-                      field.getValue(["dataSource", `${record.index}`, FieldEnum.success]) ? (
-                        <>
-                          <EuiSpacer />
-                          <CustomFormRow
-                            label={FieldMapLabel[FieldEnum.channels]}
-                            isInvalid={!!field.getError(["dataSource", `${record.index}`, FieldEnum.channels])}
-                            error={field.getError(["dataSource", `${record.index}`, FieldEnum.channels])}
-                            data-test-subj={["dataSource", `${record.index}`, FieldEnum.channels].join(".")}
-                          >
-                            <ChannelSelect {...others} value={value} onChange={onChange} />
-                          </CustomFormRow>
-                        </>
-                      ) : null}
-                    </>
-                  </CustomFormRow>
-                );
-              })}
-              <EuiSpacer />
-            </EuiPanel>
-          )}
-        </>
+                  },
+                ],
+              });
+              return (
+                <CustomFormRow
+                  label={
+                    <div className="ISM-notifications-first-letter-uppercase">
+                      <EuiText size="s">
+                        {" "}
+                        <h3>{record.title}</h3>{" "}
+                      </EuiText>
+                    </div>
+                  }
+                  helpText={ActionTypeMapDescription[getKeyByValue(ActionTypeMapTitle, record.title) as ActionType]}
+                  direction="hoz"
+                  key={record.action_name}
+                >
+                  <>
+                    <CustomFormRow label={LABEL_FOR_CONDITION}>
+                      <EuiFlexGroup alignItems="flexStart">
+                        <EuiFlexItem>
+                          <AllBuiltInComponents.CheckBox
+                            {...field.registerField({
+                              name: ["dataSource", `${record.index}`, FieldEnum.failure],
+                            })}
+                            data-test-subj={["dataSource", `${record.index}`, FieldEnum.failure].join(".")}
+                            label="Has failed"
+                          />
+                        </EuiFlexItem>
+                        <EuiFlexItem>
+                          <AllBuiltInComponents.CheckBox
+                            {...field.registerField({
+                              name: ["dataSource", `${record.index}`, FieldEnum.success],
+                            })}
+                            data-test-subj={["dataSource", `${record.index}`, FieldEnum.success].join(".")}
+                            label="Has completed"
+                          />
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
+                    </CustomFormRow>
+                    {field.getValue(["dataSource", `${record.index}`, FieldEnum.failure]) ||
+                    field.getValue(["dataSource", `${record.index}`, FieldEnum.success]) ? (
+                      <>
+                        <EuiSpacer />
+                        <CustomFormRow
+                          label={FieldMapLabel[FieldEnum.channels]}
+                          isInvalid={!!field.getError(["dataSource", `${record.index}`, FieldEnum.channels])}
+                          error={field.getError(["dataSource", `${record.index}`, FieldEnum.channels])}
+                          data-test-subj={["dataSource", `${record.index}`, FieldEnum.channels].join(".")}
+                        >
+                          <ChannelSelect {...others} value={value} onChange={onChange} />
+                        </CustomFormRow>
+                      </>
+                    ) : null}
+                  </>
+                </CustomFormRow>
+              );
+            })}
+            <EuiSpacer />
+          </>
+        )}
       </EuiModalBody>
       <EuiModalFooter>
         <UnsavedChangesButtons