Navigation bar fixes

src/components/Faq/Faq.js

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import questions from "./Faq.json";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionContent,
+  AccordionToggle,
+  Page,
+  PageSection
+} from "@patternfly/react-core";
+
+const Faq = () => {
+  const [expanded, setExpanded] = useState("");
+
+  const onToggle = (id) => {
+    if (id === expanded) {
+      setExpanded("");
+    } else {
+      setExpanded(id);
+    }
+  };
+
+  return (
+    <Page>
+        <PageSection>
+      {questions.map(({ key, question, answer }) => (
+        <Accordion asDefinitionList={false} key={key}>
+          <AccordionItem>
+            <AccordionToggle
+              onClick={() => {
+                onToggle(`ex-toggle+${key}`);
+              }}
+              isExpanded={expanded === `ex-toggle+${key}`}
+              id={`ex-toggle+${key}`}
+            >
+              {question}
+            </AccordionToggle>
+            <AccordionContent
+              id="ex-expand1"
+              isHidden={expanded !== `ex-toggle+${key}`}
+            >
+              <p>{answer}</p>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      ))}
+        </PageSection>
+    </Page>
+  );
+};
+
+export default Faq;

src/components/Faq/Faq.json

@@ -0,0 +1,17 @@
+[
+  {
+    "key": 1,
+    "question": "How to install a plugin",
+    "answer": "Excepteur quis Lorem cillum non ipsum reprehenderit veniam non veniam cillum velit. Cupidatat enim occaecat amet quis id velit et ex deserunt. Cillum nulla dolor est ut pariatur labore laborum ex occaecat sint non. Lorem et consequat eiusmod in incididunt anim labore nostrud officia veniam."
+  },
+  {
+    "key": 2,
+    "question": "How ChRIS Store works",
+    "answer": "Ad officia culpa ad nostrud id. Occaecat aliqua incididunt enim ad fugiat magna sint commodo non dolore. Nisi labore in aute consectetur irure qui commodo deserunt elit nisi dolor mollit fugiat."
+  },
+  {
+    "key": 3,
+    "question": "How to run your own ChRIS server",
+    "answer": "Deserunt deserunt adipisicing et consectetur aliquip excepteur aliquip cillum proident commodo dolore eu. Deserunt sint Lorem irure duis dolore minim ipsum proident. In elit incididunt voluptate magna pariatur laborum commodo ea laborum culpa fugiat dolor sint. Exercitation velit nisi ex duis ea incididunt id adipisicing veniam nisi cillum. Tempor nisi laboris aliquip veniam."
+  }
+]

src/components/Navbar/Navbar.js

@@ -9,7 +9,7 @@ import {
   PageHeaderToolsItem,
 } from '@patternfly/react-core';
 import Button from '../Button';
-import { NavLink } from 'react-router-dom';
+import { useLocation, NavLink } from 'react-router-dom';
 import './Navbar.css';
 import LogoImg from '../../assets/img/chris-plugin-store_logo.png';
 import ChrisStore from '../../store/ChrisStore';
@@ -20,20 +20,25 @@ const navLinks = [
     to: '/plugins'
   },
   {
-    label: 'Quick Start',
+    label: 'Submit your Plugin',
     to: '/quickstart'
   },
+  {
+    label: 'FAQ',
+    to: '/faq'
+  },
   {
     label: 'Dashboard',
     to: '/dashboard',
     cond: (store) => store.get('isLoggedIn')
-  }
+  },
 ];
 
 /**
  * Conditionally renders a list of links into a <Nav>.
  */
 const Navigation = ({ store }) => {
+  const location = useLocation()
   const shouldShowLink = (linkInfo) => {
     if (!linkInfo.cond) {
       return true;
@@ -50,7 +55,7 @@ const Navigation = ({ store }) => {
               <NavItem
                 key={link.to}
                 itemId={link.to}
-                isActive={window && window.location.pathname === link.to}>
+                isActive={location.pathname === link.to}>
                 <NavLink to={link.to} activeClassName="pf-m-current">
                   {link.label}
                 </NavLink>

src/components/Plugins/Plugins.js

@@ -306,9 +306,40 @@ export class Plugins extends Component {
         )}
         <div className="plugins-stats">
           <div className="row plugins-stats-row">
+            {/* number of plugins found related to the search  */}
             {pluginsFound}
             <DropdownButton id="sort-by-dropdown" title="Sort By" pullRight>
-              <MenuItem eventKey="1">Name</MenuItem>
+              <MenuItem
+                eventKey="1"
+                onClick={() =>
+                  this.setState({
+                    sortFunc: (a, b) => (a.name > b.name ? 1 : -1),
+                  })
+                }
+              >
+                Name
+              </MenuItem>
+              <MenuItem
+                eventKey="2"
+                onClick={() =>
+                  this.setState({
+                    sortFunc: (a, b) => (a.authors > b.authors ? 1 : -1),
+                  })
+                }
+              >
+                Author
+              </MenuItem>
+              <MenuItem
+                eventKey="3"
+                onClick={() =>
+                  this.setState({
+                    sortFunc: (a, b) =>
+                      new Date(a.creation_date) - new Date(b.creation_date),
+                  })
+                }
+              >
+                Date Created
+              </MenuItem>
             </DropdownButton>
           </div>
         </div>

src/components/Plugins/Plugins.test.js

@@ -55,11 +55,11 @@ describe('Plugins', () => {
       .toHaveLength(1);
   });
 
-  it('should render 1 MenuItem component inside DropdownButton', () => {
+  it('should render 3 MenuItem component inside DropdownButton', () => {
     expect(wrapper
       .find('DropdownButton')
       .find('MenuItem'))
-      .toHaveLength(1);
+      .toHaveLength(3);
   });
 
   it('every MenuItem component should have eventKey prop', () => {
@@ -154,6 +154,7 @@ describe('rendered Plugins', () => {
         dock_image: 'dock/image2',
         creation_date: '2018-06-19T15:29:11.349272Z',
       },
+
     ];
     wrapper = shallow(<Plugins store={new Map()} />);
     wrapper.setState({ pluginList: samplePluginList });
@@ -221,7 +222,7 @@ describe('rendered Plugins', () => {
 
     const firstPluginId = firstPlugin.props().id;
 
-    expect(wrapper.state().pluginList[firstPluginId]).not.toBeUndefined();
+    expect(wrapper.state().pluginList[firstPluginId]).toBeDefined();
   });
 
   it('should mark plugin as NOT favorited when plugin star is clicked and plugin is already a favorite', async () => {

src/components/Router/Router.js

@@ -11,6 +11,7 @@ import CreatePlugin from '../CreatePlugin/CreatePlugin';
 import NotFound from '../NotFound/NotFound';
 import Dashboard from '../Dashboard/Dashboard';
 import ProtectedRoute from './ProtectedRoute';
+import Faq from '../Faq/Faq'
 
 const Router = () => (
   <AppLayout>
@@ -19,6 +20,7 @@ const Router = () => (
       <Route path="/plugins" component={ConnectedPlugins} />
       <Route path="/plugin/:plugin" component={ConnectedPlugin} />
       <Route path="/quickstart" component={Developers} />
+      <Route path="/faq" component={Faq}/>
       <ProtectedRoute path="/create" component={CreatePlugin} />
       <ProtectedRoute path="/dashboard" component={Dashboard} />
       <Route component={NotFound} />

yarn.lock

@@ -15750,4 +15750,4 @@ yargs@^8.0.2:
     string-width "^2.0.0"
     which-module "^2.0.0"
     y18n "^3.2.1"
-    yargs-parser "^7.0.0"
+    yargs-parser "^7.0.0"