Merge branch 'master' into TP2000-1327--upgrade-python-3.12

common/static/common/js/application.js

@@ -23,6 +23,7 @@ import initFilterDisabledToggleForComCode from "./conditionalDisablingFilters";
 import initOpenCloseAccordionSection from "./openCloseAccordion";
 import initTapDebounce from "./buttonDebounce";
 import { setupQuotaOriginFormset } from "./components/QuotaOriginFormset/index";
+import { setupGeoAreaForm } from "./components/GeoAreaForm/index";
 import { setupWorkbasketUserAssignment } from "./components/WorkbasketUserAssignment/index";
 import { initMasonry } from "./masonry";
 
@@ -42,5 +43,6 @@ initFilterDisabledToggleForComCode();
 initOpenCloseAccordionSection();
 initTapDebounce();
 setupQuotaOriginFormset();
+setupGeoAreaForm();
 setupWorkbasketUserAssignment();
 initMasonry();

common/static/common/js/components/ErrorSummary/index.js

@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function ErrorSummary({ errors }) {
+  if (Object.values(errors).length > 0) {
+    return (
+      <div
+        className="govuk-error-summary"
+        aria-labelledby="error-summary-title"
+        role="alert"
+        tabIndex="-1"
+        data-module="govuk-error-summary"
+      >
+        <h2 className="govuk-error-summary__title" id="error-summary-title">
+          There is a problem
+        </h2>
+        <div className="govuk-error-summary__body">
+          <ul className="govuk-list govuk-error-summary__list">
+            {Object.keys(errors).map((key) => (
+              <li key={key}>
+                <a href={`#${key}`}>{errors[key]}</a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    );
+  }
+}
+
+ErrorSummary.propTypes = {
+  errors: PropTypes.objectOf(PropTypes.string).isRequired,
+};
+
+export { ErrorSummary };

common/static/common/js/components/GeoAreaForm/CountryRegionForm.js

@@ -0,0 +1,66 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Select from "react-select";
+
+function CountryRegionForm({
+  fieldsPrefix,
+  renderCondition,
+  updateForm,
+  data,
+  errors,
+  countryRegionsInitial,
+  countryRegionsOptions,
+}) {
+  if (renderCondition) {
+    return (
+      <div
+        className="govuk-radios__conditional"
+        data-testid="country_region_select"
+      >
+        <div className="govuk-form-group">
+          <Select
+            className="react-select-container"
+            classNamePrefix="react-select"
+            options={countryRegionsOptions}
+            defaultValue={countryRegionsInitial}
+            value={data.countryRegions}
+            isMulti={true}
+            onChange={(value) => updateForm("countryRegions", value)}
+            name={`${fieldsPrefix}-country_region`}
+            id="country_region_select"
+            meta={{
+              error: errors[`${fieldsPrefix}-country_region`],
+              touched: Boolean(errors[`${fieldsPrefix}-country_region`]),
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+CountryRegionForm.propTypes = {
+  fieldsPrefix: PropTypes.string.isRequired,
+  renderCondition: PropTypes.bool,
+  updateForm: PropTypes.func.isRequired,
+  data: PropTypes.shape({
+    geoAreaType: PropTypes.string,
+    geographicalAreaGroup: PropTypes.oneOfType([
+      PropTypes.oneOf([""]),
+      PropTypes.number,
+    ]),
+    ergaOmnesExclusions: PropTypes.arrayOf(PropTypes.number),
+    geoGroupExclusions: PropTypes.arrayOf(PropTypes.number),
+    countryRegions: PropTypes.arrayOf(PropTypes.number),
+  }).isRequired,
+  errors: PropTypes.objectOf(PropTypes.string).isRequired,
+  countryRegionsInitial: PropTypes.arrayOf(PropTypes.number),
+  countryRegionsOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.oneOfType([PropTypes.oneOf([""]), PropTypes.number]),
+    }),
+  ).isRequired,
+};
+
+export { CountryRegionForm };

common/static/common/js/components/GeoAreaForm/ErgaOmnesForm.js

@@ -0,0 +1,69 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Select from "react-select";
+
+function ErgaOmnesForm({
+  fieldsPrefix,
+  renderCondition,
+  updateForm,
+  data,
+  errors,
+  ergaOmnesExclusionsInitial,
+  exclusionsOptions,
+}) {
+  if (renderCondition) {
+    return (
+      <div className="govuk-radios__conditional">
+        <div
+          className="govuk-form-group"
+          data-testid="erga_omnes_exclusions_select"
+        >
+          <div className="govuk-hint">
+            Select one or more countries to be excluded:
+          </div>
+          <Select
+            className="react-select-container"
+            classNamePrefix="react-select"
+            options={exclusionsOptions}
+            defaultValue={ergaOmnesExclusionsInitial}
+            value={data.ergaOmnesExclusions}
+            onChange={(value) => updateForm("ergaOmnesExclusions", value)}
+            isMulti={true}
+            name={`${fieldsPrefix}-erga_omnes_exclusions`}
+            id="erga_omnes_exclusions_select"
+            meta={{
+              error: errors[`${fieldsPrefix}-erga_omnes_exclusions`],
+              touched: Boolean(errors[`${fieldsPrefix}-erga_omnes_exclusions`]),
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+ErgaOmnesForm.propTypes = {
+  fieldsPrefix: PropTypes.string.isRequired,
+  renderCondition: PropTypes.bool,
+  updateForm: PropTypes.func.isRequired,
+  data: PropTypes.shape({
+    geoAreaType: PropTypes.string,
+    geographicalAreaGroup: PropTypes.oneOfType([
+      PropTypes.oneOf([""]),
+      PropTypes.number,
+    ]),
+    ergaOmnesExclusions: PropTypes.arrayOf(PropTypes.number),
+    geoGroupExclusions: PropTypes.arrayOf(PropTypes.number),
+    countryRegions: PropTypes.arrayOf(PropTypes.number),
+  }).isRequired,
+  errors: PropTypes.objectOf(PropTypes.string).isRequired,
+  ergaOmnesExclusionsInitial: PropTypes.arrayOf(PropTypes.number),
+  exclusionsOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.oneOfType([PropTypes.oneOf([""]), PropTypes.number]),
+    }),
+  ).isRequired,
+};
+
+export { ErgaOmnesForm };

common/static/common/js/components/GeoAreaForm/GeoAreaField.js

@@ -0,0 +1,181 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { GeoGroupForm } from "./GeoGroupForm";
+import { CountryRegionForm } from "./CountryRegionForm";
+import { ErgaOmnesForm } from "./ErgaOmnesForm";
+
+function GeoAreaField({
+  initial,
+  errors,
+  updateForm,
+  data,
+  exclusionsOptions,
+  groupsOptions,
+  countryRegionsOptions,
+  groupsWithMembers,
+}) {
+  const fieldName = "geographical_area-geo_area";
+  const fieldsPrefix = "geographical_area";
+
+  const countryRegionsInitial = countryRegionsOptions.filter(
+    (option) => initial.countryRegions.indexOf(option.value) >= 0,
+  );
+  const ergaOmnesExclusionsInitial = countryRegionsOptions.filter(
+    (option) => initial.ergaOmnesExclusions.indexOf(option.value) >= 0,
+  );
+  const geoGroupInitial = groupsOptions.filter(
+    (option) => option.value == initial.geographicalAreaGroup,
+  )[0];
+  const geoGroupExclusionsInitial = countryRegionsOptions.filter(
+    (option) => initial.geoGroupExclusions.indexOf(option.value) >= 0,
+  );
+
+  function errorDisplay() {
+    if (errors.geo_area) {
+      return (
+        <span className="govuk-error-message">
+          <span className="govuk-visually-hidden">Error: </span>
+          {errors.geo_area}
+        </span>
+      );
+    }
+  }
+
+  return (
+    <div className="govuk-form-group">
+      <input type="hidden" name="react" value={true} />
+      {errorDisplay()}
+      <div className="govuk-radios">
+        <div className="govuk-radios__item">
+          <input
+            className="govuk-radios__input"
+            id="erga_omnes"
+            name={fieldName}
+            checked={data.geoAreaType == "ERGA_OMNES"}
+            onChange={(e) => {
+              updateForm("geoAreaType", e.target.value);
+            }}
+            type="radio"
+            value="ERGA_OMNES"
+          />
+          <label
+            className="govuk-label govuk-radios__label"
+            htmlFor="erga_omnes"
+          >
+            All countries (erga omnes)
+          </label>
+        </div>
+        <ErgaOmnesForm
+          fieldsPrefix={fieldsPrefix}
+          renderCondition={data.geoAreaType == "ERGA_OMNES"}
+          updateForm={updateForm}
+          data={data}
+          errors={errors}
+          ergaOmnesExclusionsInitial={ergaOmnesExclusionsInitial}
+          exclusionsOptions={exclusionsOptions}
+        />
+        <div className="govuk-radios__item">
+          <input
+            className="govuk-radios__input"
+            id="group"
+            name={fieldName}
+            checked={data.geoAreaType == "GROUP"}
+            onChange={(e) => {
+              updateForm("geoAreaType", e.target.value);
+            }}
+            type="radio"
+            value="GROUP"
+          />
+          <label className="govuk-label govuk-radios__label" htmlFor="group">
+            A group of countries
+          </label>
+        </div>
+        <GeoGroupForm
+          fieldsPrefix={fieldsPrefix}
+          renderCondition={data.geoAreaType == "GROUP"}
+          updateForm={updateForm}
+          errors={errors}
+          geographicalAreaGroup={data.geographicalAreaGroup}
+          geoGroupExclusions={data.geoGroupExclusions}
+          geoGroupInitial={geoGroupInitial}
+          groupsWithMembers={groupsWithMembers}
+          geoGroupExclusionsInitial={geoGroupExclusionsInitial}
+          groupsOptions={groupsOptions}
+          exclusionsOptions={exclusionsOptions}
+        />
+        <div className="govuk-radios__item">
+          <input
+            className="govuk-radios__input"
+            id="country"
+            name={fieldName}
+            checked={data.geoAreaType == "COUNTRY"}
+            onChange={(e) => {
+              updateForm("geoAreaType", e.target.value);
+            }}
+            type="radio"
+            value="COUNTRY"
+          />
+          <label className="govuk-label govuk-radios__label" htmlFor="country">
+            Specific countries or regions
+          </label>
+        </div>
+        <CountryRegionForm
+          fieldsPrefix={fieldsPrefix}
+          renderCondition={data.geoAreaType == "COUNTRY"}
+          updateForm={updateForm}
+          data={data}
+          errors={errors}
+          countryRegionsInitial={countryRegionsInitial}
+          countryRegionsOptions={countryRegionsOptions}
+        />
+      </div>
+    </div>
+  );
+}
+
+GeoAreaField.propTypes = {
+  initial: PropTypes.shape({
+    geoAreaType: PropTypes.string,
+    geographicalAreaGroup: PropTypes.oneOfType([
+      PropTypes.oneOf([""]),
+      PropTypes.number,
+    ]),
+    ergaOmnesExclusions: PropTypes.arrayOf(PropTypes.number),
+    geoGroupExclusions: PropTypes.arrayOf(PropTypes.number),
+    countryRegions: PropTypes.arrayOf(PropTypes.number),
+  }).isRequired,
+  errors: PropTypes.objectOf(PropTypes.string).isRequired,
+  updateForm: PropTypes.func.isRequired,
+  data: PropTypes.shape({
+    geoAreaType: PropTypes.string,
+    geographicalAreaGroup: PropTypes.oneOfType([
+      PropTypes.oneOf([""]),
+      PropTypes.number,
+    ]),
+    ergaOmnesExclusions: PropTypes.arrayOf(PropTypes.number),
+    geoGroupExclusions: PropTypes.arrayOf(PropTypes.number),
+    countryRegions: PropTypes.arrayOf(PropTypes.number),
+  }).isRequired,
+  exclusionsOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.oneOfType([PropTypes.oneOf([""]), PropTypes.number]),
+    }),
+  ).isRequired,
+  groupsOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.oneOfType([PropTypes.oneOf([""]), PropTypes.number]),
+    }),
+  ).isRequired,
+  countryRegionsOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.oneOfType([PropTypes.oneOf([""]), PropTypes.number]),
+    }),
+  ).isRequired,
+  groupsWithMembers: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.number)),
+};
+
+export { GeoAreaField };