chore(DualListSelector): convert examples to TypeScript

[thatblindgeye]

What: Closes #7396

Dual list selector preview build

Updated comment

Per my original comment below, I utilized JSON.stringy's replacer argument to resolve the error that was occurring (also noted below). An alternative could be to utilize equality checking similar to how to compare objects in JavaScript, which did work when I tried it out, but because you can pass in strings, objects, or HTML elements (based on the examples we provide), I wasn't sure whether we would ever need to further check whether an option is a particular type and do different checking based on that. Using this replacer argument seems like a simpler fix and it works with both the updated functional example and the class example.

I also made a change to the replacer method in that it checks for any key that starts with an underscore (rather than just the specific _owner key) just to be safe.

Original comment below

A note on this PR

When running this code locally, the "Using more complex options with actions" causes the below error to occur whenever you try interacting with the dual list selector in the example (clicking an option, typing in the search bar, etc):

This only occurs when the availableOptions state in the example is set to an array of HTML elements like <span>Option 1</span>... when the example is converted to a functional component. An array of strings works fine, and the array of HTML elements also works fine on the current example on the PF site that uses a class. From trying to look into it, the below snippet of code on lines 195-196 within DualListSelector is causing it:

if (
      JSON.stringify(this.props.availableOptions) !== JSON.stringify(this.state.availableOptions) ||
      JSON.stringify(this.props.chosenOptions) !== JSON.stringify(this.state.chosenOptions)
    )

Utilizing JSON.stringify's replacer argument does seem to avoid this error with a function similar to below, but I haven't yet delved into figuring out why that resolves it/why the error occurs in the first place:

  replacer = (key: any, value: any) => {
    if (key === '_owner') {
      return undefined;
    }
    return value;
  };

// replacing the previous code snippet with the below...
if {
  JSON.stringify(this.props.availableOptions, this.replacer) !== JSON.stringify(this.state.availableOptions, this.replacer) ||
  JSON.stringify(this.props.chosenOptions, this.replacer) !== JSON.stringify(this.state.chosenOptions, this.replacer)
}

Because the example seems to intend to show how to use more complex options than just strings, it wouldn't seem like simply changing the options to strings would suffice here.

Additional issues:

[patternfly-build]

Preview: https://patternfly-react-pr-7458.surge.sh

A11y report: https://patternfly-react-pr-7458-a11y.surge.sh

[nicolethoen]

Ah, so stringify was being used here to do a deeper comparison between the complex objects. @kmcfaul I think you were the one who landed on this solution here?
I think you could replace that bit of logic that does something else to determine if there's been a change to the available or chosen options when they are possibly complex objects?

[nicolethoen]

One nit - looks great to me!

[kmcfaul]

lgtm!

[patternfly-build]

Your changes have been released in:

• eslint-plugin-patternfly-react@4.60.15
• @patternfly/react-catalog-view-extension@4.72.15
• @patternfly/react-charts@6.74.15
• @patternfly/react-code-editor@4.62.15
• @patternfly/react-console@4.72.15
• @patternfly/react-core@4.221.15
• @patternfly/react-docs@5.82.15
• @patternfly/react-icons@4.72.15
• @patternfly/react-inline-edit-extension@4.66.15
• demo-app-ts@4.181.15
• @patternfly/react-integration@4.183.15
• @patternfly/react-log-viewer@4.66.15
• @patternfly/react-styles@4.71.15
• @patternfly/react-table@4.90.15
• @patternfly/react-tokens@4.73.15
• @patternfly/react-topology@4.68.15
• @patternfly/react-virtualized-extension@4.68.15
• transformer-cjs-imports@4.59.15

Thanks for your contribution! 🎉