From 099c6eb3c9fadb7ba9b4914bf142387424fc33ce Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Mon, 17 Dec 2018 10:45:21 +0100 Subject: [PATCH] SONAR-11204 use alerts in place of banners --- .../nav/component/ComponentNavBgTaskNotif.tsx | 19 ++-- .../component/ComponentNavLicenseNotif.tsx | 14 +-- .../ComponentNavBgTaskNotif-test.tsx.snap | 39 +++---- .../ComponentNavLicenseNotif-test.tsx.snap | 26 ++--- .../settings/PendingPluginsActionNotif.tsx | 60 +++++----- .../PendingPluginsActionNotif-test.tsx.snap | 103 +++++++++--------- .../main/js/app/styles/components/alerts.css | 22 +++- .../main/js/app/styles/components/page.css | 2 +- server/sonar-web/src/main/js/app/theme.js | 2 + .../about/sonarcloud/components/Footer.css | 2 +- .../js/apps/about/sonarcloud/new_style.css | 4 +- .../src/main/js/components/nav/NavBar.css | 8 +- .../main/js/components/nav/NavBarNotif.css | 43 -------- .../main/js/components/nav/NavBarNotif.tsx | 41 ------- .../src/main/js/components/ui/Alert.tsx | 23 ++-- .../__snapshots__/Alert-test.tsx.snap | 26 +++-- 16 files changed, 189 insertions(+), 245 deletions(-) delete mode 100644 server/sonar-web/src/main/js/components/nav/NavBarNotif.css delete mode 100644 server/sonar-web/src/main/js/components/nav/NavBarNotif.tsx diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBgTaskNotif.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBgTaskNotif.tsx index 6a0828e4fa1..e86caecbf86 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBgTaskNotif.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBgTaskNotif.tsx @@ -21,11 +21,10 @@ import * as React from 'react'; import { Link } from 'react-router'; import { FormattedMessage } from 'react-intl'; import ComponentNavLicenseNotif from './ComponentNavLicenseNotif'; -import NavBarNotif from '../../../../components/nav/NavBarNotif'; -import PendingIcon from '../../../../components/icons-components/PendingIcon'; import { STATUSES } from '../../../../apps/background-tasks/constants'; import { getComponentBackgroundTaskUrl } from '../../../../helpers/urls'; import { hasMessage, translate } from '../../../../helpers/l10n'; +import { Alert } from '../../../../components/ui/Alert'; interface Props { component: T.Component; @@ -64,17 +63,15 @@ export default class ComponentNavBgTaskNotif extends React.PureComponent const { currentTask, currentTaskOnSameBranch, isInProgress, isPending } = this.props; if (isInProgress) { return ( - - + {this.renderMessage('component_navigation.status.in_progress')} - + ); } else if (isPending) { return ( - - + {this.renderMessage('component_navigation.status.pending', STATUSES.ALL)} - + ); } else if (currentTask && currentTask.status === STATUSES.FAILED) { if ( @@ -99,7 +96,11 @@ export default class ComponentNavBgTaskNotif extends React.PureComponent message = this.renderMessage('component_navigation.status.failed'); } - return {message}; + return ( + + {message} + + ); } return null; } diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavLicenseNotif.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavLicenseNotif.tsx index bcc3ac9f057..666b261acf4 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavLicenseNotif.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavLicenseNotif.tsx @@ -19,10 +19,10 @@ */ import * as React from 'react'; import { Link } from 'react-router'; -import NavBarNotif from '../../../../components/nav/NavBarNotif'; import { translate } from '../../../../helpers/l10n'; import { isValidLicense } from '../../../../api/marketplace'; import { withAppState } from '../../../../components/withAppState'; +import { Alert } from '../../../../components/ui/Alert'; interface Props { appState: Pick; @@ -73,16 +73,14 @@ export class ComponentNavLicenseNotif extends React.PureComponent if (isValidLicense && currentTask.errorType !== 'LICENSING_LOC') { return ( - - - {translate('component_navigation.status.last_blocked_due_to_bad_license')} - - + + {translate('component_navigation.status.last_blocked_due_to_bad_license')} + ); } return ( - + {currentTask.errorMessage} {this.props.appState.canAdmin ? ( @@ -91,7 +89,7 @@ export class ComponentNavLicenseNotif extends React.PureComponent ) : ( translate('please_contact_administrator') )} - + ); } } diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBgTaskNotif-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBgTaskNotif-test.tsx.snap index 1eb0a5d137b..4b658ea1d1f 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBgTaskNotif-test.tsx.snap +++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBgTaskNotif-test.tsx.snap @@ -1,7 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders background task error correctly 1`] = ` - - + `; exports[`renders background task error correctly for a different branch/PR 1`] = ` - - + `; exports[`renders background task error correctly for a different branch/PR 2`] = ` - - + `; exports[`renders background task in progress info correctly 1`] = ` - - - + `; exports[`renders background task license info correctly 1`] = ` @@ -84,12 +85,10 @@ exports[`renders background task license info correctly 1`] = ` `; exports[`renders background task pending info correctly 1`] = ` - - - + `; exports[`renders background task pending info correctly for admin 1`] = ` - - - + `; diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavLicenseNotif-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavLicenseNotif-test.tsx.snap index 94c8f9251da..daa3a7095c0 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavLicenseNotif-test.tsx.snap +++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavLicenseNotif-test.tsx.snap @@ -1,19 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders a different message if the license is valid 1`] = ` - - - component_navigation.status.last_blocked_due_to_bad_license - - + component_navigation.status.last_blocked_due_to_bad_license + `; exports[`renders background task license info correctly 1`] = ` - - + `; exports[`renders background task license info correctly 2`] = ` - please_contact_administrator - + `; exports[`renders correctly for LICENSING_LOC error 1`] = ` - - + `; diff --git a/server/sonar-web/src/main/js/app/components/nav/settings/PendingPluginsActionNotif.tsx b/server/sonar-web/src/main/js/app/components/nav/settings/PendingPluginsActionNotif.tsx index 0e591a980b2..5b5cbc891ff 100644 --- a/server/sonar-web/src/main/js/app/components/nav/settings/PendingPluginsActionNotif.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/settings/PendingPluginsActionNotif.tsx @@ -20,11 +20,11 @@ import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import InstanceMessage from '../../../../components/common/InstanceMessage'; -import NavBarNotif from '../../../../components/nav/NavBarNotif'; import RestartForm from '../../../../components/common/RestartForm'; import { cancelPendingPlugins, PluginPendingResult } from '../../../../api/plugins'; import { Button } from '../../../../components/ui/buttons'; import { translate } from '../../../../helpers/l10n'; +import { Alert } from '../../../../components/ui/Alert'; interface Props { pending: PluginPendingResult; @@ -58,34 +58,36 @@ export default class PendingPluginsActionNotif extends React.PureComponent - - - - {[ - { length: installing.length, msg: 'marketplace.install_x_plugins' }, - { length: updating.length, msg: 'marketplace.update_x_plugins' }, - { length: removing.length, msg: 'marketplace.uninstall_x_plugins' } - ] - .filter(({ length }) => length > 0) - .map(({ length, msg }, idx) => ( - - {idx > 0 && '; '} - {length} }} - /> - - ))} - - - {this.state.openRestart && } - + +
+ + + + {[ + { length: installing.length, msg: 'marketplace.install_x_plugins' }, + { length: updating.length, msg: 'marketplace.update_x_plugins' }, + { length: removing.length, msg: 'marketplace.uninstall_x_plugins' } + ] + .filter(({ length }) => length > 0) + .map(({ length, msg }, idx) => ( + + {idx > 0 && '; '} + {length} }} + /> + + ))} + + + {this.state.openRestart && } +
+ ); } } diff --git a/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/PendingPluginsActionNotif-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/PendingPluginsActionNotif-test.tsx.snap index 4deb78f7135..9d6f0b78da9 100644 --- a/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/PendingPluginsActionNotif-test.tsx.snap +++ b/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/PendingPluginsActionNotif-test.tsx.snap @@ -1,59 +1,64 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`should display pending actions 1`] = ` - - - - - - - 2 - , + + + + + + 2 + , + } } - } - /> - - - ; - - 1 - , + /> + + + ; + + 1 + , + } } - } - /> - - - - + /> + + + + + `; diff --git a/server/sonar-web/src/main/js/app/styles/components/alerts.css b/server/sonar-web/src/main/js/app/styles/components/alerts.css index f5276040c32..54a3c528cf8 100644 --- a/server/sonar-web/src/main/js/app/styles/components/alerts.css +++ b/server/sonar-web/src/main/js/app/styles/components/alerts.css @@ -18,8 +18,6 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ .alert { - display: flex; - align-items: stretch; margin-bottom: var(--gridSize); border: 1px solid; border-radius: 2px; @@ -33,6 +31,21 @@ display: none; } +.alert-inner { + display: flex; + align-items: stretch; +} + +.alert-inner.is-banner { + min-width: var(--minPageWidth); + max-width: var(--maxPageWidth); + margin-left: auto; + margin-right: auto; + padding-left: var(--pagePadding); + padding-right: var(--pagePadding); + box-sizing: border-box; +} + .alert-icon { flex: 0 0 auto; display: flex; @@ -42,6 +55,11 @@ border-right: 1px solid; } +.alert-icon.is-banner { + width: calc(2 * var(--gridSize)); + border-right: none; +} + .alert-content { flex: 1 0 0; padding: var(--gridSize) calc(2 * var(--gridSize)); diff --git a/server/sonar-web/src/main/js/app/styles/components/page.css b/server/sonar-web/src/main/js/app/styles/components/page.css index a18b282cc45..994c4d37f30 100644 --- a/server/sonar-web/src/main/js/app/styles/components/page.css +++ b/server/sonar-web/src/main/js/app/styles/components/page.css @@ -54,7 +54,7 @@ } .page-container { - min-width: 1080px; + min-width: var(--minPageWidth); } .page-wrapper { diff --git a/server/sonar-web/src/main/js/app/theme.js b/server/sonar-web/src/main/js/app/theme.js index 1a22613180b..8f81591e034 100644 --- a/server/sonar-web/src/main/js/app/theme.js +++ b/server/sonar-web/src/main/js/app/theme.js @@ -102,6 +102,8 @@ module.exports = { contextNavHeightRaw: 9 * grid, + maxPageWidth: '1320px', + minPageWidth: '1080px', pagePadding: '20px', // different diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Footer.css b/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Footer.css index c7e8f6ada5e..a3195d22f27 100644 --- a/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Footer.css +++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Footer.css @@ -21,7 +21,7 @@ background-color: var(--sonarcloudBlack800); color: var(--sonarcloudBlack300); font-size: 12px; - min-width: 1080px; + min-width: var(--minPageWidth); } .sc-footer *:focus { diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css b/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css index de00165f256..38b1d66fed3 100644 --- a/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css +++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css @@ -187,14 +187,14 @@ .sc-header-background { position: absolute; width: 100%; - min-width: 1080px; + min-width: var(--minPageWidth); z-index: 0; } .sc-functionality-background { position: relative; width: 100%; - min-width: 1080px; + min-width: var(--minPageWidth); margin-top: -150px; z-index: 0; } diff --git a/server/sonar-web/src/main/js/components/nav/NavBar.css b/server/sonar-web/src/main/js/components/nav/NavBar.css index 7b61b442dad..5c92acf2ea1 100644 --- a/server/sonar-web/src/main/js/components/nav/NavBar.css +++ b/server/sonar-web/src/main/js/components/nav/NavBar.css @@ -34,10 +34,10 @@ .navbar-limited { position: relative; - min-width: 1080px; - max-width: 1320px; + min-width: var(--minPageWidth); + max-width: var(--maxPageWidth); margin-left: auto; margin-right: auto; - padding-left: 20px; - padding-right: 20px; + padding-left: var(--pagePadding); + padding-right: var(--pagePadding); } diff --git a/server/sonar-web/src/main/js/components/nav/NavBarNotif.css b/server/sonar-web/src/main/js/components/nav/NavBarNotif.css deleted file mode 100644 index ad753aae001..00000000000 --- a/server/sonar-web/src/main/js/components/nav/NavBarNotif.css +++ /dev/null @@ -1,43 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2018 SonarSource SA - * mailto:info AT sonarsource DOT com - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU Lesser General Public - * License as published by the Free Software Foundation; either - * version 3 of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. - */ -.navbar-notif { - margin-bottom: var(--gridSize); - border: 1px solid; - border-left: none; - border-right: none; - padding: var(--gridSize) 0; -} - -.navbar-notif a, -.navbar-notif .button-link { - border-color: var(--darkBlue); -} - -.navbar-notif-error { - border-color: var(--alertBorderError); - background-color: var(--alertBackgroundError); - color: var(--alertTextError); -} - -.navbar-notif-info { - border-color: var(--alertBorderInfo); - background-color: var(--alertBackgroundInfo); - color: var(--alertTextInfo); -} diff --git a/server/sonar-web/src/main/js/components/nav/NavBarNotif.tsx b/server/sonar-web/src/main/js/components/nav/NavBarNotif.tsx deleted file mode 100644 index 41d563b23c0..00000000000 --- a/server/sonar-web/src/main/js/components/nav/NavBarNotif.tsx +++ /dev/null @@ -1,41 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2018 SonarSource SA - * mailto:info AT sonarsource DOT com - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU Lesser General Public - * License as published by the Free Software Foundation; either - * version 3 of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. - */ -import * as React from 'react'; -import * as classNames from 'classnames'; -import './NavBarNotif.css'; - -type NavBarNotifVariant = 'error' | 'info'; - -interface Props { - children?: React.ReactNode; - className?: string; - variant: NavBarNotifVariant; -} - -export default function NavBarNotif(props: Props) { - if (!props.children) { - return null; - } - return ( -
-
{props.children}
-
- ); -} diff --git a/server/sonar-web/src/main/js/components/ui/Alert.tsx b/server/sonar-web/src/main/js/components/ui/Alert.tsx index d7699877bd1..5e0a5ab1243 100644 --- a/server/sonar-web/src/main/js/components/ui/Alert.tsx +++ b/server/sonar-web/src/main/js/components/ui/Alert.tsx @@ -27,7 +27,7 @@ import AlertSuccessIcon from '../icons-components/AlertSuccessIcon'; import Tooltip from '../controls/Tooltip'; import { translate } from '../../helpers/l10n'; -type AlertDisplay = 'block' | 'inline'; +type AlertDisplay = 'banner' | 'block' | 'inline'; type AlertVariant = 'error' | 'warning' | 'success' | 'info'; export interface AlertProps { @@ -44,16 +44,17 @@ export function Alert(props: AlertProps & React.HTMLAttributes) { })} role="alert" {...domProps}> - -
- {variant === 'error' && } - {variant === 'warning' && } - {variant === 'success' && } - {variant === 'info' && } -
- - -
{props.children}
+
+ +
+ {variant === 'error' && } + {variant === 'warning' && } + {variant === 'success' && } + {variant === 'info' && } +
+ +
{props.children}
+
); } diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap index d7528abbc59..3bf04fdbc0f 100644 --- a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap @@ -6,21 +6,25 @@ exports[`should render 1`] = ` id="error-message" role="alert" > - + +
+ +
+
- + This is an error!
- -
- This is an error!
`; -- 2.39.5