SONAR-9936 Update marketplace pending plugins notif

12 files changed, 58 insertions, 66 deletions

diff --git a/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx b/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx
index 7f7632d6630..34dc8b4f72c 100644
--- a/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx
@@ -61,6 +61,11 @@ export default class SettingsNav extends React.PureComponent<Props> {
     return this.isSomethingActive(urls);
   }
 
+  isMarketplace() {
+    const urls = ['/admin/marketplace'];
+    return this.isSomethingActive(urls);
+  }
+
   renderExtension = ({ key, name }: Extension) => {
     return (
       <li key={key}>
@@ -82,7 +87,7 @@ export default class SettingsNav extends React.PureComponent<Props> {
     const projectsClassName = classNames('dropdown-toggle', { active: isProjects });
     const systemClassName = classNames('dropdown-toggle', { active: isSystem });
     const configurationClassNames = classNames('dropdown-toggle', {
-      active: !isSecurity && !isProjects && !isSystem && !isSupport
+      active: !isSecurity && !isProjects && !isSystem && !isSupport && !this.isMarketplace()
     });
 
     const extensionsWithoutSupport = extensions.filter(
diff --git a/server/sonar-web/src/main/js/apps/marketplace/App.tsx b/server/sonar-web/src/main/js/apps/marketplace/App.tsx
index 02910f26c5e..74512fb5dd6 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/App.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/App.tsx
@@ -164,24 +164,21 @@ export default class App extends React.PureComponent<Props, State> {
     this.setState({ editionStatus: editionStatus });
 
   updateQuery = (newQuery: Partial<Query>) => {
-    const query = serializeQuery({
-      ...parseQuery(this.props.location.query),
-      ...newQuery
-    });
-    this.context.router.push({
-      pathname: this.props.location.pathname,
-      query
-    });
+    const query = serializeQuery({ ...parseQuery(this.props.location.query), ...newQuery });
+    this.context.router.push({ pathname: this.props.location.pathname, query });
   };
 
   render() {
-    const { editionStatus, plugins, pending } = this.state;
+    const { editionStatus, loading, plugins, pending } = this.state;
     const query = parseQuery(this.props.location.query);
     const filteredPlugins = query.search ? filterPlugins(plugins, query.search) : plugins;
     return (
       <div className="page page-limited" id="marketplace-page">
         <Helmet title={translate('marketplace.page')} />
-        {editionStatus && <EditionsStatusNotif editionStatus={editionStatus} />}
+        <div className="marketplace-notifs">
+          {editionStatus && <EditionsStatusNotif editionStatus={editionStatus} />}
+          <PendingActions refreshPending={this.fetchPendingPlugins} pending={pending} />
+        </div>
         <Header />
         <EditionBoxes
           editionStatus={editionStatus}
@@ -190,19 +187,21 @@ export default class App extends React.PureComponent<Props, State> {
           updateCenterActive={this.props.updateCenterActive}
           updateEditionStatus={this.updateEditionStatus}
         />
-        <PendingActions refreshPending={this.fetchPendingPlugins} pending={pending} />
         <Search
           query={query}
           updateCenterActive={this.props.updateCenterActive}
           updateQuery={this.updateQuery}
         />
-        <PluginsList
-          plugins={filteredPlugins}
-          pending={pending}
-          refreshPending={this.fetchPendingPlugins}
-          updateQuery={this.updateQuery}
-        />
-        <Footer total={filteredPlugins.length} />
+        {loading && <i className="spinner" />}
+        {!loading && (
+          <PluginsList
+            plugins={filteredPlugins}
+            pending={pending}
+            refreshPending={this.fetchPendingPlugins}
+            updateQuery={this.updateQuery}
+          />
+        )}
+        {!loading && <Footer total={filteredPlugins.length} />}
       </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/marketplace/PendingActions.tsx b/server/sonar-web/src/main/js/apps/marketplace/PendingActions.tsx
index bc96da9bbf0..a42c72145b3 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/PendingActions.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/PendingActions.tsx
@@ -53,9 +53,8 @@ export default class PendingActions extends React.PureComponent<Props, State> {
       return null;
     }
 
-    const nbPluginsClass = 'big little-spacer-left little-spacer-right';
     return (
-      <div className="js-pending panel panel-warning big-spacer-bottom">
+      <div className="js-pending alert alert-warning">
         <div className="display-inline-block">
           <p>{translate('marketplace.sonarqube_needs_to_be_restarted_to')}</p>
           <ul className="list-styled spacer-top">
@@ -64,13 +63,7 @@ export default class PendingActions extends React.PureComponent<Props, State> {
                 <FormattedMessage
                   defaultMessage={translate('marketplace.install_x_plugins')}
                   id="marketplace.install_x_plugins"
-                  values={{
-                    nb: (
-                      <strong className={'text-success ' + nbPluginsClass}>
-                        {installing.length}
-                      </strong>
-                    )
-                  }}
+                  values={{ nb: <strong>{installing.length}</strong> }}
                 />
               </li>
             )}
@@ -79,13 +72,7 @@ export default class PendingActions extends React.PureComponent<Props, State> {
                 <FormattedMessage
                   defaultMessage={translate('marketplace.update_x_plugins')}
                   id="marketplace.update_x_plugins"
-                  values={{
-                    nb: (
-                      <strong className={'text-success ' + nbPluginsClass}>
-                        {updating.length}
-                      </strong>
-                    )
-                  }}
+                  values={{ nb: <strong>{updating.length}</strong> }}
                 />
               </li>
             )}
@@ -94,18 +81,14 @@ export default class PendingActions extends React.PureComponent<Props, State> {
                 <FormattedMessage
                   defaultMessage={translate('marketplace.uninstall_x_plugins')}
                   id="marketplace.uninstall_x_plugins"
-                  values={{
-                    nb: (
-                      <strong className={'text-danger ' + nbPluginsClass}>{removing.length}</strong>
-                    )
-                  }}
+                  values={{ nb: <strong>{removing.length}</strong> }}
                 />
               </li>
             )}
           </ul>
         </div>
-        <div className="pull-right button-group">
-          <button className="js-restart" onClick={this.handleOpenRestart}>
+        <div className="pull-right">
+          <button className="js-restart little-spacer-right" onClick={this.handleOpenRestart}>
             {translate('marketplace.restart')}
           </button>
           <button className="js-cancel-all button-red" onClick={this.handleRevert}>
diff --git a/server/sonar-web/src/main/js/apps/marketplace/Search.tsx b/server/sonar-web/src/main/js/apps/marketplace/Search.tsx
index 194427a709e..3bef8189711 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/Search.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/Search.tsx
@@ -69,7 +69,7 @@ export default class Search extends React.PureComponent<Props, State> {
     ];
     return (
       <div id="marketplace-search" className="panel panel-vertical bordered-bottom spacer-bottom">
-        <div className="display-inline-block text-top nowrap big-spacer-right">
+        <div className="display-inline-block text-top nowrap abs-width-150 spacer-right">
           <RadioToggle
             name="marketplace-filter"
             onCheck={this.handleFilterChange}
diff --git a/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/PendingActions-test.tsx.snap b/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/PendingActions-test.tsx.snap
index 3afbde17ba6..b30e1e22d36 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/PendingActions-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/PendingActions-test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`should display pending actions 1`] = `
 <div
-  className="js-pending panel panel-warning big-spacer-bottom"
+  className="js-pending alert alert-warning"
 >
   <div
     className="display-inline-block"
@@ -19,9 +19,7 @@ exports[`should display pending actions 1`] = `
           id="marketplace.install_x_plugins"
           values={
             Object {
-              "nb": <strong
-                className="text-success big little-spacer-left little-spacer-right"
-            >
+              "nb": <strong>
                 2
             </strong>,
             }
@@ -34,9 +32,7 @@ exports[`should display pending actions 1`] = `
           id="marketplace.uninstall_x_plugins"
           values={
             Object {
-              "nb": <strong
-                className="text-danger big little-spacer-left little-spacer-right"
-            >
+              "nb": <strong>
                 1
             </strong>,
             }
@@ -46,10 +42,10 @@ exports[`should display pending actions 1`] = `
     </ul>
   </div>
   <div
-    className="pull-right button-group"
+    className="pull-right"
   >
     <button
-      className="js-restart"
+      className="js-restart little-spacer-right"
       onClick={[Function]}
     >
       marketplace.restart
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/EditionsStatusNotif.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/EditionsStatusNotif.tsx
index 1ef4aacc308..312f0360afd 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/EditionsStatusNotif.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/EditionsStatusNotif.tsx
@@ -40,14 +40,14 @@ export default class EditionsStatusNotif extends React.PureComponent<Props, Stat
     const { editionStatus } = this.props;
     if (editionStatus.installationStatus === 'AUTOMATIC_IN_PROGRESS') {
       return (
-        <div className="alert alert-page alert-info">
+        <div className="alert alert-info">
           <i className="spinner spacer-right text-bottom" />
           <span>{translate('marketplace.status.AUTOMATIC_IN_PROGRESS')}</span>
         </div>
       );
     } else if (editionStatus.installationStatus === 'AUTOMATIC_READY') {
       return (
-        <div className="alert alert-page alert-success">
+        <div className="alert alert-success">
           <span>{translate('marketplace.status.AUTOMATIC_READY')}</span>
           <button className="js-restart spacer-left" onClick={this.handleOpenRestart}>
             {translate('marketplace.restart')}
@@ -59,7 +59,7 @@ export default class EditionsStatusNotif extends React.PureComponent<Props, Stat
       ['MANUAL_IN_PROGRESS', 'AUTOMATIC_FAILURE'].includes(editionStatus.installationStatus)
     ) {
       return (
-        <div className="alert alert-page alert-danger">
+        <div className="alert alert-danger">
           {translate('marketplace.status', editionStatus.installationStatus)}
           <a className="little-spacer-left" href="https://www.sonarsource.com" target="_blank">
             {translate('marketplace.how_to_install')}
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginActions.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginActions.tsx
index f2fce9f658e..c895d0aedd1 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginActions.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginActions.tsx
@@ -134,7 +134,7 @@ export default class PluginActions extends React.PureComponent<Props, State> {
         )}
         {loading && <i className="spinner spacer-right" />}
         {isPluginInstalled(plugin) && (
-          <div className="button-group">
+          <div className="display-inlin-block">
             {plugin.updates &&
               plugin.updates.map((update, idx) => (
                 <PluginUpdateButton
@@ -145,7 +145,7 @@ export default class PluginActions extends React.PureComponent<Props, State> {
                 />
               ))}
             <button
-              className="js-uninstall button-red"
+              className="js-uninstall button-red little-spacer-left"
               disabled={loading}
               onClick={this.handleUninstall}>
               {translate('marketplace.uninstall')}
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdateButton.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdateButton.tsx
index 41028a6ff0a..26ac3846058 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdateButton.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdateButton.tsx
@@ -36,7 +36,10 @@ export default class PluginUpdateButton extends React.PureComponent<Props> {
       return null;
     }
     return (
-      <button className="js-update" onClick={this.handleClick} disabled={disabled}>
+      <button
+        className="js-update little-spacer-bottom"
+        onClick={this.handleClick}
+        disabled={disabled}>
         {translateWithParameters('marketplace.update_to_x', update.release.version)}
       </button>
     );
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/EditionsStatusNotif-test.tsx.snap b/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/EditionsStatusNotif-test.tsx.snap
index 807a7c6714a..537348e08af 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/EditionsStatusNotif-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/EditionsStatusNotif-test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`should display a ready notification 1`] = `
 <div
-  className="alert alert-page alert-success"
+  className="alert alert-success"
 >
   <span>
     marketplace.status.AUTOMATIC_READY
@@ -18,7 +18,7 @@ exports[`should display a ready notification 1`] = `
 
 exports[`should display an error notification 1`] = `
 <div
-  className="alert alert-page alert-danger"
+  className="alert alert-danger"
 >
   marketplace.status.AUTOMATIC_FAILURE
   <a
@@ -33,7 +33,7 @@ exports[`should display an error notification 1`] = `
 
 exports[`should display an in progress notif 1`] = `
 <div
-  className="alert alert-page alert-info"
+  className="alert alert-info"
 >
   <i
     className="spinner spacer-right text-bottom"
diff --git a/server/sonar-web/src/main/js/apps/marketplace/style.css b/server/sonar-web/src/main/js/apps/marketplace/style.css
index 037a0c133d9..6363589603f 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/style.css
+++ b/server/sonar-web/src/main/js/apps/marketplace/style.css
@@ -30,3 +30,11 @@
   align-items: baseline;
   justify-content: space-between;
 }
+
+.marketplace-notifs .alert {
+  padding: 8px;
+}
+
+.marketplace-notifs .alert:last-child {
+  margin-bottom: 16px;
+}
diff --git a/server/sonar-web/src/main/less/components/alerts.less b/server/sonar-web/src/main/less/components/alerts.less
index ee471b96bbb..65694046261 100644
--- a/server/sonar-web/src/main/less/components/alerts.less
+++ b/server/sonar-web/src/main/less/components/alerts.less
@@ -38,11 +38,6 @@
   vertical-align: middle;
 }
 
-.alert-page {
-  margin-bottom: 16px;
-  padding: 8px;
-}
-
 .modal-alert {
   margin: -10px -10px 16px;
   padding: 10px;
diff --git a/server/sonar-web/src/main/less/init/misc.less b/server/sonar-web/src/main/less/init/misc.less
index b5f4e4f5ada..f7a4583cb98 100644
--- a/server/sonar-web/src/main/less/init/misc.less
+++ b/server/sonar-web/src/main/less/init/misc.less
@@ -194,6 +194,9 @@ td.big-spacer-top {
   width: 10%;
 }
 
+.abs-width-150 {
+  width: 150px;
+}
 .abs-width-240 {
   width: 240px;
 }