MBS-12230: Allow pasting / parsing dates on date fields

As a first step, this supports only YMD dates.
Further options can be added in subsequent commits.
The regex is based on the one from the original paste-a-date script.

Author: reosarevok

root/components/PartialDateInput.js

@@ -12,12 +12,18 @@ import * as React from 'react';
 import {isDateValid, isYearFourDigits}
   from '../static/scripts/edit/utility/dates';
 import {applyPendingErrors} from '../utility/subfieldErrors';
+import parseNaturalDate
+  from '../static/scripts/common/utility/parseNaturalDate';
 
 /* eslint-disable flowtype/sort-keys */
 export type ActionT =
   | {
       +type: 'set-date',
-      +date: {+year?: string, +month?: string, +day?: string},
+      +date: {
+        +year?: string,
+        +month?: string,
+        +day?: string,
+      },
     }
   | {+type: 'show-pending-errors'};
 /* eslint-enable flowtype/sort-keys */
@@ -101,6 +107,7 @@ const PartialDateInput = (props: Props): React.Element<'span'> => {
   const yearProps = {};
   const monthProps = {};
   const dayProps = {};
+  const parserProps = {};
 
   if (props.uncontrolled) {
     yearProps.defaultValue = field.field.year.value;
@@ -125,6 +132,7 @@ const PartialDateInput = (props: Props): React.Element<'span'> => {
     yearProps.onBlur = handleBlur;
     monthProps.onBlur = handleBlur;
     dayProps.onBlur = handleBlur;
+    parserProps.onBlur = handleBlur;
 
     yearProps.onChange = (event) => handleDateChange(
       event,
@@ -139,6 +147,14 @@ const PartialDateInput = (props: Props): React.Element<'span'> => {
       'day',
     );
 
+    parserProps.onChange = (event) => {
+      const date = parseNaturalDate(event.currentTarget.value);
+      props.dispatch({
+        date: date,
+        type: 'set-date',
+      });
+    };
+
     yearProps.value = field.field.year.value ?? '';
     monthProps.value = field.field.month.value ?? '';
     dayProps.value = field.field.day.value ?? '';
@@ -181,6 +197,21 @@ const PartialDateInput = (props: Props): React.Element<'span'> => {
         type="text"
         {...dayProps}
       />
+      {props.uncontrolled ? null : (
+        <>
+          {' '}
+          <input
+            className="partial-date-parser"
+            disabled={disabled}
+            id={'id-' + field.html_name + '.partial-date-parser'}
+            name={field.html_name + '.partial-date-parser'}
+            placeholder={l('Enter date string to parse')}
+            size={12}
+            type="text"
+            {...parserProps}
+          />
+        </>
+      )}
     </span>
   );
 };

root/static/scripts/common/utility/isDateEmpty.js

@@ -13,12 +13,6 @@ declare type PartialDateObservablesT = {
   +year: KnockoutObservable<string | null>,
 };
 
-declare type PartialDateStringsT = {
-  +day?: string,
-  +month?: string,
-  +year?: string,
-};
-
 export function isDateObservableEmpty(
   date: PartialDateObservablesT,
 ): boolean {

root/static/scripts/common/utility/parseNaturalDate.js

@@ -0,0 +1,26 @@
+/*
+ * @flow strict
+ * Copyright (C) 2022 MetaBrainz Foundation
+ *
+ * This file is part of MusicBrainz, the open internet music database,
+ * and is licensed under the GPL version 2, or (at your option) any
+ * later version: http://www.gnu.org/licenses/gpl-2.0.txt
+ */
+
+
+const ymdRegex = /^\W*([0-9]{4})(?:\W+(0?[1-9]|1[0-2])(?:\W+(0?[1-9]|[12][0-9]|3[01]))?)?\W*$/;
+
+export function parseNaturalDate(
+  str: string,
+): PartialDateStringsT {
+  const match = str.match(ymdRegex) || [];
+  return {
+    /* eslint-disable sort-keys */
+    year: match[1] || '',
+    month: match[2] || '',
+    day: match[3] || '',
+    /* eslint-enable sort-keys */
+  };
+}
+
+export default parseNaturalDate;

root/static/scripts/edit/components/DateRangeFieldset.js

@@ -186,6 +186,10 @@ const DateRangeFieldset = ({
               Partial dates such as YYYY-MM or just YYYY are OK,
               or you can omit the date entirely.`)}
         </p>
+        <p>
+          {l(`You can also enter a full date string into the parsing field
+              rather than entering year, month and day separately.`)}
+        </p>
         <FormRowPartialDate
           disabled={disabled}
           dispatch={beginDateDispatch}

root/static/styles/forms.less

@@ -444,6 +444,7 @@ div.half-width fieldset span.partial-date {
         &.partial-date-year { width: 4em; }
         &.partial-date-month { width: 2.5em; }
         &.partial-date-day { width: 2.5em; }
+        &.partial-date-parser { width: 12em; }
     }
 }
 

root/types/entity.js

@@ -93,6 +93,12 @@ declare type PartialDateT = {
   +year: number | null,
 };
 
+declare type PartialDateStringsT = {
+  +day?: string,
+  +month?: string,
+  +year?: string,
+};
+
 declare type TypeRoleT<T> = {
   +typeID: number | null,
   +typeName?: string,