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

exports[`PolicyTemplateDetailsView component renders as expected -- no related object field 1`] = `
<div
  className="policy-template-details-view"
>
  <div
    className="details"
  >
    <div
      className="overview"
    >
      <h2
        className="pf-c-title pf-m-xl title"
      >
        Template details
      </h2>
      <dl
        className="pf-c-description-list"
      >
        <div
          className="pf-c-description-list__group"
        >
          <dt
            className="pf-c-description-list__term"
          >
            <span
              className="pf-c-description-list__text"
            >
              Name
            </span>
          </dt>
          <dd
            className="pf-c-description-list__description"
          >
            <div
              className="pf-c-description-list__text"
            >
              policy-gatekeeper-admission
            </div>
          </dd>
        </div>
        <div
          className="pf-c-description-list__group"
        >
          <dt
            className="pf-c-description-list__term"
          >
            <span
              className="pf-c-description-list__text"
            >
              Cluster
            </span>
          </dt>
          <dd
            className="pf-c-description-list__description"
          >
            <div
              className="pf-c-description-list__text"
            >
              calamari
            </div>
          </dd>
        </div>
        <div
          className="pf-c-description-list__group"
        >
          <dt
            className="pf-c-description-list__term"
          >
            <span
              className="pf-c-description-list__text"
            >
              Kind
            </span>
          </dt>
          <dd
            className="pf-c-description-list__description"
          >
            <div
              className="pf-c-description-list__text"
            >
              ConfigurationPolicy
            </div>
          </dd>
        </div>
        <div
          className="pf-c-description-list__group"
        >
          <dt
            className="pf-c-description-list__term"
          >
            <span
              className="pf-c-description-list__text"
            >
              API groups
            </span>
          </dt>
          <dd
            className="pf-c-description-list__description"
          >
            <div
              className="pf-c-description-list__text"
            >
              policy.open-cluster-management.io/v1
            </div>
          </dd>
        </div>
        <div
          className="pf-c-description-list__group"
        >
          <dt
            className="pf-c-description-list__term"
          >
            <span
              className="pf-c-description-list__text"
            >
              Compliant
            </span>
          </dt>
          <dd
            className="pf-c-description-list__description"
          >
            <div
              className="pf-c-description-list__text"
            >
              NonCompliant
            </div>
          </dd>
        </div>
        <div
          className="pf-c-description-list__group"
        >
          <dt
            className="pf-c-description-list__term"
          >
            <span
              className="pf-c-description-list__text"
            >
              Details
            </span>
          </dt>
          <dd
            className="pf-c-description-list__description"
          >
            <div
              className="pf-c-description-list__text"
            >
              [{"Compliant":"NonCompliant","Validity":{},"conditions":[{"lastTransitionTime":"2020-08-21T17:01:43Z","message":"events exist and should be deleted: [openshift-multus.162c73ad488032d5, openshift-multus.162c749621995399, openshift-multus.162c757efd7ebb62] in namespace gatekeeper-system","reason":"K8s has a must \`not\` have object","status":"True","type":"violation"}]}]
            </div>
          </dd>
        </div>
      </dl>
    </div>
    <div
      className="yaml"
    >
      <h2
        className="pf-c-title pf-m-xl title"
      >
        Template yaml
      </h2>
      <div>
        <div
          className="yamlEditorContainer"
        >
          <div
            className="react-monaco-editor-container"
            style={
              Object {
                "height": "500px",
                "width": "100%",
              }
            }
          />
        </div>
      </div>
    </div>
  </div>
  <div
    className="table"
  >
    <h2
      className="pf-c-title pf-m-xl title"
    >
      Related resources
    </h2>
    <div
      className="pattern-fly-table-group"
    >
      <div
        className="pf-c-search-input"
      >
        <span
          className="pf-c-search-input__text"
        >
          <span
            className="pf-c-search-input__icon"
          >
            <svg
              aria-hidden={true}
              aria-labelledby={null}
              fill="currentColor"
              height="1em"
              role="img"
              style={
                Object {
                  "verticalAlign": "-0.125em",
                }
              }
              viewBox="0 0 512 512"
              width="1em"
            >
              <path
                d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
              />
            </svg>
          </span>
          <input
            aria-label="Search input"
            className="pf-c-search-input__text-input"
            onChange={[Function]}
            placeholder="Find"
            value=""
          />
        </span>
        
      </div>
      <div
        className="pattern-fly-table"
      >
        <table
          aria-label="Sortable Table"
          className="pf-c-table pf-m-grid-md"
          data-ouia-component-id="OUIA-Generated-Table-3"
          data-ouia-component-type="PF4/Table"
          data-ouia-safe={true}
          role="grid"
        >
          <thead
            className="pattern-fly-table-header"
          >
            <tr>
              <th
                aria-sort="ascending"
                className="pf-c-table__sort pf-m-selected pf-m-wrap"
                data-key={0}
                data-label="Name"
                onMouseEnter={[Function]}
                scope="col"
              >
                <button
                  className="pf-c-table__button"
                  onClick={[Function]}
                  type="button"
                >
                  <div
                    className="pf-c-table__button-content"
                  >
                    <span
                      className="pf-c-table__text"
                      onMouseEnter={[Function]}
                    >
                      Name
                    </span>
                    <span
                      className="pf-c-table__sort-indicator"
                    >
                      <svg
                        aria-hidden={true}
                        aria-labelledby={null}
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style={
                          Object {
                            "verticalAlign": "-0.125em",
                          }
                        }
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z"
                        />
                      </svg>
                    </span>
                  </div>
                </button>
              </th>
              <th
                aria-sort="none"
                className="pf-c-table__sort pf-m-wrap"
                data-key={1}
                data-label="Namespace"
                onMouseEnter={[Function]}
                scope="col"
              >
                <button
                  className="pf-c-table__button"
                  onClick={[Function]}
                  type="button"
                >
                  <div
                    className="pf-c-table__button-content"
                  >
                    <span
                      className="pf-c-table__text"
                      onMouseEnter={[Function]}
                    >
                      Namespace
                    </span>
                    <span
                      className="pf-c-table__sort-indicator"
                    >
                      <svg
                        aria-hidden={true}
                        aria-labelledby={null}
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style={
                          Object {
                            "verticalAlign": "-0.125em",
                          }
                        }
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
                        />
                      </svg>
                    </span>
                  </div>
                </button>
              </th>
              <th
                aria-sort="none"
                className="pf-c-table__sort pf-m-wrap"
                data-key={2}
                data-label="Kind"
                onMouseEnter={[Function]}
                scope="col"
              >
                <button
                  className="pf-c-table__button"
                  onClick={[Function]}
                  type="button"
                >
                  <div
                    className="pf-c-table__button-content"
                  >
                    <span
                      className="pf-c-table__text"
                      onMouseEnter={[Function]}
                    >
                      Kind
                    </span>
                    <span
                      className="pf-c-table__sort-indicator"
                    >
                      <svg
                        aria-hidden={true}
                        aria-labelledby={null}
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style={
                          Object {
                            "verticalAlign": "-0.125em",
                          }
                        }
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
                        />
                      </svg>
                    </span>
                  </div>
                </button>
              </th>
              <th
                aria-sort="none"
                className="pf-c-table__sort pf-m-wrap"
                data-key={3}
                data-label="API groups"
                onMouseEnter={[Function]}
                scope="col"
              >
                <button
                  className="pf-c-table__button"
                  onClick={[Function]}
                  type="button"
                >
                  <div
                    className="pf-c-table__button-content"
                  >
                    <span
                      className="pf-c-table__text"
                      onMouseEnter={[Function]}
                    >
                      API groups
                    </span>
                    <span
                      className="pf-c-table__sort-indicator"
                    >
                      <svg
                        aria-hidden={true}
                        aria-labelledby={null}
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style={
                          Object {
                            "verticalAlign": "-0.125em",
                          }
                        }
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
                        />
                      </svg>
                    </span>
                  </div>
                </button>
              </th>
              <th
                aria-sort="none"
                className="pf-c-table__sort pf-m-wrap"
                data-key={4}
                data-label="Compliant"
                onMouseEnter={[Function]}
                scope="col"
              >
                <button
                  className="pf-c-table__button"
                  onClick={[Function]}
                  type="button"
                >
                  <div
                    className="pf-c-table__button-content"
                  >
                    <span
                      className="pf-c-table__text"
                      onMouseEnter={[Function]}
                    >
                      Compliant
                    </span>
                    <span
                      className="pf-c-table__sort-indicator"
                    >
                      <svg
                        aria-hidden={true}
                        aria-labelledby={null}
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style={
                          Object {
                            "verticalAlign": "-0.125em",
                          }
                        }
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
                        />
                      </svg>
                    </span>
                  </div>
                </button>
              </th>
              <th
                aria-sort="none"
                className="pf-c-table__sort pf-m-wrap"
                data-key={5}
                data-label="Reason"
                onMouseEnter={[Function]}
                scope="col"
              >
                <button
                  className="pf-c-table__button"
                  onClick={[Function]}
                  type="button"
                >
                  <div
                    className="pf-c-table__button-content"
                  >
                    <span
                      className="pf-c-table__text"
                      onMouseEnter={[Function]}
                    >
                      Reason
                    </span>
                    <span
                      className="pf-c-table__sort-indicator"
                    >
                      <svg
                        aria-hidden={true}
                        aria-labelledby={null}
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style={
                          Object {
                            "verticalAlign": "-0.125em",
                          }
                        }
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
                        />
                      </svg>
                    </span>
                  </div>
                </button>
              </th>
              <th
                className=""
                data-key={6}
                data-label=""
                onMouseEnter={[Function]}
              >
                
              </th>
            </tr>
          </thead>
          <tbody
            className="pattern-fly-table-body"
          />
        </table>
        <div
          className="pf-c-empty-state pf-m-sm pattern-fly-table-empty-state"
        >
          <div
            className="pf-c-empty-state__content"
          >
            <svg
              aria-hidden="true"
              aria-labelledby={null}
              className="pf-c-empty-state__icon"
              fill="currentColor"
              height="1em"
              role="img"
              style={
                Object {
                  "verticalAlign": "-0.125em",
                }
              }
              viewBox="0 0 512 512"
              width="1em"
            >
              <path
                d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
              />
            </svg>
            <h2
              className="pf-c-title pf-m-md"
            >
              No results found
            </h2>
          </div>
        </div>
        <div
          className="pf-c-pagination pf-m-bottom"
          data-ouia-component-id="OUIA-Generated-Pagination-bottom-3"
          data-ouia-component-type="PF4/Pagination"
          data-ouia-safe={true}
          id="pagination-options-menu-bottom-2"
        >
          <div
            className="pf-c-options-menu pf-m-top"
            data-ouia-component-type="PF4/PaginationOptionsMenu"
            data-ouia-safe={true}
          >
            <div
              className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
            >
              <span
                className="pf-c-options-menu__toggle-text"
              >
                <b>
                  0
                   - 
                  0
                </b>
                 
                of 
                <b>
                  0
                </b>
                 
                
              </span>
              <button
                aria-expanded={false}
                aria-label="Items per page"
                className="  pf-c-options-menu__toggle-button"
                disabled={true}
                id="pagination-options-menu-bottom-toggle-2"
                onClick={[Function]}
                onKeyDown={[Function]}
                type="button"
              >
                <span
                  className="pf-c-options-menu__toggle-button-icon"
                >
                  <svg
                    aria-hidden={true}
                    aria-labelledby={null}
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style={
                      Object {
                        "verticalAlign": "-0.125em",
                      }
                    }
                    viewBox="0 0 320 512"
                    width="1em"
                  >
                    <path
                      d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
          <nav
            aria-label="Pagination"
            className="pf-c-pagination__nav"
          >
            <div
              className="pf-c-pagination__nav-control pf-m-first"
            >
              <button
                aria-disabled={true}
                aria-label="Go to first page"
                className="pf-c-button pf-m-plain pf-m-disabled"
                data-action="first"
                data-ouia-component-id="OUIA-Generated-Button-plain-9"
                data-ouia-component-type="PF4/Button"
                data-ouia-safe={true}
                disabled={true}
                onClick={[Function]}
                tabIndex={null}
                type="button"
              >
                <svg
                  aria-hidden={true}
                  aria-labelledby={null}
                  fill="currentColor"
                  height="1em"
                  role="img"
                  style={
                    Object {
                      "verticalAlign": "-0.125em",
                    }
                  }
                  viewBox="0 0 448 512"
                  width="1em"
                >
                  <path
                    d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
                  />
                </svg>
              </button>
            </div>
            <div
              className="pf-c-pagination__nav-control"
            >
              <button
                aria-disabled={true}
                aria-label="Go to previous page"
                className="pf-c-button pf-m-plain pf-m-disabled"
                data-action="previous"
                data-ouia-component-id="OUIA-Generated-Button-plain-10"
                data-ouia-component-type="PF4/Button"
                data-ouia-safe={true}
                disabled={true}
                onClick={[Function]}
                tabIndex={null}
                type="button"
              >
                <svg
                  aria-hidden={true}
                  aria-labelledby={null}
                  fill="currentColor"
                  height="1em"
                  role="img"
                  style={
                    Object {
                      "verticalAlign": "-0.125em",
                    }
                  }
                  viewBox="0 0 256 512"
                  width="1em"
                >
                  <path
                    d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
                  />
                </svg>
              </button>
            </div>
            <div
              className="pf-c-pagination__nav-page-select"
            >
              <input
                aria-label="Current page"
                className="pf-c-form-control"
                disabled={true}
                max={0}
                min={1}
                onChange={[Function]}
                onKeyDown={[Function]}
                type="number"
                value={0}
              />
              <span
                aria-hidden="true"
              >
                of 
                0
              </span>
            </div>
            <div
              className="pf-c-pagination__nav-control"
            >
              <button
                aria-disabled={true}
                aria-label="Go to next page"
                className="pf-c-button pf-m-plain pf-m-disabled"
                data-action="next"
                data-ouia-component-id="OUIA-Generated-Button-plain-11"
                data-ouia-component-type="PF4/Button"
                data-ouia-safe={true}
                disabled={true}
                onClick={[Function]}
                tabIndex={null}
                type="button"
              >
                <svg
                  aria-hidden={true}
                  aria-labelledby={null}
                  fill="currentColor"
                  height="1em"
                  role="img"
                  style={
                    Object {
                      "verticalAlign": "-0.125em",
                    }
                  }
                  viewBox="0 0 256 512"
                  width="1em"
                >
                  <path
                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                  />
                </svg>
              </button>
            </div>
            <div
              className="pf-c-pagination__nav-control pf-m-last"
            >
              <button
                aria-disabled={true}
                aria-label="Go to last page"
                className="pf-c-button pf-m-plain pf-m-disabled"
                data-action="last"
                data-ouia-component-id="OUIA-Generated-Button-plain-12"
                data-ouia-component-type="PF4/Button"
                data-ouia-safe={true}
                disabled={true}
                onClick={[Function]}
                tabIndex={null}
                type="button"
              >
                <svg
                  aria-hidden={true}
                  aria-labelledby={null}
                  fill="currentColor"
                  height="1em"
                  role="img"
                  style={
                    Object {
                      "verticalAlign": "-0.125em",
                    }
                  }
                  viewBox="0 0 448 512"
                  width="1em"
                >
                  <path
                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
                  />
                </svg>
              </button>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`PolicyTemplateDetailsView component renders as expected -- relatedObjects field is [] 1`] = `
<div
  className="policy-template-details-view"
>
  <div
    className="details"
  >
    <div
      className="overview"
    >
      <h2
        className="pf-c-title pf-m-xl title"
      >
        Template details
      </h2>
      <dl
        className="pf-c-description-list"
      >
        <div
          className="pf-c-description-list__group"
        >
          <dt
            className="pf-c-description-list__term"
          >
            <span
              className="pf-c-description-list__text"
            >
              Name
            </span>
          </dt>
          <dd
            className="pf-c-description-list__description"
          >
            <div
              className="pf-c-description-list__text"
            >
              policy-gatekeeper-admission
            </div>
          </dd>
        </div>
        <div
          className="pf-c-description-list__group"
        >
          <dt
            className="pf-c-description-list__term"
          >
            <span
              className="pf-c-description-list__text"
            >
              Cluster
            </span>
          </dt>
          <dd
            className="pf-c-description-list__description"
          >
            <div
              className="pf-c-description-list__text"
            >
              calamari
            </div>
          </dd>
        </div>
        <div
          className="pf-c-description-list__group"
        >
          <dt
            className="pf-c-description-list__term"
          >
            <span
              className="pf-c-description-list__text"
            >
              Kind
            </span>
          </dt>
          <dd
            className="pf-c-description-list__description"
          >
            <div
              className="pf-c-description-list__text"
            >
              ConfigurationPolicy
            </div>
          </dd>
        </div>
        <div
          className="pf-c-description-list__group"
        >
          <dt
            className="pf-c-description-list__term"
          >
            <span
              className="pf-c-description-list__text"
            >
              API groups
            </span>
          </dt>
          <dd
            className="pf-c-description-list__description"
          >
            <div
              className="pf-c-description-list__text"
            >
              policy.open-cluster-management.io/v1
            </div>
          </dd>
        </div>
        <div
          className="pf-c-description-list__group"
        >
          <dt
            className="pf-c-description-list__term"
          >
            <span
              className="pf-c-description-list__text"
            >
              Compliant
            </span>
          </dt>
          <dd
            className="pf-c-description-list__description"
          >
            <div
              className="pf-c-description-list__text"
            >
              NonCompliant
            </div>
          </dd>
        </div>
        <div
          className="pf-c-description-list__group"
        >
          <dt
            className="pf-c-description-list__term"
          >
            <span
              className="pf-c-description-list__text"
            >
              Details
            </span>
          </dt>
          <dd
            className="pf-c-description-list__description"
          >
            <div
              className="pf-c-description-list__text"
            >
              [{"Compliant":"NonCompliant","Validity":{},"conditions":[{"lastTransitionTime":"2020-08-21T17:01:43Z","message":"events exist and should be deleted: [openshift-multus.162c73ad488032d5, openshift-multus.162c749621995399, openshift-multus.162c757efd7ebb62] in namespace gatekeeper-system","reason":"K8s has a must \`not\` have object","status":"True","type":"violation"}]}]
            </div>
          </dd>
        </div>
      </dl>
    </div>
    <div
      className="yaml"
    >
      <h2
        className="pf-c-title pf-m-xl title"
      >
        Template yaml
      </h2>
      <div>
        <div
          className="yamlEditorContainer"
        >
          <div
            className="react-monaco-editor-container"
            style={
              Object {
                "height": "500px",
                "width": "100%",
              }
            }
          />
        </div>
      </div>
    </div>
  </div>
  <div
    className="table"
  >
    <h2
      className="pf-c-title pf-m-xl title"
    >
      Related resources
    </h2>
    <div
      className="pattern-fly-table-group"
    >
      <div
        className="pf-c-search-input"
      >
        <span
          className="pf-c-search-input__text"
        >
          <span
            className="pf-c-search-input__icon"
          >
            <svg
              aria-hidden={true}
              aria-labelledby={null}
              fill="currentColor"
              height="1em"
              role="img"
              style={
                Object {
                  "verticalAlign": "-0.125em",
                }
              }
              viewBox="0 0 512 512"
              width="1em"
            >
              <path
                d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
              />
            </svg>
          </span>
          <input
            aria-label="Search input"
            className="pf-c-search-input__text-input"
            onChange={[Function]}
            placeholder="Find"
            value=""
          />
        </span>
        
      </div>
      <div
        className="pattern-fly-table"
      >
        <table
          aria-label="Sortable Table"
          className="pf-c-table pf-m-grid-md"
          data-ouia-component-id="OUIA-Generated-Table-2"
          data-ouia-component-type="PF4/Table"
          data-ouia-safe={true}
          role="grid"
        >
          <thead
            className="pattern-fly-table-header"
          >
            <tr>
              <th
                aria-sort="ascending"
                className="pf-c-table__sort pf-m-selected pf-m-wrap"
                data-key={0}
                data-label="Name"
                onMouseEnter={[Function]}
                scope="col"
              >
                <button
                  className="pf-c-table__button"
                  onClick={[Function]}
                  type="button"
                >
                  <div
                    className="pf-c-table__button-content"
                  >
                    <span
                      className="pf-c-table__text"
                      onMouseEnter={[Function]}
                    >
                      Name
                    </span>
                    <span
                      className="pf-c-table__sort-indicator"
                    >
                      <svg
                        aria-hidden={true}
                        aria-labelledby={null}
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style={
                          Object {
                            "verticalAlign": "-0.125em",
                          }
                        }
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z"
                        />
                      </svg>
                    </span>
                  </div>
                </button>
              </th>
              <th
                aria-sort="none"
                className="pf-c-table__sort pf-m-wrap"
                data-key={1}
                data-label="Namespace"
                onMouseEnter={[Function]}
                scope="col"
              >
                <button
                  className="pf-c-table__button"
                  onClick={[Function]}
                  type="button"
                >
                  <div
                    className="pf-c-table__button-content"
                  >
                    <span
                      className="pf-c-table__text"
                      onMouseEnter={[Function]}
                    >
                      Namespace
                    </span>
                    <span
                      className="pf-c-table__sort-indicator"
                    >
                      <svg
                        aria-hidden={true}
                        aria-labelledby={null}
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style={
                          Object {
                            "verticalAlign": "-0.125em",
                          }
                        }
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
                        />
                      </svg>
                    </span>
                  </div>
                </button>
              </th>
              <th
                aria-sort="none"
                className="pf-c-table__sort pf-m-wrap"
                data-key={2}
                data-label="Kind"
                onMouseEnter={[Function]}
                scope="col"
              >
                <button
                  className="pf-c-table__button"
                  onClick={[Function]}
                  type="button"
                >
                  <div
                    className="pf-c-table__button-content"
                  >
                    <span
                      className="pf-c-table__text"
                      onMouseEnter={[Function]}
                    >
                      Kind
                    </span>
                    <span
                      className="pf-c-table__sort-indicator"
                    >
                      <svg
                        aria-hidden={true}
                        aria-labelledby={null}
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style={
                          Object {
                            "verticalAlign": "-0.125em",
                          }
                        }
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
                        />
                      </svg>
                    </span>
                  </div>
                </button>
              </th>
              <th
                aria-sort="none"
                className="pf-c-table__sort pf-m-wrap"
                data-key={3}
                data-label="API groups"
                onMouseEnter={[Function]}
                scope="col"
              >
                <button
                  className="pf-c-table__button"
                  onClick={[Function]}
                  type="button"
                >
                  <div
                    className="pf-c-table__button-content"
                  >
                    <span
                      className="pf-c-table__text"
                      onMouseEnter={[Function]}
                    >
                      API groups
                    </span>
                    <span
                      className="pf-c-table__sort-indicator"
                    >
                      <svg
                        aria-hidden={true}
                        aria-labelledby={null}
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style={
                          Object {
                            "verticalAlign": "-0.125em",
                          }
                        }
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
                        />
                      </svg>
                    </span>
                  </div>
                </button>
              </th>
              <th
                aria-sort="none"
                className="pf-c-table__sort pf-m-wrap"
                data-key={4}
                data-label="Compliant"
                onMouseEnter={[Function]}
                scope="col"
              >
                <button
                  className="pf-c-table__button"
                  onClick={[Function]}
                  type="button"
                >
                  <div
                    className="pf-c-table__button-content"
                  >
                    <span
                      className="pf-c-table__text"
                      onMouseEnter={[Function]}
                    >
                      Compliant
                    </span>
                    <span
                      className="pf-c-table__sort-indicator"
                    >
                      <svg
                        aria-hidden={true}
                        aria-labelledby={null}
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style={
                          Object {
                            "verticalAlign": "-0.125em",
                          }
                        }
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
                        />
                      </svg>
                    </span>
                  </div>
                </button>
              </th>
              <th
                aria-sort="none"
                className="pf-c-table__sort pf-m-wrap"
                data-key={5}
                data-label="Reason"
                onMouseEnter={[Function]}
                scope="col"
              >
                <button
                  className="pf-c-table__button"
                  onClick={[Function]}
                  type="button"
                >
                  <div
                    className="pf-c-table__button-content"
                  >
                    <span
                      className="pf-c-table__text"
                      onMouseEnter={[Function]}
                    >
                      Reason
                    </span>
                    <span
                      className="pf-c-table__sort-indicator"
                    >
                      <svg
                        aria-hidden={true}
                        aria-labelledby={null}
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style={
                          Object {
                            "verticalAlign": "-0.125em",
                          }
                        }
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
                        />
                      </svg>
                    </span>
                  </div>
                </button>
              </th>
              <th
                className=""
                data-key={6}
                data-label=""
                onMouseEnter={[Function]}
              >
                
              </th>
            </tr>
          </thead>
          <tbody
            className="pattern-fly-table-body"
          />
        </table>
        <div
          className="pf-c-empty-state pf-m-sm pattern-fly-table-empty-state"
        >
          <div
            className="pf-c-empty-state__content"
          >
            <svg
              aria-hidden="true"
              aria-labelledby={null}
              className="pf-c-empty-state__icon"
              fill="currentColor"
              height="1em"
              role="img"
              style={
                Object {
                  "verticalAlign": "-0.125em",
                }
              }
              viewBox="0 0 512 512"
              width="1em"
            >
              <path
                d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
              />
            </svg>
            <h2
              className="pf-c-title pf-m-md"
            >
              No results found
            </h2>
          </div>
        </div>
        <div
          className="pf-c-pagination pf-m-bottom"
          data-ouia-component-id="OUIA-Generated-Pagination-bottom-2"
          data-ouia-component-type="PF4/Pagination"
          data-ouia-safe={true}
          id="pagination-options-menu-bottom-1"
        >
          <div
            className="pf-c-options-menu pf-m-top"
            data-ouia-component-type="PF4/PaginationOptionsMenu"
            data-ouia-safe={true}
          >
            <div
              className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
            >
              <span
                className="pf-c-options-menu__toggle-text"
              >
                <b>
                  0
                   - 
                  0
                </b>
                 
                of 
                <b>
                  0
                </b>
                 
                
              </span>
              <button
                aria-expanded={false}
                aria-label="Items per page"
                className="  pf-c-options-menu__toggle-button"
                disabled={true}
                id="pagination-options-menu-bottom-toggle-1"
                onClick={[Function]}
                onKeyDown={[Function]}
                type="button"
              >
                <span
                  className="pf-c-options-menu__toggle-button-icon"
                >
                  <svg
                    aria-hidden={true}
                    aria-labelledby={null}
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style={
                      Object {
                        "verticalAlign": "-0.125em",
                      }
                    }
                    viewBox="0 0 320 512"
                    width="1em"
                  >
                    <path
                      d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
          <nav
            aria-label="Pagination"
            className="pf-c-pagination__nav"
          >
            <div
              className="pf-c-pagination__nav-control pf-m-first"
            >
              <button
                aria-disabled={true}
                aria-label="Go to first page"
                className="pf-c-button pf-m-plain pf-m-disabled"
                data-action="first"
                data-ouia-component-id="OUIA-Generated-Button-plain-5"
                data-ouia-component-type="PF4/Button"
                data-ouia-safe={true}
                disabled={true}
                onClick={[Function]}
                tabIndex={null}
                type="button"
              >
                <svg
                  aria-hidden={true}
                  aria-labelledby={null}
                  fill="currentColor"
                  height="1em"
                  role="img"
                  style={
                    Object {
                      "verticalAlign": "-0.125em",
                    }
                  }
                  viewBox="0 0 448 512"
                  width="1em"
                >
                  <path
                    d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
                  />
                </svg>
              </button>
            </div>
            <div
              className="pf-c-pagination__nav-control"
            >
              <button
                aria-disabled={true}
                aria-label="Go to previous page"
                className="pf-c-button pf-m-plain pf-m-disabled"
                data-action="previous"
                data-ouia-component-id="OUIA-Generated-Button-plain-6"
                data-ouia-component-type="PF4/Button"
                data-ouia-safe={true}
                disabled={true}
                onClick={[Function]}
                tabIndex={null}
                type="button"
              >
                <svg
                  aria-hidden={true}
                  aria-labelledby={null}
                  fill="currentColor"
                  height="1em"
                  role="img"
                  style={
                    Object {
                      "verticalAlign": "-0.125em",
                    }
                  }
                  viewBox="0 0 256 512"
                  width="1em"
                >
                  <path
                    d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
                  />
                </svg>
              </button>
            </div>
            <div
              className="pf-c-pagination__nav-page-select"
            >
              <input
                aria-label="Current page"
                className="pf-c-form-control"
                disabled={true}
                max={0}
                min={1}
                onChange={[Function]}
                onKeyDown={[Function]}
                type="number"
                value={0}
              />
              <span
                aria-hidden="true"
              >
                of 
                0
              </span>
            </div>
            <div
              className="pf-c-pagination__nav-control"
            >
              <button
                aria-disabled={true}
                aria-label="Go to next page"
                className="pf-c-button pf-m-plain pf-m-disabled"
                data-action="next"
                data-ouia-component-id="OUIA-Generated-Button-plain-7"
                data-ouia-component-type="PF4/Button"
                data-ouia-safe={true}
                disabled={true}
                onClick={[Function]}
                tabIndex={null}
                type="button"
              >
                <svg
                  aria-hidden={true}
                  aria-labelledby={null}
                  fill="currentColor"
                  height="1em"
                  role="img"
                  style={
                    Object {
                      "verticalAlign": "-0.125em",
                    }
                  }
                  viewBox="0 0 256 512"
                  width="1em"
                >
                  <path
                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                  />
                </svg>
              </button>
            </div>
            <div
              className="pf-c-pagination__nav-control pf-m-last"
            >
              <button
                aria-disabled={true}
                aria-label="Go to last page"
                className="pf-c-button pf-m-plain pf-m-disabled"
                data-action="last"
                data-ouia-component-id="OUIA-Generated-Button-plain-8"
                data-ouia-component-type="PF4/Button"
                data-ouia-safe={true}
                disabled={true}
                onClick={[Function]}
                tabIndex={null}
                type="button"
              >
                <svg
                  aria-hidden={true}
                  aria-labelledby={null}
                  fill="currentColor"
                  height="1em"
                  role="img"
                  style={
                    Object {
                      "verticalAlign": "-0.125em",
                    }
                  }
                  viewBox="0 0 448 512"
                  width="1em"
                >
                  <path
                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
                  />
                </svg>
              </button>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`PolicyTemplateDetailsView component renders as expected 1`] = `
<div
  className="policy-template-details-view"
>
  <div
    className="details"
  >
    <div
      className="overview"
    >
      <h2
        className="pf-c-title pf-m-xl title"
      >
        Template details
      </h2>
      <dl
        className="pf-c-description-list"
      >
        <div
          className="pf-c-description-list__group"
        >
          <dt
            className="pf-c-description-list__term"
          >
            <span
              className="pf-c-description-list__text"
            >
              Name
            </span>
          </dt>
          <dd
            className="pf-c-description-list__description"
          >
            <div
              className="pf-c-description-list__text"
            >
              policy-gatekeeper-admission
            </div>
          </dd>
        </div>
        <div
          className="pf-c-description-list__group"
        >
          <dt
            className="pf-c-description-list__term"
          >
            <span
              className="pf-c-description-list__text"
            >
              Cluster
            </span>
          </dt>
          <dd
            className="pf-c-description-list__description"
          >
            <div
              className="pf-c-description-list__text"
            >
              calamari
            </div>
          </dd>
        </div>
        <div
          className="pf-c-description-list__group"
        >
          <dt
            className="pf-c-description-list__term"
          >
            <span
              className="pf-c-description-list__text"
            >
              Kind
            </span>
          </dt>
          <dd
            className="pf-c-description-list__description"
          >
            <div
              className="pf-c-description-list__text"
            >
              ConfigurationPolicy
            </div>
          </dd>
        </div>
        <div
          className="pf-c-description-list__group"
        >
          <dt
            className="pf-c-description-list__term"
          >
            <span
              className="pf-c-description-list__text"
            >
              API groups
            </span>
          </dt>
          <dd
            className="pf-c-description-list__description"
          >
            <div
              className="pf-c-description-list__text"
            >
              policy.open-cluster-management.io/v1
            </div>
          </dd>
        </div>
        <div
          className="pf-c-description-list__group"
        >
          <dt
            className="pf-c-description-list__term"
          >
            <span
              className="pf-c-description-list__text"
            >
              Compliant
            </span>
          </dt>
          <dd
            className="pf-c-description-list__description"
          >
            <div
              className="pf-c-description-list__text"
            >
              NonCompliant
            </div>
          </dd>
        </div>
        <div
          className="pf-c-description-list__group"
        >
          <dt
            className="pf-c-description-list__term"
          >
            <span
              className="pf-c-description-list__text"
            >
              Details
            </span>
          </dt>
          <dd
            className="pf-c-description-list__description"
          >
            <div
              className="pf-c-description-list__text"
            >
              [{"Compliant":"NonCompliant","Validity":{},"conditions":[{"lastTransitionTime":"2020-08-21T17:01:43Z","message":"events exist and should be deleted: [openshift-multus.162c73ad488032d5, openshift-multus.162c749621995399, openshift-multus.162c757efd7ebb62] in namespace gatekeeper-system","reason":"K8s has a must \`not\` have object","status":"True","type":"violation"}]}]
            </div>
          </dd>
        </div>
      </dl>
    </div>
    <div
      className="yaml"
    >
      <h2
        className="pf-c-title pf-m-xl title"
      >
        Template yaml
      </h2>
      <div>
        <div
          className="yamlEditorContainer"
        >
          <div
            className="react-monaco-editor-container"
            style={
              Object {
                "height": "500px",
                "width": "100%",
              }
            }
          />
        </div>
      </div>
    </div>
  </div>
  <div
    className="table"
  >
    <h2
      className="pf-c-title pf-m-xl title"
    >
      Related resources
    </h2>
    <div
      className="pattern-fly-table-group"
    >
      <div
        className="pf-c-search-input"
      >
        <span
          className="pf-c-search-input__text"
        >
          <span
            className="pf-c-search-input__icon"
          >
            <svg
              aria-hidden={true}
              aria-labelledby={null}
              fill="currentColor"
              height="1em"
              role="img"
              style={
                Object {
                  "verticalAlign": "-0.125em",
                }
              }
              viewBox="0 0 512 512"
              width="1em"
            >
              <path
                d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
              />
            </svg>
          </span>
          <input
            aria-label="Search input"
            className="pf-c-search-input__text-input"
            onChange={[Function]}
            placeholder="Find"
            value=""
          />
        </span>
        
      </div>
      <div
        className="pattern-fly-table"
      >
        <table
          aria-label="Sortable Table"
          className="pf-c-table pf-m-grid-md"
          data-ouia-component-id="OUIA-Generated-Table-1"
          data-ouia-component-type="PF4/Table"
          data-ouia-safe={true}
          role="grid"
        >
          <thead
            className="pattern-fly-table-header"
          >
            <tr>
              <th
                aria-sort="ascending"
                className="pf-c-table__sort pf-m-selected pf-m-wrap"
                data-key={0}
                data-label="Name"
                onMouseEnter={[Function]}
                scope="col"
              >
                <button
                  className="pf-c-table__button"
                  onClick={[Function]}
                  type="button"
                >
                  <div
                    className="pf-c-table__button-content"
                  >
                    <span
                      className="pf-c-table__text"
                      onMouseEnter={[Function]}
                    >
                      Name
                    </span>
                    <span
                      className="pf-c-table__sort-indicator"
                    >
                      <svg
                        aria-hidden={true}
                        aria-labelledby={null}
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style={
                          Object {
                            "verticalAlign": "-0.125em",
                          }
                        }
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z"
                        />
                      </svg>
                    </span>
                  </div>
                </button>
              </th>
              <th
                aria-sort="none"
                className="pf-c-table__sort pf-m-wrap"
                data-key={1}
                data-label="Namespace"
                onMouseEnter={[Function]}
                scope="col"
              >
                <button
                  className="pf-c-table__button"
                  onClick={[Function]}
                  type="button"
                >
                  <div
                    className="pf-c-table__button-content"
                  >
                    <span
                      className="pf-c-table__text"
                      onMouseEnter={[Function]}
                    >
                      Namespace
                    </span>
                    <span
                      className="pf-c-table__sort-indicator"
                    >
                      <svg
                        aria-hidden={true}
                        aria-labelledby={null}
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style={
                          Object {
                            "verticalAlign": "-0.125em",
                          }
                        }
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
                        />
                      </svg>
                    </span>
                  </div>
                </button>
              </th>
              <th
                aria-sort="none"
                className="pf-c-table__sort pf-m-wrap"
                data-key={2}
                data-label="Kind"
                onMouseEnter={[Function]}
                scope="col"
              >
                <button
                  className="pf-c-table__button"
                  onClick={[Function]}
                  type="button"
                >
                  <div
                    className="pf-c-table__button-content"
                  >
                    <span
                      className="pf-c-table__text"
                      onMouseEnter={[Function]}
                    >
                      Kind
                    </span>
                    <span
                      className="pf-c-table__sort-indicator"
                    >
                      <svg
                        aria-hidden={true}
                        aria-labelledby={null}
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style={
                          Object {
                            "verticalAlign": "-0.125em",
                          }
                        }
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
                        />
                      </svg>
                    </span>
                  </div>
                </button>
              </th>
              <th
                aria-sort="none"
                className="pf-c-table__sort pf-m-wrap"
                data-key={3}
                data-label="API groups"
                onMouseEnter={[Function]}
                scope="col"
              >
                <button
                  className="pf-c-table__button"
                  onClick={[Function]}
                  type="button"
                >
                  <div
                    className="pf-c-table__button-content"
                  >
                    <span
                      className="pf-c-table__text"
                      onMouseEnter={[Function]}
                    >
                      API groups
                    </span>
                    <span
                      className="pf-c-table__sort-indicator"
                    >
                      <svg
                        aria-hidden={true}
                        aria-labelledby={null}
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style={
                          Object {
                            "verticalAlign": "-0.125em",
                          }
                        }
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
                        />
                      </svg>
                    </span>
                  </div>
                </button>
              </th>
              <th
                aria-sort="none"
                className="pf-c-table__sort pf-m-wrap"
                data-key={4}
                data-label="Compliant"
                onMouseEnter={[Function]}
                scope="col"
              >
                <button
                  className="pf-c-table__button"
                  onClick={[Function]}
                  type="button"
                >
                  <div
                    className="pf-c-table__button-content"
                  >
                    <span
                      className="pf-c-table__text"
                      onMouseEnter={[Function]}
                    >
                      Compliant
                    </span>
                    <span
                      className="pf-c-table__sort-indicator"
                    >
                      <svg
                        aria-hidden={true}
                        aria-labelledby={null}
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style={
                          Object {
                            "verticalAlign": "-0.125em",
                          }
                        }
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
                        />
                      </svg>
                    </span>
                  </div>
                </button>
              </th>
              <th
                aria-sort="none"
                className="pf-c-table__sort pf-m-wrap"
                data-key={5}
                data-label="Reason"
                onMouseEnter={[Function]}
                scope="col"
              >
                <button
                  className="pf-c-table__button"
                  onClick={[Function]}
                  type="button"
                >
                  <div
                    className="pf-c-table__button-content"
                  >
                    <span
                      className="pf-c-table__text"
                      onMouseEnter={[Function]}
                    >
                      Reason
                    </span>
                    <span
                      className="pf-c-table__sort-indicator"
                    >
                      <svg
                        aria-hidden={true}
                        aria-labelledby={null}
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style={
                          Object {
                            "verticalAlign": "-0.125em",
                          }
                        }
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
                        />
                      </svg>
                    </span>
                  </div>
                </button>
              </th>
              <th
                className=""
                data-key={6}
                data-label=""
                onMouseEnter={[Function]}
              >
                
              </th>
            </tr>
          </thead>
          <tbody
            className="pattern-fly-table-body"
          >
            <tr
              className=""
              data-ouia-component-id="OUIA-Generated-TableRow-1"
              data-ouia-component-type="PF4/TableRow"
              data-ouia-safe={true}
              hidden={false}
              onMouseDown={[Function]}
            >
              <td
                className="pf-m-break-word"
                data-key={0}
                data-label="Name"
                onMouseEnter={[Function]}
              >
                openshift-multus.162c73ad488032d5
              </td>
              <td
                className=""
                data-key={1}
                data-label="Namespace"
                onMouseEnter={[Function]}
              >
                gatekeeper-system
              </td>
              <td
                className=""
                data-key={2}
                data-label="Kind"
                onMouseEnter={[Function]}
              >
                events
              </td>
              <td
                className="pf-m-break-word"
                data-key={3}
                data-label="API groups"
                onMouseEnter={[Function]}
              >
                /v1
              </td>
              <td
                className=""
                data-key={4}
                data-label="Compliant"
                onMouseEnter={[Function]}
              >
                <div>
                  <svg
                    aria-hidden={true}
                    aria-labelledby={null}
                    fill="#c9190b"
                    height="1em"
                    role="img"
                    style={
                      Object {
                        "verticalAlign": "-0.125em",
                      }
                    }
                    viewBox="0 0 512 512"
                    width="1em"
                  >
                    <path
                      d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
                    />
                  </svg>
                   
                  Not compliant
                </div>
              </td>
              <td
                className=""
                data-key={5}
                data-label="Reason"
                onMouseEnter={[Function]}
              >
                Resource found but not expected
              </td>
              <td
                className=""
                data-key={6}
                onMouseEnter={[Function]}
              >
                <a
                  href="/multicloud/details/calamari/api/v1/namespaces/gatekeeper-system/events/openshift-multus.162c73ad488032d5"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  View yaml
                </a>
              </td>
            </tr>
            <tr
              className=""
              data-ouia-component-id="OUIA-Generated-TableRow-2"
              data-ouia-component-type="PF4/TableRow"
              data-ouia-safe={true}
              hidden={false}
              onMouseDown={[Function]}
            >
              <td
                className="pf-m-break-word"
                data-key={0}
                data-label="Name"
                onMouseEnter={[Function]}
              >
                openshift-multus.162c749621995399
              </td>
              <td
                className=""
                data-key={1}
                data-label="Namespace"
                onMouseEnter={[Function]}
              >
                gatekeeper-system
              </td>
              <td
                className=""
                data-key={2}
                data-label="Kind"
                onMouseEnter={[Function]}
              >
                events
              </td>
              <td
                className="pf-m-break-word"
                data-key={3}
                data-label="API groups"
                onMouseEnter={[Function]}
              >
                /v1
              </td>
              <td
                className=""
                data-key={4}
                data-label="Compliant"
                onMouseEnter={[Function]}
              >
                <div>
                  <svg
                    aria-hidden={true}
                    aria-labelledby={null}
                    fill="#c9190b"
                    height="1em"
                    role="img"
                    style={
                      Object {
                        "verticalAlign": "-0.125em",
                      }
                    }
                    viewBox="0 0 512 512"
                    width="1em"
                  >
                    <path
                      d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
                    />
                  </svg>
                   
                  Not compliant
                </div>
              </td>
              <td
                className=""
                data-key={5}
                data-label="Reason"
                onMouseEnter={[Function]}
              >
                Resource found but not expected
              </td>
              <td
                className=""
                data-key={6}
                onMouseEnter={[Function]}
              >
                <a
                  href="/multicloud/details/calamari/api/v1/namespaces/gatekeeper-system/events/openshift-multus.162c749621995399"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  View yaml
                </a>
              </td>
            </tr>
            <tr
              className=""
              data-ouia-component-id="OUIA-Generated-TableRow-3"
              data-ouia-component-type="PF4/TableRow"
              data-ouia-safe={true}
              hidden={false}
              onMouseDown={[Function]}
            >
              <td
                className="pf-m-break-word"
                data-key={0}
                data-label="Name"
                onMouseEnter={[Function]}
              >
                openshift-multus.162c757efd7ebb62
              </td>
              <td
                className=""
                data-key={1}
                data-label="Namespace"
                onMouseEnter={[Function]}
              >
                gatekeeper-system
              </td>
              <td
                className=""
                data-key={2}
                data-label="Kind"
                onMouseEnter={[Function]}
              >
                events
              </td>
              <td
                className="pf-m-break-word"
                data-key={3}
                data-label="API groups"
                onMouseEnter={[Function]}
              >
                /v1
              </td>
              <td
                className=""
                data-key={4}
                data-label="Compliant"
                onMouseEnter={[Function]}
              >
                <div>
                  <svg
                    aria-hidden={true}
                    aria-labelledby={null}
                    fill="#c9190b"
                    height="1em"
                    role="img"
                    style={
                      Object {
                        "verticalAlign": "-0.125em",
                      }
                    }
                    viewBox="0 0 512 512"
                    width="1em"
                  >
                    <path
                      d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
                    />
                  </svg>
                   
                  Not compliant
                </div>
              </td>
              <td
                className=""
                data-key={5}
                data-label="Reason"
                onMouseEnter={[Function]}
              >
                Resource found but not expected
              </td>
              <td
                className=""
                data-key={6}
                onMouseEnter={[Function]}
              >
                <a
                  href="/multicloud/details/calamari/api/v1/namespaces/gatekeeper-system/events/openshift-multus.162c757efd7ebb62"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  View yaml
                </a>
              </td>
            </tr>
            <tr
              className=""
              data-ouia-component-id="OUIA-Generated-TableRow-4"
              data-ouia-component-type="PF4/TableRow"
              data-ouia-safe={true}
              hidden={false}
              onMouseDown={[Function]}
            >
              <td
                className="pf-m-break-word"
                data-key={0}
                data-label="Name"
                onMouseEnter={[Function]}
              >
                openshift-multus.162c757efd7ebb62
              </td>
              <td
                className=""
                data-key={1}
                data-label="Namespace"
                onMouseEnter={[Function]}
              >
                gatekeeper-system
              </td>
              <td
                className=""
                data-key={2}
                data-label="Kind"
                onMouseEnter={[Function]}
              >
                events
              </td>
              <td
                className="pf-m-break-word"
                data-key={3}
                data-label="API groups"
                onMouseEnter={[Function]}
              >
                /v1
              </td>
              <td
                className=""
                data-key={4}
                data-label="Compliant"
                onMouseEnter={[Function]}
              >
                <div>
                  <svg
                    aria-hidden={true}
                    aria-labelledby={null}
                    fill="#467f40"
                    height="1em"
                    role="img"
                    style={
                      Object {
                        "verticalAlign": "-0.125em",
                      }
                    }
                    viewBox="0 0 512 512"
                    width="1em"
                  >
                    <path
                      d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
                    />
                  </svg>
                   
                  Compliant
                </div>
              </td>
              <td
                className=""
                data-key={5}
                data-label="Reason"
                onMouseEnter={[Function]}
              >
                Resource found and expected
              </td>
              <td
                className=""
                data-key={6}
                onMouseEnter={[Function]}
              >
                <a
                  href="/multicloud/details/calamari/api/v1/namespaces/gatekeeper-system/events/openshift-multus.162c757efd7ebb62"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  View yaml
                </a>
              </td>
            </tr>
            <tr
              className=""
              data-ouia-component-id="OUIA-Generated-TableRow-5"
              data-ouia-component-type="PF4/TableRow"
              data-ouia-safe={true}
              hidden={false}
              onMouseDown={[Function]}
            >
              <td
                className="pf-m-break-word"
                data-key={0}
                data-label="Name"
                onMouseEnter={[Function]}
              >
                openshift-multus.162c757efd7ebb62
              </td>
              <td
                className=""
                data-key={1}
                data-label="Namespace"
                onMouseEnter={[Function]}
              >
                gatekeeper-system
              </td>
              <td
                className=""
                data-key={2}
                data-label="Kind"
                onMouseEnter={[Function]}
              >
                events
              </td>
              <td
                className="pf-m-break-word"
                data-key={3}
                data-label="API groups"
                onMouseEnter={[Function]}
              >
                /v1
              </td>
              <td
                className=""
                data-key={4}
                data-label="Compliant"
                onMouseEnter={[Function]}
              >
                <div>
                  <svg
                    aria-hidden={true}
                    aria-labelledby={null}
                    fill="#f0ab00"
                    height="1em"
                    role="img"
                    style={
                      Object {
                        "verticalAlign": "-0.125em",
                      }
                    }
                    viewBox="0 0 576 512"
                    width="1em"
                  >
                    <path
                      d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
                    />
                  </svg>
                   
                  No status
                </div>
              </td>
              <td
                className=""
                data-key={5}
                data-label="Reason"
                onMouseEnter={[Function]}
              >
                No status
              </td>
              <td
                className=""
                data-key={6}
                onMouseEnter={[Function]}
              >
                <a
                  href="/multicloud/details/calamari/api/v1/namespaces/gatekeeper-system/events/openshift-multus.162c757efd7ebb62"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  View yaml
                </a>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          className="pf-c-pagination pf-m-bottom"
          data-ouia-component-id="OUIA-Generated-Pagination-bottom-1"
          data-ouia-component-type="PF4/Pagination"
          data-ouia-safe={true}
          id="pagination-options-menu-bottom-0"
        >
          <div
            className="pf-c-options-menu pf-m-top"
            data-ouia-component-type="PF4/PaginationOptionsMenu"
            data-ouia-safe={true}
          >
            <div
              className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
            >
              <span
                className="pf-c-options-menu__toggle-text"
              >
                <b>
                  1
                   - 
                  5
                </b>
                 
                of 
                <b>
                  5
                </b>
                 
                
              </span>
              <button
                aria-expanded={false}
                aria-label="Items per page"
                className="  pf-c-options-menu__toggle-button"
                disabled={false}
                id="pagination-options-menu-bottom-toggle-0"
                onClick={[Function]}
                onKeyDown={[Function]}
                type="button"
              >
                <span
                  className="pf-c-options-menu__toggle-button-icon"
                >
                  <svg
                    aria-hidden={true}
                    aria-labelledby={null}
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style={
                      Object {
                        "verticalAlign": "-0.125em",
                      }
                    }
                    viewBox="0 0 320 512"
                    width="1em"
                  >
                    <path
                      d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
          <nav
            aria-label="Pagination"
            className="pf-c-pagination__nav"
          >
            <div
              className="pf-c-pagination__nav-control pf-m-first"
            >
              <button
                aria-disabled={true}
                aria-label="Go to first page"
                className="pf-c-button pf-m-plain pf-m-disabled"
                data-action="first"
                data-ouia-component-id="OUIA-Generated-Button-plain-1"
                data-ouia-component-type="PF4/Button"
                data-ouia-safe={true}
                disabled={true}
                onClick={[Function]}
                tabIndex={null}
                type="button"
              >
                <svg
                  aria-hidden={true}
                  aria-labelledby={null}
                  fill="currentColor"
                  height="1em"
                  role="img"
                  style={
                    Object {
                      "verticalAlign": "-0.125em",
                    }
                  }
                  viewBox="0 0 448 512"
                  width="1em"
                >
                  <path
                    d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
                  />
                </svg>
              </button>
            </div>
            <div
              className="pf-c-pagination__nav-control"
            >
              <button
                aria-disabled={true}
                aria-label="Go to previous page"
                className="pf-c-button pf-m-plain pf-m-disabled"
                data-action="previous"
                data-ouia-component-id="OUIA-Generated-Button-plain-2"
                data-ouia-component-type="PF4/Button"
                data-ouia-safe={true}
                disabled={true}
                onClick={[Function]}
                tabIndex={null}
                type="button"
              >
                <svg
                  aria-hidden={true}
                  aria-labelledby={null}
                  fill="currentColor"
                  height="1em"
                  role="img"
                  style={
                    Object {
                      "verticalAlign": "-0.125em",
                    }
                  }
                  viewBox="0 0 256 512"
                  width="1em"
                >
                  <path
                    d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
                  />
                </svg>
              </button>
            </div>
            <div
              className="pf-c-pagination__nav-page-select"
            >
              <input
                aria-label="Current page"
                className="pf-c-form-control"
                disabled={true}
                max={1}
                min={1}
                onChange={[Function]}
                onKeyDown={[Function]}
                type="number"
                value={1}
              />
              <span
                aria-hidden="true"
              >
                of 
                1
              </span>
            </div>
            <div
              className="pf-c-pagination__nav-control"
            >
              <button
                aria-disabled={true}
                aria-label="Go to next page"
                className="pf-c-button pf-m-plain pf-m-disabled"
                data-action="next"
                data-ouia-component-id="OUIA-Generated-Button-plain-3"
                data-ouia-component-type="PF4/Button"
                data-ouia-safe={true}
                disabled={true}
                onClick={[Function]}
                tabIndex={null}
                type="button"
              >
                <svg
                  aria-hidden={true}
                  aria-labelledby={null}
                  fill="currentColor"
                  height="1em"
                  role="img"
                  style={
                    Object {
                      "verticalAlign": "-0.125em",
                    }
                  }
                  viewBox="0 0 256 512"
                  width="1em"
                >
                  <path
                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                  />
                </svg>
              </button>
            </div>
            <div
              className="pf-c-pagination__nav-control pf-m-last"
            >
              <button
                aria-disabled={true}
                aria-label="Go to last page"
                className="pf-c-button pf-m-plain pf-m-disabled"
                data-action="last"
                data-ouia-component-id="OUIA-Generated-Button-plain-4"
                data-ouia-component-type="PF4/Button"
                data-ouia-safe={true}
                disabled={true}
                onClick={[Function]}
                tabIndex={null}
                type="button"
              >
                <svg
                  aria-hidden={true}
                  aria-labelledby={null}
                  fill="currentColor"
                  height="1em"
                  role="img"
                  style={
                    Object {
                      "verticalAlign": "-0.125em",
                    }
                  }
                  viewBox="0 0 448 512"
                  width="1em"
                >
                  <path
                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
                  />
                </svg>
              </button>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>
`;
