From ffade973a9cb4c1aa122c08ac2941a6e83d89f81 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Tue, 30 Apr 2019 08:19:19 -0400
Subject: [PATCH] upgrade to patternfly 2.x, pf/react-core 3.x (#184)

---
 .../NotificationListItem.test.jsx.snap        | 368 +++++----
 .../OrganizationAccessItem.test.jsx.snap      | 595 ++++++++------
 .../Organization/Organization.test.jsx        |   6 +-
 .../Organization/OrganizationAccess.test.jsx  |  14 +-
 .../OrganizationAccess.test.jsx.snap          |   1 -
 .../OrganizationNotifications.test.jsx.snap   | 736 +++++++++++-------
 package-lock.json                             | 101 +--
 package.json                                  |   8 +-
 src/app.scss                                  |  22 +-
 .../NotificationListItem.jsx                  |  96 ++-
 .../PaginatedDataList/PaginatedDataList.jsx   |  37 +-
 .../components/OrganizationAccessItem.jsx     | 151 ++--
 .../components/OrganizationListItem.jsx       |  86 +-
 13 files changed, 1317 insertions(+), 904 deletions(-)

diff --git a/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap b/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap
index 35d0b8a450..03c9844573 100644
--- a/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap
+++ b/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap
@@ -29,156 +29,246 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
         aria-labelledby="items-list-item-9000"
         className="pf-c-data-list__item"
       >
-        <DataListCell
+        <DataListItemRow
           className=""
           key=".0"
           rowid="items-list-item-9000"
-          width={1}
         >
           <div
-            className="pf-c-data-list__cell"
+            className="pf-c-data-list__item-row"
           >
-            <Link
-              replace={false}
-              style={
-                Object {
-                  "marginRight": "1.5em",
-                }
-              }
-              to={
-                Object {
-                  "pathname": "/foo",
-                }
-              }
-            >
-              <a
-                onClick={[Function]}
-                style={
-                  Object {
-                    "marginRight": "1.5em",
-                  }
-                }
-              >
-                <b
-                  id="items-list-item-9000"
-                >
-                  Foo
-                </b>
-              </a>
-            </Link>
-            <Badge
+            <DataListItemCells
               className=""
-              isRead={true}
-              style={
-                Object {
-                  "textTransform": "capitalize",
-                }
+              dataListCells={
+                Array [
+                  <DataListCell
+                    alignRight={false}
+                    className=""
+                    isFilled={true}
+                    isIcon={false}
+                    width={1}
+                  >
+                    <Link
+                      replace={false}
+                      style={
+                        Object {
+                          "marginRight": "1.5em",
+                        }
+                      }
+                      to={
+                        Object {
+                          "pathname": "/foo",
+                        }
+                      }
+                    >
+                      <b
+                        id="items-list-item-9000"
+                      >
+                        Foo
+                      </b>
+                    </Link>
+                    <Badge
+                      className=""
+                      isRead={true}
+                      style={
+                        Object {
+                          "textTransform": "capitalize",
+                        }
+                      }
+                    >
+                      slack
+                    </Badge>
+                  </DataListCell>,
+                  <DataListCell
+                    alignRight={true}
+                    className=""
+                    isFilled={true}
+                    isIcon={false}
+                    width={1}
+                  >
+                    <Switch
+                      aria-label="Toggle notification success"
+                      className=""
+                      id="notification-9000-success-toggle"
+                      isChecked={false}
+                      isDisabled={false}
+                      label="Successful"
+                      onChange={[Function]}
+                    />
+                    <Switch
+                      aria-label="Toggle notification failure"
+                      className=""
+                      id="notification-9000-error-toggle"
+                      isChecked={false}
+                      isDisabled={false}
+                      label="Failure"
+                      onChange={[Function]}
+                    />
+                  </DataListCell>,
+                ]
               }
+              key=".0"
+              rowid="items-list-item-9000"
             >
-              <span
-                className="pf-c-badge pf-m-read"
-                style={
-                  Object {
-                    "textTransform": "capitalize",
-                  }
-                }
+              <div
+                className="pf-c-data-list__item-content"
               >
-                slack
-              </span>
-            </Badge>
+                <DataListCell
+                  alignRight={false}
+                  className=""
+                  isFilled={true}
+                  isIcon={false}
+                  key="name"
+                  width={1}
+                >
+                  <div
+                    className="pf-c-data-list__cell"
+                  >
+                    <Link
+                      replace={false}
+                      style={
+                        Object {
+                          "marginRight": "1.5em",
+                        }
+                      }
+                      to={
+                        Object {
+                          "pathname": "/foo",
+                        }
+                      }
+                    >
+                      <a
+                        onClick={[Function]}
+                        style={
+                          Object {
+                            "marginRight": "1.5em",
+                          }
+                        }
+                      >
+                        <b
+                          id="items-list-item-9000"
+                        >
+                          Foo
+                        </b>
+                      </a>
+                    </Link>
+                    <Badge
+                      className=""
+                      isRead={true}
+                      style={
+                        Object {
+                          "textTransform": "capitalize",
+                        }
+                      }
+                    >
+                      <span
+                        className="pf-c-badge pf-m-read"
+                        style={
+                          Object {
+                            "textTransform": "capitalize",
+                          }
+                        }
+                      >
+                        slack
+                      </span>
+                    </Badge>
+                  </div>
+                </DataListCell>
+                <DataListCell
+                  alignRight={true}
+                  className=""
+                  isFilled={true}
+                  isIcon={false}
+                  key="toggles"
+                  width={1}
+                >
+                  <div
+                    className="pf-c-data-list__cell pf-m-align-right"
+                  >
+                    <Switch
+                      aria-label="Toggle notification success"
+                      className=""
+                      id="notification-9000-success-toggle"
+                      isChecked={false}
+                      isDisabled={false}
+                      label="Successful"
+                      onChange={[Function]}
+                    >
+                      <label
+                        className="pf-c-switch"
+                        htmlFor="notification-9000-success-toggle"
+                      >
+                        <input
+                          aria-label="Toggle notification success"
+                          checked={false}
+                          className="pf-c-switch__input"
+                          disabled={false}
+                          id="notification-9000-success-toggle"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <span
+                          className="pf-c-switch__toggle"
+                        />
+                        <span
+                          aria-hidden="true"
+                          className="pf-c-switch__label pf-m-on"
+                        >
+                          Successful
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          className="pf-c-switch__label pf-m-off"
+                        >
+                          Successful
+                        </span>
+                      </label>
+                    </Switch>
+                    <Switch
+                      aria-label="Toggle notification failure"
+                      className=""
+                      id="notification-9000-error-toggle"
+                      isChecked={false}
+                      isDisabled={false}
+                      label="Failure"
+                      onChange={[Function]}
+                    >
+                      <label
+                        className="pf-c-switch"
+                        htmlFor="notification-9000-error-toggle"
+                      >
+                        <input
+                          aria-label="Toggle notification failure"
+                          checked={false}
+                          className="pf-c-switch__input"
+                          disabled={false}
+                          id="notification-9000-error-toggle"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <span
+                          className="pf-c-switch__toggle"
+                        />
+                        <span
+                          aria-hidden="true"
+                          className="pf-c-switch__label pf-m-on"
+                        >
+                          Failure
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          className="pf-c-switch__label pf-m-off"
+                        >
+                          Failure
+                        </span>
+                      </label>
+                    </Switch>
+                  </div>
+                </DataListCell>
+              </div>
+            </DataListItemCells>
           </div>
-        </DataListCell>
-        <DataListCell
-          alignRight={true}
-          className=""
-          key=".1"
-          rowid="items-list-item-9000"
-          width={1}
-        >
-          <div
-            alignRight={true}
-            className="pf-c-data-list__cell"
-          >
-            <Switch
-              aria-label="Toggle notification success"
-              className=""
-              id="notification-9000-success-toggle"
-              isChecked={false}
-              isDisabled={false}
-              label="Successful"
-              onChange={[Function]}
-            >
-              <label
-                className="pf-c-switch"
-                htmlFor="notification-9000-success-toggle"
-              >
-                <input
-                  aria-label="Toggle notification success"
-                  checked={false}
-                  className="pf-c-switch__input"
-                  disabled={false}
-                  id="notification-9000-success-toggle"
-                  onChange={[Function]}
-                  type="checkbox"
-                />
-                <span
-                  className="pf-c-switch__toggle"
-                />
-                <span
-                  aria-hidden="true"
-                  className="pf-c-switch__label pf-m-on"
-                >
-                  Successful
-                </span>
-                <span
-                  aria-hidden="true"
-                  className="pf-c-switch__label pf-m-off"
-                >
-                  Successful
-                </span>
-              </label>
-            </Switch>
-            <Switch
-              aria-label="Toggle notification failure"
-              className=""
-              id="notification-9000-error-toggle"
-              isChecked={false}
-              isDisabled={false}
-              label="Failure"
-              onChange={[Function]}
-            >
-              <label
-                className="pf-c-switch"
-                htmlFor="notification-9000-error-toggle"
-              >
-                <input
-                  aria-label="Toggle notification failure"
-                  checked={false}
-                  className="pf-c-switch__input"
-                  disabled={false}
-                  id="notification-9000-error-toggle"
-                  onChange={[Function]}
-                  type="checkbox"
-                />
-                <span
-                  className="pf-c-switch__toggle"
-                />
-                <span
-                  aria-hidden="true"
-                  className="pf-c-switch__label pf-m-on"
-                >
-                  Failure
-                </span>
-                <span
-                  aria-hidden="true"
-                  className="pf-c-switch__label pf-m-off"
-                >
-                  Failure
-                </span>
-              </label>
-            </Switch>
-          </div>
-        </DataListCell>
+        </DataListItemRow>
       </li>
     </DataListItem>
   </I18n>
diff --git a/__tests__/pages/Organizations/components/__snapshots__/OrganizationAccessItem.test.jsx.snap b/__tests__/pages/Organizations/components/__snapshots__/OrganizationAccessItem.test.jsx.snap
index ba43a27c8e..38ae63010b 100644
--- a/__tests__/pages/Organizations/components/__snapshots__/OrganizationAccessItem.test.jsx.snap
+++ b/__tests__/pages/Organizations/components/__snapshots__/OrganizationAccessItem.test.jsx.snap
@@ -45,58 +45,82 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
         aria-labelledby="access-list-item"
         className="pf-c-data-list__item"
       >
-        <DataListCell
+        <DataListItemRow
           className=""
           key=".0"
           rowid="access-list-item"
-          width={1}
         >
           <div
-            className="pf-c-data-list__cell"
+            className="pf-c-data-list__item-row"
           >
-            <TextContent
+            <DataListItemCells
               className=""
-              style={
-                Object {
-                  "display": "grid",
-                  "gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
-                }
-              }
-            >
-              <div
-                className="pf-c-content"
-                style={
-                  Object {
-                    "display": "grid",
-                    "gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
-                  }
-                }
-              >
-                <Link
-                  replace={false}
-                  to={
-                    Object {
-                      "pathname": "/bar",
-                    }
-                  }
-                >
-                  <a
-                    onClick={[Function]}
+              dataListCells={
+                Array [
+                  <DataListCell
+                    alignRight={false}
+                    className=""
+                    isFilled={true}
+                    isIcon={false}
+                    width={1}
                   >
-                    <Text
+                    <TextContent
                       className=""
-                      component="h6"
                       style={
                         Object {
-                          "fontWeight": "700",
-                          "lineHeight": "24px",
-                          "marginRight": "20px",
+                          "display": "grid",
+                          "gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
                         }
                       }
                     >
-                      <h6
+                      <Link
+                        replace={false}
+                        to={
+                          Object {
+                            "pathname": "/bar",
+                          }
+                        }
+                      >
+                        <Text
+                          className=""
+                          component="h6"
+                          style={
+                            Object {
+                              "fontWeight": "700",
+                              "lineHeight": "24px",
+                              "marginRight": "20px",
+                            }
+                          }
+                        >
+                          jane
+                        </Text>
+                      </Link>
+                    </TextContent>
+                    <Detail
+                      customStyles={null}
+                      label="Name"
+                      url={null}
+                      value="jane brown"
+                    />
+                  </DataListCell>,
+                  <DataListCell
+                    alignRight={false}
+                    className=""
+                    isFilled={true}
+                    isIcon={false}
+                    width={1}
+                  >
+                    <ul
+                      style={
+                        Object {
+                          "display": "flex",
+                          "flexWrap": "wrap",
+                        }
+                      }
+                    >
+                      <Text
                         className=""
-                        data-pf-content={true}
+                        component="h6"
                         style={
                           Object {
                             "fontWeight": "700",
@@ -105,220 +129,309 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
                           }
                         }
                       >
-                        jane
-                      </h6>
-                    </Text>
-                  </a>
-                </Link>
-              </div>
-            </TextContent>
-            <Detail
-              customStyles={null}
-              label="Name"
-              url={null}
-              value="jane brown"
-            >
-              <TextContent
-                className=""
-                style={
-                  Object {
-                    "display": "grid",
-                    "gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
-                  }
-                }
-              >
-                <div
-                  className="pf-c-content"
-                  style={
-                    Object {
-                      "display": "grid",
-                      "gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
-                    }
-                  }
-                >
-                  <Text
-                    className=""
-                    component="h6"
-                    style={
-                      Object {
-                        "fontWeight": "700",
-                        "lineHeight": "24px",
-                        "marginRight": "20px",
-                      }
-                    }
-                  >
-                    <h6
-                      className=""
-                      data-pf-content={true}
-                      style={
-                        Object {
-                          "fontWeight": "700",
-                          "lineHeight": "24px",
-                          "marginRight": "20px",
-                        }
-                      }
-                    >
-                      Name
-                    </h6>
-                  </Text>
-                  <Text
-                    className=""
-                    component="p"
-                    style={
-                      Object {
-                        "lineHeight": "28px",
-                        "overflow": "visible",
-                      }
-                    }
-                  >
-                    <p
-                      className=""
-                      data-pf-content={true}
-                      style={
-                        Object {
-                          "lineHeight": "28px",
-                          "overflow": "visible",
-                        }
-                      }
-                    >
-                      jane brown
-                    </p>
-                  </Text>
-                </div>
-              </TextContent>
-            </Detail>
-          </div>
-        </DataListCell>
-        <DataListCell
-          className=""
-          key=".1"
-          rowid="access-list-item"
-          width={1}
-        >
-          <div
-            className="pf-c-data-list__cell"
-          >
-            <ul
-              style={
-                Object {
-                  "display": "flex",
-                  "flexWrap": "wrap",
-                }
-              }
-            >
-              <Text
-                className=""
-                component="h6"
-                style={
-                  Object {
-                    "fontWeight": "700",
-                    "lineHeight": "24px",
-                    "marginRight": "20px",
-                  }
-                }
-              >
-                <h6
-                  className=""
-                  data-pf-content={true}
-                  style={
-                    Object {
-                      "fontWeight": "700",
-                      "lineHeight": "24px",
-                      "marginRight": "20px",
-                    }
-                  }
-                >
-                  Team Roles
-                </h6>
-              </Text>
-              <Chip
-                className="awx-c-chip"
-                closeBtnAriaLabel="close"
-                isOverflowChip={false}
-                key="3"
-                onClick={[Function]}
-                tooltipPosition="top"
-              >
-                <GenerateId
-                  prefix="pf-random-id-"
-                >
-                  <li
-                    className="pf-c-chip awx-c-chip"
-                  >
-                    <span
-                      className="pf-c-chip__text"
-                      id="pf-random-id-0"
-                    >
-                      Member
-                    </span>
-                    <ChipButton
-                      aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
-                      ariaLabel="close"
-                      className=""
-                      id="remove_pf-random-id-0"
-                      onClick={[Function]}
-                    >
-                      <Button
-                        aria-label="close"
-                        aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
-                        className=""
-                        component="button"
-                        id="remove_pf-random-id-0"
-                        isActive={false}
-                        isBlock={false}
-                        isDisabled={false}
-                        isFocus={false}
-                        isHover={false}
+                        Team Roles
+                      </Text>
+                      <Chip
+                        className="awx-c-chip"
+                        closeBtnAriaLabel="close"
+                        isOverflowChip={false}
                         onClick={[Function]}
-                        type="button"
-                        variant="plain"
+                        tooltipPosition="top"
                       >
-                        <button
-                          aria-disabled={null}
-                          aria-label="close"
-                          aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
-                          className="pf-c-button pf-m-plain"
-                          disabled={false}
-                          id="remove_pf-random-id-0"
-                          onClick={[Function]}
-                          tabIndex={null}
-                          type="button"
+                        Member
+                      </Chip>
+                    </ul>
+                  </DataListCell>,
+                ]
+              }
+              key=".0"
+              rowid="access-list-item"
+            >
+              <div
+                className="pf-c-data-list__item-content"
+              >
+                <DataListCell
+                  alignRight={false}
+                  className=""
+                  isFilled={true}
+                  isIcon={false}
+                  key="name"
+                  width={1}
+                >
+                  <div
+                    className="pf-c-data-list__cell"
+                  >
+                    <TextContent
+                      className=""
+                      style={
+                        Object {
+                          "display": "grid",
+                          "gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
+                        }
+                      }
+                    >
+                      <div
+                        className="pf-c-content"
+                        style={
+                          Object {
+                            "display": "grid",
+                            "gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
+                          }
+                        }
+                      >
+                        <Link
+                          replace={false}
+                          to={
+                            Object {
+                              "pathname": "/bar",
+                            }
+                          }
                         >
-                          <TimesCircleIcon
-                            aria-hidden="true"
-                            color="currentColor"
-                            size="sm"
-                            title={null}
+                          <a
+                            onClick={[Function]}
                           >
-                            <svg
-                              aria-hidden="true"
-                              aria-labelledby={null}
-                              fill="currentColor"
-                              height="1em"
-                              role="img"
+                            <Text
+                              className=""
+                              component="h6"
                               style={
                                 Object {
-                                  "verticalAlign": "-0.125em",
+                                  "fontWeight": "700",
+                                  "lineHeight": "24px",
+                                  "marginRight": "20px",
                                 }
                               }
-                              viewBox="0 0 512 512"
-                              width="1em"
                             >
-                              <path
-                                d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
-                                transform=""
-                              />
-                            </svg>
-                          </TimesCircleIcon>
-                        </button>
-                      </Button>
-                    </ChipButton>
-                  </li>
-                </GenerateId>
-              </Chip>
-            </ul>
+                              <h6
+                                className=""
+                                data-pf-content={true}
+                                style={
+                                  Object {
+                                    "fontWeight": "700",
+                                    "lineHeight": "24px",
+                                    "marginRight": "20px",
+                                  }
+                                }
+                              >
+                                jane
+                              </h6>
+                            </Text>
+                          </a>
+                        </Link>
+                      </div>
+                    </TextContent>
+                    <Detail
+                      customStyles={null}
+                      label="Name"
+                      url={null}
+                      value="jane brown"
+                    >
+                      <TextContent
+                        className=""
+                        style={
+                          Object {
+                            "display": "grid",
+                            "gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
+                          }
+                        }
+                      >
+                        <div
+                          className="pf-c-content"
+                          style={
+                            Object {
+                              "display": "grid",
+                              "gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
+                            }
+                          }
+                        >
+                          <Text
+                            className=""
+                            component="h6"
+                            style={
+                              Object {
+                                "fontWeight": "700",
+                                "lineHeight": "24px",
+                                "marginRight": "20px",
+                              }
+                            }
+                          >
+                            <h6
+                              className=""
+                              data-pf-content={true}
+                              style={
+                                Object {
+                                  "fontWeight": "700",
+                                  "lineHeight": "24px",
+                                  "marginRight": "20px",
+                                }
+                              }
+                            >
+                              Name
+                            </h6>
+                          </Text>
+                          <Text
+                            className=""
+                            component="p"
+                            style={
+                              Object {
+                                "lineHeight": "28px",
+                                "overflow": "visible",
+                              }
+                            }
+                          >
+                            <p
+                              className=""
+                              data-pf-content={true}
+                              style={
+                                Object {
+                                  "lineHeight": "28px",
+                                  "overflow": "visible",
+                                }
+                              }
+                            >
+                              jane brown
+                            </p>
+                          </Text>
+                        </div>
+                      </TextContent>
+                    </Detail>
+                  </div>
+                </DataListCell>
+                <DataListCell
+                  alignRight={false}
+                  className=""
+                  isFilled={true}
+                  isIcon={false}
+                  key="roles"
+                  width={1}
+                >
+                  <div
+                    className="pf-c-data-list__cell"
+                  >
+                    <ul
+                      style={
+                        Object {
+                          "display": "flex",
+                          "flexWrap": "wrap",
+                        }
+                      }
+                    >
+                      <Text
+                        className=""
+                        component="h6"
+                        style={
+                          Object {
+                            "fontWeight": "700",
+                            "lineHeight": "24px",
+                            "marginRight": "20px",
+                          }
+                        }
+                      >
+                        <h6
+                          className=""
+                          data-pf-content={true}
+                          style={
+                            Object {
+                              "fontWeight": "700",
+                              "lineHeight": "24px",
+                              "marginRight": "20px",
+                            }
+                          }
+                        >
+                          Team Roles
+                        </h6>
+                      </Text>
+                      <Chip
+                        className="awx-c-chip"
+                        closeBtnAriaLabel="close"
+                        isOverflowChip={false}
+                        key="3"
+                        onClick={[Function]}
+                        tooltipPosition="top"
+                      >
+                        <GenerateId
+                          prefix="pf-random-id-"
+                        >
+                          <li
+                            className="pf-c-chip awx-c-chip"
+                          >
+                            <span
+                              className="pf-c-chip__text"
+                              id="pf-random-id-0"
+                            >
+                              Member
+                            </span>
+                            <ChipButton
+                              aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
+                              ariaLabel="close"
+                              className=""
+                              id="remove_pf-random-id-0"
+                              onClick={[Function]}
+                            >
+                              <Button
+                                aria-label="close"
+                                aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
+                                className=""
+                                component="button"
+                                id="remove_pf-random-id-0"
+                                isActive={false}
+                                isBlock={false}
+                                isDisabled={false}
+                                isFocus={false}
+                                isHover={false}
+                                onClick={[Function]}
+                                type="button"
+                                variant="plain"
+                              >
+                                <button
+                                  aria-disabled={null}
+                                  aria-label="close"
+                                  aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
+                                  className="pf-c-button pf-m-plain"
+                                  disabled={false}
+                                  id="remove_pf-random-id-0"
+                                  onClick={[Function]}
+                                  tabIndex={null}
+                                  type="button"
+                                >
+                                  <TimesCircleIcon
+                                    aria-hidden="true"
+                                    color="currentColor"
+                                    size="sm"
+                                    title={null}
+                                  >
+                                    <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="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+                                        transform=""
+                                      />
+                                    </svg>
+                                  </TimesCircleIcon>
+                                </button>
+                              </Button>
+                            </ChipButton>
+                          </li>
+                        </GenerateId>
+                      </Chip>
+                    </ul>
+                  </div>
+                </DataListCell>
+              </div>
+            </DataListItemCells>
           </div>
-        </DataListCell>
+        </DataListItemRow>
       </li>
     </DataListItem>
   </I18n>
diff --git a/__tests__/pages/Organizations/screens/Organization/Organization.test.jsx b/__tests__/pages/Organizations/screens/Organization/Organization.test.jsx
index 21e69ac58f..032b53e806 100644
--- a/__tests__/pages/Organizations/screens/Organization/Organization.test.jsx
+++ b/__tests__/pages/Organizations/screens/Organization/Organization.test.jsx
@@ -2,14 +2,16 @@ import React from 'react';
 import { mountWithContexts } from '../../../../enzymeHelpers';
 import Organization from '../../../../../src/pages/Organizations/screens/Organization/Organization';
 
-describe('<OrganizationView />', () => {
+describe.only('<Organization />', () => {
   const me = {
     is_super_user: true,
     is_system_auditor: false
   };
+
   test('initially renders succesfully', () => {
     mountWithContexts(<Organization me={me} />);
   });
+
   test('notifications tab shown/hidden based on permissions', () => {
     const wrapper = mountWithContexts(<Organization me={me} />);
     expect(wrapper.find('.pf-c-tabs__item').length).toBe(3);
@@ -18,6 +20,6 @@ describe('<OrganizationView />', () => {
       isNotifAdmin: true
     });
     expect(wrapper.find('.pf-c-tabs__item').length).toBe(4);
-    expect(wrapper.find('.pf-c-tabs__button[children="Notifications"]').length).toBe(1);
+    expect(wrapper.find('button.pf-c-tabs__button[children="Notifications"]').length).toBe(1);
   });
 });
diff --git a/__tests__/pages/Organizations/screens/Organization/OrganizationAccess.test.jsx b/__tests__/pages/Organizations/screens/Organization/OrganizationAccess.test.jsx
index 9956b10100..9733a88287 100644
--- a/__tests__/pages/Organizations/screens/Organization/OrganizationAccess.test.jsx
+++ b/__tests__/pages/Organizations/screens/Organization/OrganizationAccess.test.jsx
@@ -71,9 +71,9 @@ describe('<OrganizationAccess />', () => {
     };
   });
 
-  test.only('initially renders succesfully', () => {
+  test('initially renders succesfully', () => {
     const wrapper = mountWithContexts(
-      <OrganizationAccess id={1} organization={organization} />,
+      <OrganizationAccess organization={organization} />,
       { context: { network } }
     );
     expect(wrapper.find('OrganizationAccess')).toMatchSnapshot();
@@ -81,7 +81,7 @@ describe('<OrganizationAccess />', () => {
 
   test('should fetch and display access records on mount', async () => {
     const wrapper = mountWithContexts(
-      <OrganizationAccess id={1} />,
+      <OrganizationAccess organization={organization} />,
       { context: { network } }
     );
     await sleep(0);
@@ -94,7 +94,7 @@ describe('<OrganizationAccess />', () => {
 
   test('should open confirmation dialog when deleting role', async () => {
     const wrapper = mountWithContexts(
-      <OrganizationAccess id={1} />,
+      <OrganizationAccess organization={organization} />,
       { context: { network } }
     );
     await sleep(0);
@@ -114,7 +114,7 @@ describe('<OrganizationAccess />', () => {
 
   it('should close dialog when cancel button clicked', async () => {
     const wrapper = mountWithContexts(
-      <OrganizationAccess id={1} />,
+      <OrganizationAccess organization={organization} />,
       { context: { network } }
     );
     await sleep(0);
@@ -133,7 +133,7 @@ describe('<OrganizationAccess />', () => {
 
   it('should delete user role', async () => {
     const wrapper = mountWithContexts(
-      <OrganizationAccess id={1} />,
+      <OrganizationAccess organization={organization} />,
       { context: { network } }
     );
     await sleep(0);
@@ -156,7 +156,7 @@ describe('<OrganizationAccess />', () => {
 
   it('should delete team role', async () => {
     const wrapper = mountWithContexts(
-      <OrganizationAccess id={1} />,
+      <OrganizationAccess organization={organization} />,
       { context: { network } }
     );
     await sleep(0);
diff --git a/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationAccess.test.jsx.snap b/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationAccess.test.jsx.snap
index 26134846de..d9faca0720 100644
--- a/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationAccess.test.jsx.snap
+++ b/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationAccess.test.jsx.snap
@@ -5,7 +5,6 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
   api={"/api/"}
   handleHttpError={[Function]}
   history={"/history/"}
-  id={1}
   location={
     Object {
       "hash": "",
diff --git a/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap b/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap
index 75fd347ebc..fc9838754e 100644
--- a/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap
+++ b/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap
@@ -666,156 +666,246 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                     aria-labelledby="items-list-item-1"
                                     className="pf-c-data-list__item"
                                   >
-                                    <DataListCell
+                                    <DataListItemRow
                                       className=""
                                       key=".0"
                                       rowid="items-list-item-1"
-                                      width={1}
                                     >
                                       <div
-                                        className="pf-c-data-list__cell"
+                                        className="pf-c-data-list__item-row"
                                       >
-                                        <Link
-                                          replace={false}
-                                          style={
-                                            Object {
-                                              "marginRight": "1.5em",
-                                            }
-                                          }
-                                          to={
-                                            Object {
-                                              "pathname": "/notifications/1",
-                                            }
-                                          }
-                                        >
-                                          <a
-                                            onClick={[Function]}
-                                            style={
-                                              Object {
-                                                "marginRight": "1.5em",
-                                              }
-                                            }
-                                          >
-                                            <b
-                                              id="items-list-item-1"
-                                            >
-                                              Notification one
-                                            </b>
-                                          </a>
-                                        </Link>
-                                        <Badge
+                                        <DataListItemCells
                                           className=""
-                                          isRead={true}
-                                          style={
-                                            Object {
-                                              "textTransform": "capitalize",
-                                            }
+                                          dataListCells={
+                                            Array [
+                                              <DataListCell
+                                                alignRight={false}
+                                                className=""
+                                                isFilled={true}
+                                                isIcon={false}
+                                                width={1}
+                                              >
+                                                <Link
+                                                  replace={false}
+                                                  style={
+                                                    Object {
+                                                      "marginRight": "1.5em",
+                                                    }
+                                                  }
+                                                  to={
+                                                    Object {
+                                                      "pathname": "/notifications/1",
+                                                    }
+                                                  }
+                                                >
+                                                  <b
+                                                    id="items-list-item-1"
+                                                  >
+                                                    Notification one
+                                                  </b>
+                                                </Link>
+                                                <Badge
+                                                  className=""
+                                                  isRead={true}
+                                                  style={
+                                                    Object {
+                                                      "textTransform": "capitalize",
+                                                    }
+                                                  }
+                                                >
+                                                  email
+                                                </Badge>
+                                              </DataListCell>,
+                                              <DataListCell
+                                                alignRight={true}
+                                                className=""
+                                                isFilled={true}
+                                                isIcon={false}
+                                                width={1}
+                                              >
+                                                <Switch
+                                                  aria-label="Toggle notification success"
+                                                  className=""
+                                                  id="notification-1-success-toggle"
+                                                  isChecked={true}
+                                                  isDisabled={false}
+                                                  label="Successful"
+                                                  onChange={[Function]}
+                                                />
+                                                <Switch
+                                                  aria-label="Toggle notification failure"
+                                                  className=""
+                                                  id="notification-1-error-toggle"
+                                                  isChecked={false}
+                                                  isDisabled={false}
+                                                  label="Failure"
+                                                  onChange={[Function]}
+                                                />
+                                              </DataListCell>,
+                                            ]
                                           }
+                                          key=".0"
+                                          rowid="items-list-item-1"
                                         >
-                                          <span
-                                            className="pf-c-badge pf-m-read"
-                                            style={
-                                              Object {
-                                                "textTransform": "capitalize",
-                                              }
-                                            }
+                                          <div
+                                            className="pf-c-data-list__item-content"
                                           >
-                                            email
-                                          </span>
-                                        </Badge>
+                                            <DataListCell
+                                              alignRight={false}
+                                              className=""
+                                              isFilled={true}
+                                              isIcon={false}
+                                              key="name"
+                                              width={1}
+                                            >
+                                              <div
+                                                className="pf-c-data-list__cell"
+                                              >
+                                                <Link
+                                                  replace={false}
+                                                  style={
+                                                    Object {
+                                                      "marginRight": "1.5em",
+                                                    }
+                                                  }
+                                                  to={
+                                                    Object {
+                                                      "pathname": "/notifications/1",
+                                                    }
+                                                  }
+                                                >
+                                                  <a
+                                                    onClick={[Function]}
+                                                    style={
+                                                      Object {
+                                                        "marginRight": "1.5em",
+                                                      }
+                                                    }
+                                                  >
+                                                    <b
+                                                      id="items-list-item-1"
+                                                    >
+                                                      Notification one
+                                                    </b>
+                                                  </a>
+                                                </Link>
+                                                <Badge
+                                                  className=""
+                                                  isRead={true}
+                                                  style={
+                                                    Object {
+                                                      "textTransform": "capitalize",
+                                                    }
+                                                  }
+                                                >
+                                                  <span
+                                                    className="pf-c-badge pf-m-read"
+                                                    style={
+                                                      Object {
+                                                        "textTransform": "capitalize",
+                                                      }
+                                                    }
+                                                  >
+                                                    email
+                                                  </span>
+                                                </Badge>
+                                              </div>
+                                            </DataListCell>
+                                            <DataListCell
+                                              alignRight={true}
+                                              className=""
+                                              isFilled={true}
+                                              isIcon={false}
+                                              key="toggles"
+                                              width={1}
+                                            >
+                                              <div
+                                                className="pf-c-data-list__cell pf-m-align-right"
+                                              >
+                                                <Switch
+                                                  aria-label="Toggle notification success"
+                                                  className=""
+                                                  id="notification-1-success-toggle"
+                                                  isChecked={true}
+                                                  isDisabled={false}
+                                                  label="Successful"
+                                                  onChange={[Function]}
+                                                >
+                                                  <label
+                                                    className="pf-c-switch"
+                                                    htmlFor="notification-1-success-toggle"
+                                                  >
+                                                    <input
+                                                      aria-label="Toggle notification success"
+                                                      checked={true}
+                                                      className="pf-c-switch__input"
+                                                      disabled={false}
+                                                      id="notification-1-success-toggle"
+                                                      onChange={[Function]}
+                                                      type="checkbox"
+                                                    />
+                                                    <span
+                                                      className="pf-c-switch__toggle"
+                                                    />
+                                                    <span
+                                                      aria-hidden="true"
+                                                      className="pf-c-switch__label pf-m-on"
+                                                    >
+                                                      Successful
+                                                    </span>
+                                                    <span
+                                                      aria-hidden="true"
+                                                      className="pf-c-switch__label pf-m-off"
+                                                    >
+                                                      Successful
+                                                    </span>
+                                                  </label>
+                                                </Switch>
+                                                <Switch
+                                                  aria-label="Toggle notification failure"
+                                                  className=""
+                                                  id="notification-1-error-toggle"
+                                                  isChecked={false}
+                                                  isDisabled={false}
+                                                  label="Failure"
+                                                  onChange={[Function]}
+                                                >
+                                                  <label
+                                                    className="pf-c-switch"
+                                                    htmlFor="notification-1-error-toggle"
+                                                  >
+                                                    <input
+                                                      aria-label="Toggle notification failure"
+                                                      checked={false}
+                                                      className="pf-c-switch__input"
+                                                      disabled={false}
+                                                      id="notification-1-error-toggle"
+                                                      onChange={[Function]}
+                                                      type="checkbox"
+                                                    />
+                                                    <span
+                                                      className="pf-c-switch__toggle"
+                                                    />
+                                                    <span
+                                                      aria-hidden="true"
+                                                      className="pf-c-switch__label pf-m-on"
+                                                    >
+                                                      Failure
+                                                    </span>
+                                                    <span
+                                                      aria-hidden="true"
+                                                      className="pf-c-switch__label pf-m-off"
+                                                    >
+                                                      Failure
+                                                    </span>
+                                                  </label>
+                                                </Switch>
+                                              </div>
+                                            </DataListCell>
+                                          </div>
+                                        </DataListItemCells>
                                       </div>
-                                    </DataListCell>
-                                    <DataListCell
-                                      alignRight={true}
-                                      className=""
-                                      key=".1"
-                                      rowid="items-list-item-1"
-                                      width={1}
-                                    >
-                                      <div
-                                        alignRight={true}
-                                        className="pf-c-data-list__cell"
-                                      >
-                                        <Switch
-                                          aria-label="Toggle notification success"
-                                          className=""
-                                          id="notification-1-success-toggle"
-                                          isChecked={true}
-                                          isDisabled={false}
-                                          label="Successful"
-                                          onChange={[Function]}
-                                        >
-                                          <label
-                                            className="pf-c-switch"
-                                            htmlFor="notification-1-success-toggle"
-                                          >
-                                            <input
-                                              aria-label="Toggle notification success"
-                                              checked={true}
-                                              className="pf-c-switch__input"
-                                              disabled={false}
-                                              id="notification-1-success-toggle"
-                                              onChange={[Function]}
-                                              type="checkbox"
-                                            />
-                                            <span
-                                              className="pf-c-switch__toggle"
-                                            />
-                                            <span
-                                              aria-hidden="true"
-                                              className="pf-c-switch__label pf-m-on"
-                                            >
-                                              Successful
-                                            </span>
-                                            <span
-                                              aria-hidden="true"
-                                              className="pf-c-switch__label pf-m-off"
-                                            >
-                                              Successful
-                                            </span>
-                                          </label>
-                                        </Switch>
-                                        <Switch
-                                          aria-label="Toggle notification failure"
-                                          className=""
-                                          id="notification-1-error-toggle"
-                                          isChecked={false}
-                                          isDisabled={false}
-                                          label="Failure"
-                                          onChange={[Function]}
-                                        >
-                                          <label
-                                            className="pf-c-switch"
-                                            htmlFor="notification-1-error-toggle"
-                                          >
-                                            <input
-                                              aria-label="Toggle notification failure"
-                                              checked={false}
-                                              className="pf-c-switch__input"
-                                              disabled={false}
-                                              id="notification-1-error-toggle"
-                                              onChange={[Function]}
-                                              type="checkbox"
-                                            />
-                                            <span
-                                              className="pf-c-switch__toggle"
-                                            />
-                                            <span
-                                              aria-hidden="true"
-                                              className="pf-c-switch__label pf-m-on"
-                                            >
-                                              Failure
-                                            </span>
-                                            <span
-                                              aria-hidden="true"
-                                              className="pf-c-switch__label pf-m-off"
-                                            >
-                                              Failure
-                                            </span>
-                                          </label>
-                                        </Switch>
-                                      </div>
-                                    </DataListCell>
+                                    </DataListItemRow>
                                   </li>
                                 </DataListItem>
                               </I18n>
@@ -850,156 +940,246 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                     aria-labelledby="items-list-item-2"
                                     className="pf-c-data-list__item"
                                   >
-                                    <DataListCell
+                                    <DataListItemRow
                                       className=""
                                       key=".0"
                                       rowid="items-list-item-2"
-                                      width={1}
                                     >
                                       <div
-                                        className="pf-c-data-list__cell"
+                                        className="pf-c-data-list__item-row"
                                       >
-                                        <Link
-                                          replace={false}
-                                          style={
-                                            Object {
-                                              "marginRight": "1.5em",
-                                            }
-                                          }
-                                          to={
-                                            Object {
-                                              "pathname": "/notifications/2",
-                                            }
-                                          }
-                                        >
-                                          <a
-                                            onClick={[Function]}
-                                            style={
-                                              Object {
-                                                "marginRight": "1.5em",
-                                              }
-                                            }
-                                          >
-                                            <b
-                                              id="items-list-item-2"
-                                            >
-                                              Notification two
-                                            </b>
-                                          </a>
-                                        </Link>
-                                        <Badge
+                                        <DataListItemCells
                                           className=""
-                                          isRead={true}
-                                          style={
-                                            Object {
-                                              "textTransform": "capitalize",
-                                            }
+                                          dataListCells={
+                                            Array [
+                                              <DataListCell
+                                                alignRight={false}
+                                                className=""
+                                                isFilled={true}
+                                                isIcon={false}
+                                                width={1}
+                                              >
+                                                <Link
+                                                  replace={false}
+                                                  style={
+                                                    Object {
+                                                      "marginRight": "1.5em",
+                                                    }
+                                                  }
+                                                  to={
+                                                    Object {
+                                                      "pathname": "/notifications/2",
+                                                    }
+                                                  }
+                                                >
+                                                  <b
+                                                    id="items-list-item-2"
+                                                  >
+                                                    Notification two
+                                                  </b>
+                                                </Link>
+                                                <Badge
+                                                  className=""
+                                                  isRead={true}
+                                                  style={
+                                                    Object {
+                                                      "textTransform": "capitalize",
+                                                    }
+                                                  }
+                                                >
+                                                  email
+                                                </Badge>
+                                              </DataListCell>,
+                                              <DataListCell
+                                                alignRight={true}
+                                                className=""
+                                                isFilled={true}
+                                                isIcon={false}
+                                                width={1}
+                                              >
+                                                <Switch
+                                                  aria-label="Toggle notification success"
+                                                  className=""
+                                                  id="notification-2-success-toggle"
+                                                  isChecked={false}
+                                                  isDisabled={false}
+                                                  label="Successful"
+                                                  onChange={[Function]}
+                                                />
+                                                <Switch
+                                                  aria-label="Toggle notification failure"
+                                                  className=""
+                                                  id="notification-2-error-toggle"
+                                                  isChecked={true}
+                                                  isDisabled={false}
+                                                  label="Failure"
+                                                  onChange={[Function]}
+                                                />
+                                              </DataListCell>,
+                                            ]
                                           }
+                                          key=".0"
+                                          rowid="items-list-item-2"
                                         >
-                                          <span
-                                            className="pf-c-badge pf-m-read"
-                                            style={
-                                              Object {
-                                                "textTransform": "capitalize",
-                                              }
-                                            }
+                                          <div
+                                            className="pf-c-data-list__item-content"
                                           >
-                                            email
-                                          </span>
-                                        </Badge>
+                                            <DataListCell
+                                              alignRight={false}
+                                              className=""
+                                              isFilled={true}
+                                              isIcon={false}
+                                              key="name"
+                                              width={1}
+                                            >
+                                              <div
+                                                className="pf-c-data-list__cell"
+                                              >
+                                                <Link
+                                                  replace={false}
+                                                  style={
+                                                    Object {
+                                                      "marginRight": "1.5em",
+                                                    }
+                                                  }
+                                                  to={
+                                                    Object {
+                                                      "pathname": "/notifications/2",
+                                                    }
+                                                  }
+                                                >
+                                                  <a
+                                                    onClick={[Function]}
+                                                    style={
+                                                      Object {
+                                                        "marginRight": "1.5em",
+                                                      }
+                                                    }
+                                                  >
+                                                    <b
+                                                      id="items-list-item-2"
+                                                    >
+                                                      Notification two
+                                                    </b>
+                                                  </a>
+                                                </Link>
+                                                <Badge
+                                                  className=""
+                                                  isRead={true}
+                                                  style={
+                                                    Object {
+                                                      "textTransform": "capitalize",
+                                                    }
+                                                  }
+                                                >
+                                                  <span
+                                                    className="pf-c-badge pf-m-read"
+                                                    style={
+                                                      Object {
+                                                        "textTransform": "capitalize",
+                                                      }
+                                                    }
+                                                  >
+                                                    email
+                                                  </span>
+                                                </Badge>
+                                              </div>
+                                            </DataListCell>
+                                            <DataListCell
+                                              alignRight={true}
+                                              className=""
+                                              isFilled={true}
+                                              isIcon={false}
+                                              key="toggles"
+                                              width={1}
+                                            >
+                                              <div
+                                                className="pf-c-data-list__cell pf-m-align-right"
+                                              >
+                                                <Switch
+                                                  aria-label="Toggle notification success"
+                                                  className=""
+                                                  id="notification-2-success-toggle"
+                                                  isChecked={false}
+                                                  isDisabled={false}
+                                                  label="Successful"
+                                                  onChange={[Function]}
+                                                >
+                                                  <label
+                                                    className="pf-c-switch"
+                                                    htmlFor="notification-2-success-toggle"
+                                                  >
+                                                    <input
+                                                      aria-label="Toggle notification success"
+                                                      checked={false}
+                                                      className="pf-c-switch__input"
+                                                      disabled={false}
+                                                      id="notification-2-success-toggle"
+                                                      onChange={[Function]}
+                                                      type="checkbox"
+                                                    />
+                                                    <span
+                                                      className="pf-c-switch__toggle"
+                                                    />
+                                                    <span
+                                                      aria-hidden="true"
+                                                      className="pf-c-switch__label pf-m-on"
+                                                    >
+                                                      Successful
+                                                    </span>
+                                                    <span
+                                                      aria-hidden="true"
+                                                      className="pf-c-switch__label pf-m-off"
+                                                    >
+                                                      Successful
+                                                    </span>
+                                                  </label>
+                                                </Switch>
+                                                <Switch
+                                                  aria-label="Toggle notification failure"
+                                                  className=""
+                                                  id="notification-2-error-toggle"
+                                                  isChecked={true}
+                                                  isDisabled={false}
+                                                  label="Failure"
+                                                  onChange={[Function]}
+                                                >
+                                                  <label
+                                                    className="pf-c-switch"
+                                                    htmlFor="notification-2-error-toggle"
+                                                  >
+                                                    <input
+                                                      aria-label="Toggle notification failure"
+                                                      checked={true}
+                                                      className="pf-c-switch__input"
+                                                      disabled={false}
+                                                      id="notification-2-error-toggle"
+                                                      onChange={[Function]}
+                                                      type="checkbox"
+                                                    />
+                                                    <span
+                                                      className="pf-c-switch__toggle"
+                                                    />
+                                                    <span
+                                                      aria-hidden="true"
+                                                      className="pf-c-switch__label pf-m-on"
+                                                    >
+                                                      Failure
+                                                    </span>
+                                                    <span
+                                                      aria-hidden="true"
+                                                      className="pf-c-switch__label pf-m-off"
+                                                    >
+                                                      Failure
+                                                    </span>
+                                                  </label>
+                                                </Switch>
+                                              </div>
+                                            </DataListCell>
+                                          </div>
+                                        </DataListItemCells>
                                       </div>
-                                    </DataListCell>
-                                    <DataListCell
-                                      alignRight={true}
-                                      className=""
-                                      key=".1"
-                                      rowid="items-list-item-2"
-                                      width={1}
-                                    >
-                                      <div
-                                        alignRight={true}
-                                        className="pf-c-data-list__cell"
-                                      >
-                                        <Switch
-                                          aria-label="Toggle notification success"
-                                          className=""
-                                          id="notification-2-success-toggle"
-                                          isChecked={false}
-                                          isDisabled={false}
-                                          label="Successful"
-                                          onChange={[Function]}
-                                        >
-                                          <label
-                                            className="pf-c-switch"
-                                            htmlFor="notification-2-success-toggle"
-                                          >
-                                            <input
-                                              aria-label="Toggle notification success"
-                                              checked={false}
-                                              className="pf-c-switch__input"
-                                              disabled={false}
-                                              id="notification-2-success-toggle"
-                                              onChange={[Function]}
-                                              type="checkbox"
-                                            />
-                                            <span
-                                              className="pf-c-switch__toggle"
-                                            />
-                                            <span
-                                              aria-hidden="true"
-                                              className="pf-c-switch__label pf-m-on"
-                                            >
-                                              Successful
-                                            </span>
-                                            <span
-                                              aria-hidden="true"
-                                              className="pf-c-switch__label pf-m-off"
-                                            >
-                                              Successful
-                                            </span>
-                                          </label>
-                                        </Switch>
-                                        <Switch
-                                          aria-label="Toggle notification failure"
-                                          className=""
-                                          id="notification-2-error-toggle"
-                                          isChecked={true}
-                                          isDisabled={false}
-                                          label="Failure"
-                                          onChange={[Function]}
-                                        >
-                                          <label
-                                            className="pf-c-switch"
-                                            htmlFor="notification-2-error-toggle"
-                                          >
-                                            <input
-                                              aria-label="Toggle notification failure"
-                                              checked={true}
-                                              className="pf-c-switch__input"
-                                              disabled={false}
-                                              id="notification-2-error-toggle"
-                                              onChange={[Function]}
-                                              type="checkbox"
-                                            />
-                                            <span
-                                              className="pf-c-switch__toggle"
-                                            />
-                                            <span
-                                              aria-hidden="true"
-                                              className="pf-c-switch__label pf-m-on"
-                                            >
-                                              Failure
-                                            </span>
-                                            <span
-                                              aria-hidden="true"
-                                              className="pf-c-switch__label pf-m-off"
-                                            >
-                                              Failure
-                                            </span>
-                                          </label>
-                                        </Switch>
-                                      </div>
-                                    </DataListCell>
+                                    </DataListItemRow>
                                   </li>
                                 </DataListItem>
                               </I18n>
diff --git a/package-lock.json b/package-lock.json
index 356499ff37..1b3ffb0778 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1748,18 +1748,18 @@
       }
     },
     "@patternfly/patternfly": {
-      "version": "1.0.248",
-      "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-1.0.248.tgz",
-      "integrity": "sha512-x+fz3cP0nyFsK0ZRt1H58ESZxoy4wKqqb2uhyaNIg5jC3x5KC0PCr0gfUmBvNOiHnOePmc+ZC5nWcAOKN9tGBA=="
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-2.6.5.tgz",
+      "integrity": "sha512-L0k+ea2N679ytQwTqYJ7RewVDx6FDpm9burtHgD8fhcIN0UJJo7v2IkhLya2WzH2/O7L7TiF45lb/ZVoFVckDA=="
     },
     "@patternfly/react-core": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-2.9.2.tgz",
-      "integrity": "sha512-v93pAA9dXTzsgFeR8W4+fg0kC0joB4BISFoSqzb22+/cNvSnEypC/DjBN4pOUEoBvsFC/JI8FotQoj9ZAx3GAw==",
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-3.2.6.tgz",
+      "integrity": "sha512-58GBM8SfhoggQldGArUR3LwvcMe+GaW/uTjB1/a3RTG6HXTfFfs33UXnQnN2IgWZmHOyxpjnWq2yEh5xwJs5HQ==",
       "requires": {
-        "@patternfly/react-icons": "^3.6.1",
-        "@patternfly/react-styles": "^2.4.0",
-        "@patternfly/react-tokens": "^2.2.1",
+        "@patternfly/react-icons": "^3.7.4",
+        "@patternfly/react-styles": "^3.0.2",
+        "@patternfly/react-tokens": "^2.3.3",
         "@tippy.js/react": "^1.1.1",
         "emotion": "^9.2.9",
         "exenv": "^1.2.2",
@@ -1767,26 +1767,26 @@
       },
       "dependencies": {
         "@patternfly/react-icons": {
-          "version": "3.6.1",
-          "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.6.1.tgz",
-          "integrity": "sha512-7PkP7NC3sDmsFAnQIGl+9p14vgx7gj0TZSwtL1ABkAEV9tXcEjWsyyZP2fahfTKVE9aPrOZ/YINsr8+iGCOTnA=="
+          "version": "3.7.5",
+          "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.7.5.tgz",
+          "integrity": "sha512-Bejd6GAWfcDgA7YxvIcrohcBPVZUG34E3LWaJSHLUf8XADf33q7UvQ4YQ1eWk477o/GjZA3AX/71Y6op71WdDA=="
         },
         "@patternfly/react-tokens": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.2.1.tgz",
-          "integrity": "sha512-DVGrHRPpNvIhS9ekn7lqvXdHHAbkCawwfc8hRCuGvGS2Z6O45u1JFTyKWTyvW9b94pigaDTArtMlp++k5o1Xpw=="
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.3.3.tgz",
+          "integrity": "sha512-+2SSGvOV1rZr1l6+p2QzORVJhpOKjrHqCBfkp10La7O93+mVLYU0vugTp1elhxeh32IuLCJAPDLrCJPBAfmYKw=="
         }
       }
     },
     "@patternfly/react-icons": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.6.1.tgz",
-      "integrity": "sha512-7PkP7NC3sDmsFAnQIGl+9p14vgx7gj0TZSwtL1ABkAEV9tXcEjWsyyZP2fahfTKVE9aPrOZ/YINsr8+iGCOTnA=="
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.7.5.tgz",
+      "integrity": "sha512-Bejd6GAWfcDgA7YxvIcrohcBPVZUG34E3LWaJSHLUf8XADf33q7UvQ4YQ1eWk477o/GjZA3AX/71Y6op71WdDA=="
     },
     "@patternfly/react-styles": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-2.4.0.tgz",
-      "integrity": "sha512-BJQtg4zjj5Gw6OixHu2MGiT2T3vFTvyiGSXPQ+wk+vqR/wl0Y7/OOGNqI3fGYm1ON4q2ySOlGuJdHF+1NLbVyA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-3.0.2.tgz",
+      "integrity": "sha512-JiGxDkC4JArQJ13RQOjSUE4jPmwrAq8f5E+qg0tVws1A9BQ2l3uGCRFMVbfa57qqjqk0jXNmIVdFSeCG18qwJQ==",
       "requires": {
         "@babel/helper-plugin-utils": "^7.0.0-beta.48",
         "camel-case": "^3.0.0",
@@ -1803,9 +1803,9 @@
       }
     },
     "@patternfly/react-tokens": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.2.1.tgz",
-      "integrity": "sha512-DVGrHRPpNvIhS9ekn7lqvXdHHAbkCawwfc8hRCuGvGS2Z6O45u1JFTyKWTyvW9b94pigaDTArtMlp++k5o1Xpw=="
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.3.3.tgz",
+      "integrity": "sha512-+2SSGvOV1rZr1l6+p2QzORVJhpOKjrHqCBfkp10La7O93+mVLYU0vugTp1elhxeh32IuLCJAPDLrCJPBAfmYKw=="
     },
     "@tippy.js/react": {
       "version": "1.1.1",
@@ -4988,9 +4988,9 @@
       }
     },
     "csstype": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.3.tgz",
-      "integrity": "sha512-rINUZXOkcBmoHWEyu7JdHu5JMzkGRoMX4ov9830WNgxf5UYxcBUO0QTKAqeJ5EZfSdlrcJYkC8WwfVW7JYi4yg=="
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.4.tgz",
+      "integrity": "sha512-lAJUJP3M6HxFXbqtGRc0iZrdyeN+WzOWeY0q/VnFzI+kqVrYIzC7bWlKqCW7oCIdzoPkvfp82EVvrTlQ8zsWQg=="
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -7027,8 +7027,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -7049,14 +7048,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -7071,20 +7068,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -7201,8 +7195,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -7214,7 +7207,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -7229,7 +7221,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -7237,14 +7228,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -7263,7 +7252,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -7344,8 +7332,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -7357,7 +7344,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -7443,8 +7429,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -7480,7 +7465,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -7500,7 +7484,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -7544,14 +7527,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -12539,9 +12520,9 @@
       "dev": true
     },
     "popper.js": {
-      "version": "1.14.7",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.7.tgz",
-      "integrity": "sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ=="
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
+      "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
     },
     "portfinder": {
       "version": "1.0.20",
diff --git a/package.json b/package.json
index 015865fda1..c4f67774a8 100644
--- a/package.json
+++ b/package.json
@@ -50,10 +50,10 @@
   },
   "dependencies": {
     "@lingui/react": "^2.7.2",
-    "@patternfly/patternfly": "^1.0.248",
-    "@patternfly/react-core": "^2.9.2",
-    "@patternfly/react-icons": "^3.6.1",
-    "@patternfly/react-tokens": "^2.2.1",
+    "@patternfly/patternfly": "^2.6.5",
+    "@patternfly/react-core": "^3.2.6",
+    "@patternfly/react-icons": "^3.7.5",
+    "@patternfly/react-tokens": "^2.3.3",
     "axios": "^0.18.0",
     "formik": "^1.5.1",
     "prop-types": "^15.6.2",
diff --git a/src/app.scss b/src/app.scss
index 7f05497dc5..98e83ef2e5 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -88,16 +88,27 @@
   }
 }
 
+.pf-c-data-list__item-row {
+  --pf-c-data-list__item-row--PaddingRight: 20px;
+  --pf-c-data-list__item-row--PaddingLeft: 20px;
+}
+
+.pf-c-data-list__item-content {
+  --pf-c-data-list__item-content--PaddingBottom: 16px;
+}
+
+.pf-c-data-list__item-control {
+  --pf-c-data-list__item-control--PaddingTop: 16px;
+  --pf-c-data-list__item-control--MarginRight: 8px;
+}
+
 .pf-c-data-list__item {
   --pf-c-data-list__item--PaddingLeft: 20px;
   --pf-c-data-list__item--PaddingRight: 20px;
-
-  align-items: center;
 }
 
 .pf-c-data-list__cell {
   --pf-c-data-list__cell--PaddingTop: 16px;
-  --pf-c-data-list__cell--PaddingBottom: 16px;
   --pf-c-data-list__cell-cell--PaddingTop: 16px;
 
   .awx-c-list-group {
@@ -111,6 +122,11 @@
       margin-left: 10px;
     }
   }
+
+  &.pf-c-data-list__cell--divider {
+    flex-grow: 0;
+    margin-right: 0;
+  }
 }
 
 //
diff --git a/src/components/NotificationsList/NotificationListItem.jsx b/src/components/NotificationsList/NotificationListItem.jsx
index 5d417cb093..fa3238ba12 100644
--- a/src/components/NotificationsList/NotificationListItem.jsx
+++ b/src/components/NotificationsList/NotificationListItem.jsx
@@ -3,7 +3,14 @@ import { shape, number, string, bool, func } from 'prop-types';
 import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
-import { Badge, Switch, DataListItem, DataListCell } from '@patternfly/react-core';
+import {
+  Badge,
+  Switch,
+  DataListItem,
+  DataListItemRow,
+  DataListItemCells,
+  DataListCell,
+} from '@patternfly/react-core';
 
 function NotificationListItem (props) {
   const {
@@ -25,48 +32,53 @@ function NotificationListItem (props) {
           aria-labelledby={`items-list-item-${notification.id}`}
           key={notification.id}
         >
-          <DataListCell>
-            <Link
-              to={{
-                pathname: detailUrl
-              }}
-              style={{ marginRight: '1.5em' }}
-            >
-              <b id={`items-list-item-${notification.id}`}>{notification.name}</b>
-            </Link>
-            <Badge
-              style={capText}
-              isRead
-            >
-              {notification.notification_type}
-            </Badge>
-          </DataListCell>
-          <DataListCell alignRight>
-            <Switch
-              id={`notification-${notification.id}-success-toggle`}
-              label={i18n._(t`Successful`)}
-              isChecked={successTurnedOn}
-              isDisabled={!canToggleNotifications}
-              onChange={() => toggleNotification(
-                notification.id,
-                successTurnedOn,
-                'success'
-              )}
-              aria-label={i18n._(t`Toggle notification success`)}
+          <DataListItemRow>
+            <DataListItemCells dataListCells={[
+              <DataListCell key="name">
+                <Link
+                  to={{
+                    pathname: detailUrl
+                  }}
+                  style={{ marginRight: '1.5em' }}
+                >
+                  <b id={`items-list-item-${notification.id}`}>{notification.name}</b>
+                </Link>
+                <Badge
+                  style={capText}
+                  isRead
+                >
+                  {notification.notification_type}
+                </Badge>
+              </DataListCell>,
+              <DataListCell key="toggles" alignRight>
+                <Switch
+                  id={`notification-${notification.id}-success-toggle`}
+                  label={i18n._(t`Successful`)}
+                  isChecked={successTurnedOn}
+                  isDisabled={!canToggleNotifications}
+                  onChange={() => toggleNotification(
+                    notification.id,
+                    successTurnedOn,
+                    'success'
+                  )}
+                  aria-label={i18n._(t`Toggle notification success`)}
+                />
+                <Switch
+                  id={`notification-${notification.id}-error-toggle`}
+                  label={i18n._(t`Failure`)}
+                  isChecked={errorTurnedOn}
+                  isDisabled={!canToggleNotifications}
+                  onChange={() => toggleNotification(
+                    notification.id,
+                    errorTurnedOn,
+                    'error'
+                  )}
+                  aria-label={i18n._(t`Toggle notification failure`)}
+                />
+              </DataListCell>
+            ]}
             />
-            <Switch
-              id={`notification-${notification.id}-error-toggle`}
-              label={i18n._(t`Failure`)}
-              isChecked={errorTurnedOn}
-              isDisabled={!canToggleNotifications}
-              onChange={() => toggleNotification(
-                notification.id,
-                errorTurnedOn,
-                'error'
-              )}
-              aria-label={i18n._(t`Toggle notification failure`)}
-            />
-          </DataListCell>
+          </DataListItemRow>
         </DataListItem>
       )}
     </I18n>
diff --git a/src/components/PaginatedDataList/PaginatedDataList.jsx b/src/components/PaginatedDataList/PaginatedDataList.jsx
index ff9c9d3cfd..0ff3d8b0da 100644
--- a/src/components/PaginatedDataList/PaginatedDataList.jsx
+++ b/src/components/PaginatedDataList/PaginatedDataList.jsx
@@ -3,6 +3,8 @@ import PropTypes, { arrayOf, shape, string, bool } from 'prop-types';
 import {
   DataList,
   DataListItem,
+  DataListItemRow,
+  DataListItemCells,
   DataListCell,
   Text,
   TextContent,
@@ -154,21 +156,26 @@ class PaginatedDataList extends React.Component {
                       aria-labelledby={`items-list-item-${item.id}`}
                       key={item.id}
                     >
-                      <DataListCell>
-                        <TextContent style={detailWrapperStyle}>
-                          <Link to={{ pathname: item.url }}>
-                            <Text
-                              id="items-list-item"
-                              component={TextVariants.h6}
-                              style={detailLabelStyle}
-                            >
-                              <span id={`items-list-item-${item.id}`}>
-                                {item.name}
-                              </span>
-                            </Text>
-                          </Link>
-                        </TextContent>
-                      </DataListCell>
+                      <DataListItemRow>
+                        <DataListItemCells dataListCells={[
+                          <DataListCell key="team-name">
+                            <TextContent style={detailWrapperStyle}>
+                              <Link to={{ pathname: item.url }}>
+                                <Text
+                                  id="items-list-item"
+                                  component={TextVariants.h6}
+                                  style={detailLabelStyle}
+                                >
+                                  <span id={`items-list-item-${item.id}`}>
+                                    {item.name}
+                                  </span>
+                                </Text>
+                              </Link>
+                            </TextContent>
+                          </DataListCell>
+                        ]}
+                        />
+                      </DataListItemRow>
                     </DataListItem>
                   )))}
                 </DataList>
diff --git a/src/pages/Organizations/components/OrganizationAccessItem.jsx b/src/pages/Organizations/components/OrganizationAccessItem.jsx
index e2d5c94a15..71ac7a94f4 100644
--- a/src/pages/Organizations/components/OrganizationAccessItem.jsx
+++ b/src/pages/Organizations/components/OrganizationAccessItem.jsx
@@ -4,6 +4,8 @@ import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   DataListItem,
+  DataListItemRow,
+  DataListItemCells,
   DataListCell,
   Text,
   TextContent,
@@ -86,79 +88,84 @@ class OrganizationAccessItem extends React.Component {
       <I18n>
         {({ i18n }) => (
           <DataListItem aria-labelledby="access-list-item" key={accessRecord.id}>
-            <DataListCell>
-              {accessRecord.username && (
-                <TextContent style={detailWrapperStyle}>
-                  {accessRecord.url ? (
-                    <Link to={{ pathname: accessRecord.url }}>
-                      <Text component={TextVariants.h6} style={detailLabelStyle}>
-                        {accessRecord.username}
-                      </Text>
-                    </Link>
-                  ) : (
-                    <Text component={TextVariants.h6} style={detailLabelStyle}>
-                      {accessRecord.username}
-                    </Text>
+            <DataListItemRow>
+              <DataListItemCells dataListCells={[
+                <DataListCell key="name">
+                  {accessRecord.username && (
+                    <TextContent style={detailWrapperStyle}>
+                      {accessRecord.url ? (
+                        <Link to={{ pathname: accessRecord.url }}>
+                          <Text component={TextVariants.h6} style={detailLabelStyle}>
+                            {accessRecord.username}
+                          </Text>
+                        </Link>
+                      ) : (
+                        <Text component={TextVariants.h6} style={detailLabelStyle}>
+                          {accessRecord.username}
+                        </Text>
+                      )}
+                    </TextContent>
                   )}
-                </TextContent>
-              )}
-              {accessRecord.first_name || accessRecord.last_name ? (
-                <Detail
-                  label={i18n._(t`Name`)}
-                  value={`${accessRecord.first_name} ${accessRecord.last_name}`}
-                  url={null}
-                  customStyles={null}
-                />
-              ) : (
-                null
-              )}
-            </DataListCell>
-            <DataListCell>
-              {userRoles.length > 0 && (
-                <ul style={userRolesWrapperStyle}>
-                  <Text component={TextVariants.h6} style={detailLabelStyle}>
-                    {i18n._(t`User Roles`)}
-                  </Text>
-                  {userRoles.map(role => (
-                    role.user_capabilities.unattach ? (
-                      <Chip
-                        key={role.id}
-                        className="awx-c-chip"
-                        onClick={() => { onRoleDelete(role, accessRecord); }}
-                      >
-                        {role.name}
-                      </Chip>
-                    ) : (
-                      <BasicChip key={role.id}>
-                        {role.name}
-                      </BasicChip>
-                    )
-                  ))}
-                </ul>
-              )}
-              {teamRoles.length > 0 && (
-                <ul style={userRolesWrapperStyle}>
-                  <Text component={TextVariants.h6} style={detailLabelStyle}>
-                    {i18n._(t`Team Roles`)}
-                  </Text>
-                  {teamRoles.map(role => (
-                    role.user_capabilities.unattach ? (
-                      <Chip
-                        key={role.id}
-                        className="awx-c-chip"
-                        onClick={() => { onRoleDelete(role, accessRecord); }}
-                      >
-                        {role.name}
-                      </Chip>
-                    ) : (
-                      <BasicChip key={role.id}>
-                        {role.name}
-                      </BasicChip>
-                    )
-                  ))}
-                </ul>
-              )}
-            </DataListCell>
+                  {accessRecord.first_name || accessRecord.last_name ? (
+                    <Detail
+                      label={i18n._(t`Name`)}
+                      value={`${accessRecord.first_name} ${accessRecord.last_name}`}
+                      url={null}
+                      customStyles={null}
+                    />
+                  ) : (
+                    null
+                  )}
+                </DataListCell>,
+                <DataListCell key="roles">
+                  {userRoles.length > 0 && (
+                    <ul style={userRolesWrapperStyle}>
+                      <Text component={TextVariants.h6} style={detailLabelStyle}>
+                        {i18n._(t`User Roles`)}
+                      </Text>
+                      {userRoles.map(role => (
+                        role.user_capabilities.unattach ? (
+                          <Chip
+                            key={role.id}
+                            className="awx-c-chip"
+                            onClick={() => { onRoleDelete(role, accessRecord); }}
+                          >
+                            {role.name}
+                          </Chip>
+                        ) : (
+                          <BasicChip key={role.id}>
+                            {role.name}
+                          </BasicChip>
+                        )
+                      ))}
+                    </ul>
+                  )}
+                  {teamRoles.length > 0 && (
+                    <ul style={userRolesWrapperStyle}>
+                      <Text component={TextVariants.h6} style={detailLabelStyle}>
+                        {i18n._(t`Team Roles`)}
+                      </Text>
+                      {teamRoles.map(role => (
+                        role.user_capabilities.unattach ? (
+                          <Chip
+                            key={role.id}
+                            className="awx-c-chip"
+                            onClick={() => { onRoleDelete(role, accessRecord); }}
+                          >
+                            {role.name}
+                          </Chip>
+                        ) : (
+                          <BasicChip key={role.id}>
+                            {role.name}
+                          </BasicChip>
+                        )
+                      ))}
+                    </ul>
+                  )}
+                </DataListCell>
+              ]}
+              />
+            </DataListItemRow>
           </DataListItem>
         )}
       </I18n>
diff --git a/src/pages/Organizations/components/OrganizationListItem.jsx b/src/pages/Organizations/components/OrganizationListItem.jsx
index d304f6743d..d0fcabc2eb 100644
--- a/src/pages/Organizations/components/OrganizationListItem.jsx
+++ b/src/pages/Organizations/components/OrganizationListItem.jsx
@@ -1,9 +1,12 @@
 import React from 'react';
-import { I18n } from '@lingui/react';
-import { Trans, t } from '@lingui/macro';
+import { Trans } from '@lingui/macro';
 import {
   Badge,
-  Checkbox,
+  DataListItem,
+  DataListItemRow,
+  DataListItemCells,
+  DataListCheck,
+  DataListCell,
 } from '@patternfly/react-core';
 import {
   Link
@@ -22,44 +25,47 @@ class OrganizationListItem extends React.Component {
       onSelect,
       detailUrl,
     } = this.props;
+    const labelId = `check-action-${itemId}`;
     return (
-      <li key={itemId} className="pf-c-data-list__item" aria-labelledby="check-action-item1">
-        <I18n>
-          {({ i18n }) => (
-            <Checkbox
-              checked={isSelected}
-              onChange={onSelect}
-              aria-label={i18n._(t`select organization ${itemId}`)}
-              id={`select-organization-${itemId}`}
-            />
-          )}
-        </I18n>
-        <VerticalSeparator />
-        <div className="pf-c-data-list__cell">
-          <span id="check-action-item1">
-            <Link
-              to={`${detailUrl}`}
-            >
-              <b>{name}</b>
-            </Link>
-          </span>
-        </div>
-        <div className="pf-c-data-list__cell">
-          <span className="awx-c-list-group">
-            <Trans>Members</Trans>
-            <Badge className="awx-c-list-group--badge" isRead>
-              {memberCount}
-            </Badge>
-          </span>
-          <span className="awx-c-list-group">
-            <Trans>Teams</Trans>
-            <Badge className="awx-c-list-group--badge" isRead>
-              {teamCount}
-            </Badge>
-          </span>
-        </div>
-        <div className="pf-c-data-list__cell" />
-      </li>
+      <DataListItem key={itemId} aria-labelledby={labelId}>
+        <DataListItemRow>
+          <DataListCheck
+            id={`select-organization-${itemId}`}
+            checked={isSelected}
+            onChange={onSelect}
+            aria-labelledby={labelId}
+          />
+          <DataListItemCells dataListCells={[
+            <DataListCell key="divider" className="pf-c-data-list__cell--divider">
+              <VerticalSeparator />
+            </DataListCell>,
+            <DataListCell key="org-name">
+              <span id={labelId}>
+                <Link
+                  to={`${detailUrl}`}
+                >
+                  <b>{name}</b>
+                </Link>
+              </span>
+            </DataListCell>,
+            <DataListCell key="org-members">
+              <span className="awx-c-list-group">
+                <Trans>Members</Trans>
+                <Badge className="awx-c-list-group--badge" isRead>
+                  {memberCount}
+                </Badge>
+              </span>
+              <span className="awx-c-list-group">
+                <Trans>Teams</Trans>
+                <Badge className="awx-c-list-group--badge" isRead>
+                  {teamCount}
+                </Badge>
+              </span>
+            </DataListCell>
+          ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
     );
   }
 }