Merge pull request #386 from zbynek/alerts

Move alerts to top and update their styles
jenkins-infra · Oct 17, 2020 · 5351448 · 5351448
2 parents 8b3a9f4 + 28eb49b
commit 5351448
Show file tree

Hide file tree

Showing 10 changed files with 296 additions and 129 deletions.
diff --git a/.gitignore b/.gitignore
@@ -105,3 +105,6 @@ src/layout.css
 netlifyctl
 junit.xml
 yarn-error.log
+
+# IDE
+.idea
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -20,6 +20,12 @@ module.exports = {
         'gatsby-transformer-sharp',
         'gatsby-plugin-sharp',
         'gatsby-plugin-react-helmet',
+        {
+            resolve: 'gatsby-plugin-svgr',
+            options: {
+                svgo: false,
+            }
+        },
         {
             resolve: 'gatsby-plugin-polyfill-io',
             options: {

diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
   "dependencies": {
     "@babel/core": "^7.9.0",
     "@sentry/browser": "^5.24.2",
+    "@svgr/webpack": "^5.4.0",
     "chart.js": "^2.9.3",
     "cheerio": "^1.0.0-rc.3",
     "classnames": "^2.2.6",
@@ -71,6 +72,7 @@
     "gatsby-plugin-robots-txt": "^1.5.0",
     "gatsby-plugin-sharp": "^2.6.41",
     "gatsby-plugin-sitemap": "^2.4.14",
+    "gatsby-plugin-svgr": "^2.0.2",
     "gatsby-source-filesystem": "^2.3.34",
     "gatsby-transformer-sharp": "^2.5.16",
     "isomorphic-fetch": "^2.2.1",

diff --git a/src/components/PluginActiveWarnings.jsx b/src/components/PluginActiveWarnings.jsx
@@ -1,14 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import PluginReadableVersion from './PluginReadableVersion';
-import {Modal, ModalHeader, ModalBody} from 'reactstrap';
+import {ReactComponent as Warning} from '../images/warning.svg';
 
 function PluginActiveWarnings({securityWarnings}) {
-    const [showDialog, setShowDialog] = React.useState(false);
-    const toggleShowDialog = (e) => {
-        e && e.preventDefault();
-        setShowDialog(!showDialog);
-    };
 
     if (!securityWarnings) {
         return null;
@@ -18,31 +12,36 @@ function PluginActiveWarnings({securityWarnings}) {
         return null;
     }
     return (
-        <div className="badge-box">
-            <span className="badge active warning" onClick={toggleShowDialog} />
-            <Modal isOpen={showDialog} toggle={toggleShowDialog}>
-                <ModalHeader toggle={toggleShowDialog}>Active Security Warnings</ModalHeader >
-                <ModalBody>
-                    <div>
-                        <ul>
-                            {active.map(warning => {
-                                return (
-                                    <li key={warning.url}>
-                                        <h3><a href={warning.url}>{warning.message}</a></h3>
-                                        <ul>
-                                            {warning.versions.map((version, idx) => (
-                                                <li key={idx}>
-                                                    <PluginReadableVersion version={version} active={false} />
-                                                </li>
-                                            ))}
-                                        </ul>
-                                    </li>
-                                );
-                            })}
-                        </ul>
-                    </div>
-                </ModalBody>
-            </Modal>
+        <div className="alert alert-danger alert-with-icon">
+            <Warning className="alert-icon" aria-label="Security warning"/>
+            {active.length == 1 ? singleWarning(active[0]) : multipleWarnings(active)}
+        </div>
+    );
+}
+
+function multipleWarnings(active) {
+    return (
+        <div>
+            {'The current version of this plugin contains multiple vulnerabilities:'}
+            <ul className="active-warning">
+                { active.map(warning => {
+                    return (
+                        <li key={warning.url}>
+                            <strong><a href={warning.url}>{warning.message}</a></strong>
+                        </li>
+                    );
+                })}
+            </ul>
+        </div>);
+}
+
+function singleWarning(warning) {
+    return (
+        <div>
+            {'The current version of this plugin contains a vulnerability:'}
+            <div className="active-warning">
+                <a href={warning.url}>{warning.message}</a>
+            </div>
         </div>
     );
 }

diff --git a/src/components/PluginGovernanceStatus.jsx b/src/components/PluginGovernanceStatus.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {ReactComponent as Warning} from '../images/warning.svg';
+
 
 function PluginGovernanceStatus({plugin}) {
     if (!plugin || !plugin.labels) {
@@ -8,38 +10,25 @@ function PluginGovernanceStatus({plugin}) {
     return plugin.labels.map((id) => {
         if (id === 'adopt-this-plugin') {
             return (
-                <div className="plugin-governance-notice">
-                    <table>
-                        <tr>
-                            <td className="badge-box"><span className="badge active warning"/></td>
-                            <td className="plugin-governance-notice-text">
-                                <b>This plugin is up for adoption!</b>
-                                {' We are looking for new maintainers. Visit our '}
-                                <a href="https://jenkins.io/doc/developer/plugin-governance/adopt-a-plugin/">Adopt a Plugin</a>
-                                {' initiative for more information.'}
-                            </td>
-                        </tr>
-                    </table>
+                <div className="alert alert-warning alert-with-icon" key={id}>
+                    <Warning className="alert-icon" aria-label="Warning"/>
+                    <b>This plugin is up for adoption!</b>
+                    {' We are looking for new maintainers. Visit our '}
+                    <a href="https://jenkins.io/doc/developer/plugin-governance/adopt-a-plugin/">Adopt a Plugin</a>
+                    {' initiative for more information.'}
                 </div>
             );
         } else if (id === 'deprecated') {
             return (
-                <div className="plugin-governance-notice">
-                    <table>
-                        <tr>
-                            <td className="badge-box"><span className="badge active warning"/></td>
-                            <td className="plugin-governance-notice-text">
-                                <b>Deprecated:</b>
-                                {'This plugin has been marked as deprecated. '}
-                                {'In general, this means that this plugin is either obsolete, no longer being developed, or may no longer work. '}
-                                {'See the documentation for further information about the cause for the deprecation, and suggestions on how to proceed. '}
-                                {'The deprecation process is also documented '}
-                                <a href="https://jenkins.io/doc/developer/plugin-governance/deprecating-or-removing-plugin">here</a>
-                                {'.'}
-
-                            </td>
-                        </tr>
-                    </table>
+                <div className="alert alert-warning alert-with-icon" key={id}>
+                    <Warning className="alert-icon" aria-label="Warning"/>
+                    <b>Deprecated:</b>
+                    {`This plugin has been marked as deprecated.
+                    In general, this means that this plugin is either obsolete, no longer being developed, or may no longer work.
+                    See the documentation below for further information about the cause for the deprecation, and suggestions on how to proceed.
+                    The deprecation process is also documented `}
+                    <a href="https://jenkins.io/doc/developer/plugin-governance/deprecating-or-removing-plugin">here</a>
+                    {'.'}
                 </div>
             );
         } else {

diff --git a/src/components/PluginInactiveWarnings.jsx b/src/components/PluginInactiveWarnings.jsx
@@ -12,8 +12,8 @@ function PluginInactiveWarnings({securityWarnings}) {
     }
     return (
         <div>
-            <h6>Previous Security Warnings</h6>
-            <ul>
+            <h5>Previous Security Warnings</h5>
+            <ul className="security-warning-list">
                 {inactive.map(warning => {
                     return (
                         <li key={warning.url}>

diff --git a/src/images/warning.svg b/src/images/warning.svg
diff --git a/src/styles/base.css b/src/styles/base.css
@@ -59,7 +59,6 @@ body .showResults #plugin-search-form:before {display:none}
 
 
 body a {color:#069}
-body a:visited {color:#7ac}
 body a:hover {color:#09c}
 body a:active {color:#c00}
 
@@ -238,26 +237,41 @@ transform: scale(-1, 1);
   margin-right: 15px;
 }
 #pluginPage #grid-box .download {margin:2rem 0 2rem -.5rem;}
-#pluginPage #grid-box .badge-box {display: inline-block;}
-#pluginPage #grid-box .badge-box  > .badge {
-  background: no-repeat top;
+#pluginPage #grid-box .alert  > .alert-icon {
+  background-repeat: no-repeat;
+  background-position: top;
   background-size: 3rem;
   display: inline-block;
   height: 3rem;
   width: 3rem;
-  overflow: hidden;
-  vertical-align: middle;
-  text-indent: 99rem;
-  white-space: nowrap;
-  margin: 0 -.5rem 0 .5rem;
+  position: absolute;
+  top: calc(50% - 1.5rem);
+  left: 1rem;
+  opacity: .54;
+}
+
+.alert-warning .alert-icon .main-path {
+  fill: #856404
+}
+
+.alert-danger .alert-icon .main-path {
+  fill: #721c24
+}
+
+#pluginPage #grid-box .alert-with-icon {
+  min-height: 4rem;
+  padding-left: 5rem;
 }
-#pluginPage #grid-box .badge-box .badge.warning {
-  background-image: url(../images/warning.svg);
-  background-size:2.5rem;
+
+#pluginPage #grid-box .security-warning-list {
+  list-style: none;
+  padding-left: 0;
 }
-#pluginPage #grid-box .dialog .badge-box  > .badge.warning.inactive{
-  mix-blend-mode:luminosity;
-  opacity:.5
+
+#pluginPage #grid-box .active-warning {
+  font-size: 1rem;
+  font-weight: bolder;
+  margin-bottom: 0;
 }
 .row.flex {display:flex}
 
@@ -882,19 +896,3 @@ a.card:hover {
 #pluginPage #grid-box .content .main td {
   padding: 1em;
 }
-
-#pluginPage .plugin-governance-notice {
-  padding: 5px;
-  background-color: #fcf8e3;
-  color: #a48d62;
-  border-color: #faebcc;
-  margin-bottom: 5px;
-}
-
-#pluginPage .plugin-governance-notice table {
-  margin-bottom: 0px;
-}
-
-#pluginPage .plugin-governance-notice .plugin-governance-notice-text {
-  padding-left: 20px;
-}
diff --git a/src/templates/plugin.jsx b/src/templates/plugin.jsx
@@ -54,6 +54,8 @@ function PluginPage({data: {jenkinsPlugin: plugin, reverseDependencies: reverseD
                     <h1 className="title">
                         {cleanTitle(plugin.title)}
                     </h1>
+                    <PluginActiveWarnings securityWarnings={plugin.securityWarnings} />
+                    <PluginGovernanceStatus plugin={plugin} />
                     <ul className="nav nav-tabs">
                         {tabs.map(tab => (
                             <li className="nav-item" key={tab.id}>
@@ -64,7 +66,6 @@ function PluginPage({data: {jenkinsPlugin: plugin, reverseDependencies: reverseD
                     <div className="padded">
                         {state.selectedTab === 'documentation' && (<>
                             <div className="title-details">
-                                <PluginActiveWarnings securityWarnings={plugin.securityWarnings} />
                                 <span className="version">
                                     {'Version: '}
                                     {plugin.version}
@@ -93,8 +94,6 @@ function PluginPage({data: {jenkinsPlugin: plugin, reverseDependencies: reverseD
                                 </div>
                             </div>
 
-                            <PluginGovernanceStatus plugin={plugin} />
-
                             {plugin.wiki.content && <div className="content" dangerouslySetInnerHTML={{__html: plugin.wiki.content}} />}
                         </>)}
                         {state.selectedTab === 'releases' && <PluginReleases pluginId={plugin.id} />}