Merge pull request #277 from zbynek/dependencies-tab

Put dependencies in their own tab

Author: halkeye

src/components/PluginDependencies.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Link} from 'gatsby';
 import {Modal, ModalHeader, ModalBody} from 'reactstrap';
-const sortFunc = (a, b) => a.implied === b.implied ? (a.optional === b.optional ? 0 : a.optional ? 1 : -1 ) : (a.implied ? 1 : -1);
 
 function PluginDependencies({dependencies} ) {
     const [isShowImplied, setShowImplied] = React.useState(false);
@@ -14,10 +13,24 @@ function PluginDependencies({dependencies} ) {
     if (!dependencies || dependencies.length === 0) {
         return (<div className="empty">No dependencies found</div>);
     }
-
+    const optionalDependencies = dependencies.filter(dep => dep.optional);
+    const impliedDependencies = dependencies.filter(dep => dep.implied && !dep.optional);
+    const requiredDependencies = dependencies.filter(dep => !dep.implied && !dep.optional);
+    const dependencyLink = (dependency) => {
+        return (
+            <div key={dependency.name} className="implied">
+                <Link to={`/${dependency.name}/`}>
+                    {dependency.title}
+                    {' ≥ '}
+                    {dependency.version}
+                </Link>
+            </div>
+        );
+    };
     return (
         <>
-            <Modal placement="bottom" isOpen={isShowImplied} target="pluginDependancies" toggle={toggleShowImplied}>
+            <h1>Dependencies</h1>
+            <Modal placement="bottom" isOpen={isShowImplied} target="pluginDependencies" toggle={toggleShowImplied}>
                 <ModalHeader toggle={toggleShowImplied}>About Implied Plugin Dependencies</ModalHeader >
                 <ModalBody>
                     <div>
@@ -39,47 +52,34 @@ function PluginDependencies({dependencies} ) {
                     </div>
                 </ModalBody>
             </Modal>
-            <div id="pluginDependancies">
+            <div id="pluginDependencies">
+                {
+                    !(optionalDependencies.length + impliedDependencies.length) ? '' : (
+                        <h2>Required</h2>
+                    )
+                }
+                {
+                    requiredDependencies.map(dependencyLink)
+                }
+                {
+                    !optionalDependencies.length ? '' : (
+                        <h2>Optional</h2>
+                    )
+                }
+                {
+                    optionalDependencies.map(dependencyLink)
+                }
+                {
+                    !impliedDependencies.length ? '' : (
+                        <h2>
+                            Implied
+                            {' '}
+                            <a href="#" onClick={toggleShowImplied}><span className="req">(what&apos;s this?)</span></a>
+                        </h2>
+                    )
+                }
                 {
-                    dependencies.sort(sortFunc).map((dependency) => {
-                        const kind = !dependency.optional ? (dependency.implied ? 'implied' : 'required') : 'optional';
-                        if (kind === 'implied') {
-                            return (
-                                <div key={dependency.name} className={kind}>
-                                    <Link to={`/${dependency.name}/`}>
-                                        {dependency.title}
-                                        {' '}
-                                        v.
-                                        {dependency.version}
-                                        {' '}
-                                        <span className="req">
-                                            (
-                                            {kind}
-                                            )
-                                        </span>
-                                    </Link>
-                                    <a href="#" onClick={toggleShowImplied}><span className="req">(what&apos;s this?)</span></a>
-                                </div>
-                            );
-                        }
-                        return (
-                            <div key={dependency.name} className={kind}>
-                                <Link to={`/${dependency.name}/`}>
-                                    {dependency.title}
-                                    {' '}
-                                    ≥
-                                    {' '}
-                                    {dependency.version}
-                                    {' '}
-                                    {kind === 'required' ? '' : <span className="req">
-                                        (
-                                        {kind}
-                                        )
-                                    </span>}
-                                </Link>
-                            </div>
-                        );
-                    })
+                    impliedDependencies.map(dependencyLink)
                 }
             </div>
         </>

src/components/PluginReleases.jsx

@@ -4,7 +4,7 @@ import axios from 'axios';
 import ReactTimeAgo from 'react-time-ago/tooltip';
 import './PluginReleases.css';
 
-function PluginIssues({pluginId}) {
+function PluginReleases({pluginId}) {
     const [isLoading, setIsLoading] = useState(false);
     const [releases, setReleases] = useState([]);
 
@@ -52,7 +52,7 @@ function PluginIssues({pluginId}) {
     );
 }
 
-PluginIssues.propTypes = {
+PluginReleases.propTypes = {
     pluginId: PropTypes.string.isRequired
 };
-export default PluginIssues;
+export default PluginReleases;

src/styles/base.css

@@ -46,9 +46,9 @@ body .showResults #plugin-search-form:before {display:none}
 }
 .isFiltered .filters .show-all {display: inline-block}
 
-.dependencies .req{
-    font-size: .67rem;
-    opacity: .67;
+#pluginDependencies h2{
+    font-size: 1.2rem;
+    margin-top: .7rem;
 }
 
 .empty {opacity:.33}

src/templates/plugin.jsx

@@ -30,6 +30,7 @@ const tabs = [
     {id: 'documentation', label: 'Documentation'},
     {id: 'releases', label: 'Releases'},
     {id: 'issues', label: 'Issues'},
+    {id: 'dependencies', label: 'Dependencies'},
 ];
 
 function getDefaultTab() {
@@ -85,10 +86,6 @@ function PluginPage({data: {jenkinsPlugin: plugin}}) {
                                     <h5>Maintainers</h5>
                                     <PluginMaintainers maintainers={plugin.maintainers} />
                                 </div>
-                                <div className="col-md-4 dependencies">
-                                    <h5>Dependencies</h5>
-                                    <PluginDependencies dependencies={plugin.dependencies} />
-                                </div>
                             </div>
 
                             <PluginGovernanceStatus plugin={plugin} />
@@ -97,6 +94,7 @@ function PluginPage({data: {jenkinsPlugin: plugin}}) {
                         </>)}
                         {state.selectedTab === 'releases' && <PluginReleases pluginId={plugin.id} />}
                         {state.selectedTab === 'issues' && <PluginIssues pluginId={plugin.id} />}
+                        {state.selectedTab === 'dependencies' && <PluginDependencies dependencies={plugin.dependencies} />}
                     </div>
                 </div>
                 <div className="col-md-3 gutter">