diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx index 2f6acc7c..4a4b11fc 100644 --- a/public/components/ContentPanel/ContentPanel.tsx +++ b/public/components/ContentPanel/ContentPanel.tsx @@ -8,7 +8,7 @@ import { EuiFlexItem, EuiHorizontalRule, EuiPanel, - EuiText, + EuiTitle, } from '@elastic/eui'; import React from 'react'; @@ -40,7 +40,7 @@ const ContentPanel: React.SFC = ({ alignItems="center" > - +

{title} {total !== undefined ? ( @@ -49,7 +49,7 @@ const ContentPanel: React.SFC = ({ >{` (${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 13d35e14..8c25393c 100644 --- a/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap +++ b/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap @@ -11,13 +11,11 @@ exports[` spec renders the component 1`] = `
-
-

- Testing -

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

- Testing -

-
+ Testing +

Testing ContentPanel diff --git a/public/pages/Channels/Channels.tsx b/public/pages/Channels/Channels.tsx index 6e28b2fd..77441eec 100644 --- a/public/pages/Channels/Channels.tsx +++ b/public/pages/Channels/Channels.tsx @@ -277,11 +277,11 @@ export class Channels extends MDSEnabledComponent appRightControls={headerControls} appLeftControls={[{ renderComponent: totalChannels }]} /> - +
{channelControlsComponent} -
+
{channelActionsComponent}
diff --git a/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap index acf23670..4af9ef5d 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 handles a non-existing channel 1`] = `
spec handles a non-existing channel 1`] = `
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`] = ` />
spec handles a non-existing channel 1`] = `
-
-

- Configurations -

-
+ Configurations +

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

- Name and description -

-
+ Name and description +

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

- Configurations -

-
+ Configurations +

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

- Channels - - (0) - -

-
+ Channels + + (0) + +
spec renders the empty component 1`] = ` style="padding: initial;" >
{ } return ( - + + const actionsAndMuteComponent = {channel && ( @@ -196,10 +197,11 @@ export function ChannelDetails(props: ChannelDetailsProps) { isDisabled: !channel?.is_enabled, run: sendTestMessage, label: 'Send test message', + fill: true, } as TopNavControlButtonData, ]; - const badgeComponent = + const badgeComponent = {channel?.is_enabled === undefined ? null : channel.is_enabled ? ( Active ) : ( @@ -225,10 +227,10 @@ export function ChannelDetails(props: ChannelDetailsProps) { - +

{channel?.name ?? '-'}

@@ -242,12 +244,12 @@ export function ChannelDetails(props: ChannelDetailsProps) { )} - + {!getUseUpdatedUx() && } + @@ -258,7 +260,6 @@ export function ChannelDetails(props: ChannelDetailsProps) { bodyStyles={{ padding: 'initial' }} title="Configurations" titleSize="s" - panelStyles={{ maxWidth: 1300 }} > diff --git a/public/pages/CreateChannel/CreateChannel.tsx b/public/pages/CreateChannel/CreateChannel.tsx index 3751f45c..6035f13b 100644 --- a/public/pages/CreateChannel/CreateChannel.tsx +++ b/public/pages/CreateChannel/CreateChannel.tsx @@ -373,13 +373,15 @@ export function CreateChannel(props: CreateChannelsProps) { - {!getUseUpdatedUx() && ( - -

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

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

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

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

- Name and description -

-
+ Name and description +

spec renders the component 1`] = `
-
-

- Name and description -

-
+ Name and description +

{!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 8b9f84ad..e517240a 100644 --- a/public/pages/Emails/CreateSESSender.tsx +++ b/public/pages/Emails/CreateSESSender.tsx @@ -102,17 +102,18 @@ 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 31c5b282..067eb3fa 100644 --- a/public/pages/Emails/CreateSender.tsx +++ b/public/pages/Emails/CreateSender.tsx @@ -99,17 +99,18 @@ 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 109e0808..ab0f4e04 100644 --- a/public/pages/Emails/EmailGroups.tsx +++ b/public/pages/Emails/EmailGroups.tsx @@ -29,12 +29,14 @@ 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 05e7beb9..18ad03df 100644 --- a/public/pages/Emails/EmailSenders.tsx +++ b/public/pages/Emails/EmailSenders.tsx @@ -37,13 +37,15 @@ export function EmailSenders(props: EmailSendersProps) { return ( <> {!getUseUpdatedUx() && ( - -

Email senders

-
+ <> + +

Email senders

+
+ + )} {mainStateContext.availableConfigTypes.includes('smtp_account') && ( <> - diff --git a/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap index fb2a223c..fc8edb5b 100644 --- a/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap +++ b/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap @@ -11,18 +11,16 @@ exports[` spec renders empty state 1`] = `
-
-

- Recipient groups - - (0) - -

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

- SMTP senders - - (0) - -

-
+ SMTP senders + + (0) + +
spec renders empty state 1`] = ` style="padding: initial;" >
spec renders the component 1`] = `
- + @@ -84,7 +84,7 @@ export function CreateRecipientGroupForm(props: CreateRecipientGroupFormProps) { - + - + - + - + - + - - + + {searchComponent} @@ -321,7 +325,6 @@ export class RecipientGroupsTable extends Component< iconType="arrowDown" iconSide="right" onClick={this.togglePopover} - style={{ marginLeft: '10px' }} // Ensure spacing is correct > Actions diff --git a/public/pages/Emails/components/tables/SESSendersTable.tsx b/public/pages/Emails/components/tables/SESSendersTable.tsx index 2b5059b7..dc55ca9e 100644 --- a/public/pages/Emails/components/tables/SESSendersTable.tsx +++ b/public/pages/Emails/components/tables/SESSendersTable.tsx @@ -245,6 +245,9 @@ export class SESSendersTable extends Component< <> {getUseUpdatedUx() ? ( - + {searchComponent} @@ -275,7 +278,6 @@ export class SESSendersTable extends Component< iconType="arrowDown" iconSide="right" onClick={this.togglePopover} - style={{ marginLeft: '10px' }} // Ensure spacing is correct > Actions diff --git a/public/pages/Emails/components/tables/SendersTable.tsx b/public/pages/Emails/components/tables/SendersTable.tsx index dba914f5..bd928faa 100644 --- a/public/pages/Emails/components/tables/SendersTable.tsx +++ b/public/pages/Emails/components/tables/SendersTable.tsx @@ -269,6 +269,9 @@ export class SendersTable extends Component< <> {getUseUpdatedUx() ? ( - + {senderControlComponent} @@ -299,7 +302,6 @@ export class SendersTable extends Component< iconType="arrowDown" iconSide="right" onClick={this.togglePopover} - style={{ marginLeft: '10px' }} // Ensure spacing is correct > Actions diff --git a/public/pages/Emails/components/tables/SendersTableControls.tsx b/public/pages/Emails/components/tables/SendersTableControls.tsx index 5bb879d9..e6cea6f1 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 ( - + spec renders the component 1`] = `
-
-

- Channels - - (0) - -

-
+ Channels + + (0) + +
spec renders the component 1`] = ` style="padding: initial;" >