New source found from dndbeyond.com

ddb_main/tools/js/Shared/containers/panes/ExtraManagePane/ExtraManagePane.tsx

@@ -3,13 +3,13 @@ import axios, { Canceler } from "axios";
 import { orderBy } from "lodash";
 import React, { useContext } from "react";
 import { connect, DispatchProp } from "react-redux";
+import { AnyAction } from "redux";
 import { v4 as uuidv4 } from "uuid";
 
 import {
   Checkbox,
   Collapsible,
   LoadingPlaceholder,
-  Select,
 } from "@dndbeyond/character-components/es";
 import {
   CharacterTheme,
@@ -30,6 +30,7 @@ import {
 
 import { HtmlContent } from "~/components/HtmlContent";
 import { Reference } from "~/components/Reference";
+import { Select } from "~/components/Select";
 import { useExtras } from "~/hooks/useExtras";
 import { CreatureBlock } from "~/subApps/sheet/components/CreatureBlock";
 import { Header } from "~/subApps/sheet/components/Sidebar/components/Header";
@@ -48,6 +49,7 @@ import {
 } from "../../../utils";
 import ExtraManagePaneAddListing from "./ExtraManagePaneAddListing";
 import ExtraManagePaneCurrentListing from "./ExtraManagePaneCurrentListing";
+import styles from "./styles.module.css";
 
 //TODO: this comes from ExtrasManager types
 interface ShoppeState {
@@ -83,7 +85,9 @@ enum DataRetrievalStatusEnum {
   LOADED = "LOADED",
 }
 
-interface Props extends DispatchProp {
+// TODO: We are typing with AnyAction here to work around issues with UnknownAction, the type that was introduced in Redux 5.
+// If we decide to modernize to Redux 5, we will need to refactor much of the Rules Engine redux usage.
+interface Props extends DispatchProp<AnyAction> {
   ruleData: RuleData;
   pageSize: number;
   creatureGroupRulesLookup: CreatureGroupRulesLookup;
@@ -410,10 +414,13 @@ class ExtraManagePane extends React.PureComponent<Props, State> {
             <div className="ct-extra-manage-pane__filters-challenge-fields">
               <div className="ct-extra-manage-pane__filters-challenge-field">
                 <Select
+                  className={styles.levelSelect}
                   value={filterChallengeMin}
                   options={challengeOptions}
                   onChange={this.handleChallengeMinChange}
                   placeholder="--"
+                  name="min-challenge"
+                  searchThreshold={null}
                 />
               </div>
               <div className="ct-extra-manage-pane__filters-challenge-sep">
@@ -421,10 +428,13 @@ class ExtraManagePane extends React.PureComponent<Props, State> {
               </div>
               <div className="ct-extra-manage-pane__filters-challenge-field">
                 <Select
+                  className={styles.levelSelect}
                   value={filterChallengeMax}
                   options={challengeOptions}
                   onChange={this.handleChallengeMaxChange}
                   placeholder="--"
+                  name="max-challenge"
+                  searchThreshold={null}
                 />
               </div>
             </div>
@@ -449,6 +459,7 @@ class ExtraManagePane extends React.PureComponent<Props, State> {
           <ExtraManagePaneAddListing
             {...listingComponentPropMappingFunc(extra)}
             isReadonly={isReadonly}
+            key={listingComponentPropMappingFunc(extra).key}
           />
         ))}
       </div>
@@ -575,6 +586,7 @@ class ExtraManagePane extends React.PureComponent<Props, State> {
             onChange={this.handleSelectedGroupChange}
             placeholder="-- Choose a Category --"
             disabled={dataStatus === DataRetrievalStatusEnum.LOADING}
+            name="extra-category"
           />
         </div>
         {selectedGroup && (

ddb_main/tools/js/Shared/containers/panes/ExtraManagePane/ExtraManagePaneCurrentListing/ExtraManagePaneCurrentListing.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import { MarketplaceCta } from "@dndbeyond/character-components/es";
 import {
   CharacterTheme,
   Creature,
@@ -9,6 +8,7 @@ import {
   VehicleManager,
 } from "@dndbeyond/character-rules-engine/es";
 
+import { MarketplaceCta } from "~/components/MarketplaceCta";
 import { Reference } from "~/components/Reference";
 import { CreatureBlock } from "~/subApps/sheet/components/CreatureBlock";
 

ddb_main/tools/js/Shared/containers/panes/ExtraManagePane/ExtraManagePaneListingExtra/ExtraManagePaneListingExtra.tsx

@@ -1,22 +1,22 @@
-import React from "react";
+import { ReactNode, FC, PropsWithChildren } from "react";
 
 import {
   Collapsible,
   CollapsibleHeaderContent,
 } from "@dndbeyond/character-components/es";
 
-interface Props {
-  headerCallout: React.ReactNode;
-  heading: React.ReactNode;
-  metaItems: Array<React.ReactNode>;
+interface Props extends PropsWithChildren {
+  headerCallout: ReactNode;
+  heading: ReactNode;
+  metaItems: Array<ReactNode>;
 }
-export const ExtraManagePaneListingExtra: React.FC<Props> = ({
+export const ExtraManagePaneListingExtra: FC<Props> = ({
   headerCallout,
   heading,
   metaItems,
   children,
 }) => {
-  let header: React.ReactNode = (
+  let header: ReactNode = (
     <CollapsibleHeaderContent
       heading={heading}
       metaItems={metaItems}