From 184340bc4d74e604707b4a9a474f7b7e00523df4 Mon Sep 17 00:00:00 2001 From: Joanne Wang Date: Tue, 24 Sep 2024 17:00:45 -0400 Subject: [PATCH] Revert fit and finish changes from 2.17 (#283) * Revert "[Backport 2.17] Fit and Finish UX Fixes Pt 2. (#275)" This reverts commit 5ac0919f4e14366c2d47fb0132c6ef851f9eedb7. Signed-off-by: Joanne Wang * Revert "Fit and Finish UX Fixes (#263) (#269)" This reverts commit b3dd31ce15b68cc74e2e820c997d1ac721996fc7. Signed-off-by: Joanne Wang * Revert "Use TopNavControlButtonData for channel test button (#243) (#268)" This reverts commit 127eae4e4f533d32f45f876d58b1805ec5ab8b21. Signed-off-by: Joanne Wang * Revert "[Fit & Finish] Updated Fit and Finish guidelines (#256) (#259)" This reverts commit fb48dbcd099c1526c46ece90f640e65f32c3234f. Signed-off-by: Joanne Wang --------- Signed-off-by: Joanne Wang --- .../components/ContentPanel/ContentPanel.tsx | 10 +- .../__snapshots__/ContentPanel.test.tsx.snap | 16 +-- public/pages/Channels/Channels.tsx | 13 +-- .../ChannelControls.test.tsx.snap | 10 +- .../ChannelDetails.test.tsx.snap | 74 ++++++------- .../__snapshots__/Channels.test.tsx.snap | 32 ++---- .../DetailsListModal.test.tsx.snap | 52 +-------- .../DetailsTableModal.test.tsx.snap | 104 ++---------------- .../Channels/components/ChannelActions.tsx | 1 - .../Channels/components/ChannelControls.tsx | 6 +- .../components/details/ChannelDetails.tsx | 40 ++++--- .../details/ChannelDetailsActions.tsx | 1 - .../components/modals/DeleteChannelModal.tsx | 11 +- .../components/modals/DetailsListModal.tsx | 7 +- .../components/modals/DetailsTableModal.tsx | 7 +- .../components/modals/MuteChannelModal.tsx | 8 +- public/pages/CreateChannel/CreateChannel.tsx | 13 +-- .../ChannelNamePanel.test.tsx.snap | 8 +- .../__snapshots__/CreateChannel.test.tsx.snap | 10 +- .../modals/CreateRecipientGroupModal.tsx | 7 +- .../modals/CreateSESSenderModal.tsx | 7 +- .../components/modals/CreateSenderModal.tsx | 7 +- public/pages/Emails/CreateRecipientGroup.tsx | 15 ++- public/pages/Emails/CreateSESSender.tsx | 15 ++- public/pages/Emails/CreateSender.tsx | 15 ++- public/pages/Emails/EmailGroups.tsx | 12 +- public/pages/Emails/EmailSenders.tsx | 14 +-- .../CreateRecipientGroup.test.tsx.snap | 10 +- .../CreateSESSender.test.tsx.snap | 30 ++--- .../__snapshots__/CreateSender.test.tsx.snap | 30 ++--- .../__snapshots__/EmailGroups.test.tsx.snap | 10 +- .../__snapshots__/EmailSenders.test.tsx.snap | 20 ++-- .../RecipientGroupsTable.test.tsx.snap | 22 ++-- .../__snapshots__/SendersTable.test.tsx.snap | 34 ++---- .../SendersTableControls.test.tsx.snap | 12 +- .../forms/CreateRecipientGroupForm.tsx | 4 +- .../components/forms/CreateSESSenderForm.tsx | 4 +- .../components/forms/CreateSenderForm.tsx | 4 +- .../modals/DeleteRecipientGroupModal.tsx | 10 +- .../components/modals/DeleteSenderModal.tsx | 11 +- .../tables/RecipientGroupsTable.tsx | 21 +--- .../components/tables/SESSendersTable.tsx | 16 +-- .../Emails/components/tables/SendersTable.tsx | 20 +--- .../tables/SendersTableControls.tsx | 5 +- .../__snapshots__/Main.test.tsx.snap | 32 ++---- 45 files changed, 265 insertions(+), 545 deletions(-) diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx index 4a4b11fc..a6660e2b 100644 --- a/public/components/ContentPanel/ContentPanel.tsx +++ b/public/components/ContentPanel/ContentPanel.tsx @@ -14,7 +14,7 @@ import React from 'react'; interface ContentPanelProps { title?: string; - titleSize?: 'xs' | 's' | 'm'; + titleSize?: 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l'; total?: number; bodyStyles?: object; panelStyles?: object; @@ -25,7 +25,7 @@ interface ContentPanelProps { const ContentPanel: React.SFC = ({ title = '', - titleSize = 's', + titleSize = 'l', total = undefined, bodyStyles = {}, panelStyles = {}, @@ -41,14 +41,14 @@ const ContentPanel: React.SFC = ({ > -

+

{title} {total !== undefined ? ( {` (${total})`} ) : null} -

+ {actions ? ( @@ -70,7 +70,7 @@ const ContentPanel: React.SFC = ({ -
{children}
+
{children}
); diff --git a/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap b/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap index 8c25393c..4a277201 100644 --- a/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap +++ b/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap @@ -11,11 +11,11 @@ exports[` spec renders the component 1`] = `
-

Testing -

+
spec renders the component 1`] = ` class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall" />
Testing ContentPanel @@ -57,18 +57,18 @@ exports[` spec renders with empty actions 1`] = `
-

Testing -

+
Testing ContentPanel diff --git a/public/pages/Channels/Channels.tsx b/public/pages/Channels/Channels.tsx index 77441eec..7d3bea3b 100644 --- a/public/pages/Channels/Channels.tsx +++ b/public/pages/Channels/Channels.tsx @@ -14,7 +14,6 @@ import { EuiTableSortingType, EuiTitle, SortDirection, - EuiText, } from '@elastic/eui'; import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table'; import { Pagination } from '@elastic/eui/src/components/basic_table/pagination_bar'; @@ -258,8 +257,8 @@ export class Channels extends MDSEnabledComponent isSelectable={true} selection={selection} noItemsMessage={

No channels to display

} - body={"To send or receive notifications, you will need to create a notification channel."} + title={

No channels to display

} + body="To send or receive notifications, you will need to create a notification channel." actions={ Create channel } />} @@ -277,11 +276,11 @@ export class Channels extends MDSEnabledComponent appRightControls={headerControls} appLeftControls={[{ renderComponent: totalChannels }]} /> - +
{channelControlsComponent} -
+
{channelActionsComponent}
@@ -310,7 +309,7 @@ export class Channels extends MDSEnabledComponent } bodyStyles={{ padding: 'initial' }} title="Channels" - titleSize="s" + titleSize="m" total={this.state.total} > {channelControlsComponent} @@ -319,7 +318,7 @@ export class Channels extends MDSEnabledComponent )} - + ); } }; diff --git a/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap index dcd33374..acf23670 100644 --- a/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap +++ b/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap @@ -2,7 +2,7 @@ exports[` spec renders the component 1`] = `
spec renders the component 1`] = `
-
-
-
-
diff --git a/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap index 2c01d3d2..f62687c9 100644 --- a/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap +++ b/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap @@ -4,33 +4,31 @@ exports[` spec handles a non-existing channel 1`] = `
-
-

- - -

-
+ - +
spec handles a non-existing channel 1`] = ` />
spec handles a non-existing channel 1`] = `
-

Name and description -

+
spec handles a non-existing channel 1`] = ` />
spec handles a non-existing channel 1`] = `
-

Configurations -

+
spec renders a specific channel 1`] = `
-
-

- - -

-
+ - +
spec renders a specific channel 1`] = ` />
spec renders a specific channel 1`] = `
-

Name and description -

+
spec renders a specific channel 1`] = ` />
spec renders a specific channel 1`] = `
-

Configurations -

+
spec renders a specific channel 1`] = ` exports[` spec renders the component 1`] = `
-
-

- - -

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

Channels spec renders the empty component 1`] = ` > (0) -

+
spec renders the empty component 1`] = ` style="padding: initial;" >
spec renders the empty component 1`] = `
-
-
-
-
@@ -498,13 +490,11 @@ exports[` spec renders the empty component 1`] = `
-
-

- No channels to display -

-
+ No channels to display + @@ -514,11 +504,7 @@ exports[` spec renders the empty component 1`] = `
-
- "To send or receive notifications, you will need to create a notification channel." -
+ To send or receive notifications, you will need to create a notification channel.
spec renders the component 1`] = `
-
-

- test header -

-
+ test header
spec renders the component 1`] = `
-
-

- test header -

-
+ test header
spec renders the component 1`] = `
-
-

- test header -

-
+ test header
spec renders the component 1`] = `
-
-

- test header -

-
+ test header
spec renders the component 1`] = `
-
-

- test header -

-
+ test header
spec renders the component 1`] = `
- -
-

- test header -

-
- + test header
diff --git a/public/pages/Channels/__tests__/__snapshots__/DetailsTableModal.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/DetailsTableModal.test.tsx.snap index 5ff99ef8..1df1f38b 100644 --- a/public/pages/Channels/__tests__/__snapshots__/DetailsTableModal.test.tsx.snap +++ b/public/pages/Channels/__tests__/__snapshots__/DetailsTableModal.test.tsx.snap @@ -82,13 +82,7 @@ exports[` spec renders headers 1`] = `
-
-

- test header -

-
+ test header
spec renders headers 1`] = `
-
-

- test header -

-
+ test header
spec renders headers 1`] = `
-
-

- test header -

-
+ test header
spec renders headers 1`] = `
-
-

- test header -

-
+ test header
spec renders headers 1`] = `
-
-

- test header -

-
+ test header
spec renders headers 1`] = `
- -
-

- test header -

-
- + test header
@@ -1975,13 +1935,7 @@ exports[` spec renders parameters 1`] = `
-
-

- test header -

-
+ test header
spec renders parameters 1`] = `
-
-

- test header -

-
+ test header
spec renders parameters 1`] = `
-
-

- test header -

-
+ test header
spec renders parameters 1`] = `
-
-

- test header -

-
+ test header
spec renders parameters 1`] = `
-
-

- test header -

-
+ test header
spec renders parameters 1`] = `
- -
-

- test header -

-
- + test header
diff --git a/public/pages/Channels/components/ChannelActions.tsx b/public/pages/Channels/components/ChannelActions.tsx index 62b49eb3..b809e537 100644 --- a/public/pages/Channels/components/ChannelActions.tsx +++ b/public/pages/Channels/components/ChannelActions.tsx @@ -99,7 +99,6 @@ export function ChannelActions(props: ChannelActionsProps) { { setIsPopoverOpen(false); if (params.modal) { diff --git a/public/pages/Channels/components/ChannelControls.tsx b/public/pages/Channels/components/ChannelControls.tsx index 9c5f37e6..8024a88f 100644 --- a/public/pages/Channels/components/ChannelControls.tsx +++ b/public/pages/Channels/components/ChannelControls.tsx @@ -96,7 +96,7 @@ export const ChannelControls = (props: ChannelControlsProps) => { } return ( - + { ); })} - - - - + const actionsAndMuteComponent = {channel && ( @@ -192,16 +191,22 @@ export function ChannelDetails(props: ChannelDetailsProps) { ), }, { - controlType: 'button', - testId: 'send-test-message-button', - isDisabled: !channel?.is_enabled, - run: sendTestMessage, - label: 'Send test message', - fill: true, - } as TopNavControlButtonData, + renderComponent: ( +
+ + Send test message + +
+ ), + }, ]; - const badgeComponent = + const badgeComponent = {channel?.is_enabled === undefined ? null : channel.is_enabled ? ( Active ) : ( @@ -227,14 +232,14 @@ export function ChannelDetails(props: ChannelDetailsProps) { - + - +

{channel?.name ?? '-'}

- + {badgeComponent} @@ -244,12 +249,12 @@ export function ChannelDetails(props: ChannelDetailsProps) { )} - {!getUseUpdatedUx() && } - + @@ -260,6 +265,7 @@ export function ChannelDetails(props: ChannelDetailsProps) { bodyStyles={{ padding: 'initial' }} title="Configurations" titleSize="s" + panelStyles={{ maxWidth: 1300 }} > diff --git a/public/pages/Channels/components/details/ChannelDetailsActions.tsx b/public/pages/Channels/components/details/ChannelDetailsActions.tsx index e01b1716..7d01d3df 100644 --- a/public/pages/Channels/components/details/ChannelDetailsActions.tsx +++ b/public/pages/Channels/components/details/ChannelDetailsActions.tsx @@ -101,7 +101,6 @@ export function ChannelDetailsActions(props: ChannelDetailsActionsProps) { { setIsPopoverOpen(false); if (params.modal) { diff --git a/public/pages/Channels/components/modals/DeleteChannelModal.tsx b/public/pages/Channels/components/modals/DeleteChannelModal.tsx index 1002077c..636ed1f4 100644 --- a/public/pages/Channels/components/modals/DeleteChannelModal.tsx +++ b/public/pages/Channels/components/modals/DeleteChannelModal.tsx @@ -48,14 +48,10 @@ export const DeleteChannelModal = (props: DeleteChannelModalProps) => { - - -

{`Delete ${name}?`}

- - + {`Delete ${name}?`} - {message} + {message} {num >= 2 && ( <> @@ -63,7 +59,6 @@ export const DeleteChannelModal = (props: DeleteChannelModalProps) => {
  • {channel.name}
    •  @@ -71,7 +66,7 @@ export const DeleteChannelModal = (props: DeleteChannelModalProps) => { )} - + To confirm delete, type delete in the field. - - -

    {props.header}

    -     -     + {props.header}     diff --git a/public/pages/Channels/components/modals/DetailsTableModal.tsx b/public/pages/Channels/components/modals/DetailsTableModal.tsx index 462b4ebc..773fe1f3 100644 --- a/public/pages/Channels/components/modals/DetailsTableModal.tsx +++ b/public/pages/Channels/components/modals/DetailsTableModal.tsx @@ -13,7 +13,6 @@ import { EuiModalHeaderTitle, EuiOverlayMask, EuiTableFieldDataColumnType, - EuiText, } from '@elastic/eui'; import React from 'react'; import { ModalRootProps } from '../../../../components/Modal/ModalRoot'; @@ -50,11 +49,7 @@ export function DetailsTableModal(props: DetailsTableModalProps) { - - -

    {props.header}

    -     -     + {props.header}     diff --git a/public/pages/Channels/components/modals/MuteChannelModal.tsx b/public/pages/Channels/components/modals/MuteChannelModal.tsx index 1634f632..b1b807f6 100644 --- a/public/pages/Channels/components/modals/MuteChannelModal.tsx +++ b/public/pages/Channels/components/modals/MuteChannelModal.tsx @@ -37,14 +37,10 @@ export const MuteChannelModal = (props: MuteChannelModalProps) => { - - -

    {`Mute ${props.selected[0].name}?`}

    -     -     + {`Mute ${props.selected[0].name}?`}     - + This channel will stop sending notifications to its recipients. However, the channel will remain available for selection. diff --git a/public/pages/CreateChannel/CreateChannel.tsx b/public/pages/CreateChannel/CreateChannel.tsx index 6035f13b..d82d91a8 100644 --- a/public/pages/CreateChannel/CreateChannel.tsx +++ b/public/pages/CreateChannel/CreateChannel.tsx @@ -14,6 +14,7 @@ import { EuiCompressedSuperSelect, EuiSuperSelectOption, EuiText, + EuiTitle, } from '@elastic/eui'; import queryString from 'query-string'; import React, { createContext, useContext, useEffect, useState } from 'react'; @@ -373,15 +374,13 @@ export function CreateChannel(props: CreateChannelsProps) { - {!getUseUpdatedUx() && ( - <> - -

    {`${props.edit ? 'Edit' : 'Create'} channel`}

    -     - - + {!getUseUpdatedUx() && ( + +

    {`${props.edit ? 'Edit' : 'Create'} channel`}

    +     )} + spec renders errors 1`] = `
    -

    Name and description -

    +
    spec renders the component 1`] = `
    -

    Name and description -

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

    - Create channel -

    -
    + Create channel + `; diff --git a/public/pages/CreateChannel/components/modals/CreateRecipientGroupModal.tsx b/public/pages/CreateChannel/components/modals/CreateRecipientGroupModal.tsx index e3610256..5d7225ec 100644 --- a/public/pages/CreateChannel/components/modals/CreateRecipientGroupModal.tsx +++ b/public/pages/CreateChannel/components/modals/CreateRecipientGroupModal.tsx @@ -13,7 +13,6 @@ import { EuiModalHeader, EuiModalHeaderTitle, EuiOverlayMask, - EuiText, } from '@elastic/eui'; import React, { useContext, useState } from 'react'; import { CoreServicesContext } from '../../../../components/coreServices'; @@ -67,11 +66,7 @@ export function CreateRecipientGroupModal( - - -

    Create recipient group

    -     -     + Create recipient group     diff --git a/public/pages/CreateChannel/components/modals/CreateSESSenderModal.tsx b/public/pages/CreateChannel/components/modals/CreateSESSenderModal.tsx index 0ab58e6d..a674111a 100644 --- a/public/pages/CreateChannel/components/modals/CreateSESSenderModal.tsx +++ b/public/pages/CreateChannel/components/modals/CreateSESSenderModal.tsx @@ -13,7 +13,6 @@ import { EuiModalHeader, EuiModalHeaderTitle, EuiOverlayMask, - EuiText, } from '@elastic/eui'; import React, { useContext, useState } from 'react'; import { CoreServicesContext } from '../../../../components/coreServices'; @@ -71,11 +70,7 @@ export function CreateSESSenderModal(props: CreateSESSenderModalProps) { - - -

    Create SES sender

    -     -     + Create SES sender     diff --git a/public/pages/CreateChannel/components/modals/CreateSenderModal.tsx b/public/pages/CreateChannel/components/modals/CreateSenderModal.tsx index 7801aa18..9fe19221 100644 --- a/public/pages/CreateChannel/components/modals/CreateSenderModal.tsx +++ b/public/pages/CreateChannel/components/modals/CreateSenderModal.tsx @@ -13,7 +13,6 @@ import { EuiModalHeader, EuiModalHeaderTitle, EuiOverlayMask, - EuiText, } from '@elastic/eui'; import React, { useContext, useState } from 'react'; import { CoreServicesContext } from '../../../../components/coreServices'; @@ -69,11 +68,7 @@ export function CreateSenderModal(props: CreateSenderModalProps) { - - -

    Create SMTP sender

    -     -     + Create SMTP sender     diff --git a/public/pages/Emails/CreateRecipientGroup.tsx b/public/pages/Emails/CreateRecipientGroup.tsx index 05e0b184..f492f389 100644 --- a/public/pages/Emails/CreateRecipientGroup.tsx +++ b/public/pages/Emails/CreateRecipientGroup.tsx @@ -10,7 +10,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer, - EuiText, + EuiTitle, } from '@elastic/eui'; import React, { useContext, useEffect, useState } from 'react'; import { RouteComponentProps } from 'react-router-dom'; @@ -111,18 +111,17 @@ export function CreateRecipientGroup(props: CreateRecipientGroupProps) { return ( <> {!getUseUpdatedUx() && ( - <> - -

    {`${props.edit ? 'Edit' : 'Create'} recipient group`}

    -     - - + +

    {`${props.edit ? 'Edit' : 'Create'} recipient group`}

    +     )} + - + Cancel diff --git a/public/pages/Emails/CreateSESSender.tsx b/public/pages/Emails/CreateSESSender.tsx index e517240a..63a6c960 100644 --- a/public/pages/Emails/CreateSESSender.tsx +++ b/public/pages/Emails/CreateSESSender.tsx @@ -9,7 +9,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer, - EuiText, + EuiTitle, } from '@elastic/eui'; import React, { useContext, useEffect, useState } from 'react'; import { RouteComponentProps } from 'react-router-dom'; @@ -102,18 +102,17 @@ export function CreateSESSender(props: CreateSESSenderProps) { return ( <> {!getUseUpdatedUx() && ( - <> - -

    {`${props.edit ? 'Edit' : 'Create'} SES sender`}

    -     - - + +

    {`${props.edit ? 'Edit' : 'Create'} SES sender`}

    +     )} + - + Cancel diff --git a/public/pages/Emails/CreateSender.tsx b/public/pages/Emails/CreateSender.tsx index 067eb3fa..15492bbd 100644 --- a/public/pages/Emails/CreateSender.tsx +++ b/public/pages/Emails/CreateSender.tsx @@ -9,7 +9,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer, - EuiText, + EuiTitle, } from '@elastic/eui'; import React, { useContext, useEffect, useState } from 'react'; import { RouteComponentProps } from 'react-router-dom'; @@ -99,18 +99,17 @@ export function CreateSender(props: CreateSenderProps) { return ( <> {!getUseUpdatedUx() && ( - <> - -

    {`${props.edit ? 'Edit' : 'Create'} SMTP sender`}

    -     - - + +

    {`${props.edit ? 'Edit' : 'Create'} SMTP sender`}

    +     )} + - + Cancel diff --git a/public/pages/Emails/EmailGroups.tsx b/public/pages/Emails/EmailGroups.tsx index ab0f4e04..90a5cd2c 100644 --- a/public/pages/Emails/EmailGroups.tsx +++ b/public/pages/Emails/EmailGroups.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { EuiSpacer, EuiText } from '@elastic/eui'; +import { EuiSpacer, EuiTitle } from '@elastic/eui'; import React, { useContext, useEffect } from 'react'; import { RouteComponentProps } from 'react-router-dom'; import { CoreServicesContext } from '../../components/coreServices'; @@ -29,14 +29,12 @@ export function EmailGroups(props: EmailGroupsProps) { return ( <> {!getUseUpdatedUx() && ( - <> - -

    Email recipient groups

    -     - - + +

    Email recipient groups

    +     )} + diff --git a/public/pages/Emails/EmailSenders.tsx b/public/pages/Emails/EmailSenders.tsx index 18ad03df..1c50387a 100644 --- a/public/pages/Emails/EmailSenders.tsx +++ b/public/pages/Emails/EmailSenders.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { EuiSpacer, EuiText } from '@elastic/eui'; +import { EuiSpacer, EuiTitle } from '@elastic/eui'; import React, { useContext, useEffect } from 'react'; import { RouteComponentProps } from 'react-router-dom'; import { CoreServicesContext } from '../../components/coreServices'; @@ -25,7 +25,7 @@ export function EmailSenders(props: EmailSendersProps) { // Call the hook to manage URL updates useUpdateUrlWithDataSourceProperties(); - + useEffect(() => { setBreadcrumbs([ BREADCRUMBS.NOTIFICATIONS, @@ -37,15 +37,13 @@ export function EmailSenders(props: EmailSendersProps) { return ( <> {!getUseUpdatedUx() && ( - <> - -

    Email senders

    -     - - + +

    Email senders

    +     )} {mainStateContext.availableConfigTypes.includes('smtp_account') && ( <> + diff --git a/public/pages/Emails/__tests__/__snapshots__/CreateRecipientGroup.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/CreateRecipientGroup.test.tsx.snap index 4009d0b8..3bd7021d 100644 --- a/public/pages/Emails/__tests__/__snapshots__/CreateRecipientGroup.test.tsx.snap +++ b/public/pages/Emails/__tests__/__snapshots__/CreateRecipientGroup.test.tsx.snap @@ -1,11 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` spec renders the component 1`] = ` -
    -

    - Create recipient group -

    -
    + Create recipient group + `; diff --git a/public/pages/Emails/__tests__/__snapshots__/CreateSESSender.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/CreateSESSender.test.tsx.snap index 97b70161..30e8145c 100644 --- a/public/pages/Emails/__tests__/__snapshots__/CreateSESSender.test.tsx.snap +++ b/public/pages/Emails/__tests__/__snapshots__/CreateSESSender.test.tsx.snap @@ -1,31 +1,25 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` spec handles failed requests 1`] = ` -
    -

    - Edit SES sender -

    -
    + Edit SES sender + `; exports[` spec renders the component 1`] = ` -
    -

    - Create SES sender -

    -
    + Create SES sender + `; exports[` spec renders the component for editing 1`] = ` -
    -

    - Edit SES sender -

    -
    + Edit SES sender + `; diff --git a/public/pages/Emails/__tests__/__snapshots__/CreateSender.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/CreateSender.test.tsx.snap index 68449f39..b6ff392a 100644 --- a/public/pages/Emails/__tests__/__snapshots__/CreateSender.test.tsx.snap +++ b/public/pages/Emails/__tests__/__snapshots__/CreateSender.test.tsx.snap @@ -1,31 +1,25 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` spec handles failed requests 1`] = ` -
    -

    - Edit SMTP sender -

    -
    + Edit SMTP sender + `; exports[` spec renders the component 1`] = ` -
    -

    - Create SMTP sender -

    -
    + Create SMTP sender + `; exports[` spec renders the component for editing 1`] = ` -
    -

    - Edit SMTP sender -

    -
    + Edit SMTP sender + `; diff --git a/public/pages/Emails/__tests__/__snapshots__/EmailGroups.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/EmailGroups.test.tsx.snap index a4b40b5b..ed8880f6 100644 --- a/public/pages/Emails/__tests__/__snapshots__/EmailGroups.test.tsx.snap +++ b/public/pages/Emails/__tests__/__snapshots__/EmailGroups.test.tsx.snap @@ -1,11 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` spec renders the component 1`] = ` -
    -

    - Email recipient groups -

    -
    + Email recipient groups + `; diff --git a/public/pages/Emails/__tests__/__snapshots__/EmailSenders.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/EmailSenders.test.tsx.snap index 00e42cc1..1483fdaa 100644 --- a/public/pages/Emails/__tests__/__snapshots__/EmailSenders.test.tsx.snap +++ b/public/pages/Emails/__tests__/__snapshots__/EmailSenders.test.tsx.snap @@ -1,21 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` spec renders the component with SMTP config type 1`] = ` -
    -

    - Email senders -

    -
    + Email senders + `; exports[` spec renders the component without SMTP config type 1`] = ` -
    -

    - Email senders -

    -
    + Email senders + `; diff --git a/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap index fc8edb5b..ebb37281 100644 --- a/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap +++ b/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap @@ -11,8 +11,8 @@ exports[` spec renders empty state 1`] = `
    -

    Recipient groups spec renders empty state 1`] = ` > (0) -

    +
    spec renders empty state 1`] = `
    -
    -

    - No recipient groups to display -

    -
    + No recipient groups to display + @@ -384,11 +382,7 @@ exports[` spec renders empty state 1`] = `
    -
    - Use an email group to manage a list of email addresses you frequently send at a time. You can select recipient groups when configuring email channels. -
    + Use an email group to manage a list of email addresses you frequently send at a time. You can select recipient groups when configuring email channels.
    spec renders empty state 1`] = `
    -

    SMTP senders spec renders empty state 1`] = ` > (0) -

    +
    spec renders empty state 1`] = ` style="padding: initial;" >
    spec renders empty state 1`] = ` class="euiPopover__anchor" > @@ -476,13 +470,11 @@ exports[` spec renders empty state 1`] = `
    -
    -

    - No SMTP senders to display -

    -
    + No SMTP senders to display + @@ -492,11 +484,7 @@ exports[` spec renders empty state 1`] = `
    -
    - Set up an outbound email server by creating a sender. You will select a sender when configuring email channels. -
    + Set up an outbound email server by creating a sender. You will select a sender when configuring email channels.
    spec renders the component 1`] = `
    spec renders the component 1`] = ` class="euiPopover__anchor" > diff --git a/public/pages/Emails/components/forms/CreateRecipientGroupForm.tsx b/public/pages/Emails/components/forms/CreateRecipientGroupForm.tsx index 1c03cbb1..71eada79 100644 --- a/public/pages/Emails/components/forms/CreateRecipientGroupForm.tsx +++ b/public/pages/Emails/components/forms/CreateRecipientGroupForm.tsx @@ -60,7 +60,7 @@ export function CreateRecipientGroupForm(props: CreateRecipientGroupFormProps) { /> - + @@ -84,7 +84,7 @@ export function CreateRecipientGroupForm(props: CreateRecipientGroupFormProps) { - + - + - + - + - + - - -

    {`Delete ${name}?`}

    -     -     + {`Delete ${name}?`}     - {message} + {message} {num >= 2 && ( <> @@ -72,7 +68,7 @@ export const DeleteRecipientGroupModal = ( )} - + To confirm delete, type delete in the field. { - - -

    {`Delete ${name}?`}

    -     -     + {`Delete ${name}?`}     - {message} + {message} {num >= 2 && ( <> @@ -62,7 +58,6 @@ export const DeleteSenderModal = (props: DeleteSenderModalProps) => {
  • {sender.name}
    •  @@ -70,7 +65,7 @@ export const DeleteSenderModal = (props: DeleteSenderModalProps) => { )} - + To confirm delete, type delete in the field.

    No recipient groups to display

    } - body={ - - Use an email group to manage a list of email addresses you frequently send at a time. You can select recipient groups when configuring email channels. - - } + title={

    No recipient groups to display

    } + body="Use an email group to manage a list of email addresses you frequently send at a time. You can select recipient groups when configuring email channels." actions={ Create recipient group } />} @@ -308,12 +303,8 @@ export class RecipientGroupsTable extends Component< appRightControls={headerControls} appLeftControls={[{ renderComponent: totalEmailGroups }]} /> - - + + {searchComponent} @@ -325,6 +316,7 @@ export class RecipientGroupsTable extends Component< iconType="arrowDown" iconSide="right" onClick={this.togglePopover} + style={{ marginLeft: '10px' }} // Ensure spacing is correct > Actions @@ -338,7 +330,6 @@ export class RecipientGroupsTable extends Component< { this.setState({ isPopoverOpen: false }); if (action.modal) { @@ -410,7 +401,7 @@ export class RecipientGroupsTable extends Component< } bodyStyles={{ padding: 'initial' }} title="Recipient groups" - titleSize="s" + titleSize="m" total={this.state.total} > {searchComponent} diff --git a/public/pages/Emails/components/tables/SESSendersTable.tsx b/public/pages/Emails/components/tables/SESSendersTable.tsx index dc55ca9e..aed3287b 100644 --- a/public/pages/Emails/components/tables/SESSendersTable.tsx +++ b/public/pages/Emails/components/tables/SESSendersTable.tsx @@ -16,7 +16,6 @@ import { EuiTableFieldDataColumnType, EuiTableSortingType, SortDirection, - EuiText, } from '@elastic/eui'; import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table'; import { Pagination } from '@elastic/eui/src/components/basic_table/pagination_bar'; @@ -224,8 +223,8 @@ export class SESSendersTable extends Component< isSelectable={true} selection={selection} noItemsMessage={

    No SES senders to display

    } - body={Set up an outbound email server by creating a sender. You will select a sender when configuring email channels.} + title={

    No SES senders to display

    } + body="Set up an outbound email server by creating a sender. You will select a sender when configuring email channels." actions={ Create SES sender } />} @@ -245,9 +244,6 @@ export class SESSendersTable extends Component< <> {getUseUpdatedUx() ? ( - + {searchComponent} @@ -278,6 +274,7 @@ export class SESSendersTable extends Component< iconType="arrowDown" iconSide="right" onClick={this.togglePopover} + style={{ marginLeft: '10px' }} // Ensure spacing is correct > Actions @@ -291,7 +288,6 @@ export class SESSendersTable extends Component< { this.setState({ isPopoverOpen: false }); if (action.modal) { @@ -364,7 +360,7 @@ export class SESSendersTable extends Component< } bodyStyles={{ padding: 'initial' }} title="SES senders" - titleSize="s" + titleSize="m" total={this.state.total} > {searchComponent} diff --git a/public/pages/Emails/components/tables/SendersTable.tsx b/public/pages/Emails/components/tables/SendersTable.tsx index bd928faa..efee0179 100644 --- a/public/pages/Emails/components/tables/SendersTable.tsx +++ b/public/pages/Emails/components/tables/SendersTable.tsx @@ -15,7 +15,6 @@ import { EuiTableFieldDataColumnType, EuiTableSortingType, SortDirection, - EuiText, } from '@elastic/eui'; import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table'; import { Pagination } from '@elastic/eui/src/components/basic_table/pagination_bar'; @@ -251,12 +250,8 @@ export class SendersTable extends Component< isSelectable={true} selection={selection} noItemsMessage={

    No SMTP senders to display

    } - body={ - - Set up an outbound email server by creating a sender. You will select a sender when configuring email channels. - - } + title={

    No SMTP senders to display

    } + body="Set up an outbound email server by creating a sender. You will select a sender when configuring email channels." actions={ Create SMTP sender } />} @@ -269,9 +264,6 @@ export class SendersTable extends Component< <> {getUseUpdatedUx() ? ( - + {senderControlComponent} @@ -302,6 +294,7 @@ export class SendersTable extends Component< iconType="arrowDown" iconSide="right" onClick={this.togglePopover} + style={{ marginLeft: '10px' }} // Ensure spacing is correct > Actions @@ -315,7 +308,6 @@ export class SendersTable extends Component< { this.setState({ isPopoverOpen: false }); if (action.modal) { @@ -388,7 +380,7 @@ export class SendersTable extends Component< } bodyStyles={{ padding: 'initial' }} title="SMTP senders" - titleSize="s" + titleSize="m" total={this.state.total} > {senderControlComponent} diff --git a/public/pages/Emails/components/tables/SendersTableControls.tsx b/public/pages/Emails/components/tables/SendersTableControls.tsx index 8b7c19a5..5bb879d9 100644 --- a/public/pages/Emails/components/tables/SendersTableControls.tsx +++ b/public/pages/Emails/components/tables/SendersTableControls.tsx @@ -63,7 +63,7 @@ export const SendersTableControls = (props: SendersTableControlsProps) => { } return ( - + { item.checked === 'on').length - } iconType="arrowDown" grow={false} onClick={() => diff --git a/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap b/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap index 9efd0ad0..9f5714fe 100644 --- a/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap +++ b/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap @@ -116,8 +116,8 @@ exports[`
    spec renders the component 1`] = `
    -

    Channels spec renders the component 1`] = ` > (0) -

    +
    spec renders the component 1`] = ` style="padding: initial;" >
    spec renders the component 1`] = `
    -
    -
    -
    -
    @@ -603,13 +595,11 @@ exports[`
    spec renders the component 1`] = `
    -
    -

    - No channels to display -

    -
    + No channels to display + @@ -619,11 +609,7 @@ exports[`
    spec renders the component 1`] = `
    -
    - "To send or receive notifications, you will need to create a notification channel." -
    + To send or receive notifications, you will need to create a notification channel.