EuiModal, EuiConfirmModal: converted to Typescript

[ffknob]

Summary

Closes #2662

Converted EuiModal and EuiConfirmModal to Typescript.

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in IE11 and Firefox
• Props have proper autodocs
• Added documentation examples
• Added or updated jest tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[elasticmachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[ffknob]

I need some help with the test. By now I'm not getting pass this error here:

$ yarn test confirm_modal
yarn run v1.19.0
$ yarn lint && yarn test-unit modal
$ yarn tsc --noEmit && yarn lint-es && yarn lint-sass
$ /mnt/data/Desenvolvimento/workspace/eui/node_modules/.bin/tsc --noEmit
$ eslint --cache '{src,src-docs,src-framer}/**/*.{ts,tsx,js}' --max-warnings 0
$ sass-lint -v --max-warnings 0
$ cross-env NODE_ENV=test jest --config ./scripts/jest/config.json modal
 PASS  src/components/modal/modal_header.test.tsx
 PASS  src/components/modal/modal_body.test.tsx
 PASS  src/components/modal/modal_footer.test.tsx
 PASS  src/components/modal/modal_header_title.test.tsx
 PASS  src/components/modal/modal.test.tsx
 FAIL  src/components/modal/confirm_modal.test.tsx
  ● Test suite failed to run

    TypeError: Cannot read property 'type' of null

      1152 |   VariableDeclaration: node => {
      1153 |     return node.declarations.reduce((declarations, declaration) => {
    > 1154 |       if (declaration.init.type === 'ObjectExpression') {
           |                            ^
      1155 |         declarations.push({
      1156 |           name: declaration.id.name,
      1157 |           definition: declaration.init,

      at VariableDeclaration.node.declarations.reduce (scripts/babel/proptypes-from-ts-props/index.js:1154:28)
          at Array.reduce (<anonymous>)
      at Object.VariableDeclaration (scripts/babel/proptypes-from-ts-props/index.js:1153:30)
      at extractTypeDefinition (scripts/babel/proptypes-from-ts-props/index.js:1182:42)
      at PluginPass.visitProgram (scripts/babel/proptypes-from-ts-props/index.js:1354:15)
      at newFn (node_modules/@babel/traverse/lib/visitors.js:193:21)
      at NodePath._call (node_modules/@babel/traverse/lib/path/context.js:53:20)
      at NodePath.call (node_modules/@babel/traverse/lib/path/context.js:40:17)
      at NodePath.visit (node_modules/@babel/traverse/lib/path/context.js:88:12)
      at TraversalContext.visitQueue (node_modules/@babel/traverse/lib/context.js:118:16)

Snapshot Summary
 › 2 snapshot files obsolete from 2 test suites. To remove them all, run `yarn run test-unit -u`.

Test Suites: 1 failed, 5 passed, 6 total
Tests:       5 passed, 5 total
Snapshots:   2 files obsolete, 5 passed, 5 total
Time:        7.752s
Ran all test suites matching /modal/i.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Any clues? Perhaps something to do with my defined types... Other thig worth mentioning is that I had to yarn add @types/sinon in order to satisfy Typescript.

[pugnascotia]

When I have performed TypeScript conversions, I've often removed sinon in favour of Jest's built-in mock functions. How do you feel about doing that?

[ffknob]

When I have performed TypeScript conversions, I've often removed sinon in favour of Jest's built-in mock functions. How do you feel about doing that?

Hi @pugnascotia
Truth be told I have no clue on how to do that... but if you point me to an example test file I'll be more than happy to learn and implement this.

Does that mean that I should also remove the @types/sinon dependency for the whole project? (because as I understood from your answer it is not being used in TS components)

[pugnascotia]

It's pretty simple, see this example, but let me know if you need any help. There's also the Jest mock functions documentation.

You could then remove @types/sinon if it's not being used (i.e. no tests written in TypeScript are using it).

[ffknob]

It's pretty simple, see this example, but let me know if you need any help. There's also the Jest mock functions documentation.

You could then remove @types/sinon if it's not being used (i.e. no tests written in TypeScript are using it).

I think I managed to remove sinon and change it to Jest mock functions, but the above error persists...

[pugnascotia]

@ffknob the problem is in scripts/babel/proptypes-from-ts-props/index.js. I changed it as follows, in order to make it work:

@@ -1151,7 +1157,7 @@ const typeDefinitionExtractors = {
    */
   VariableDeclaration: node => {
     return node.declarations.reduce((declarations, declaration) => {
-      if (declaration.init.type === 'ObjectExpression') {
+      if (declaration.init != null && declaration.init.type === 'ObjectExpression') {
         declarations.push({
           name: declaration.id.name,
           definition: declaration.init,

@chandlerprall does the above change seem reasonable? The script seems to be failing on a line like:

let onConfirm: any;

[chandlerprall]

Threw a pull request at @ffknob's branch - ffknob#3

It contains the empty variable declaration fix from @pugnascotia (thanks for debugging that, Rory!), updates the any types to jest.Mock, and wrapped the entire test suite in a single EuiConfirmModal describe block for best practice.

[thompsongl]

ffknob#4 will get this PR moving again. I had some local changes going, so I opened a PR instead of leaving detailed review comments.

Thanks for your patience, @ffknob!

[ffknob]

ffknob#4 will get this PR moving again. I had some local changes going, so I opened a PR instead of leaving detailed review comments.

Thanks for your patience, @ffknob!

[thompsongl]

Just need to rebase/merge master, I think

[ffknob]

Just need to rebase/merge master, I think

Just merged with master... hope I got it all right.

Thanks for the help!

[thompsongl]

jenkins test this