table-wz-api.test.tsx.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Table WZ API component renders correctly to match the snapshot 1`] = `
<TableWzAPI
  downloadCsv={false}
  endpoint="/"
  error={false}
  searchBar={false}
  searchTable={false}
  tableColumns={
    Array [
      Object {
        "field": "version",
        "name": "Version",
        "sortable": true,
        "truncateText": true,
      },
      Object {
        "field": "architecture",
        "name": "Architecture",
        "sortable": true,
      },
      Object {
        "field": "cve",
        "name": "CVE",
        "sortable": true,
        "truncateText": true,
      },
      Object {
        "field": "name",
        "name": "Name",
        "sortable": true,
      },
    ]
  }
  title="Table"
>
  <EuiFlexGroup
    direction="column"
    gutterSize="s"
    responsive={false}
  >
    <div
      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn"
    >
      <EuiFlexItem>
        <div
          className="euiFlexItem"
        >
          <EuiFlexGroup
            alignItems="center"
            responsive={false}
            wrap={true}
          >
            <div
              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
            >
              <EuiFlexItem>
                <div
                  className="euiFlexItem"
                >
                  <EuiFlexGroup
                    alignItems="center"
                    responsive={false}
                    wrap={true}
                  >
                    <div
                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                    >
                      <EuiFlexItem
                        className="wz-flex-basis-auto"
                        grow={false}
                      >
                        <div
                          className="euiFlexItem euiFlexItem--flexGrowZero wz-flex-basis-auto"
                        >
                          <EuiTitle
                            size="s"
                          >
                            <h1
                              className="euiTitle euiTitle--small"
                            >
                              Table
                               
                              <EuiLoadingSpinner
                                size="s"
                              >
                                <span
                                  className="euiLoadingSpinner euiLoadingSpinner--small"
                                />
                              </EuiLoadingSpinner>
                            </h1>
                          </EuiTitle>
                        </div>
                      </EuiFlexItem>
                    </div>
                  </EuiFlexGroup>
                </div>
              </EuiFlexItem>
              <EuiFlexItem
                grow={false}
              >
                <div
                  className="euiFlexItem euiFlexItem--flexGrowZero"
                >
                  <EuiFlexGroup
                    alignItems="center"
                    responsive={false}
                    wrap={true}
                  >
                    <div
                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                    />
                  </EuiFlexGroup>
                </div>
              </EuiFlexItem>
            </div>
          </EuiFlexGroup>
        </div>
      </EuiFlexItem>
      <EuiFlexItem>
        <div
          className="euiFlexItem"
        >
          <TableDefault
            downloadCsv={false}
            endpoint="/"
            error={false}
            onSearch={[Function]}
            reload={0}
            searchBar={false}
            searchTable={false}
            tableColumns={
              Array [
                Object {
                  "field": "version",
                  "name": "Version",
                  "sortable": true,
                  "truncateText": true,
                },
                Object {
                  "field": "architecture",
                  "name": "Architecture",
                  "sortable": true,
                },
                Object {
                  "field": "cve",
                  "name": "CVE",
                  "sortable": true,
                  "truncateText": true,
                },
                Object {
                  "field": "name",
                  "name": "Name",
                  "sortable": true,
                },
              ]
            }
            title="Table"
          >
            <EuiBasicTable
              columns={
                Array [
                  Object {
                    "field": "version",
                    "name": "Version",
                    "sortable": true,
                    "truncateText": true,
                  },
                  Object {
                    "field": "architecture",
                    "name": "Architecture",
                    "sortable": true,
                  },
                  Object {
                    "field": "cve",
                    "name": "CVE",
                    "sortable": true,
                    "truncateText": true,
                  },
                  Object {
                    "field": "name",
                    "name": "Name",
                    "sortable": true,
                  },
                ]
              }
              items={Array []}
              loading={true}
              noItemsMessage="No items found"
              onChange={[Function]}
              pagination={
                Object {
                  "hidePerPageOptions": false,
                  "pageIndex": 0,
                  "pageSize": 15,
                  "pageSizeOptions": Array [
                    15,
                    25,
                    50,
                    100,
                  ],
                  "totalItemCount": 0,
                }
              }
              responsive={true}
              sorting={
                Object {
                  "sort": Object {
                    "direction": "asc",
                    "field": "",
                  },
                }
              }
              tableLayout="fixed"
            >
              <div
                className="euiBasicTable euiBasicTable-loading"
              >
                <div>
                  <EuiTableHeaderMobile>
                    <div
                      className="euiTableHeaderMobile"
                    >
                      <EuiFlexGroup
                        alignItems="baseline"
                        justifyContent="spaceBetween"
                        responsive={false}
                      >
                        <div
                          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
                        >
                          <EuiFlexItem
                            grow={false}
                          >
                            <div
                              className="euiFlexItem euiFlexItem--flexGrowZero"
                            />
                          </EuiFlexItem>
                          <EuiFlexItem
                            grow={false}
                          >
                            <div
                              className="euiFlexItem euiFlexItem--flexGrowZero"
                            >
                              <EuiTableSortMobile
                                items={
                                  Array [
                                    Object {
                                      "isSortAscending": undefined,
                                      "isSorted": false,
                                      "key": "_data_s_version_0",
                                      "name": "Version",
                                      "onSort": [Function],
                                    },
                                    Object {
                                      "isSortAscending": undefined,
                                      "isSorted": false,
                                      "key": "_data_s_architecture_1",
                                      "name": "Architecture",
                                      "onSort": [Function],
                                    },
                                    Object {
                                      "isSortAscending": undefined,
                                      "isSorted": false,
                                      "key": "_data_s_cve_2",
                                      "name": "CVE",
                                      "onSort": [Function],
                                    },
                                    Object {
                                      "isSortAscending": undefined,
                                      "isSorted": false,
                                      "key": "_data_s_name_3",
                                      "name": "Name",
                                      "onSort": [Function],
                                    },
                                  ]
                                }
                              >
                                <div
                                  className="euiTableSortMobile"
                                >
                                  <EuiPopover
                                    anchorPosition="downRight"
                                    button={
                                      <EuiButtonEmpty
                                        flush="right"
                                        iconSide="right"
                                        iconType="arrowDown"
                                        onClick={[Function]}
                                        size="xs"
                                      >
                                        <EuiI18n
                                          default="Sorting"
                                          token="euiTableSortMobile.sorting"
                                        />
                                      </EuiButtonEmpty>
                                    }
                                    closePopover={[Function]}
                                    display="inlineBlock"
                                    hasArrow={true}
                                    isOpen={false}
                                    ownFocus={true}
                                    panelPaddingSize="none"
                                  >
                                    <div
                                      className="euiPopover euiPopover--anchorDownRight"
                                    >
                                      <div
                                        className="euiPopover__anchor"
                                      >
                                        <EuiButtonEmpty
                                          flush="right"
                                          iconSide="right"
                                          iconType="arrowDown"
                                          onClick={[Function]}
                                          size="xs"
                                        >
                                          <button
                                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
                                            disabled={false}
                                            onClick={[Function]}
                                            type="button"
                                          >
                                            <EuiButtonContent
                                              className="euiButtonEmpty__content"
                                              iconSide="right"
                                              iconSize="s"
                                              iconType="arrowDown"
                                              textProps={
                                                Object {
                                                  "className": "euiButtonEmpty__text",
                                                }
                                              }
                                            >
                                              <span
                                                className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                                              >
                                                <EuiIcon
                                                  className="euiButtonContent__icon"
                                                  color="inherit"
                                                  size="s"
                                                  type="arrowDown"
                                                >
                                                  <EuiIconBeaker
                                                    aria-hidden={true}
                                                    className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                                    focusable="false"
                                                    role="img"
                                                    style={null}
                                                  >
                                                    <svg
                                                      aria-hidden={true}
                                                      className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                                      focusable="false"
                                                      height={16}
                                                      role="img"
                                                      style={null}
                                                      viewBox="0 0 16 16"
                                                      width={16}
                                                      xmlns="http://www.w3.org/2000/svg"
                                                    >
                                                      <path
                                                        d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                                                      />
                                                    </svg>
                                                  </EuiIconBeaker>
                                                </EuiIcon>
                                                <span
                                                  className="euiButtonEmpty__text"
                                                >
                                                  <EuiI18n
                                                    default="Sorting"
                                                    token="euiTableSortMobile.sorting"
                                                  >
                                                    Sorting
                                                  </EuiI18n>
                                                </span>
                                              </span>
                                            </EuiButtonContent>
                                          </button>
                                        </EuiButtonEmpty>
                                      </div>
                                    </div>
                                  </EuiPopover>
                                </div>
                              </EuiTableSortMobile>
                            </div>
                          </EuiFlexItem>
                        </div>
                      </EuiFlexGroup>
                    </div>
                  </EuiTableHeaderMobile>
                  <EuiTable
                    id="htmlId"
                    responsive={true}
                    tableLayout="fixed"
                  >
                    <table
                      className="euiTable euiTable--responsive"
                      id="htmlId"
                      tabIndex={-1}
                    >
                      <EuiScreenReaderOnly>
                        <caption
                          className="euiScreenReaderOnly euiTableCaption"
                        >
                          <EuiDelayRender
                            delay={500}
                          />
                        </caption>
                      </EuiScreenReaderOnly>
                      <EuiTableHeader>
                        <thead>
                          <tr>
                            <EuiTableHeaderCell
                              align="left"
                              data-test-subj="tableHeaderCell_version_0"
                              isSorted={false}
                              key="_data_h_version_0"
                              onSort={[Function]}
                            >
                              <th
                                aria-live="polite"
                                aria-sort="none"
                                className="euiTableHeaderCell"
                                data-test-subj="tableHeaderCell_version_0"
                                role="columnheader"
                                scope="col"
                                style={
                                  Object {
                                    "width": undefined,
                                  }
                                }
                              >
                                <button
                                  className="euiTableHeaderButton"
                                  data-test-subj="tableHeaderSortButton"
                                  onClick={[Function]}
                                  type="button"
                                >
                                  <CellContents
                                    className="euiTableCellContent"
                                    isSorted={false}
                                    showSortMsg={true}
                                  >
                                    <span
                                      className="euiTableCellContent"
                                    >
                                      <EuiInnerText>
                                        <EuiI18n
                                          default="{innerText}; {description}"
                                          token="euiTableHeaderCell.titleTextWithDesc"
                                          values={
                                            Object {
                                              "description": undefined,
                                              "innerText": "Version",
                                            }
                                          }
                                        >
                                          <span
                                            className="euiTableCellContent__text"
                                            title="Version"
                                          >
                                            Version
                                          </span>
                                        </EuiI18n>
                                      </EuiInnerText>
                                    </span>
                                  </CellContents>
                                </button>
                              </th>
                            </EuiTableHeaderCell>
                            <EuiTableHeaderCell
                              align="left"
                              data-test-subj="tableHeaderCell_architecture_1"
                              isSorted={false}
                              key="_data_h_architecture_1"
                              onSort={[Function]}
                            >
                              <th
                                aria-live="polite"
                                aria-sort="none"
                                className="euiTableHeaderCell"
                                data-test-subj="tableHeaderCell_architecture_1"
                                role="columnheader"
                                scope="col"
                                style={
                                  Object {
                                    "width": undefined,
                                  }
                                }
                              >
                                <button
                                  className="euiTableHeaderButton"
                                  data-test-subj="tableHeaderSortButton"
                                  onClick={[Function]}
                                  type="button"
                                >
                                  <CellContents
                                    className="euiTableCellContent"
                                    isSorted={false}
                                    showSortMsg={true}
                                  >
                                    <span
                                      className="euiTableCellContent"
                                    >
                                      <EuiInnerText>
                                        <EuiI18n
                                          default="{innerText}; {description}"
                                          token="euiTableHeaderCell.titleTextWithDesc"
                                          values={
                                            Object {
                                              "description": undefined,
                                              "innerText": "Architecture",
                                            }
                                          }
                                        >
                                          <span
                                            className="euiTableCellContent__text"
                                            title="Architecture"
                                          >
                                            Architecture
                                          </span>
                                        </EuiI18n>
                                      </EuiInnerText>
                                    </span>
                                  </CellContents>
                                </button>
                              </th>
                            </EuiTableHeaderCell>
                            <EuiTableHeaderCell
                              align="left"
                              data-test-subj="tableHeaderCell_cve_2"
                              isSorted={false}
                              key="_data_h_cve_2"
                              onSort={[Function]}
                            >
                              <th
                                aria-live="polite"
                                aria-sort="none"
                                className="euiTableHeaderCell"
                                data-test-subj="tableHeaderCell_cve_2"
                                role="columnheader"
                                scope="col"
                                style={
                                  Object {
                                    "width": undefined,
                                  }
                                }
                              >
                                <button
                                  className="euiTableHeaderButton"
                                  data-test-subj="tableHeaderSortButton"
                                  onClick={[Function]}
                                  type="button"
                                >
                                  <CellContents
                                    className="euiTableCellContent"
                                    isSorted={false}
                                    showSortMsg={true}
                                  >
                                    <span
                                      className="euiTableCellContent"
                                    >
                                      <EuiInnerText>
                                        <EuiI18n
                                          default="{innerText}; {description}"
                                          token="euiTableHeaderCell.titleTextWithDesc"
                                          values={
                                            Object {
                                              "description": undefined,
                                              "innerText": "CVE",
                                            }
                                          }
                                        >
                                          <span
                                            className="euiTableCellContent__text"
                                            title="CVE"
                                          >
                                            CVE
                                          </span>
                                        </EuiI18n>
                                      </EuiInnerText>
                                    </span>
                                  </CellContents>
                                </button>
                              </th>
                            </EuiTableHeaderCell>
                            <EuiTableHeaderCell
                              align="left"
                              data-test-subj="tableHeaderCell_name_3"
                              isSorted={false}
                              key="_data_h_name_3"
                              onSort={[Function]}
                            >
                              <th
                                aria-live="polite"
                                aria-sort="none"
                                className="euiTableHeaderCell"
                                data-test-subj="tableHeaderCell_name_3"
                                role="columnheader"
                                scope="col"
                                style={
                                  Object {
                                    "width": undefined,
                                  }
                                }
                              >
                                <button
                                  className="euiTableHeaderButton"
                                  data-test-subj="tableHeaderSortButton"
                                  onClick={[Function]}
                                  type="button"
                                >
                                  <CellContents
                                    className="euiTableCellContent"
                                    isSorted={false}
                                    showSortMsg={true}
                                  >
                                    <span
                                      className="euiTableCellContent"
                                    >
                                      <EuiInnerText>
                                        <EuiI18n
                                          default="{innerText}; {description}"
                                          token="euiTableHeaderCell.titleTextWithDesc"
                                          values={
                                            Object {
                                              "description": undefined,
                                              "innerText": "Name",
                                            }
                                          }
                                        >
                                          <span
                                            className="euiTableCellContent__text"
                                            title="Name"
                                          >
                                            Name
                                          </span>
                                        </EuiI18n>
                                      </EuiInnerText>
                                    </span>
                                  </CellContents>
                                </button>
                              </th>
                            </EuiTableHeaderCell>
                          </tr>
                        </thead>
                      </EuiTableHeader>
                      <EuiTableBody>
                        <tbody>
                          <EuiTableRow>
                            <tr
                              className="euiTableRow"
                            >
                              <EuiTableRowCell
                                align="center"
                                colSpan={4}
                                isMobileFullWidth={true}
                              >
                                <td
                                  className="euiTableRowCell euiTableRowCell--isMobileFullWidth"
                                  colSpan={4}
                                  style={
                                    Object {
                                      "width": undefined,
                                    }
                                  }
                                >
                                  <div
                                    className="euiTableCellContent euiTableCellContent--alignCenter"
                                  >
                                    <span
                                      className="euiTableCellContent__text"
                                    >
                                      No items found
                                    </span>
                                  </div>
                                </td>
                              </EuiTableRowCell>
                            </tr>
                          </EuiTableRow>
                        </tbody>
                      </EuiTableBody>
                    </table>
                  </EuiTable>
                </div>
              </div>
            </EuiBasicTable>
          </TableDefault>
        </div>
      </EuiFlexItem>
    </div>
  </EuiFlexGroup>
</TableWzAPI>
`;