[Canvas][tech-debt] Kill Recompose.pure #73295

clintandrewhall · 2020-07-27T15:20:39Z

Summary

The pure HOC from recompose has been overused in our codebase, oftentimes wrapping function components. This PR does the following:

Kills all usages of the pure HOC.
a. Types and converts all related files using best practices.
b. Adds Storybook stories where applicable.
Organizes all workpad annotations into a single directory
a. Fixes CSS classes of same.
Kills dead component: Navbar.

I may need to break this up, but I found myself finished and wondering if splitting it up was worth the extra time. Let me know if this seems undigestible.

elasticmachine · 2020-07-27T15:21:23Z

Pinging @elastic/kibana-canvas (Team:Canvas)

clintandrewhall · 2020-07-27T15:26:41Z

I think this is too many files... gonna split this up. :'(

kibanamachine · 2020-07-27T16:13:51Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 0fcf48c
Pipeline Steps (look for red circles / failed steps)
Interpreting CI Failures

Failed CI Steps

Test Failures

Kibana Pipeline / x-pack-intake-agent / X-Pack Jest Tests.x-pack/plugins/canvas/storybook.Storyshots components/TextStylePicker default

Link to Jenkins

Standard Out

Failed Tests Reporter:
  - Test has not failed recently on tracked branches

Stack Trace

Error: expect(received).toMatchSnapshot()

New snapshot was not written. The update flag must be explicitly passed to write a new snapshot.

This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default.

Received value 
<div
  style={
    Object {
      "width": 264,
    }
  }
>
  <div
    className="canvasTextStylePicker"
  >
    <div
      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
    >
      <div
        className="euiFlexItem"
      >
        <div
          className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
          onKeyDown={[Function]}
          onMouseDown={[Function]}
          onMouseUp={[Function]}
          onTouchEnd={[Function]}
          onTouchStart={[Function]}
        >
          <div
            className="euiPopover__anchor"
          >
            <input
              type="hidden"
              value=""
            />
            <div
              className="euiFormControlLayout euiFormControlLayout--compressed"
            >
              <div
                className="euiFormControlLayout__childrenWrapper"
              >
                <span
                  className="euiScreenReaderOnly"
                  id="generated-id"
                >
                  Select an option: 
                  , is selected
                </span>
                <button
                  aria-haspopup="true"
                  aria-labelledby="undefined generated-id"
                  aria-selected={true}
                  className="euiSuperSelectControl euiSuperSelectControl--compressed"
                  onClick={[Function]}
                  onKeyDown={[Function]}
                  role="option"
                  type="button"
                />
                <div
                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                >
                  <span
                    className="euiFormControlLayoutCustomIcon"
                  >
                    <div
                      aria-hidden="true"
                      className="euiFormControlLayoutCustomIcon__icon"
                      data-euiicon-type="arrowDown"
                    />
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        className="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <div
          className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
        >
          <label
            className="euiFormLabel euiFormControlLayout__prepend"
          >
            Size
          </label>
          <div
            className="euiFormControlLayout__childrenWrapper"
          >
            <select
              className="euiSelect euiSelect--compressed euiSelect--inGroup"
              onChange={[Function]}
              onMouseUp={[Function]}
              value={14}
            >
              <option
                value={0}
              >
                0
              </option>
              <option
                value={6}
              >
                6
              </option>
              <option
                value={7}
              >
                7
              </option>
              <option
                value={8}
              >
                8
              </option>
              <option
                value={9}
              >
                9
              </option>
              <option
                value={10}
              >
                10
              </option>
              <option
                value={11}
              >
                11
              </option>
              <option
                value={12}
              >
                12
              </option>
              <option
                value={14}
              >
                14
              </option>
              <option
                value={16}
              >
                16
              </option>
              <option
                value={18}
              >
                18
              </option>
              <option
                value={24}
              >
                24
              </option>
              <option
                value={30}
              >
                30
              </option>
              <option
                value={36}
              >
                36
              </option>
              <option
                value={48}
              >
                48
              </option>
              <option
                value={60}
              >
                60
              </option>
              <option
                value={72}
              >
                72
              </option>
              <option
                value={96}
              >
                96
              </option>
            </select>
            <div
              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
            >
              <span
                className="euiFormControlLayoutCustomIcon"
              >
                <div
                  aria-hidden="true"
                  className="euiFormControlLayoutCustomIcon__icon"
                  data-euiicon-type="arrowDown"
                />
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      className="euiSpacer euiSpacer--s"
    />
    <div
      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
    >
      <div
        className="euiFlexItem euiFlexItem--flexGrowZero"
        style={
          Object {
            "fontSize": 0,
          }
        }
      >
        <div
          className="euiPopover euiPopover--anchorDownCenter"
          container={null}
          id="color-picker-popover"
          onKeyDown={[Function]}
          onMouseDown={[Function]}
          onMouseUp={[Function]}
          onTouchEnd={[Function]}
          onTouchStart={[Function]}
        >
          <div
            className="euiPopover__anchor"
          >
            <button
              aria-label="Font Color black"
              className="euiLink euiLink--primary"
              onClick={[Function]}
              style={
                Object {
                  "fontSize": 0,
                }
              }
              type="button"
            >
              <div
                className="canvasColorDot"
              >
                <div
                  className="canvasColorDot__background canvasCheckered"
                />
                <div
                  className="canvasColorDot__foreground"
                  style={Object {}}
                />
              </div>
            </button>
          </div>
        </div>
      </div>
      <div
        className="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <fieldset
          className="euiButtonGroup__fieldset"
        >
          <div
            className="euiButtonGroup euiButtonGroup--compressed canvasSidebar__buttonGroup"
          >
            <div
              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
            >
              <input
                aria-label="Bold"
                checked={false}
                className="euiToggle__input euiButtonToggle__input"
                onChange={[Function]}
                title="Bold"
                type="checkbox"
              />
              <button
                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
                id="bold"
                tabIndex={-1}
                type="button"
              >
                <span
                  className="euiButton__content"
                >
                  <div
                    aria-hidden="true"
                    className="euiButton__icon"
                    data-euiicon-type="editorBold"
                    size="m"
                  />
                  <span
                    className="euiButton__text"
                  >

                  </span>
                </span>
              </button>
            </div>
            <div
              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
            >
              <input
                aria-label="Italic"
                checked={false}
                className="euiToggle__input euiButtonToggle__input"
                onChange={[Function]}
                title="Italic"
                type="checkbox"
              />
              <button
                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
                id="italic"
                tabIndex={-1}
                type="button"
              >
                <span
                  className="euiButton__content"
                >
                  <div
                    aria-hidden="true"
                    className="euiButton__icon"
                    data-euiicon-type="editorItalic"
                    size="m"
                  />
                  <span
                    className="euiButton__text"
                  >

                  </span>
                </span>
              </button>
            </div>
            <div
              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
            >
              <input
                aria-label="Underline"
                checked={false}
                className="euiToggle__input euiButtonToggle__input"
                onChange={[Function]}
                title="Underline"
                type="checkbox"
              />
              <button
                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
                id="underline"
                tabIndex={-1}
                type="button"
              >
                <span
                  className="euiButton__content"
                >
                  <div
                    aria-hidden="true"
                    className="euiButton__icon"
                    data-euiicon-type="editorUnderline"
                    size="m"
                  />
                  <span
                    className="euiButton__text"
                  >

                  </span>
                </span>
              </button>
            </div>
          </div>
        </fieldset>
      </div>
      <div
        className="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <fieldset
          className="euiButtonGroup__fieldset"
        >
          <div
            className="euiButtonGroup euiButtonGroup--compressed canvasSidebar__buttonGroup"
          >
            <div
              className="euiToggle euiToggle--checked euiButtonToggle__wrapper euiButtonGroup__toggle"
            >
              <input
                aria-label="Align left"
                checked={true}
                className="euiToggle__input euiButtonToggle__input"
                onChange={[Function]}
                title="Align left"
                type="radio"
              />
              <button
                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button euiButtonGroup__button--selected"
                id="left"
                tabIndex={-1}
                type="button"
              >
                <span
                  className="euiButton__content"
                >
                  <div
                    aria-hidden="true"
                    className="euiButton__icon"
                    data-euiicon-type="editorAlignLeft"
                    size="m"
                  />
                  <span
                    className="euiButton__text"
                  >

                  </span>
                </span>
              </button>
            </div>
            <div
              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
            >
              <input
                aria-label="Align center"
                checked={false}
                className="euiToggle__input euiButtonToggle__input"
                onChange={[Function]}
                title="Align center"
                type="radio"
              />
              <button
                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
                id="center"
                tabIndex={-1}
                type="button"
              >
                <span
                  className="euiButton__content"
                >
                  <div
                    aria-hidden="true"
                    className="euiButton__icon"
                    data-euiicon-type="editorAlignCenter"
                    size="m"
                  />
                  <span
                    className="euiButton__text"
                  >

                  </span>
                </span>
              </button>
            </div>
            <div
              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
            >
              <input
                aria-label="Align right"
                checked={false}
                className="euiToggle__input euiButtonToggle__input"
                onChange={[Function]}
                title="Align right"
                type="radio"
              />
              <button
                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
                id="right"
                tabIndex={-1}
                type="button"
              >
                <span
                  className="euiButton__content"
                >
                  <div
                    aria-hidden="true"
                    className="euiButton__icon"
                    data-euiicon-type="editorAlignRight"
                    size="m"
                  />
                  <span
                    className="euiButton__text"
                  >

                  </span>
                </span>
              </button>
            </div>
          </div>
        </fieldset>
      </div>
    </div>
  </div>
</div>

    at match (/dev/shm/workspace/kibana/node_modules/@storybook/addon-storyshots/dist/test-bodies.js:25:20)
    at /dev/shm/workspace/kibana/node_modules/@storybook/addon-storyshots/dist/test-bodies.js:39:10
    at /dev/shm/workspace/kibana/node_modules/@storybook/addon-storyshots/dist/test-bodies.js:49:35
    at Object.<anonymous> (/dev/shm/workspace/kibana/node_modules/@storybook/addon-storyshots/dist/api/snapshotsTestsTemplate.js:44:33)
    at Promise (/dev/shm/workspace/kibana/node_modules/jest-circus/build/utils.js:198:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/dev/shm/workspace/kibana/node_modules/jest-circus/build/utils.js:162:10)
    at _callCircusTest (/dev/shm/workspace/kibana/node_modules/jest-circus/build/run.js:205:40)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Kibana Pipeline / x-pack-intake-agent / X-Pack Jest Tests.x-pack/plugins/canvas/storybook.Storyshots components/TextStylePicker interactive

Link to Jenkins

Standard Out

Failed Tests Reporter:
  - Test has not failed recently on tracked branches

Stack Trace

Error: expect(received).toMatchSnapshot()

New snapshot was not written. The update flag must be explicitly passed to write a new snapshot.

This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default.

Received value 
<div
  style={
    Object {
      "width": 264,
    }
  }
>
  <div
    className="canvasTextStylePicker"
  >
    <div
      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
    >
      <div
        className="euiFlexItem"
      >
        <div
          className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
          onKeyDown={[Function]}
          onMouseDown={[Function]}
          onMouseUp={[Function]}
          onTouchEnd={[Function]}
          onTouchStart={[Function]}
        >
          <div
            className="euiPopover__anchor"
          >
            <input
              type="hidden"
              value=""
            />
            <div
              className="euiFormControlLayout euiFormControlLayout--compressed"
            >
              <div
                className="euiFormControlLayout__childrenWrapper"
              >
                <span
                  className="euiScreenReaderOnly"
                  id="generated-id"
                >
                  Select an option: 
                  , is selected
                </span>
                <button
                  aria-haspopup="true"
                  aria-labelledby="undefined generated-id"
                  aria-selected={true}
                  className="euiSuperSelectControl euiSuperSelectControl--compressed"
                  onClick={[Function]}
                  onKeyDown={[Function]}
                  role="option"
                  type="button"
                />
                <div
                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                >
                  <span
                    className="euiFormControlLayoutCustomIcon"
                  >
                    <div
                      aria-hidden="true"
                      className="euiFormControlLayoutCustomIcon__icon"
                      data-euiicon-type="arrowDown"
                    />
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        className="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <div
          className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
        >
          <label
            className="euiFormLabel euiFormControlLayout__prepend"
          >
            Size
          </label>
          <div
            className="euiFormControlLayout__childrenWrapper"
          >
            <select
              className="euiSelect euiSelect--compressed euiSelect--inGroup"
              onChange={[Function]}
              onMouseUp={[Function]}
              value={14}
            >
              <option
                value={0}
              >
                0
              </option>
              <option
                value={6}
              >
                6
              </option>
              <option
                value={7}
              >
                7
              </option>
              <option
                value={8}
              >
                8
              </option>
              <option
                value={9}
              >
                9
              </option>
              <option
                value={10}
              >
                10
              </option>
              <option
                value={11}
              >
                11
              </option>
              <option
                value={12}
              >
                12
              </option>
              <option
                value={14}
              >
                14
              </option>
              <option
                value={16}
              >
                16
              </option>
              <option
                value={18}
              >
                18
              </option>
              <option
                value={24}
              >
                24
              </option>
              <option
                value={30}
              >
                30
              </option>
              <option
                value={36}
              >
                36
              </option>
              <option
                value={48}
              >
                48
              </option>
              <option
                value={60}
              >
                60
              </option>
              <option
                value={72}
              >
                72
              </option>
              <option
                value={96}
              >
                96
              </option>
            </select>
            <div
              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
            >
              <span
                className="euiFormControlLayoutCustomIcon"
              >
                <div
                  aria-hidden="true"
                  className="euiFormControlLayoutCustomIcon__icon"
                  data-euiicon-type="arrowDown"
                />
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      className="euiSpacer euiSpacer--s"
    />
    <div
      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
    >
      <div
        className="euiFlexItem euiFlexItem--flexGrowZero"
        style={
          Object {
            "fontSize": 0,
          }
        }
      >
        <div
          className="euiPopover euiPopover--anchorDownCenter"
          container={null}
          id="color-picker-popover"
          onKeyDown={[Function]}
          onMouseDown={[Function]}
          onMouseUp={[Function]}
          onTouchEnd={[Function]}
          onTouchStart={[Function]}
        >
          <div
            className="euiPopover__anchor"
          >
            <button
              aria-label="Font Color black"
              className="euiLink euiLink--primary"
              onClick={[Function]}
              style={
                Object {
                  "fontSize": 0,
                }
              }
              type="button"
            >
              <div
                className="canvasColorDot"
              >
                <div
                  className="canvasColorDot__background canvasCheckered"
                />
                <div
                  className="canvasColorDot__foreground"
                  style={Object {}}
                />
              </div>
            </button>
          </div>
        </div>
      </div>
      <div
        className="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <fieldset
          className="euiButtonGroup__fieldset"
        >
          <div
            className="euiButtonGroup euiButtonGroup--compressed canvasSidebar__buttonGroup"
          >
            <div
              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
            >
              <input
                aria-label="Bold"
                checked={false}
                className="euiToggle__input euiButtonToggle__input"
                onChange={[Function]}
                title="Bold"
                type="checkbox"
              />
              <button
                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
                id="bold"
                tabIndex={-1}
                type="button"
              >
                <span
                  className="euiButton__content"
                >
                  <div
                    aria-hidden="true"
                    className="euiButton__icon"
                    data-euiicon-type="editorBold"
                    size="m"
                  />
                  <span
                    className="euiButton__text"
                  >

                  </span>
                </span>
              </button>
            </div>
            <div
              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
            >
              <input
                aria-label="Italic"
                checked={false}
                className="euiToggle__input euiButtonToggle__input"
                onChange={[Function]}
                title="Italic"
                type="checkbox"
              />
              <button
                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
                id="italic"
                tabIndex={-1}
                type="button"
              >
                <span
                  className="euiButton__content"
                >
                  <div
                    aria-hidden="true"
                    className="euiButton__icon"
                    data-euiicon-type="editorItalic"
                    size="m"
                  />
                  <span
                    className="euiButton__text"
                  >

                  </span>
                </span>
              </button>
            </div>
            <div
              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
            >
              <input
                aria-label="Underline"
                checked={false}
                className="euiToggle__input euiButtonToggle__input"
                onChange={[Function]}
                title="Underline"
                type="checkbox"
              />
              <button
                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
                id="underline"
                tabIndex={-1}
                type="button"
              >
                <span
                  className="euiButton__content"
                >
                  <div
                    aria-hidden="true"
                    className="euiButton__icon"
                    data-euiicon-type="editorUnderline"
                    size="m"
                  />
                  <span
                    className="euiButton__text"
                  >

                  </span>
                </span>
              </button>
            </div>
          </div>
        </fieldset>
      </div>
      <div
        className="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <fieldset
          className="euiButtonGroup__fieldset"
        >
          <div
            className="euiButtonGroup euiButtonGroup--compressed canvasSidebar__buttonGroup"
          >
            <div
              className="euiToggle euiToggle--checked euiButtonToggle__wrapper euiButtonGroup__toggle"
            >
              <input
                aria-label="Align left"
                checked={true}
                className="euiToggle__input euiButtonToggle__input"
                onChange={[Function]}
                title="Align left"
                type="radio"
              />
              <button
                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button euiButtonGroup__button--selected"
                id="left"
                tabIndex={-1}
                type="button"
              >
                <span
                  className="euiButton__content"
                >
                  <div
                    aria-hidden="true"
                    className="euiButton__icon"
                    data-euiicon-type="editorAlignLeft"
                    size="m"
                  />
                  <span
                    className="euiButton__text"
                  >

                  </span>
                </span>
              </button>
            </div>
            <div
              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
            >
              <input
                aria-label="Align center"
                checked={false}
                className="euiToggle__input euiButtonToggle__input"
                onChange={[Function]}
                title="Align center"
                type="radio"
              />
              <button
                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
                id="center"
                tabIndex={-1}
                type="button"
              >
                <span
                  className="euiButton__content"
                >
                  <div
                    aria-hidden="true"
                    className="euiButton__icon"
                    data-euiicon-type="editorAlignCenter"
                    size="m"
                  />
                  <span
                    className="euiButton__text"
                  >

                  </span>
                </span>
              </button>
            </div>
            <div
              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
            >
              <input
                aria-label="Align right"
                checked={false}
                className="euiToggle__input euiButtonToggle__input"
                onChange={[Function]}
                title="Align right"
                type="radio"
              />
              <button
                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
                id="right"
                tabIndex={-1}
                type="button"
              >
                <span
                  className="euiButton__content"
                >
                  <div
                    aria-hidden="true"
                    className="euiButton__icon"
                    data-euiicon-type="editorAlignRight"
                    size="m"
                  />
                  <span
                    className="euiButton__text"
                  >

                  </span>
                </span>
              </button>
            </div>
          </div>
        </fieldset>
      </div>
    </div>
  </div>
</div>

    at match (/dev/shm/workspace/kibana/node_modules/@storybook/addon-storyshots/dist/test-bodies.js:25:20)
    at /dev/shm/workspace/kibana/node_modules/@storybook/addon-storyshots/dist/test-bodies.js:39:10
    at /dev/shm/workspace/kibana/node_modules/@storybook/addon-storyshots/dist/test-bodies.js:49:35
    at Object.<anonymous> (/dev/shm/workspace/kibana/node_modules/@storybook/addon-storyshots/dist/api/snapshotsTestsTemplate.js:44:33)
    at Promise (/dev/shm/workspace/kibana/node_modules/jest-circus/build/utils.js:198:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/dev/shm/workspace/kibana/node_modules/jest-circus/build/utils.js:162:10)
    at _callCircusTest (/dev/shm/workspace/kibana/node_modules/jest-circus/build/run.js:205:40)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Kibana Pipeline / x-pack-intake-agent / X-Pack Jest Tests.x-pack/plugins/canvas/storybook.Storyshots components/Toolbar no element selected

Link to Jenkins

Standard Out

Failed Tests Reporter:
  - Test has not failed recently on tracked branches

Stack Trace

Error: expect(received).toMatchSnapshot()

New snapshot was not written. The update flag must be explicitly passed to write a new snapshot.

This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default.

Received value 
<div
  className="canvasToolbar hide-for-sharing"
>
  <div
    className="canvasToolbar__container"
  >
    <div
      className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasToolbar__controls"
    >
      <div
        className="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <button
          className="euiButtonEmpty euiButtonEmpty--text"
          onClick={[Function]}
          type="button"
        >
          <span
            className="euiButtonEmpty__content"
          >
            <div
              aria-hidden="true"
              className="euiButtonEmpty__icon"
              data-euiicon-type="grid"
              size="m"
            />
            <span
              className="euiButtonEmpty__text"
            >
              My Canvas Workpad
            </span>
          </span>
        </button>
      </div>
      <div
        className="euiFlexItem euiFlexItem--flexGrowZero"
      />
      <div
        className="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <button
          aria-label="Previous Page"
          className="euiButtonIcon euiButtonIcon--text"
          disabled={true}
          onClick={[Function]}
          type="button"
        >
          <div
            aria-hidden="true"
            className="euiButtonIcon__icon"
            data-euiicon-type="arrowLeft"
            size="m"
          />
        </button>
      </div>
      <div
        className="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <button
          className="euiButtonEmpty euiButtonEmpty--text"
          onClick={[Function]}
          type="button"
        >
          <span
            className="euiButtonEmpty__content"
          >
            <span
              className="euiButtonEmpty__text"
            >
              Page 1
            </span>
          </span>
        </button>
      </div>
      <div
        className="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <button
          aria-label="Next Page"
          className="euiButtonIcon euiButtonIcon--text"
          disabled={true}
          onClick={[Function]}
          type="button"
        >
          <div
            aria-hidden="true"
            className="euiButtonIcon__icon"
            data-euiicon-type="arrowRight"
            size="m"
          />
        </button>
      </div>
      <div
        className="euiFlexItem"
      />
    </div>
  </div>
</div>

    at match (/dev/shm/workspace/kibana/node_modules/@storybook/addon-storyshots/dist/test-bodies.js:25:20)
    at /dev/shm/workspace/kibana/node_modules/@storybook/addon-storyshots/dist/test-bodies.js:39:10
    at /dev/shm/workspace/kibana/node_modules/@storybook/addon-storyshots/dist/test-bodies.js:49:35
    at Object.<anonymous> (/dev/shm/workspace/kibana/node_modules/@storybook/addon-storyshots/dist/api/snapshotsTestsTemplate.js:44:33)
    at Promise (/dev/shm/workspace/kibana/node_modules/jest-circus/build/utils.js:198:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/dev/shm/workspace/kibana/node_modules/jest-circus/build/utils.js:162:10)
    at _callCircusTest (/dev/shm/workspace/kibana/node_modules/jest-circus/build/run.js:205:40)
    at process._tickCallback (internal/process/next_tick.js:68:7)

and 1 more failures, only showing the first 3.

Build metrics

async chunks size

id	value	diff	baseline
canvas	1.5MB	+207.0B	1.5MB

page load bundle size

id	value	diff	baseline
canvas	1.4MB	-740.0B	1.4MB

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[tech-debt] Kill Recompose.pure

0fcf48c

clintandrewhall requested review from a team as code owners July 27, 2020 15:20

clintandrewhall added the release_note:skip Skip the PR/issue when compiling release notes label Jul 27, 2020

clintandrewhall closed this Jul 27, 2020

This was referenced Jul 27, 2020

[Canvas][tech-debt] Kill Recompose:Pure - Part 1 #73303

Merged

[Canvas][tech-debt] Refactor Layout Annotations (kill recompose.pure Part 2) #73305

Merged

clintandrewhall mentioned this pull request Jul 27, 2020

[Canvas][tech-debt] Refactor Toolbar (completes Kill Recompose.pure) #73309

Merged

clintandrewhall deleted the td-recompose branch July 9, 2021 16:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Canvas][tech-debt] Kill Recompose.pure #73295

[Canvas][tech-debt] Kill Recompose.pure #73295

clintandrewhall commented Jul 27, 2020

elasticmachine commented Jul 27, 2020

clintandrewhall commented Jul 27, 2020

kibanamachine commented Jul 27, 2020 •

edited

Loading

Standard Out

Stack Trace

Standard Out

Stack Trace

Standard Out

Stack Trace

[Canvas][tech-debt] Kill Recompose.pure #73295

[Canvas][tech-debt] Kill Recompose.pure #73295

Conversation

clintandrewhall commented Jul 27, 2020

Summary

elasticmachine commented Jul 27, 2020

clintandrewhall commented Jul 27, 2020

kibanamachine commented Jul 27, 2020 • edited Loading

💔 Build Failed

Failed CI Steps

Test Failures

Standard Out

Stack Trace

Standard Out

Stack Trace

Standard Out

Stack Trace

Build metrics

async chunks size

page load bundle size

kibanamachine commented Jul 27, 2020 •

edited

Loading