From 68316a07c17d440a37f41bcbdb460aacbfbda142 Mon Sep 17 00:00:00 2001 From: Dan Dong <58446449+danieldong51@users.noreply.github.com> Date: Fri, 6 Sep 2024 11:43:59 -0700 Subject: [PATCH] [Fit & Finish] Updated Fit and Finish guidelines (#256) * Updated Fit and Finish guidelines Signed-off-by: Dan Dong * Updated Snapshot Tests Signed-off-by: Dan Dong --------- Signed-off-by: Dan Dong --- .../components/ContentPanel/ContentPanel.tsx | 14 +-- .../__snapshots__/ContentPanel.test.tsx.snap | 20 ++-- public/pages/Channels/Channels.tsx | 9 +- .../ChannelDetails.test.tsx.snap | 70 +++++++----- .../__snapshots__/Channels.test.tsx.snap | 36 +++--- .../DetailsListModal.test.tsx.snap | 52 ++++++++- .../DetailsTableModal.test.tsx.snap | 104 ++++++++++++++++-- .../Channels/components/ChannelActions.tsx | 1 + .../components/details/ChannelDetails.tsx | 5 +- .../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 | 5 +- .../ChannelNamePanel.test.tsx.snap | 20 ++-- .../__snapshots__/CreateChannel.test.tsx.snap | 10 +- .../modals/CreateRecipientGroupModal.tsx | 7 +- .../modals/CreateSESSenderModal.tsx | 7 +- .../components/modals/CreateSenderModal.tsx | 7 +- public/pages/Emails/CreateRecipientGroup.tsx | 6 +- public/pages/Emails/CreateSESSender.tsx | 6 +- public/pages/Emails/CreateSender.tsx | 6 +- public/pages/Emails/EmailGroups.tsx | 6 +- public/pages/Emails/EmailSenders.tsx | 8 +- .../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 | 36 +++--- .../__snapshots__/SendersTable.test.tsx.snap | 36 +++--- .../modals/DeleteRecipientGroupModal.tsx | 10 +- .../components/modals/DeleteSenderModal.tsx | 11 +- .../tables/RecipientGroupsTable.tsx | 12 +- .../components/tables/SESSendersTable.tsx | 10 +- .../Emails/components/tables/SendersTable.tsx | 14 ++- .../__snapshots__/Main.test.tsx.snap | 36 +++--- 38 files changed, 476 insertions(+), 222 deletions(-) diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx index a6660e2b..2f6acc7c 100644 --- a/public/components/ContentPanel/ContentPanel.tsx +++ b/public/components/ContentPanel/ContentPanel.tsx @@ -8,13 +8,13 @@ import { EuiFlexItem, EuiHorizontalRule, EuiPanel, - EuiTitle, + EuiText, } from '@elastic/eui'; import React from 'react'; interface ContentPanelProps { title?: string; - titleSize?: 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l'; + titleSize?: 'xs' | 's' | 'm'; total?: number; bodyStyles?: object; panelStyles?: object; @@ -25,7 +25,7 @@ interface ContentPanelProps { const ContentPanel: React.SFC = ({ title = '', - titleSize = 'l', + titleSize = 's', total = undefined, bodyStyles = {}, panelStyles = {}, @@ -40,16 +40,16 @@ const ContentPanel: React.SFC = ({ alignItems="center" > - -

+ +

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

- +

+ {actions ? ( diff --git a/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap b/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap index 4a277201..13d35e14 100644 --- a/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap +++ b/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap @@ -11,11 +11,13 @@ exports[` spec renders the component 1`] = `
-

- Testing -

+

+ Testing +

+
spec renders with empty actions 1`] = `
-

- Testing -

+

+ Testing +

+
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 } />} @@ -309,7 +310,7 @@ export class Channels extends MDSEnabledComponent } bodyStyles={{ padding: 'initial' }} title="Channels" - titleSize="m" + titleSize="s" total={this.state.total} > {channelControlsComponent} @@ -318,7 +319,7 @@ export class Channels extends MDSEnabledComponent )} - + ); } }; diff --git a/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap index f62687c9..b03d0e62 100644 --- a/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap +++ b/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap @@ -15,11 +15,13 @@ exports[` spec handles a non-existing channel 1`] = `
-

- - -

+

+ - +

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

- Name and description -

+

+ Name and description +

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

- Configurations -

+

+ Configurations +

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

- - -

+

+ - +

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

- Name and description -

+

+ Name and description +

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

- Configurations -

+

+ Configurations +

+
spec renders the component 1`] = `
-

- - -

+

+ - +

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

- Channels - - (0) - -

+

+ Channels + + (0) + +

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

- No channels to display -

+

+ No channels to display +

+
@@ -504,7 +508,11 @@ 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 1df1f38b..5ff99ef8 100644 --- a/public/pages/Channels/__tests__/__snapshots__/DetailsTableModal.test.tsx.snap +++ b/public/pages/Channels/__tests__/__snapshots__/DetailsTableModal.test.tsx.snap @@ -82,7 +82,13 @@ 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 +

+
+
@@ -1935,7 +1975,13 @@ 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 b809e537..62b49eb3 100644 --- a/public/pages/Channels/components/ChannelActions.tsx +++ b/public/pages/Channels/components/ChannelActions.tsx @@ -99,6 +99,7 @@ export function ChannelActions(props: ChannelActionsProps) { { setIsPopoverOpen(false); if (params.modal) { diff --git a/public/pages/Channels/components/details/ChannelDetails.tsx b/public/pages/Channels/components/details/ChannelDetails.tsx index abdb7baa..233f50f1 100644 --- a/public/pages/Channels/components/details/ChannelDetails.tsx +++ b/public/pages/Channels/components/details/ChannelDetails.tsx @@ -11,7 +11,6 @@ import { EuiSmallButton, EuiSpacer, EuiText, - EuiTitle, } from '@elastic/eui'; import { Toast } from '@elastic/eui/src/components/toast/global_toast_list'; import React, { useContext, useEffect, useState } from 'react'; @@ -231,9 +230,9 @@ export function ChannelDetails(props: ChannelDetailsProps) { - +

{channel?.name ?? '-'}

- + {badgeComponent} diff --git a/public/pages/Channels/components/details/ChannelDetailsActions.tsx b/public/pages/Channels/components/details/ChannelDetailsActions.tsx index 7d01d3df..e01b1716 100644 --- a/public/pages/Channels/components/details/ChannelDetailsActions.tsx +++ b/public/pages/Channels/components/details/ChannelDetailsActions.tsx @@ -101,6 +101,7 @@ 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 636ed1f4..1002077c 100644 --- a/public/pages/Channels/components/modals/DeleteChannelModal.tsx +++ b/public/pages/Channels/components/modals/DeleteChannelModal.tsx @@ -48,10 +48,14 @@ export const DeleteChannelModal = (props: DeleteChannelModalProps) => { - {`Delete ${name}?`} + + +

{`Delete ${name}?`}

+ + - {message} + {message} {num >= 2 && ( <> @@ -59,6 +63,7 @@ export const DeleteChannelModal = (props: DeleteChannelModalProps) => {
  • {channel.name}
    •  @@ -66,7 +71,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 773fe1f3..462b4ebc 100644 --- a/public/pages/Channels/components/modals/DetailsTableModal.tsx +++ b/public/pages/Channels/components/modals/DetailsTableModal.tsx @@ -13,6 +13,7 @@ import { EuiModalHeaderTitle, EuiOverlayMask, EuiTableFieldDataColumnType, + EuiText, } from '@elastic/eui'; import React from 'react'; import { ModalRootProps } from '../../../../components/Modal/ModalRoot'; @@ -49,7 +50,11 @@ 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 b1b807f6..1634f632 100644 --- a/public/pages/Channels/components/modals/MuteChannelModal.tsx +++ b/public/pages/Channels/components/modals/MuteChannelModal.tsx @@ -37,10 +37,14 @@ 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 2256cb59..99a76153 100644 --- a/public/pages/CreateChannel/CreateChannel.tsx +++ b/public/pages/CreateChannel/CreateChannel.tsx @@ -14,7 +14,6 @@ import { EuiCompressedSuperSelect, EuiSuperSelectOption, EuiText, - EuiTitle, } from '@elastic/eui'; import queryString from 'query-string'; import React, { createContext, useContext, useEffect, useState } from 'react'; @@ -365,9 +364,9 @@ export function CreateChannel(props: CreateChannelsProps) { value={{ edit: props.edit, inputErrors, setInputErrors }} > {!getUseUpdatedUx() && ( - +

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

    -     +     )} diff --git a/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap b/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap index 0e4b7f41..303884b0 100644 --- a/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap +++ b/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap @@ -11,11 +11,13 @@ exports[` spec renders errors 1`] = `
    -

    - Name and description -

    +

    + Name and description +

    +
    spec renders the component 1`] = `
    -

    - Name and description -

    +

    + 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 5d7225ec..e3610256 100644 --- a/public/pages/CreateChannel/components/modals/CreateRecipientGroupModal.tsx +++ b/public/pages/CreateChannel/components/modals/CreateRecipientGroupModal.tsx @@ -13,6 +13,7 @@ import { EuiModalHeader, EuiModalHeaderTitle, EuiOverlayMask, + EuiText, } from '@elastic/eui'; import React, { useContext, useState } from 'react'; import { CoreServicesContext } from '../../../../components/coreServices'; @@ -66,7 +67,11 @@ 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 a674111a..0ab58e6d 100644 --- a/public/pages/CreateChannel/components/modals/CreateSESSenderModal.tsx +++ b/public/pages/CreateChannel/components/modals/CreateSESSenderModal.tsx @@ -13,6 +13,7 @@ import { EuiModalHeader, EuiModalHeaderTitle, EuiOverlayMask, + EuiText, } from '@elastic/eui'; import React, { useContext, useState } from 'react'; import { CoreServicesContext } from '../../../../components/coreServices'; @@ -70,7 +71,11 @@ 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 9fe19221..7801aa18 100644 --- a/public/pages/CreateChannel/components/modals/CreateSenderModal.tsx +++ b/public/pages/CreateChannel/components/modals/CreateSenderModal.tsx @@ -13,6 +13,7 @@ import { EuiModalHeader, EuiModalHeaderTitle, EuiOverlayMask, + EuiText, } from '@elastic/eui'; import React, { useContext, useState } from 'react'; import { CoreServicesContext } from '../../../../components/coreServices'; @@ -68,7 +69,11 @@ 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 9ac9c534..1322c8e8 100644 --- a/public/pages/Emails/CreateRecipientGroup.tsx +++ b/public/pages/Emails/CreateRecipientGroup.tsx @@ -10,7 +10,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer, - EuiTitle, + EuiText, } from '@elastic/eui'; import React, { useContext, useEffect, useState } from 'react'; import { RouteComponentProps } from 'react-router-dom'; @@ -105,9 +105,9 @@ export function CreateRecipientGroup(props: CreateRecipientGroupProps) { return ( <> {!getUseUpdatedUx() && ( - +

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

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

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

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

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

    -     + )} diff --git a/public/pages/Emails/EmailGroups.tsx b/public/pages/Emails/EmailGroups.tsx index 90a5cd2c..109e0808 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, EuiTitle } from '@elastic/eui'; +import { EuiSpacer, EuiText } from '@elastic/eui'; import React, { useContext, useEffect } from 'react'; import { RouteComponentProps } from 'react-router-dom'; import { CoreServicesContext } from '../../components/coreServices'; @@ -29,9 +29,9 @@ export function EmailGroups(props: EmailGroupsProps) { return ( <> {!getUseUpdatedUx() && ( - +

    Email recipient groups

    -     + )} diff --git a/public/pages/Emails/EmailSenders.tsx b/public/pages/Emails/EmailSenders.tsx index 1c50387a..05e7beb9 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, EuiTitle } from '@elastic/eui'; +import { EuiSpacer, EuiText } 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,9 +37,9 @@ export function EmailSenders(props: EmailSendersProps) { return ( <> {!getUseUpdatedUx() && ( - +

    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 3bd7021d..4009d0b8 100644 --- a/public/pages/Emails/__tests__/__snapshots__/CreateRecipientGroup.test.tsx.snap +++ b/public/pages/Emails/__tests__/__snapshots__/CreateRecipientGroup.test.tsx.snap @@ -1,9 +1,11 @@ // 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 30e8145c..97b70161 100644 --- a/public/pages/Emails/__tests__/__snapshots__/CreateSESSender.test.tsx.snap +++ b/public/pages/Emails/__tests__/__snapshots__/CreateSESSender.test.tsx.snap @@ -1,25 +1,31 @@ // 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 b6ff392a..68449f39 100644 --- a/public/pages/Emails/__tests__/__snapshots__/CreateSender.test.tsx.snap +++ b/public/pages/Emails/__tests__/__snapshots__/CreateSender.test.tsx.snap @@ -1,25 +1,31 @@ // 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 ed8880f6..a4b40b5b 100644 --- a/public/pages/Emails/__tests__/__snapshots__/EmailGroups.test.tsx.snap +++ b/public/pages/Emails/__tests__/__snapshots__/EmailGroups.test.tsx.snap @@ -1,9 +1,11 @@ // 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 1483fdaa..00e42cc1 100644 --- a/public/pages/Emails/__tests__/__snapshots__/EmailSenders.test.tsx.snap +++ b/public/pages/Emails/__tests__/__snapshots__/EmailSenders.test.tsx.snap @@ -1,17 +1,21 @@ // 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 ebb37281..fb2a223c 100644 --- a/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap +++ b/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap @@ -11,16 +11,18 @@ exports[` spec renders empty state 1`] = `
    -

    - Recipient groups - - (0) - -

    +

    + Recipient groups + + (0) + +

    +
    spec renders empty state 1`] = `
    -

    - No recipient groups to display -

    +

    + No recipient groups to display +

    +
    @@ -382,7 +386,11 @@ 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 - - (0) - -

    +

    + SMTP senders + + (0) + +

    +
    spec renders empty state 1`] = `
    -

    - No SMTP senders to display -

    +

    + No SMTP senders to display +

    +
    @@ -484,7 +488,11 @@ 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. +
    - {`Delete ${name}?`} + + +

    {`Delete ${name}?`}

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

    {`Delete ${name}?`}

    +     +     - {message} + {message} {num >= 2 && ( <> @@ -58,6 +62,7 @@ export const DeleteSenderModal = (props: DeleteSenderModalProps) => {
  • {sender.name}
    •  @@ -65,7 +70,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 } />} @@ -330,6 +335,7 @@ export class RecipientGroupsTable extends Component< { this.setState({ isPopoverOpen: false }); if (action.modal) { @@ -401,7 +407,7 @@ export class RecipientGroupsTable extends Component< } bodyStyles={{ padding: 'initial' }} title="Recipient groups" - titleSize="m" + titleSize="s" total={this.state.total} > {searchComponent} diff --git a/public/pages/Emails/components/tables/SESSendersTable.tsx b/public/pages/Emails/components/tables/SESSendersTable.tsx index aed3287b..2b5059b7 100644 --- a/public/pages/Emails/components/tables/SESSendersTable.tsx +++ b/public/pages/Emails/components/tables/SESSendersTable.tsx @@ -16,6 +16,7 @@ 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'; @@ -223,8 +224,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 } />} @@ -259,7 +260,7 @@ export class SESSendersTable extends Component< } bodyStyles={{ padding: 'initial' }} title="SES senders" - titleSize="m" + titleSize="s" total={this.state.total} > @@ -288,6 +289,7 @@ export class SESSendersTable extends Component< { this.setState({ isPopoverOpen: false }); if (action.modal) { @@ -360,7 +362,7 @@ export class SESSendersTable extends Component< } bodyStyles={{ padding: 'initial' }} title="SES senders" - titleSize="m" + titleSize="s" total={this.state.total} > {searchComponent} diff --git a/public/pages/Emails/components/tables/SendersTable.tsx b/public/pages/Emails/components/tables/SendersTable.tsx index efee0179..dba914f5 100644 --- a/public/pages/Emails/components/tables/SendersTable.tsx +++ b/public/pages/Emails/components/tables/SendersTable.tsx @@ -15,6 +15,7 @@ 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'; @@ -250,8 +251,12 @@ 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 } />} @@ -279,7 +284,7 @@ export class SendersTable extends Component< } bodyStyles={{ padding: 'initial' }} title="SMTP senders" - titleSize="m" + titleSize="s" total={this.state.total} > @@ -308,6 +313,7 @@ export class SendersTable extends Component< { this.setState({ isPopoverOpen: false }); if (action.modal) { @@ -380,7 +386,7 @@ export class SendersTable extends Component< } bodyStyles={{ padding: 'initial' }} title="SMTP senders" - titleSize="m" + titleSize="s" total={this.state.total} > {senderControlComponent} diff --git a/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap b/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap index 9f5714fe..49182f1a 100644 --- a/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap +++ b/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap @@ -116,16 +116,18 @@ exports[`
    spec renders the component 1`] = `
    -

    - Channels - - (0) - -

    +

    + Channels + + (0) + +

    +
    spec renders the component 1`] = `
    -

    - No channels to display -

    +

    + No channels to display +

    +
    @@ -609,7 +613,11 @@ 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." +