Use smaller and compressed varients of buttons and form components (#398

) Signed-off-by: Miki <[email protected]> Signed-off-by: Shenoy Pratik <[email protected]> Co-authored-by: Zhongnan Su <[email protected]> Co-authored-by: Shenoy Pratik <[email protected]>
opensearch-project · Aug 19, 2024 · ff37ada · ff37ada
1 parent af864d3
commit ff37ada
Show file tree

Hide file tree

Showing 21 changed files with 575 additions and 592 deletions.
diff --git a/package.json b/package.json
@@ -20,14 +20,14 @@
   "dependencies": {
     "babel-polyfill": "^6.26.0",
     "cron-validator": "^1.1.1",
-    "dompurify": "^2.4.1",
+    "dompurify": "^3.0.11",
     "elastic-builder": "^2.7.1",
     "enzyme-adapter-react-16": "^1.15.5",
     "exceljs": "^4.4.0",
     "html2canvas": "1.4.1",
     "jest-fetch-mock": "^3.0.3",
     "jquery": "^3.5.0",
-    "jsdom": "18.0.0",
+    "jsdom": "^21.1.2",
     "json-2-csv": "^3.20.0",
     "jspdf": "^2.5.1",
     "react-addons-test-utils": "^15.6.2",

diff --git a/public/components/context_menu/context_menu.js b/public/components/context_menu/context_menu.js
@@ -211,7 +211,7 @@ $(function () {
       $('#reportGenerationProgressModal').remove();
     });
 
-    // close modal with the close EuiButton
+    // close modal with the close EuiSmallButton
     $(document).on('click', '#closeReportGenerationModalButton', function () {
       $('#reportGenerationProgressModal').remove();
     });

diff --git a/public/components/main/__tests__/__snapshots__/main.test.tsx.snap b/public/components/main/__tests__/__snapshots__/main.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`<Main /> panel render component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           type="button"
         >
           <span
@@ -522,7 +522,7 @@ exports[`<Main /> panel render component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           type="button"
         >
           <span
@@ -554,7 +554,7 @@ exports[`<Main /> panel render component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary euiButton--fill"
+          class="euiButton euiButton--primary euiButton--small euiButton--fill"
           id="createReportHomepageButton"
           type="button"
         >
@@ -912,7 +912,7 @@ exports[`<Main /> panel render component 1`] = `
                           />
                           <div>
                             <button
-                              class="euiButton euiButton--primary"
+                              class="euiButton euiButton--primary euiButton--small"
                               type="button"
                             >
                               <span
@@ -975,7 +975,7 @@ exports[`<Main /> panel render component after create success 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           type="button"
         >
           <span
@@ -1470,7 +1470,7 @@ exports[`<Main /> panel render component after create success 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           type="button"
         >
           <span
@@ -1502,7 +1502,7 @@ exports[`<Main /> panel render component after create success 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary euiButton--fill"
+          class="euiButton euiButton--primary euiButton--small euiButton--fill"
           id="createReportHomepageButton"
           type="button"
         >
@@ -1860,7 +1860,7 @@ exports[`<Main /> panel render component after create success 1`] = `
                           />
                           <div>
                             <button
-                              class="euiButton euiButton--primary"
+                              class="euiButton euiButton--primary euiButton--small"
                               type="button"
                             >
                               <span
@@ -1980,7 +1980,7 @@ exports[`<Main /> panel render component after delete success 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           type="button"
         >
           <span
@@ -2475,7 +2475,7 @@ exports[`<Main /> panel render component after delete success 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           type="button"
         >
           <span
@@ -2507,7 +2507,7 @@ exports[`<Main /> panel render component after delete success 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary euiButton--fill"
+          class="euiButton euiButton--primary euiButton--small euiButton--fill"
           id="createReportHomepageButton"
           type="button"
         >
@@ -2865,7 +2865,7 @@ exports[`<Main /> panel render component after delete success 1`] = `
                           />
                           <div>
                             <button
-                              class="euiButton euiButton--primary"
+                              class="euiButton euiButton--primary euiButton--small"
                               type="button"
                             >
                               <span
@@ -2986,7 +2986,7 @@ exports[`<Main /> panel render component after edit success 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           type="button"
         >
           <span
@@ -3481,7 +3481,7 @@ exports[`<Main /> panel render component after edit success 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           type="button"
         >
           <span
@@ -3513,7 +3513,7 @@ exports[`<Main /> panel render component after edit success 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary euiButton--fill"
+          class="euiButton euiButton--primary euiButton--small euiButton--fill"
           id="createReportHomepageButton"
           type="button"
         >
@@ -3871,7 +3871,7 @@ exports[`<Main /> panel render component after edit success 1`] = `
                           />
                           <div>
                             <button
-                              class="euiButton euiButton--primary"
+                              class="euiButton euiButton--primary euiButton--small"
                               type="button"
                             >
                               <span

diff --git a/public/components/main/__tests__/__snapshots__/report_definitions_table.test.tsx.snap b/public/components/main/__tests__/__snapshots__/report_definitions_table.test.tsx.snap
@@ -954,7 +954,7 @@ exports[`<ReportDefinitions /> panel render empty table 1`] = `
                       />
                       <div>
                         <button
-                          class="euiButton euiButton--primary"
+                          class="euiButton euiButton--primary euiButton--small"
                           type="button"
                         >
                           <span

diff --git a/public/components/main/loading_modal/loading_modal.tsx b/public/components/main/loading_modal/loading_modal.tsx
@@ -14,7 +14,6 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiLoadingSpinner,
-  EuiButton,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React, { useState } from 'react';

diff --git a/public/components/main/main.tsx b/public/components/main/main.tsx
@@ -8,7 +8,7 @@ import { i18n } from '@osd/i18n';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiButton,
+  EuiSmallButton,
   EuiTitle,
   // @ts-ignore
   EuiHorizontalRule,
@@ -285,7 +285,7 @@ export function Main(props) {
             </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem component="span" grow={false}>
-            <EuiButton
+            <EuiSmallButton
               onClick={refreshReportsTable}
               iconSide="left"
               iconType="refresh"
@@ -294,7 +294,7 @@ export function Main(props) {
                 'opensearch.reports.main.reports.button.refresh',
                 { defaultMessage: 'Refresh' }
               )}
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiHorizontalRule />
@@ -325,7 +325,7 @@ export function Main(props) {
             </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <EuiSmallButton
               onClick={refreshReportsDefinitionsTable}
               iconSide="left"
               iconType="refresh"
@@ -334,10 +334,10 @@ export function Main(props) {
                 'opensearch.reports.main.reportDefinitions.button.refresh',
                 { defaultMessage: 'Refresh' }
               )}
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
           <EuiFlexItem component="span" grow={false}>
-            <EuiButton
+            <EuiSmallButton
               fill={true}
               onClick={() => {
                 window.location.assign('reports-dashboards#/create');
@@ -348,7 +348,7 @@ export function Main(props) {
                 'opensearch.reports.main.reportDefinitions.button.create',
                 { defaultMessage: 'Create' }
               )}
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiHorizontalRule />

diff --git a/...report_definition_details/__tests__/__snapshots__/report_definition_details.test.tsx.snap b/...report_definition_details/__tests__/__snapshots__/report_definition_details.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`<ReportDefinitionDetails /> panel render 5 hours recurring definition d
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--danger"
+              class="euiButton euiButton--danger euiButton--small"
               id="deleteReportDefinitionButton"
               type="button"
             >
@@ -63,7 +63,7 @@ exports[`<ReportDefinitionDetails /> panel render 5 hours recurring definition d
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary"
+              class="euiButton euiButton--primary euiButton--small"
               id="changeStatusFromDetailsButton"
               type="button"
             >
@@ -82,7 +82,7 @@ exports[`<ReportDefinitionDetails /> panel render 5 hours recurring definition d
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               id="editReportDefinitionButton"
               type="button"
             >
@@ -457,7 +457,7 @@ exports[`<ReportDefinitionDetails /> panel render disabled daily definition, cli
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--danger"
+              class="euiButton euiButton--danger euiButton--small"
               id="deleteReportDefinitionButton"
               type="button"
             >
@@ -476,7 +476,7 @@ exports[`<ReportDefinitionDetails /> panel render disabled daily definition, cli
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary"
+              class="euiButton euiButton--primary euiButton--small"
               id="changeStatusFromDetailsButton"
               type="button"
             >
@@ -495,7 +495,7 @@ exports[`<ReportDefinitionDetails /> panel render disabled daily definition, cli
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               id="editReportDefinitionButton"
               type="button"
             >
@@ -870,7 +870,7 @@ exports[`<ReportDefinitionDetails /> panel render on demand definition details 1
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--danger"
+              class="euiButton euiButton--danger euiButton--small"
               id="deleteReportDefinitionButton"
               type="button"
             >
@@ -889,7 +889,7 @@ exports[`<ReportDefinitionDetails /> panel render on demand definition details 1
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary"
+              class="euiButton euiButton--primary euiButton--small"
               id="changeStatusFromDetailsButton"
               type="button"
             >
@@ -908,7 +908,7 @@ exports[`<ReportDefinitionDetails /> panel render on demand definition details 1
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               id="editReportDefinitionButton"
               type="button"
             >