Merge pull request #46 from FREVA-CLINT/web_fixes

Web fixes

assets/js/Components/Pagination.js

@@ -1,20 +1,10 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
-import { Button, Form } from "react-bootstrap";
+import { Button } from "react-bootstrap";
 
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
 
 export default function Pagination(props) {
-  const [active, setActive] = useState(props.active);
-
-  useEffect(() => {
-    setActive(props.active);
-  }, [props]);
-
-  function handleFieldChange(e) {
-    setActive(Number(e.target.value));
-  }
-
   function getPrevious() {
     return props.handleSubmit(props.active - 1);
   }
@@ -23,42 +13,38 @@ export default function Pagination(props) {
     return props.handleSubmit(props.active + 1);
   }
 
-  function getPage(e) {
-    if (e.key === "Enter") {
-      const valid = active >= 1 && active <= props.items;
-      if (valid) {
-        props.handleSubmit(active);
-      }
-    }
-  }
-
   const firstPage = 1;
   const lastPage = props.items;
   const activePage = props.active;
-  const valid = active >= 1 && active <= lastPage;
+  const totalFiles = props.totalFiles;
+  const batchSize = props.batchSize;
+
+  // const valid = active >= 1 && active <= lastPage;
   return (
     <div className="d-flex justify-content-end">
       <Button
+        className="p-0 d-flex align-items-center"
         variant="link"
         disabled={firstPage === activePage}
         onClick={getPrevious}
       >
         <FaChevronLeft className="intext-large-icon" />
-      </Button>{" "}
-      <React.Fragment>
-        <Form.Control
-          className="pagination-form"
-          isInvalid={!valid}
-          onChange={handleFieldChange}
-          onKeyPress={getPage}
-          min={1}
-          max={lastPage}
-          value={active}
-          type="number"
-        />{" "}
-      </React.Fragment>
-      <span className="m-2 me-0 text-nowrap">of {lastPage} </span>
+      </Button>
+      <span className="m-2 text-nowrap">
+        Showing:{" "}
+        <span className="fw-bold">
+          {((activePage - 1) * batchSize + 1).toLocaleString("en-US")}
+        </span>{" "}
+        to
+        <span className="fw-bold">
+          {" "}
+          {Math.min(totalFiles, activePage * batchSize).toLocaleString("en-US")}
+        </span>
+        {" of "}
+        <span className="fw-bold">{totalFiles}</span>{" "}
+      </span>
       <Button
+        className="p-0 d-flex align-items-center"
         variant="link"
         disabled={lastPage === activePage || props.items <= 0}
         onClick={getNext}
@@ -73,4 +59,6 @@ Pagination.propTypes = {
   items: PropTypes.number.isRequired,
   active: PropTypes.number.isRequired,
   handleSubmit: PropTypes.func.isRequired,
+  totalFiles: PropTypes.string.isRequired,
+  batchSize: PropTypes.number.isRequired,
 };

assets/js/Containers/App/actions.js

@@ -22,10 +22,10 @@ export const getCurrentUser = () => (dispatch) => {
         payload: json,
       })
     )
-    .catch((error) => {
+    .catch(() => {
       dispatch({
         type: constants.SET_ERROR,
-        payload: error,
+        payload: "Could not load user information.",
       });
     });
 };

assets/js/Containers/App/index.js

@@ -2,6 +2,8 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 
+import { Alert } from "react-bootstrap";
+
 import Spinner from "../../Components/Spinner";
 
 import { getCurrentUser } from "./actions";
@@ -16,6 +18,13 @@ class App extends React.Component {
     if (!this.props.currentUser && this.props.error === "") {
       return <Spinner />;
     }
+    if (this.props.error) {
+      return (
+        <div className="container">
+          <Alert variant="danger">{this.props.error}</Alert>
+        </div>
+      );
+    }
 
     return <React.Fragment>{this.props.children}</React.Fragment>;
   }

assets/js/Containers/App/reducers.js

@@ -12,9 +12,6 @@ export const appReducer = (state = appReducerInitialState, action) => {
     case constants.SET_ERROR:
       return { ...state, error: action.payload };
     default:
-      // In our default case we reset the error on
-      // every new state change if the error has not been
-      // set.
-      return { ...state, error: "" };
+      return { ...state };
   }
 };

assets/js/Containers/Databrowser/FilesPanel.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Tooltip, OverlayTrigger, Button, Badge } from "react-bootstrap";
+import { Tooltip, OverlayTrigger, Button } from "react-bootstrap";
 import { withRouter } from "react-router";
 
 import { FaInfoCircle } from "react-icons/fa";
@@ -30,7 +30,7 @@ function FilesPanelImpl(props) {
     const currentLocation = props.location.pathname;
     const query = queryString.stringify({
       ...props.location.query,
-      start: (offset - 1) * 100,
+      start: (offset - 1) * BATCH_SIZE,
     });
     props.router.push(currentLocation + "?" + query);
   }
@@ -84,17 +84,20 @@ function FilesPanelImpl(props) {
 
   return (
     <div className="pb-3">
-      <h3 className="d-flex justify-content-between">
-        <span>Files</span>
-        <Badge bg="secondary">{numFiles.toLocaleString("en-US")}</Badge>
-      </h3>
-      <div className="mb-2 d-flex align-items-end flex-column">
-        <Pagination
-          items={Math.ceil(props.databrowser.numFiles / BATCH_SIZE)}
-          active={Math.floor(props.databrowser.start / BATCH_SIZE) + 1}
-          handleSubmit={setPageOffset}
-        />
-      </div>
+      <span className="d-flex justify-content-between">
+        <h3 className="d-inline">
+          <span>Files</span>
+        </h3>
+        <div className="mb-2 d-flex align-items-end flex-column">
+          <Pagination
+            items={Math.ceil(props.databrowser.numFiles / BATCH_SIZE)}
+            active={Math.floor(props.databrowser.start / BATCH_SIZE) + 1}
+            totalFiles={numFiles.toLocaleString("en-US")}
+            batchSize={BATCH_SIZE}
+            handleSubmit={setPageOffset}
+          />
+        </div>
+      </span>
       <ul
         className="jqueryFileTree border shadow-sm py-3 rounded"
         style={{ maxHeight: "1000px", overflow: "auto" }}

assets/js/Containers/Databrowser/reducers.js

@@ -30,15 +30,6 @@ export const databrowserReducer = (state = databrowserInitialState, action) => {
     case constants.UPDATE_FACET_SELECTION: {
       const { minDate, maxDate, dateSelector, start, flavour, ...queryObject } =
         action.queryObject;
-      // let newObject = {}
-      // if (state.facets) {
-      //   Object.keys(state.facets).forEach(key => {
-      //     if (key in queryObject) {
-      //       newObject = { ...newObject, [key]: queryObject[key] };
-      //     }
-      //   });
-      // }
-      // let dateInfo = {};
       let myMinDate = minDate;
       let myMaxDate = maxDate;
       let myDateSelector = dateSelector;
@@ -54,7 +45,7 @@ export const databrowserReducer = (state = databrowserInitialState, action) => {
         dateSelector: myDateSelector,
         minDate: myMinDate,
         maxDate: myMaxDate,
-        selectedFlavour: flavour,
+        selectedFlavour: flavour || databrowserInitialState.selectedFlavour,
       };
     }
     case constants.SET_METADATA:

assets/js/Containers/PluginList/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { browserHistory } from "react-router";
 import { connect } from "react-redux";
+import { FaTimes } from "react-icons/fa";
 import {
   Row,
   Col,
@@ -186,7 +187,10 @@ class PluginList extends React.Component {
       children = <div className="text-danger">{error}</div>;
     }
 
-    if (!pluginsLoaded && !this.props.pluginList.errorMessage) {
+    if (
+      (!pluginsLoaded && !this.props.pluginList.errorMessage) ||
+      !currentUser
+    ) {
       return <Spinner />;
     }
     if (this.props.pluginList.errorMessage) {
@@ -204,7 +208,7 @@ class PluginList extends React.Component {
 
     return (
       <Container>
-        <Row>
+        <Row className="mb-3">
           <Col md={6}>
             <h2>Plugins</h2>
           </Col>
@@ -227,14 +231,14 @@ class PluginList extends React.Component {
         </Row>
 
         <Row>
-          <Col md={8} className="mt-3">
+          <Col md={8}>
             {Object.keys(categories).map((key) => {
               return this.renderPluginBlock(filteredPlugins, key);
             })}
           </Col>
 
           <Col md={4}>
-            <InputGroup className="mt-3">
+            <InputGroup className="mb-2 pb-2">
               <FormControl
                 type="text"
                 value={searchFilter}
@@ -243,8 +247,23 @@ class PluginList extends React.Component {
               />
             </InputGroup>
 
-            <div className="mt-2">
-              <FormLabel>Categories:</FormLabel>
+            <div className="mb-2 pb-2 border-bottom">
+              <FormLabel className="d-flex justify-content-between">
+                Categories
+                {categoriesFilter.length > 0 && (
+                  <span>
+                    <Button
+                      className="p-0 link-danger d-flex align-items-center"
+                      variant="link"
+                      onClick={() =>
+                        this.props.dispatch(updateCategoryFilter(null))
+                      }
+                    >
+                      <FaTimes />
+                    </Button>
+                  </span>
+                )}
+              </FormLabel>
               <div>
                 {Object.keys(categories).map((key) => {
                   return this.renderCategoryCheckbox(
@@ -255,17 +274,40 @@ class PluginList extends React.Component {
                 })}
               </div>
             </div>
-            <div className="mt-2">
-              <FormLabel>Tags:</FormLabel>
+            <div>
+              <FormLabel className="d-flex justify-content-between">
+                Tags
+                {tagsFilter.length > 0 && (
+                  <span>
+                    <Button
+                      className="p-0 link-danger d-flex align-items-center"
+                      variant="link"
+                      onClick={() => this.props.dispatch(updateTagFilter(null))}
+                    >
+                      <FaTimes />
+                    </Button>
+                  </span>
+                )}
+              </FormLabel>
               <div className="d-flex flex-wrap justify-content-between">
                 {tags.map((tag) => {
+                  const variant = _.includes(tagsFilter, tag)
+                    ? "success"
+                    : "secondary";
+                  const disabled = !filteredPlugins.some((x) => {
+                    return _.includes(x[1].tags, tag);
+                  });
                   return (
                     <Button
-                      className="badge mb-2 me-2"
-                      variant={
-                        _.includes(tagsFilter, tag) ? "success" : "secondary"
+                      className={
+                        "badge mb-2 me-2 " +
+                        (variant === "success" && disabled
+                          ? "btn-success-muted"
+                          : "")
                       }
+                      variant={variant}
                       key={tag}
+                      disabled={disabled && variant !== "success"}
                       onClick={() => dispatch(updateTagFilter(tag))}
                     >
                       {tag}

assets/js/Containers/PluginList/reducers.js

@@ -110,7 +110,7 @@ export const pluginListReducer = (state = pluginListInitialState, action) => {
         state.tagsFilter,
         state.searchFilter
       );
-      return { ...state, filteredPlugins, tags: createTags(filteredPlugins) };
+      return { ...state, filteredPlugins, tags: createTags(state.plugins) };
     }
     case constants.LOAD_PLUGINS: {
       const exported = action.payload.some((v) => {
@@ -139,7 +139,9 @@ export const pluginListReducer = (state = pluginListInitialState, action) => {
     }
     case constants.UPDATE_CATEGORY_FILTER: {
       const { categoriesFilter } = state;
-      if (_.includes(categoriesFilter, action.category)) {
+      if (!action.category) {
+        return { ...state, categoriesFilter: [] };
+      } else if (_.includes(categoriesFilter, action.category)) {
         _.pull(categoriesFilter, action.category);
       } else {
         categoriesFilter.push(action.category);
@@ -148,7 +150,9 @@ export const pluginListReducer = (state = pluginListInitialState, action) => {
     }
     case constants.UPDATE_TAG_FILTER: {
       const { tagsFilter } = state;
-      if (_.includes(tagsFilter, action.tag)) {
+      if (!action.tag) {
+        return { ...state, tagsFilter: [] };
+      } else if (_.includes(tagsFilter, action.tag)) {
         _.pull(tagsFilter, action.tag);
       } else {
         tagsFilter.push(action.tag);