[Look&Feel] Notebooks Density and Consistency Improvements (opensearc…

…h-project#2073) * Updated Notebooks Look & Feel Signed-off-by: Dan Dong <[email protected]> * Fixed error Signed-off-by: Dan Dong <[email protected]> * Fixed error Signed-off-by: Dan Dong <[email protected]> * Fixed lint and cypress test errors Signed-off-by: Dan Dong <[email protected]> --------- Signed-off-by: Dan Dong <[email protected]>
sumukhswamy · Aug 22, 2024 · 8ac7ea0 · 8ac7ea0
1 parent 386522c
commit 8ac7ea0
Show file tree

Hide file tree

Showing 15 changed files with 155 additions and 90 deletions.
diff --git a/.cypress/integration/notebooks_test/notebooks.spec.js b/.cypress/integration/notebooks_test/notebooks.spec.js
@@ -135,7 +135,7 @@ describe('Testing paragraphs', () => {
     cy.get('a[data-test-subj="createNotebookPrimaryBtn"]').click();
     cy.get('input[data-test-subj="custom-input-modal-input"]').focus().type(TEST_NOTEBOOK);
     cy.get('button[data-test-subj="custom-input-modal-confirm-button"]').click();
-    cy.get('h1[data-test-subj="notebookTitle"]').contains(TEST_NOTEBOOK).should('exist');
+    cy.get('div[data-test-subj="notebookTitle"]').contains(TEST_NOTEBOOK).should('exist');
   });
 
   beforeEach(() => {
@@ -166,7 +166,7 @@ describe('Testing paragraphs', () => {
 
   it('Has working breadcrumbs', () => {
     cy.get('a[data-test-subj="breadcrumb last"]').contains(TEST_NOTEBOOK).click();
-    cy.get('h1[data-test-subj="notebookTitle"]').contains(TEST_NOTEBOOK).should('exist');
+    cy.get('div[data-test-subj="notebookTitle"]').contains(TEST_NOTEBOOK).should('exist');
     cy.get('a[data-test-subj="breadcrumb"]').contains('Notebooks').click();
     cy.get('h3[data-test-subj="notebookTableTitle"]').should('exist');
     cy.get('a[data-test-subj="breadcrumb first"]').contains('Observability').click();
@@ -336,7 +336,7 @@ describe('Testing paragraphs', () => {
   });
 
   it('Clears outputs', () => {
-    cy.get('h1[data-test-subj="notebookTitle"]').contains(TEST_NOTEBOOK).should('exist');
+    cy.get('div[data-test-subj="notebookTitle"]').contains(TEST_NOTEBOOK).should('exist');
     cy.get('[data-test-subj="notebook-paragraph-actions-button"]').should('exist');
     cy.get('[data-test-subj="notebook-paragraph-actions-button"]').click();
     cy.get('.euiContextMenuItem__text').contains('Clear all outputs').click();
@@ -346,15 +346,15 @@ describe('Testing paragraphs', () => {
   });
 
   it('Runs all paragraphs', () => {
-    cy.get('h1[data-test-subj="notebookTitle"]').contains(TEST_NOTEBOOK).should('exist');
+    cy.get('div[data-test-subj="notebookTitle"]').contains(TEST_NOTEBOOK).should('exist');
     cy.get('[data-test-subj="notebook-paragraph-actions-button"]').click();
     cy.get('.euiContextMenuItem__text').contains('Run all paragraphs').click();
 
     cy.get(`a[href="${SAMPLE_URL}"]`).should('exist');
   });
 
   it('Adds paragraph to top', () => {
-    cy.get('h1[data-test-subj="notebookTitle"]').contains(TEST_NOTEBOOK).should('exist');
+    cy.get('div[data-test-subj="notebookTitle"]').contains(TEST_NOTEBOOK).should('exist');
 
     cy.get('[data-test-subj="notebook-paragraph-actions-button"]').click();
     cy.get('.euiContextMenuItem__text').contains('Add paragraph to top').click();
@@ -364,7 +364,7 @@ describe('Testing paragraphs', () => {
   });
 
   it('Adds paragraph to bottom', () => {
-    cy.get('h1[data-test-subj="notebookTitle"]').contains(TEST_NOTEBOOK).should('exist');
+    cy.get('div[data-test-subj="notebookTitle"]').contains(TEST_NOTEBOOK).should('exist');
     cy.get('[data-test-subj="notebook-paragraph-actions-button"]').click();
     cy.get('.euiContextMenuItem__text').contains('Add paragraph to bottom').click();
     cy.get('.euiContextMenuItem__text').contains('Code block').click();
@@ -374,7 +374,7 @@ describe('Testing paragraphs', () => {
   });
 
   it('Moves paragraphs', () => {
-    cy.get('h1[data-test-subj="notebookTitle"]').contains(TEST_NOTEBOOK).should('exist');
+    cy.get('div[data-test-subj="notebookTitle"]').contains(TEST_NOTEBOOK).should('exist');
     cy.get('.euiButtonIcon[aria-label="Open paragraph menu"').eq(0).click();
     cy.get('.euiContextMenuItem-isDisabled').should('have.length.gte', 2);
     cy.get('.euiContextMenuItem__text').contains('Move to bottom').click();
@@ -383,7 +383,7 @@ describe('Testing paragraphs', () => {
   });
 
   it('Duplicates and renames the notebook', () => {
-    cy.get('h1[data-test-subj="notebookTitle"]').contains(TEST_NOTEBOOK).should('exist');
+    cy.get('div[data-test-subj="notebookTitle"]').contains(TEST_NOTEBOOK).should('exist');
     cy.get('[data-test-subj="notebook-notebook-actions-button"]').click();
     cy.get('.euiContextMenuItem__text').contains('Duplicate notebook').click();
     cy.get('.euiButton__text').contains('Duplicate').click();
@@ -394,14 +394,14 @@ describe('Testing paragraphs', () => {
     cy.get('.euiButton__text').last().contains('Rename').click();
     cy.reload();
 
-    cy.get('.euiTitle')
+    cy.get('.euiText')
       .contains(TEST_NOTEBOOK + ' (rename)')
       .should('exist');
     cy.get(`a[href="${SAMPLE_URL}"]`).should('have.length.gte', 2);
   });
 
   it('Deletes paragraphs', () => {
-    cy.get('h1[data-test-subj="notebookTitle"]').contains(TEST_NOTEBOOK).should('exist');
+    cy.get('div[data-test-subj="notebookTitle"]').contains(TEST_NOTEBOOK).should('exist');
     cy.get('[data-test-subj="notebook-paragraph-actions-button"]').click();
     cy.get('.euiContextMenuItem__text').contains('Delete all paragraphs').click();
     cy.get('button[data-test-subj="confirmModalConfirmButton"]').click();

diff --git a/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap b/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap
@@ -16,11 +16,13 @@ exports[`<NoteTable /> spec renders the component 1`] = `
         <div
           class="euiPageHeaderSection"
         >
-          <h1
-            class="euiTitle euiTitle--large"
+          <div
+            class="euiText euiText--small"
           >
-            Notebooks
-          </h1>
+            <h1>
+              Notebooks
+            </h1>
+          </div>
         </div>
       </header>
       <div
@@ -935,11 +937,13 @@ exports[`<NoteTable /> spec renders the empty component 1`] = `
         <div
           class="euiPageHeaderSection"
         >
-          <h1
-            class="euiTitle euiTitle--large"
+          <div
+            class="euiText euiText--small"
           >
-            Notebooks
-          </h1>
+            <h1>
+              Notebooks
+            </h1>
+          </div>
         </div>
       </header>
       <div
@@ -1094,7 +1098,7 @@ exports[`<NoteTable /> spec renders the empty component 1`] = `
               class="euiSpacer euiSpacer--m"
             />
             <div
-              class="euiText euiText--medium"
+              class="euiText euiText--small"
             >
               <div
                 class="euiTextColor euiTextColor--subdued"

diff --git a/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap b/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap
@@ -152,12 +152,14 @@ exports[`<Notebook /> spec Renders the empty component 1`] = `
       <div
         class="euiSpacer euiSpacer--s"
       />
-      <h1
-        class="euiTitle euiTitle--large"
+      <div
+        class="euiText euiText--small"
         data-test-subj="notebookTitle"
       >
-        sample-notebook-1
-      </h1>
+        <h1>
+          sample-notebook-1
+        </h1>
+      </div>
       <div
         class="euiSpacer euiSpacer--l"
       />
@@ -171,7 +173,7 @@ exports[`<Notebook /> spec Renders the empty component 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
-            class="euiText euiText--medium"
+            class="euiText euiText--small"
           >
             <div>
               <p>
@@ -203,7 +205,7 @@ exports[`<Notebook /> spec Renders the empty component 1`] = `
                 No paragraphs
               </h2>
               <div
-                class="euiText euiText--medium"
+                class="euiText euiText--small"
               >
                 Add a paragraph to compose your document or story. Notebooks now support two types of input:
               </div>
@@ -426,10 +428,12 @@ exports[`<Notebook /> spec Renders the visualization component 1`] = `
       <div
         class="euiSpacer euiSpacer--s"
       />
-      <h1
-        class="euiTitle euiTitle--large"
+      <div
+        class="euiText euiText--small"
         data-test-subj="notebookTitle"
-      />
+      >
+        <h1 />
+      </div>
       <div
         class="euiSpacer euiSpacer--l"
       />
@@ -485,7 +489,7 @@ exports[`<Notebook /> spec Renders the visualization component 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
-            class="euiText euiText--medium"
+            class="euiText euiText--small"
           >
             <div>
               <p>
@@ -517,7 +521,7 @@ exports[`<Notebook /> spec Renders the visualization component 1`] = `
                 No paragraphs
               </h2>
               <div
-                class="euiText euiText--medium"
+                class="euiText euiText--small"
               >
                 Add a paragraph to compose your document or story. Notebooks now support two types of input:
               </div>

diff --git a/...nents/notebooks/components/helpers/__tests__/__snapshots__/modal_containers.test.tsx.snap b/...nents/notebooks/components/helpers/__tests__/__snapshots__/modal_containers.test.tsx.snap
@@ -8,14 +8,24 @@ exports[`modal_containers spec render delete notebooks modal 1`] = `
   >
     <EuiModalHeader>
       <EuiModalHeaderTitle>
-        title
+        <EuiText
+          size="s"
+        >
+          <h2>
+            title
+          </h2>
+        </EuiText>
       </EuiModalHeaderTitle>
     </EuiModalHeader>
     <EuiModalBody>
-      <EuiText>
+      <EuiText
+        size="s"
+      >
         message
       </EuiText>
-      <EuiText>
+      <EuiText
+        size="s"
+      >
         The action cannot be undone.
       </EuiText>
       <EuiSpacer />
@@ -69,7 +79,13 @@ exports[`modal_containers spec render get custom modal 1`] = `
   >
     <EuiModalHeader>
       <EuiModalHeaderTitle>
-        title
+        <EuiText
+          size="s"
+        >
+          <h2>
+            title
+          </h2>
+        </EuiText>
       </EuiModalHeaderTitle>
     </EuiModalHeader>
     <EuiModalBody>

diff --git a/...components/helpers/custom_modals/__tests__/__snapshots__/custom_input_modal.test.tsx.snap b/...components/helpers/custom_modals/__tests__/__snapshots__/custom_input_modal.test.tsx.snap
@@ -8,7 +8,13 @@ exports[`<CustomInputModal /> spec renders the component 1`] = `
   >
     <EuiModalHeader>
       <EuiModalHeaderTitle>
-        title
+        <EuiText
+          size="s"
+        >
+          <h2>
+            title
+          </h2>
+        </EuiText>
       </EuiModalHeaderTitle>
     </EuiModalHeader>
     <EuiModalBody>
@@ -58,7 +64,13 @@ exports[`<CustomInputModal /> spec renders the component 2`] = `
   >
     <EuiModalHeader>
       <EuiModalHeaderTitle>
-        title
+        <EuiText
+          size="s"
+        >
+          <h2>
+            title
+          </h2>
+        </EuiText>
       </EuiModalHeaderTitle>
     </EuiModalHeader>
     <EuiModalBody>

diff --git a/public/components/notebooks/components/helpers/custom_modals/custom_input_modal.tsx b/public/components/notebooks/components/helpers/custom_modals/custom_input_modal.tsx
@@ -16,6 +16,7 @@ import {
   EuiCompressedFormRow,
   EuiCompressedFieldText,
   EuiSmallButton,
+  EuiText,
 } from '@elastic/eui';
 
 /*
@@ -30,7 +31,7 @@ import {
  * btn2txt - string as content to fill "confirm button"
  * openNoteName - Default input value for the field
  */
-type CustomInputModalProps = {
+interface CustomInputModalProps {
   runModal: (value: string) => void;
   closeModal: (
     event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
@@ -41,10 +42,19 @@ type CustomInputModalProps = {
   btn2txt: string;
   openNoteName: string;
   helpText: string;
-};
+}
 
 export const CustomInputModal = (props: CustomInputModalProps) => {
-  const { runModal, closeModal, labelTxt, titletxt, btn1txt, btn2txt, openNoteName, helpText } = props;
+  const {
+    runModal,
+    closeModal,
+    labelTxt,
+    titletxt,
+    btn1txt,
+    btn2txt,
+    openNoteName,
+    helpText,
+  } = props;
   const [value, setValue] = useState(openNoteName || ''); // sets input value
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -55,7 +65,11 @@ export const CustomInputModal = (props: CustomInputModalProps) => {
     <EuiOverlayMask>
       <EuiModal onClose={closeModal} initialFocus="[name=input]">
         <EuiModalHeader>
-          <EuiModalHeaderTitle>{titletxt}</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>
+            <EuiText size="s">
+              <h2>{titletxt}</h2>
+            </EuiText>
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
@@ -73,7 +87,11 @@ export const CustomInputModal = (props: CustomInputModalProps) => {
 
         <EuiModalFooter>
           <EuiSmallButtonEmpty onClick={closeModal}>{btn1txt}</EuiSmallButtonEmpty>
-          <EuiSmallButton data-test-subj="custom-input-modal-confirm-button" onClick={() => runModal(value)} fill>
+          <EuiSmallButton
+            data-test-subj="custom-input-modal-confirm-button"
+            onClick={() => runModal(value)}
+            fill
+          >
             {btn2txt}
           </EuiSmallButton>
         </EuiModalFooter>

diff --git a/public/components/notebooks/components/helpers/custom_modals/reporting_loading_modal.tsx b/public/components/notebooks/components/helpers/custom_modals/reporting_loading_modal.tsx
@@ -7,21 +7,18 @@ import {
   EuiOverlayMask,
   EuiModal,
   EuiModalHeader,
-  EuiTitle,
   EuiText,
   EuiModalBody,
   EuiSpacer,
   EuiFlexGroup,
   EuiFlexItem,
   EuiLoadingSpinner,
-  EuiSmallButton
-} from "@elastic/eui";
-import React from "react";
+  EuiSmallButton,
+} from '@elastic/eui';
+import React from 'react';
 
-export function GenerateReportLoadingModal(props: { setShowLoading: any; }) {
-  const {
-    setShowLoading
-  } = props;
+export function GenerateReportLoadingModal(props: { setShowLoading: any }) {
+  const { setShowLoading } = props;
 
   const closeModal = () => {
     setShowLoading(false);
@@ -36,15 +33,15 @@ export function GenerateReportLoadingModal(props: { setShowLoading: any; }) {
           id="downloadInProgressLoadingModal"
         >
           <EuiModalHeader>
-            <EuiTitle>
-              <EuiText textAlign="right">
-                <h2>Generating report</h2>
-              </EuiText>
-            </EuiTitle>
+            <EuiText size="s" textAlign="right">
+              <h2>Generating report</h2>
+            </EuiText>
           </EuiModalHeader>
           <EuiModalBody>
-            <EuiText>Preparing your file for download.</EuiText>
-            <EuiText>You can close this dialog while we continue in the background.</EuiText>
+            <EuiText size="s">Preparing your file for download.</EuiText>
+            <EuiText size="s">
+              You can close this dialog while we continue in the background.
+            </EuiText>
             <EuiSpacer />
             <EuiFlexGroup justifyContent="center" alignItems="center">
               <EuiFlexItem grow={false}>
@@ -67,4 +64,4 @@ export function GenerateReportLoadingModal(props: { setShowLoading: any; }) {
       </EuiOverlayMask>
     </div>
   );
-};
+}