Merge pull request #502 from guardian/batch-tag-arbitrary-urls

support arbitrary urls for batch tagging

public/components/BatchTag.react.js

@@ -3,6 +3,7 @@ import ContentList from './ContentList/ContentList';
 import PageNavigator from './utils/PageNavigator.react';
 import BatchTagControls from './BatchTagControls/BatchTagControls';
 import BatchFilters from './BatchTag/BatchFilters.react';
+import {BatchTagArbitraryUrls} from "./BatchTagControls/BatchTagArbitraryUrls";
 import R from 'ramda';
 
 const CAPI_PAGE_SIZE = 10;
@@ -35,7 +36,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 +197,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>

public/components/BatchTagControls/BatchTagArbitraryUrls.js

@@ -0,0 +1,68 @@
+import React, {useState} from "react";
+
+export const BatchTagArbitraryUrls = ({addPathsToSelection}) => {
+
+  const [isModalDisplayed, setIsModalDisplayed] = useState(false);
+
+  const [input, setInput] = useState("") // string
+  const [cleaned, setCleaned] = useState(); // string[]
+
+  const close = () => {
+    setInput("");
+    setCleaned(null);
+    setIsModalDisplayed(false);
+  }
+  const clean = () => setCleaned([...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
+    }).filter(_ => !!_) // remove empty
+  )]);
+
+  const complete = () => {
+    addPathsToSelection(cleaned);
+    close();
+  }
+
+  return (
+    <React.Fragment>
+      {isModalDisplayed && (
+        <div className="batch-tag__arbitrary_modal_background">
+          <div className="batch-tag__arbitrary_modal_content">
+            <div><strong>{cleaned
+              ? "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"
+              value={cleaned ? cleaned.join("\n") : input}
+              onChange={({target}) => setInput(target.value)}
+              disabled={!!cleaned}
+            />
+            <div className="batch-tag__arbitrary_modal_button_bar">
+              <button className="batch-tag__arbitrary_button" onClick={close}>Cancel</button>
+              {cleaned ? (
+                <div>
+                  <button className="batch-tag__arbitrary_button--red" onClick={() => setCleaned(null)}>
+                    Back
+                  </button>
+                  {" "}
+                  <button className="batch-tag__arbitrary_button--green" disabled={!input} onClick={complete}>
+                    Add {cleaned.length} unique rows
+                  </button>
+                </div>
+              ) : (
+                <button className="batch-tag__arbitrary_button--green" disabled={!input} onClick={clean}>
+                  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,50 @@
 .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: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 10px;
+  background: white;
+  border-radius: 5px;
+  width: 100%;
+  height: 100%;
+}
+.batch-tag__arbitrary_modal_input {
+  height: 100%;
+  width: 100%;
+}
+.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;
+}