From 8ac7ea067baed8c9bfcba00cc0d427c130a7e6f8 Mon Sep 17 00:00:00 2001 From: Dan Dong <58446449+danieldong51@users.noreply.github.com> Date: Wed, 21 Aug 2024 19:27:14 -0700 Subject: [PATCH] [Look&Feel] Notebooks Density and Consistency Improvements (#2073) * Updated Notebooks Look & Feel Signed-off-by: Dan Dong * Fixed error Signed-off-by: Dan Dong * Fixed error Signed-off-by: Dan Dong * Fixed lint and cypress test errors Signed-off-by: Dan Dong --------- Signed-off-by: Dan Dong --- .../notebooks_test/notebooks.spec.js | 20 ++++++------- .../__snapshots__/note_table.test.tsx.snap | 22 ++++++++------ .../__snapshots__/notebook.test.tsx.snap | 26 ++++++++++------- .../modal_containers.test.tsx.snap | 24 ++++++++++++--- .../custom_input_modal.test.tsx.snap | 16 ++++++++-- .../custom_modals/custom_input_modal.tsx | 28 ++++++++++++++---- .../custom_modals/reporting_loading_modal.tsx | 29 +++++++++---------- .../components/helpers/modal_containers.tsx | 27 +++++++++++------ .../notebooks/components/note_table.tsx | 8 ++--- .../notebooks/components/notebook.tsx | 17 +++++------ .../__snapshots__/para_output.test.tsx.snap | 2 +- .../__snapshots__/paragraphs.test.tsx.snap | 6 ++-- .../paragraph_components/para_input.tsx | 10 +++++-- .../paragraph_components/para_output.tsx | 1 + .../paragraph_components/paragraphs.tsx | 9 +++--- 15 files changed, 155 insertions(+), 90 deletions(-) diff --git a/.cypress/integration/notebooks_test/notebooks.spec.js b/.cypress/integration/notebooks_test/notebooks.spec.js index f1a6d044c9..6e21785c1f 100644 --- 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,7 +346,7 @@ 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(); @@ -354,7 +354,7 @@ describe('Testing paragraphs', () => { }); 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 index 59bd9e38f2..508ac33e8f 100644 --- 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[` spec renders the component 1`] = `
-

- Notebooks -

+

+ Notebooks +

+
spec renders the empty component 1`] = `
-

- Notebooks -

+

+ Notebooks +

+
spec renders the empty component 1`] = ` class="euiSpacer euiSpacer--m" />
spec Renders the empty component 1`] = `
-

- sample-notebook-1 -

+

+ sample-notebook-1 +

+
@@ -171,7 +173,7 @@ exports[` spec Renders the empty component 1`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" >

@@ -203,7 +205,7 @@ exports[` spec Renders the empty component 1`] = ` No paragraphs

Add a paragraph to compose your document or story. Notebooks now support two types of input:
@@ -426,10 +428,12 @@ exports[` spec Renders the visualization component 1`] = `
-

+ > +

+

@@ -485,7 +489,7 @@ exports[` spec Renders the visualization component 1`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" >

@@ -517,7 +521,7 @@ exports[` spec Renders the visualization component 1`] = ` No paragraphs

Add a paragraph to compose your document or story. Notebooks now support two types of input:
diff --git a/public/components/notebooks/components/helpers/__tests__/__snapshots__/modal_containers.test.tsx.snap b/public/components/notebooks/components/helpers/__tests__/__snapshots__/modal_containers.test.tsx.snap index e4bd51e8a1..ff1a3680a0 100644 --- a/public/components/notebooks/components/helpers/__tests__/__snapshots__/modal_containers.test.tsx.snap +++ b/public/components/notebooks/components/helpers/__tests__/__snapshots__/modal_containers.test.tsx.snap @@ -8,14 +8,24 @@ exports[`modal_containers spec render delete notebooks modal 1`] = ` > - title + +

+ title +

+ - + message - + The action cannot be undone. @@ -69,7 +79,13 @@ exports[`modal_containers spec render get custom modal 1`] = ` > - title + +

+ title +

+ diff --git a/public/components/notebooks/components/helpers/custom_modals/__tests__/__snapshots__/custom_input_modal.test.tsx.snap b/public/components/notebooks/components/helpers/custom_modals/__tests__/__snapshots__/custom_input_modal.test.tsx.snap index e90e493993..4f15d856d0 100644 --- a/public/components/notebooks/components/helpers/custom_modals/__tests__/__snapshots__/custom_input_modal.test.tsx.snap +++ b/public/components/notebooks/components/helpers/custom_modals/__tests__/__snapshots__/custom_input_modal.test.tsx.snap @@ -8,7 +8,13 @@ exports[` spec renders the component 1`] = ` > - title + +

+ title +

+ @@ -58,7 +64,13 @@ exports[` spec renders the component 2`] = ` > - title + +

+ title +

+ 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 index 10ade574a4..a3fdaea88c 100644 --- 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 | React.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) => { @@ -55,7 +65,11 @@ export const CustomInputModal = (props: CustomInputModalProps) => { - {titletxt} + + +

{titletxt}

+ + @@ -73,7 +87,11 @@ export const CustomInputModal = (props: CustomInputModalProps) => { {btn1txt} - runModal(value)} fill> + runModal(value)} + fill + > {btn2txt} 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 index 4f28904d70..d6e586d900 100644 --- 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" > - - -

Generating report

- - + +

Generating report

+ - Preparing your file for download. - You can close this dialog while we continue in the background. + Preparing your file for download. + + You can close this dialog while we continue in the background. + @@ -67,4 +64,4 @@ export function GenerateReportLoadingModal(props: { setShowLoading: any; }) {
); -}; +} diff --git a/public/components/notebooks/components/helpers/modal_containers.tsx b/public/components/notebooks/components/helpers/modal_containers.tsx index 5b31c78a1c..4127675977 100644 --- a/public/components/notebooks/components/helpers/modal_containers.tsx +++ b/public/components/notebooks/components/helpers/modal_containers.tsx @@ -18,7 +18,7 @@ import { EuiModalHeader, EuiModalHeaderTitle, EuiText, - EuiSpacer + EuiSpacer, } from '@elastic/eui'; import { CustomInputModal } from './custom_modals/custom_input_modal'; @@ -38,7 +38,7 @@ export const getCustomModal = ( btn1txt: string, btn2txt: string, openNoteName?: string, - helpText?: string, + helpText?: string ) => { return ( -

Do you want to add sample notebooks? This will also add Dashboards sample flights and logs data if they have not been added.

+ +

+ Do you want to add sample notebooks? This will also add Dashboards sample flights and + logs data if they have not been added. +

+ ); @@ -105,7 +110,7 @@ export const getDeleteModal = ( onConfirm: (event?: React.MouseEvent) => void, title: string, message: string, - confirmMessage?: string, + confirmMessage?: string ) => { return ( @@ -114,11 +119,11 @@ export const getDeleteModal = ( onCancel={onCancel} onConfirm={onConfirm} cancelButtonText="Cancel" - confirmButtonText={confirmMessage || "Delete"} + confirmButtonText={confirmMessage || 'Delete'} buttonColor="danger" defaultFocusedButton="confirm" > - {message} + {message} ); @@ -145,12 +150,16 @@ export const DeleteNotebookModal = ({ - {title} + + +

{title}

+ + - {message} - The action cannot be undone. + {message} + The action cannot be undone. diff --git a/public/components/notebooks/components/note_table.tsx b/public/components/notebooks/components/note_table.tsx index 68995a6f36..e677ddd203 100644 --- a/public/components/notebooks/components/note_table.tsx +++ b/public/components/notebooks/components/note_table.tsx @@ -234,9 +234,9 @@ export function NoteTable({ - +

Notebooks

- + @@ -266,7 +266,7 @@ export function NoteTable({ isOpen={isActionsPopoverOpen} closePopover={() => setIsActionsPopoverOpen(false)} > - + @@ -322,7 +322,7 @@ export function NoteTable({

No notebooks

- + Use notebooks to create post-mortem reports, build live infrastructure
reports, or foster explorative collaborations with data. diff --git a/public/components/notebooks/components/notebook.tsx b/public/components/notebooks/components/notebook.tsx index 146dcbc935..d7d82fabb5 100644 --- a/public/components/notebooks/components/notebook.tsx +++ b/public/components/notebooks/components/notebook.tsx @@ -21,7 +21,6 @@ import { EuiPopover, EuiSpacer, EuiText, - EuiTitle, } from '@elastic/eui'; import CSS from 'csstype'; import moment from 'moment'; @@ -1007,7 +1006,7 @@ export class Notebook extends Component { isOpen={this.state.isReportingActionsPopoverOpen} closePopover={() => this.setState({ isReportingActionsPopoverOpen: false })} > - +
) : null; @@ -1059,7 +1058,7 @@ export class Notebook extends Component { isOpen={this.state.isParaActionsPopoverOpen} closePopover={() => this.setState({ isParaActionsPopoverOpen: false })} > - + )} @@ -1084,7 +1083,7 @@ export class Notebook extends Component { isOpen={this.state.isNoteActionsPopoverOpen} closePopover={() => this.setState({ isNoteActionsPopoverOpen: false })} > - + ) : ( @@ -1109,9 +1108,9 @@ export class Notebook extends Component { )} - +

{this.state.path}

- + {!this.state.savedObjectNotebook && ( @@ -1133,7 +1132,7 @@ export class Notebook extends Component { - {createdText} + {createdText} {this.state.parsedPara.length > 0 ? ( @@ -1198,7 +1197,7 @@ export class Notebook extends Component { isOpen={this.state.isAddParaPopoverOpen} closePopover={() => this.setState({ isAddParaPopoverOpen: false })} > - + )} @@ -1210,7 +1209,7 @@ export class Notebook extends Component {

No paragraphs

- + Add a paragraph to compose your document or story. Notebooks now support two types of input: diff --git a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap index 5c0e7b6fd0..e00e0947fa 100644 --- a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap +++ b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap @@ -11,7 +11,7 @@ exports[` spec renders dashboards visualization outputs 1`] = ` exports[` spec renders markdown outputs 1`] = `
spec renders the component 1`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" >