Updated frontend-build to v12

packages/catalog-search/.eslintrc.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@edx/frontend-build');
 const extendESLintConfig = require('../../common/extendESLintConfig');
 

packages/catalog-search/package.json

@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.1.0",
-    "@edx/frontend-build": "11.0.1",
+    "@edx/frontend-build": "^12.0.3",
     "@edx/frontend-platform": "1.15.6",
     "@edx/paragon": "19.25.1",
     "@fortawesome/free-solid-svg-icons": "5.8.1",

packages/catalog-search/src/ClearCurrentRefinements.jsx

@@ -6,7 +6,7 @@ import { clearRefinementsAction } from './data/actions';
 
 export const CLEAR_ALL_TEXT = 'clear all';
 
-const ClearCurrentRefinements = ({ className, variant, ...props }) => {
+function ClearCurrentRefinements({ className, variant, ...props }) {
   const { refinements, dispatch } = useContext(SearchContext);
   const hideCards = (refinements.hide_cards && refinements.hide_cards[0] === 'true');
 
@@ -33,7 +33,7 @@ const ClearCurrentRefinements = ({ className, variant, ...props }) => {
       ) }
     </span>
   );
-};
+}
 
 ClearCurrentRefinements.propTypes = {
   variant: PropTypes.string.isRequired,

packages/catalog-search/src/CurrentRefinements.jsx

@@ -22,7 +22,7 @@ import {
 import { SearchContext } from './SearchContext';
 import { removeFromRefinementArray, deleteRefinementAction } from './data/actions';
 
-export const CurrentRefinementsBase = ({ items, variant }) => {
+export function CurrentRefinementsBase({ items, variant }) {
   if (!items || !items.length) {
     return null;
   }
@@ -130,7 +130,7 @@ export const CurrentRefinementsBase = ({ items, variant }) => {
       </li>
     </ul>
   );
-};
+}
 
 CurrentRefinementsBase.defaultProps = {
   variant: STYLE_VARIANTS.inverse,

packages/catalog-search/src/FacetDropdown.jsx

@@ -5,31 +5,33 @@ import { Dropdown } from '@edx/paragon';
 
 import { STYLE_VARIANTS } from './data/constants';
 
-const FacetDropdown = ({
+function FacetDropdown({
   title,
   items,
   isBold,
   className,
   variant,
-}) => (
-  <div className="facet-list">
-    <Dropdown autoClose="outside" className={classNames('mb-0 mr-md-3', className)}>
-      <Dropdown.Toggle
-        id="{title}-{variant}"
-        variant={classNames({
-          'inverse-primary': variant === STYLE_VARIANTS.inverse,
-          'outline-primary': variant === STYLE_VARIANTS.default,
-        })}
-        className={classNames({ 'font-weight-bold': isBold })}
-      >
-        {title}
-      </Dropdown.Toggle>
-      <Dropdown.Menu>
-        {items}
-      </Dropdown.Menu>
-    </Dropdown>
-  </div>
-);
+}) {
+  return (
+    <div className="facet-list">
+      <Dropdown autoClose="outside" className={classNames('mb-0 mr-md-3', className)}>
+        <Dropdown.Toggle
+          id="{title}-{variant}"
+          variant={classNames({
+            'inverse-primary': variant === STYLE_VARIANTS.inverse,
+            'outline-primary': variant === STYLE_VARIANTS.default,
+          })}
+          className={classNames({ 'font-weight-bold': isBold })}
+        >
+          {title}
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          {items}
+        </Dropdown.Menu>
+      </Dropdown>
+    </div>
+  );
+}
 
 FacetDropdown.defaultProps = {
   className: '',

packages/catalog-search/src/FacetItem.jsx

@@ -5,20 +5,21 @@ import classNames from 'classnames';
 
 import { STYLE_VARIANTS } from './data/constants';
 
-const FacetItem = ({
+function FacetItem({
   handleInputOnChange, item, isChecked, variant, showBadge,
-}) => (
-  <Dropdown.Item as="label" className="mb-0 py-3 d-flex align-items-center">
-    <Input
-      type="checkbox"
-      checked={isChecked}
-      onChange={() => handleInputOnChange(item)}
-      className="facet-item position-relative mr-2 mb-2"
-    />
-    <span className={classNames('facet-item-label', { 'is-refined': isChecked })}>
-      {item.label}
-    </span>
-    {showBadge && (
+}) {
+  return (
+    <Dropdown.Item as="label" className="mb-0 py-3 d-flex align-items-center">
+      <Input
+        type="checkbox"
+        checked={isChecked}
+        onChange={() => handleInputOnChange(item)}
+        className="facet-item position-relative mr-2 mb-2"
+      />
+      <span className={classNames('facet-item-label', { 'is-refined': isChecked })}>
+        {item.label}
+      </span>
+      {showBadge && (
       <Badge
         pill
         className={classNames(
@@ -28,9 +29,10 @@ const FacetItem = ({
       >
         {item.count}
       </Badge>
-    )}
-  </Dropdown.Item>
-);
+      )}
+    </Dropdown.Item>
+  );
+}
 
 FacetItem.defaultProps = {
   variant: STYLE_VARIANTS.inverse,

packages/catalog-search/src/FacetListBase.jsx

@@ -11,7 +11,7 @@ import {
   addToRefinementArray, setRefinementAction, deleteRefinementAction, removeFromRefinementArray,
 } from './data/actions';
 
-const FacetListBase = ({
+function FacetListBase({
   attribute,
   facetValueType,
   isBold,
@@ -25,7 +25,7 @@ const FacetListBase = ({
   doRefinement,
   customAttribute,
   showBadge,
-}) => {
+}) {
   const { refinements, dispatch } = useContext(SearchContext);
 
   /**
@@ -113,7 +113,7 @@ const FacetListBase = ({
       variant={variant}
     />
   );
-};
+}
 
 FacetListBase.defaultProps = {
   isCheckedField: null,

packages/catalog-search/src/FacetListRefinement.jsx

@@ -4,15 +4,17 @@ import PropTypes from 'prop-types';
 import { connectRefinementList } from 'react-instantsearch-dom';
 import FacetListBase from './FacetListBase';
 
-export const FacetListRefinementBase = ({
+export function FacetListRefinementBase({
   currentRefinement, ...props
-}) => (
-  <FacetListBase
-    isBold={currentRefinement.length > 0}
-    isCheckedField="isRefined"
-    {...props}
-  />
-);
+}) {
+  return (
+    <FacetListBase
+      isBold={currentRefinement.length > 0}
+      isCheckedField="isRefined"
+      {...props}
+    />
+  );
+}
 
 FacetListRefinementBase.propTypes = {
   attribute: PropTypes.string.isRequired,

packages/catalog-search/src/LearningTypeRadioFacet.jsx

@@ -8,7 +8,7 @@ import {
 import { features } from './config';
 import { LEARNING_TYPE_COURSE, LEARNING_TYPE_PROGRAM, LEARNING_TYPE_PATHWAY } from './data/constants';
 
-const LearningTypeRadioFacet = () => {
+function LearningTypeRadioFacet() {
   const { refinements, dispatch } = useContext(SearchContext);
   // only bold the dropdown title if the learning type is Course or Program
   const typeCourseSelected = refinements.content_type && refinements.content_type.includes(LEARNING_TYPE_COURSE);
@@ -91,6 +91,6 @@ const LearningTypeRadioFacet = () => {
       </Dropdown>
     </div>
   );
-};
+}
 
 export default LearningTypeRadioFacet;

packages/catalog-search/src/MobileFilterMenu.jsx

@@ -10,7 +10,7 @@ import ClearCurrentRefinements from './ClearCurrentRefinements';
 
 import { useActiveRefinementsAsFlatArray } from './data/hooks';
 
-export const MobileFilterMenuBase = ({ children, className, items }) => {
+export function MobileFilterMenuBase({ children, className, items }) {
   const [isOpen, setIsOpen] = useState(false);
 
   const activeRefinementsAsFlatArray = useActiveRefinementsAsFlatArray(items);
@@ -86,7 +86,7 @@ export const MobileFilterMenuBase = ({ children, className, items }) => {
       </div>
     </div>
   );
-};
+}
 
 MobileFilterMenuBase.propTypes = {
   children: PropTypes.node.isRequired,

packages/catalog-search/src/SearchBox.jsx

@@ -33,7 +33,7 @@ export const searchText = 'Search courses';
 export const SEARCH_EVENT_NAME_PREFIX = 'edx.enterprise';
 export const QUERY_SUBMITTED_EVENT = 'catalog_search.query_submitted';
 
-export const SearchBoxBase = ({
+export function SearchBoxBase({
   className,
   defaultRefinement,
   variant,
@@ -44,7 +44,7 @@ export const SearchBoxBase = ({
   enterpriseSlug,
   suggestionSubmitOverride,
   disableSuggestionRedirect,
-}) => {
+}) {
   const { dispatch, trackingName } = useContext(SearchContext);
 
   const [autocompleteHits, setAutocompleteHits] = useState([]);
@@ -180,7 +180,7 @@ export const SearchBoxBase = ({
       )}
     </div>
   );
-};
+}
 
 SearchBoxBase.propTypes = {
   defaultRefinement: PropTypes.string,

packages/catalog-search/src/SearchContext.jsx

@@ -37,7 +37,7 @@ export const getRefinementsToSet = (queryParams, activeFacetAttributes) => {
   return refinementsToSet;
 };
 
-const SearchData = ({ children, searchFacetFilters, trackingName }) => {
+function SearchData({ children, searchFacetFilters, trackingName }) {
   const [refinements, dispatch] = useReducer(
     refinementsReducer,
     {},
@@ -87,7 +87,7 @@ const SearchData = ({ children, searchFacetFilters, trackingName }) => {
   return (
     <SearchContext.Provider value={value}>{children}</SearchContext.Provider>
   );
-};
+}
 
 SearchData.defaultProps = {
   searchFacetFilters: SEARCH_FACET_FILTERS,

packages/catalog-search/src/SearchFilters.jsx

@@ -18,7 +18,7 @@ import LearningTypeRadioFacet from './LearningTypeRadioFacet';
 
 export const FREE_ALL_TITLE = 'Free / All';
 
-const SearchFilters = ({ variant }) => {
+function SearchFilters({ variant }) {
   const { refinements, searchFacetFilters } = useContext(SearchContext);
   const freeAllItems = useMemo(() => [
     {
@@ -96,7 +96,7 @@ const SearchFilters = ({ variant }) => {
       </MediaQuery>
     </>
   );
-};
+}
 
 SearchFilters.defaultProps = {
   variant: STYLE_VARIANTS.inverse,

packages/catalog-search/src/SearchHeader.jsx

@@ -12,7 +12,7 @@ import { SearchContext } from './SearchContext';
 export const searchBoxColTestId = 'search-box-col';
 export const filtersColTestId = 'filters-col';
 
-const SearchHeader = ({
+function SearchHeader({
   variant,
   containerSize,
   headerTitle,
@@ -22,7 +22,7 @@ const SearchHeader = ({
   suggestionSubmitOverride,
   enterpriseConfig: { slug },
   disableSuggestionRedirect,
-}) => {
+}) {
   const { refinements } = useContext(SearchContext);
   let searchQueryFromRefinements;
   // Sometimes the query is set to an array of one string instead of just the string
@@ -66,7 +66,7 @@ const SearchHeader = ({
       </Container>
     </div>
   );
-};
+}
 
 SearchHeader.defaultProps = {
   variant: STYLE_VARIANTS.inverse,

packages/catalog-search/src/SearchPagination.jsx

@@ -8,11 +8,11 @@ import { Pagination } from '@edx/paragon';
 import { SearchContext } from './SearchContext';
 import { setRefinementAction, deleteRefinementAction } from './data/actions';
 
-export const SearchPaginationBase = ({
+export function SearchPaginationBase({
   nbPages,
   currentRefinement,
   maxPagesDisplayed,
-}) => {
+}) {
   const { dispatch } = useContext(SearchContext);
 
   const icons = useMemo(
@@ -63,7 +63,7 @@ export const SearchPaginationBase = ({
       }}
     />
   );
-};
+}
 
 SearchPaginationBase.propTypes = {
   nbPages: PropTypes.number.isRequired,

packages/catalog-search/src/SearchSuggestionItem.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
-const SearchSuggestionItem = ({
+function SearchSuggestionItem({
   url, suggestionItemHandler, hit, disableSuggestionRedirect,
-}) => {
+}) {
   const authoringOrganization = hit.key && hit.key.split('+')[0];
   // If the disable redirect bool is provided, prevent the redirect from happening and instead call the provided submit
   // handler
@@ -36,7 +36,7 @@ const SearchSuggestionItem = ({
       }
     </Link>
   );
-};
+}
 
 SearchSuggestionItem.propTypes = {
   url: PropTypes.string.isRequired,
@@ -45,7 +45,7 @@ SearchSuggestionItem.propTypes = {
     key: PropTypes.string,
     title: PropTypes.string,
     program_type: PropTypes.string,
-    authoring_organizations: PropTypes.array,
+    authoring_organizations: PropTypes.shape([]),
     _highlightResult: PropTypes.shape({ title: PropTypes.shape({ value: PropTypes.string }) }),
   }).isRequired,
   disableSuggestionRedirect: PropTypes.bool.isRequired,