add button to prompt for arbitrary urls for batch tagging

public/components/BatchTag.react.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import ContentList from './ContentList/ContentList';
 import PageNavigator from './utils/PageNavigator.react';
 import BatchTagControls from './BatchTagControls/BatchTagControls';
@@ -35,7 +35,7 @@ export class BatchTag extends React.Component {
         window.onbeforeunload = function() {
           return 'Unsaved batch tag changes, are you sure you want to leave?';
         };
-      } 
+      }
 
       if (prevCount > 0 && newCount === 0) {
         window.onbeforeunload = null;
@@ -196,6 +196,7 @@ export class BatchTag extends React.Component {
                         <label>Search by byline</label>
                         <input className="batch-tag__input" type="text" value={this.props.capiSearch.byline || ''} onChange={this.searchFieldChange.bind(this, 'byline')} />
                     </div>
+                    {" OR "}<BatchTagArbitraryUrls addPathsToSelection={(paths) => this.setState({selectedContent: R.union(this.state.selectedContent, paths)})}/>
                     <div className="batch-tag__show-filters" onClick={this.toggleFilters.bind(this)}>
                       { this.state.showFilters ? 'Hide Filters' : 'Show Filters'}
                     </div>
@@ -223,6 +224,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as searchCapi from '../actions/CapiActions/searchCapi';
 import * as getSections from '../actions/SectionsActions/getSections';
+import {BatchTagArbitraryUrls} from "./BatchTagControls/BatchTagArbitraryUrls";
 
 function mapStateToProps(state) {
   return {

public/components/BatchTagControls/BatchTagArbitraryUrls.js

@@ -0,0 +1,69 @@
+import React, {useState} from "react";
+
+export const BatchTagArbitraryUrls = ({addPathsToSelection}) => {
+
+  const [isModalDisplayed, setIsModalDisplayed] = useState(false);
+
+  const [input, setInput] = useState("") // string
+  const [treated, setTreated] = useState(); // string[]
+
+  const close = () => {
+    setInput("");
+    setTreated(null);
+    setIsModalDisplayed(false);
+  }
+  const treat = () => setTreated([...new Set(
+    input.split("\n").map(url => {
+      if(url.startsWith("http")){
+        return url.trim().split("/").slice(3).join("/");
+      }
+      return url.trim(); // already just the path
+    })
+  )]);
+
+  const complete = () => {
+    addPathsToSelection(treated);
+    close();
+  }
+
+  return (
+    <React.Fragment>
+      {isModalDisplayed && (
+        <div className="batch-tag__arbitrary_modal_background">
+          <div className="batch-tag__arbitrary_modal_content">
+            <div><strong>{treated
+              ? "Please check the paths extracted from the web URLs you entered"
+              : "Enter web URLs (one per line)"
+            }</strong></div>
+            <textarea
+              className="batch-tag__arbitrary_modal_input"
+              rows={15}
+              value={treated ? treated.join("\n") : input}
+              onChange={({target}) => setInput(target.value)}
+              disabled={!!treated}
+            />
+            <div className="batch-tag__arbitrary_modal_button_bar">
+              <button className="batch-tag__arbitrary_button" onClick={close}>Cancel</button>
+              {treated ? (
+                <div>
+                  <button className="batch-tag__arbitrary_button--red" onClick={() => setTreated(null)}>
+                    Back
+                  </button>
+                  {" "}
+                  <button className="batch-tag__arbitrary_button--green" disabled={!input} onClick={complete}>
+                    Add {treated.length} unique rows
+                  </button>
+                </div>
+              ) : (
+                <button className="batch-tag__arbitrary_button--green" disabled={!input} onClick={treat}>
+                  Next
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+      <button className="batch-tag__arbitrary_button" onClick={() => setIsModalDisplayed(true)}>Add arbitrary URLs</button>
+    </React.Fragment>
+  );
+}

public/style/components/batch-tag/_index.scss

@@ -88,3 +88,45 @@
 .batch-tag__filter--clear {
   @extend %button--red;
 }
+
+.batch-tag__arbitrary_modal_background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 5;
+  padding: 100px;
+}
+.batch-tag__arbitrary_modal_content {
+  display: inline-block;
+  padding: 10px;
+  background: white;
+  border-radius: 5px;
+}
+.batch-tag__arbitrary_modal_input {
+  width: 80vw;
+}
+.batch-tag__arbitrary_modal_button_bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.batch-tag__arbitrary_button {
+  @extend %button;
+  color: $c-grey-700;
+  margin: 0;
+}
+.batch-tag__arbitrary_button--green {
+  @extend %button--green;
+  margin: 0;
+}
+.batch-tag__arbitrary_button--green:disabled {
+  color:$c-grey-200;
+  border-color: $c-grey-200;
+}
+.batch-tag__arbitrary_button--red {
+  @extend %button--red;
+  margin: 0;
+}