Merge pull request #201 from 4dn-dcic/spc_child_window_navigation

Child Popup Window Updates

Author: utku-ozturk

es/components/browse/SearchView.js

@@ -5,7 +5,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["href", "context", "showClearFiltersButton", "schemas", "currentAction", "facets", "navigate", "columns", "columnExtensionMap", "placeholderReplacementFxn", "windowWidth"];
+var _excluded = ["href", "context", "showClearFiltersButton", "schemas", "currentAction", "facets", "navigate", "columns", "columnExtensionMap", "placeholderReplacementFxn", "keepSelectionInStorage", "windowWidth"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -79,6 +79,7 @@ export var SearchView = /*#__PURE__*/function (_React$PureComponent) {
           _this$props$columnExt = _this$props.columnExtensionMap,
           columnExtensionMap = _this$props$columnExt === void 0 ? basicColumnExtensionMap : _this$props$columnExt,
           placeholderReplacementFxn = _this$props.placeholderReplacementFxn,
+          keepSelectionInStorage = _this$props.keepSelectionInStorage,
           windowWidth = _this$props.windowWidth,
           passProps = _objectWithoutProperties(_this$props, _excluded);
 
@@ -117,7 +118,8 @@ export var SearchView = /*#__PURE__*/function (_React$PureComponent) {
         // though if desired.
         React.createElement(SelectedItemsController, {
           columnExtensionMap: columnExtensionMap,
-          currentAction: currentAction
+          currentAction: currentAction,
+          keepSelectionInStorage: keepSelectionInStorage
         }, controllersAndView);
       }
 
@@ -150,8 +152,9 @@ _defineProperty(SearchView, "propTypes", {
   'showClearFiltersButton': PropTypes.bool,
   'isOwnPage': PropTypes.bool,
   'schemas': PropTypes.object,
-  'placeholderReplacementFxn': PropTypes.func // Passed down to AboveSearchTablePanel StaticSection
-
+  'placeholderReplacementFxn': PropTypes.func,
+  // Passed down to AboveSearchTablePanel StaticSection
+  'keepSelectionInStorage': PropTypes.bool
 });
 
 _defineProperty(SearchView, "defaultProps", {
@@ -163,5 +166,6 @@ _defineProperty(SearchView, "defaultProps", {
   'currentAction': null,
   'columnExtensionMap': basicColumnExtensionMap,
   'separateSingleTermFacets': true,
-  'isOwnPage': true
+  'isOwnPage': true,
+  'keepSelectionInStorage': false
 });

es/components/browse/components/SelectedItemsController.js

@@ -26,10 +26,11 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React, { useMemo, useCallback } from 'react';
+import PropTypes from 'prop-types';
 import _ from 'underscore';
 import { Alerts } from './../../ui/Alerts';
 import { itemUtil } from './../../util/object';
-import { isSelectAction } from './../../util/misc';
+import { isSelectAction, storeExists } from './../../util/misc';
 import * as logger from '../../util/logger';
 import { DisplayTitleColumnWrapper, DisplayTitleColumnDefault } from './../../browse/components/table-commons/basicColumnExtensionMap';
 import { getSchemaTypeFromSearchContext, getTitleForType } from './../../util/schema-transforms';
@@ -87,15 +88,29 @@ export var SelectedItemsController = /*#__PURE__*/function (_React$PureComponent
     };
     return _this;
   }
-  /**
-   * This function add/or removes the selected item into an Map in state,
-   * if `props.currentAction` is set to "multiselect" or "selection".
-   */
-
 
   _createClass(SelectedItemsController, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var keepSelectionInStorage = this.props.keepSelectionInStorage;
+      this.setState(function () {
+        if (keepSelectionInStorage === true && storeExists() && localStorage.getItem("selected_items") !== null) {
+          var foundItems = JSON.parse(localStorage.getItem("selected_items"));
+          return {
+            selectedItems: new Map(foundItems)
+          };
+        }
+      });
+    }
+    /**
+     * This function add/or removes the selected item into an Map in state,
+     * if `props.currentAction` is set to "multiselect" or "selection".
+     */
+
+  }, {
     key: "handleSelectItem",
     value: function handleSelectItem(result, isMultiSelect) {
+      var keepSelectionInStorage = this.props.keepSelectionInStorage;
       this.setState(function (_ref) {
         var prevItems = _ref.selectedItems;
         var nextItems = new Map(prevItems);
@@ -125,6 +140,10 @@ export var SelectedItemsController = /*#__PURE__*/function (_React$PureComponent
           }
         }
 
+        if (keepSelectionInStorage && storeExists()) {
+          localStorage.setItem("selected_items", JSON.stringify(Array.from(nextItems.entries())));
+        }
+
         return {
           selectedItems: nextItems
         };
@@ -333,6 +352,40 @@ export var SelectStickyFooter = /*#__PURE__*/React.memo(function (props) {
     className: "icon icon-fw fas icon-times"
   }), "\xA0 Cancel"))));
 });
+export var BackNavigationStickyFooter = /*#__PURE__*/React.memo(function (props) {
+  var text = props.text,
+      tooltip = props.tooltip,
+      navigateToInitialPage = props.navigateToInitialPage;
+  var onBackButtonClick = useCallback(function () {
+    if (window.history.length === 0) {
+      return;
+    }
+
+    history.go(navigateToInitialPage === true ? -(window.history.length - 1) : -1);
+  });
+  return /*#__PURE__*/React.createElement(StickyFooter, null, /*#__PURE__*/React.createElement("div", {
+    className: "row selection-controls-footer pull-right"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "col-12 col-md-auto"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "btn btn-outline-warning ml-1",
+    onClick: onBackButtonClick,
+    "data-tip": tooltip || ''
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "icon icon-fw fas icon-arrow-left"
+  }), "\xA0 ", text || ''))));
+});
+BackNavigationStickyFooter.propTypes = {
+  'text': PropTypes.string,
+  'tooltip': PropTypes.string,
+  'navigateToInitialPage': PropTypes.bool
+};
+BackNavigationStickyFooter.defaultProps = {
+  'text': 'Return to Selection List',
+  'tooltip': 'Go to selection page',
+  'navigateToInitialPage': true
+};
 /**
  * General purpose sticky footer component
  * TODO: Component can be moved to a separate file.

es/components/forms/components/LinkToSelector.js

@@ -16,6 +16,7 @@ import _ from 'underscore';
 import url from 'url';
 import { patchedConsoleInstance as console } from './../../util/patched-console';
 import { itemUtil } from './../../util/object';
+import { storeExists } from '../../util/misc';
 /**
  * Global variable which holds reference to child window, if any.
  * Is re-used if one is open to prevent additional windows being created.
@@ -63,7 +64,11 @@ export var LinkToSelector = /*#__PURE__*/function (_React$PureComponent) {
     value: function componentDidMount() {
       this.manageChildWindow({
         'isSelecting': false
-      }, this.props);
+      }, this.props); //clear storage
+
+      if (storeExists()) {
+        localStorage.removeItem("selected_items");
+      }
     }
   }, {
     key: "componentDidUpdate",
@@ -238,6 +243,12 @@ export var LinkToSelector = /*#__PURE__*/function (_React$PureComponent) {
 
       if (!this || !this.windowObjectReference) {
         console.warn('Child window no longer available to unbind event handlers. Fine if closed.');
+        return;
+      } //clear storage
+
+
+      if (storeExists()) {
+        localStorage.removeItem("selected_items");
       }
     }
   }, {

es/components/util/json-web-token.js

@@ -1,22 +1,11 @@
 import _ from 'underscore';
 import memoize from 'memoize-one';
-import { isServerSide } from './misc';
+import { isServerSide, storeExists } from './misc';
 import { patchedConsoleInstance as console } from './patched-console';
 import { getNestedProperty } from './object';
 /** Used for serverside */
 
 var dummyStorage = {};
-/**
- * Check to see if localStorage is supported by the browser or environment.
- *
- * @private
- * @returns {boolean} True if supported.
- */
-
-function storeExists() {
-  if (typeof Storage === 'undefined' || typeof localStorage === 'undefined' || !localStorage) return false;
-  return true;
-}
 /**
  * Checks to see if a JWT token is in proper
  * format. Does not validate it.
@@ -25,7 +14,6 @@ function storeExists() {
  * @returns {boolean} True if looks well-formated.
  */
 
-
 export function maybeValid(jwtToken) {
   return typeof jwtToken === 'string' && jwtToken.length > 0 && jwtToken !== "null" && jwtToken !== "expired" ? true : false;
 }

es/components/util/misc.js

@@ -22,6 +22,17 @@ export function isServerSide() {
 
   return false;
 }
+/**
+ * Check to see if localStorage is supported by the browser or environment.
+ *
+ * @private
+ * @returns {boolean} True if supported.
+ */
+
+export function storeExists() {
+  if (typeof Storage === 'undefined' || typeof localStorage === 'undefined' || !localStorage) return false;
+  return true;
+}
 /**
  * `url.parse`, but globally memoized for performance.
  * **ONLY** pass in the _current_ `props.href` here.

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@hms-dbmi-bgm/shared-portal-components",
-    "version": "0.1.57",
+    "version": "0.1.58",
     "description": "Shared components used for DBMI/BGM portal(s).",
     "repository": {
         "type": "git",

package.json

@@ -39,7 +39,8 @@ export class SearchView extends React.PureComponent {
         'showClearFiltersButton' : PropTypes.bool,
         'isOwnPage'     : PropTypes.bool,
         'schemas'       : PropTypes.object,
-        'placeholderReplacementFxn' : PropTypes.func // Passed down to AboveSearchTablePanel StaticSection
+        'placeholderReplacementFxn' : PropTypes.func, // Passed down to AboveSearchTablePanel StaticSection
+        'keepSelectionInStorage': PropTypes.bool,
     };
 
     /**
@@ -57,7 +58,8 @@ export class SearchView extends React.PureComponent {
         'currentAction' : null,
         'columnExtensionMap' : basicColumnExtensionMap,
         'separateSingleTermFacets' : true,
-        'isOwnPage'     : true
+        'isOwnPage'     : true,
+        'keepSelectionInStorage': false,
     };
 
     componentDidMount(){
@@ -80,6 +82,7 @@ export class SearchView extends React.PureComponent {
             columns = null,
             columnExtensionMap = basicColumnExtensionMap,
             placeholderReplacementFxn,
+            keepSelectionInStorage,
             //isOwnPage = true,
             windowWidth,
             ...passProps
@@ -121,7 +124,7 @@ export class SearchView extends React.PureComponent {
                 // SelectedItemsController must be above ColumnCombiner because it adjusts
                 // columnExtensionMap, rather than columnDefinitions. This can be easily changed
                 // though if desired.
-                <SelectedItemsController {...{ columnExtensionMap, currentAction }}>
+                <SelectedItemsController {...{ columnExtensionMap, currentAction, keepSelectionInStorage }}>
                     { controllersAndView }
                 </SelectedItemsController>
             );

src/components/browse/SearchView.js

@@ -1,8 +1,9 @@
 import React, { useMemo, useCallback } from 'react';
+import PropTypes from 'prop-types';
 import _ from 'underscore';
 import { Alerts } from './../../ui/Alerts';
 import { itemUtil } from './../../util/object';
-import { isSelectAction } from './../../util/misc';
+import { isSelectAction, storeExists } from './../../util/misc';
 import * as logger from '../../util/logger';
 import { DisplayTitleColumnWrapper, DisplayTitleColumnDefault } from './../../browse/components/table-commons/basicColumnExtensionMap';
 import { getSchemaTypeFromSearchContext, getTitleForType } from './../../util/schema-transforms';
@@ -52,11 +53,24 @@ export class SelectedItemsController extends React.PureComponent {
         this.state = { "selectedItems": new Map() };
     }
 
+    componentDidMount() {
+        const { keepSelectionInStorage } = this.props;
+
+        this.setState(function () {
+            if (keepSelectionInStorage === true && storeExists() && localStorage.getItem("selected_items") !== null) {
+                const foundItems = JSON.parse(localStorage.getItem("selected_items"));
+                return { selectedItems: new Map(foundItems) };
+            }
+        });
+    }
+
     /**
      * This function add/or removes the selected item into an Map in state,
      * if `props.currentAction` is set to "multiselect" or "selection".
      */
     handleSelectItem(result, isMultiSelect) {
+        const { keepSelectionInStorage } = this.props;
+
         this.setState(function({ selectedItems: prevItems }){
             const nextItems = new Map(prevItems);
 
@@ -84,6 +98,10 @@ export class SelectedItemsController extends React.PureComponent {
                 }
             }
 
+            if (keepSelectionInStorage && storeExists()){
+                localStorage.setItem("selected_items", JSON.stringify(Array.from(nextItems.entries())));
+            }
+
             return { selectedItems: nextItems };
         });
     }
@@ -237,6 +255,41 @@ export const SelectStickyFooter = React.memo(function SelectStickyFooter(props){
     );
 });
 
+export const BackNavigationStickyFooter = React.memo(function BackNavigationStickyFooter(props) {
+    const { text, tooltip, navigateToInitialPage } = props;
+
+    const onBackButtonClick = useCallback(function () {
+        if (window.history.length === 0) {
+            return;
+        }
+        history.go(navigateToInitialPage === true ? -(window.history.length - 1) : -1);
+    });
+
+    return (
+        <StickyFooter>
+            <div className="row selection-controls-footer pull-right">
+                <div className="col-12 col-md-auto">
+                    <button type="button" className="btn btn-outline-warning ml-1" onClick={onBackButtonClick} data-tip={tooltip || ''}>
+                        <i className="icon icon-fw fas icon-arrow-left"></i>&nbsp; {text || ''}
+                    </button>
+                </div>
+            </div>
+        </StickyFooter>
+    );
+});
+
+BackNavigationStickyFooter.propTypes = {
+    'text': PropTypes.string,
+    'tooltip': PropTypes.string,
+    'navigateToInitialPage': PropTypes.bool
+};
+
+BackNavigationStickyFooter.defaultProps = {
+    'text': 'Return to Selection List',
+    'tooltip': 'Go to selection page',
+    'navigateToInitialPage': true
+};
+
 /**
  * General purpose sticky footer component
  * TODO: Component can be moved to a separate file.