sentry/tests/js/spec/views/__snapshots__/projectEnvironments.spec.jsx.snap

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

exports[`ProjectEnvironments render active renders empty message 1`] = `
<ProjectEnvironments
  location={
    Object {
      "pathname": "environments/",
    }
  }
  params={
    Object {
      "orgId": "org-slug",
      "projectId": "project-slug",
    }
  }
  routes={Array []}
>
  <div>
    <SettingsPageHeading
      noTitleStyles={false}
      tabs={
        <NavTabs
          underlined={true}
        >
          <ListLink
            activeClassName="active"
            index={true}
            isActive={[Function]}
            to="/org-slug/project-slug/settings/environments/"
          >
            Environments
          </ListLink>
          <ListLink
            activeClassName="active"
            index={true}
            isActive={[Function]}
            to="/org-slug/project-slug/settings/environments/hidden/"
          >
            Hidden
          </ListLink>
        </NavTabs>
      }
      title="Manage Environments"
    >
      <Wrapper
        tabs={
          <NavTabs
            underlined={true}
          >
            <ListLink
              activeClassName="active"
              index={true}
              isActive={[Function]}
              to="/org-slug/project-slug/settings/environments/"
            >
              Environments
            </ListLink>
            <ListLink
              activeClassName="active"
              index={true}
              isActive={[Function]}
              to="/org-slug/project-slug/settings/environments/hidden/"
            >
              Hidden
            </ListLink>
          </NavTabs>
        }
      >
        <div
          className="css-1r5ylk7-Wrapper e1kblvez2"
        >
          <Flex
            align="center"
          >
            <Base
              align="center"
              className="css-5ipae5"
            >
              <div
                className="css-5ipae5"
                is={null}
              >
                <Title
                  styled={false}
                  tabs={
                    <NavTabs
                      underlined={true}
                    >
                      <ListLink
                        activeClassName="active"
                        index={true}
                        isActive={[Function]}
                        to="/org-slug/project-slug/settings/environments/"
                      >
                        Environments
                      </ListLink>
                      <ListLink
                        activeClassName="active"
                        index={true}
                        isActive={[Function]}
                        to="/org-slug/project-slug/settings/environments/hidden/"
                      >
                        Hidden
                      </ListLink>
                    </NavTabs>
                  }
                >
                  <Base
                    className="css-zs9eah-Title e1kblvez0"
                    tabs={
                      <NavTabs
                        underlined={true}
                      >
                        <ListLink
                          activeClassName="active"
                          index={true}
                          isActive={[Function]}
                          to="/org-slug/project-slug/settings/environments/"
                        >
                          Environments
                        </ListLink>
                        <ListLink
                          activeClassName="active"
                          index={true}
                          isActive={[Function]}
                          to="/org-slug/project-slug/settings/environments/hidden/"
                        >
                          Hidden
                        </ListLink>
                      </NavTabs>
                    }
                  >
                    <div
                      className="css-zs9eah-Title e1kblvez0"
                      is={null}
                      tabs={
                        <NavTabs
                          underlined={true}
                        >
                          <ListLink
                            activeClassName="active"
                            index={true}
                            isActive={[Function]}
                            to="/org-slug/project-slug/settings/environments/"
                          >
                            Environments
                          </ListLink>
                          <ListLink
                            activeClassName="active"
                            index={true}
                            isActive={[Function]}
                            to="/org-slug/project-slug/settings/environments/hidden/"
                          >
                            Hidden
                          </ListLink>
                        </NavTabs>
                      }
                    >
                      <HeaderTitle>
                        <h4
                          className="css-1w8ttcn-HeaderTitle e6lvex72"
                        >
                          Manage Environments
                        </h4>
                      </HeaderTitle>
                    </div>
                  </Base>
                </Title>
              </div>
            </Base>
          </Flex>
          <div>
            <NavTabs
              underlined={true}
            >
              <ul
                className="nav nav-tabs border-bottom"
              >
                <ListLink
                  activeClassName="active"
                  index={true}
                  isActive={[Function]}
                  to="/org-slug/project-slug/settings/environments/"
                >
                  <li
                    className="active"
                  >
                    <Link
                      onlyActiveOnIndex={true}
                      style={Object {}}
                      to="/org-slug/project-slug/settings/environments/"
                    >
                      <a
                        onClick={[Function]}
                        style={Object {}}
                      >
                        Environments
                      </a>
                    </Link>
                  </li>
                </ListLink>
                <ListLink
                  activeClassName="active"
                  index={true}
                  isActive={[Function]}
                  to="/org-slug/project-slug/settings/environments/hidden/"
                >
                  <li
                    className=""
                  >
                    <Link
                      onlyActiveOnIndex={true}
                      style={Object {}}
                      to="/org-slug/project-slug/settings/environments/hidden/"
                    >
                      <a
                        onClick={[Function]}
                        style={Object {}}
                      >
                        Hidden
                      </a>
                    </Link>
                  </li>
                </ListLink>
              </ul>
            </NavTabs>
          </div>
        </div>
      </Wrapper>
    </SettingsPageHeading>
    <PermissionAlert
      access={
        Array [
          "project:write",
        ]
      }
    >
      <AccessContainer
        access={
          Array [
            "project:write",
          ]
        }
      >
        <Access
          access={
            Array [
              "project:write",
            ]
          }
          configUser={
            Object {
              "email": "foo@example.com",
              "flags": Object {
                "newsletter_consent_prompt": false,
              },
              "hasPasswordAuth": true,
              "id": "1",
              "isAuthenticated": true,
              "name": "Foo Bar",
              "options": Object {
                "timezone": "UTC",
              },
              "permissions": Set {},
              "username": "foo@example.com",
            }
          }
          organization={
            Object {
              "access": Array [
                "org:read",
                "org:write",
                "org:admin",
                "project:read",
                "project:write",
                "project:admin",
                "team:read",
                "team:write",
                "team:admin",
              ],
              "features": Array [],
              "id": "3",
              "name": "Organization Name",
              "onboardingTasks": Array [],
              "projects": Array [],
              "scrapeJavaScript": true,
              "slug": "org-slug",
              "status": Object {
                "id": "active",
                "name": "active",
              },
              "teams": Array [],
            }
          }
          renderNoAccessMessage={false}
          requireAll={true}
        />
      </AccessContainer>
    </PermissionAlert>
    <Panel>
      <Component
        className="css-yahxlu-Panel e1laxa7d0"
      >
        <div
          className="css-yahxlu-Panel e1laxa7d0"
        >
          <PanelHeader>
            <Component
              className="css-xhx6pj-PanelHeader-getPadding e1p8v8nv0"
            >
              <Flex
                align="center"
                className="css-xhx6pj-PanelHeader-getPadding e1p8v8nv0"
                justify="space-between"
              >
                <Base
                  align="center"
                  className="e1p8v8nv0 css-b7ices-PanelHeader-getPadding"
                  justify="space-between"
                >
                  <div
                    className="e1p8v8nv0 css-b7ices-PanelHeader-getPadding"
                    is={null}
                  >
                    Active Environments
                  </div>
                </Base>
              </Flex>
            </Component>
          </PanelHeader>
          <PanelBody
            direction="column"
            disablePadding={true}
            flex={false}
          >
            <div
              className="css-9vq8an-textStyles"
            >
              <EmptyMessage>
                <Wrapper>
                  <div
                    className="css-ev9qm0-Wrapper eh488yo0"
                  >
                    <Description
                      noMargin={true}
                    >
                      <Component
                        className="css-pwn5v-TextBlock-Description-MarginStyles eh488yo1"
                        noMargin={true}
                      >
                        <div
                          className="css-pwn5v-TextBlock-Description-MarginStyles eh488yo1"
                        >
                          You don't have any environments yet.
                        </div>
                      </Component>
                    </Description>
                  </div>
                </Wrapper>
              </EmptyMessage>
            </div>
          </PanelBody>
        </div>
      </Component>
    </Panel>
  </div>
</ProjectEnvironments>
`;

exports[`ProjectEnvironments render active renders environment list and sets staging as default env 1`] = `
<ProjectEnvironments
  location={
    Object {
      "pathname": "environments/",
    }
  }
  params={
    Object {
      "orgId": "org-slug",
      "projectId": "project-slug",
    }
  }
  routes={Array []}
>
  <div>
    <SettingsPageHeading
      noTitleStyles={false}
      tabs={
        <NavTabs
          underlined={true}
        >
          <ListLink
            activeClassName="active"
            index={true}
            isActive={[Function]}
            to="/org-slug/project-slug/settings/environments/"
          >
            Environments
          </ListLink>
          <ListLink
            activeClassName="active"
            index={true}
            isActive={[Function]}
            to="/org-slug/project-slug/settings/environments/hidden/"
          >
            Hidden
          </ListLink>
        </NavTabs>
      }
      title="Manage Environments"
    >
      <Wrapper
        tabs={
          <NavTabs
            underlined={true}
          >
            <ListLink
              activeClassName="active"
              index={true}
              isActive={[Function]}
              to="/org-slug/project-slug/settings/environments/"
            >
              Environments
            </ListLink>
            <ListLink
              activeClassName="active"
              index={true}
              isActive={[Function]}
              to="/org-slug/project-slug/settings/environments/hidden/"
            >
              Hidden
            </ListLink>
          </NavTabs>
        }
      >
        <div
          className="css-1r5ylk7-Wrapper e1kblvez2"
        >
          <Flex
            align="center"
          >
            <Base
              align="center"
              className="css-5ipae5"
            >
              <div
                className="css-5ipae5"
                is={null}
              >
                <Title
                  styled={false}
                  tabs={
                    <NavTabs
                      underlined={true}
                    >
                      <ListLink
                        activeClassName="active"
                        index={true}
                        isActive={[Function]}
                        to="/org-slug/project-slug/settings/environments/"
                      >
                        Environments
                      </ListLink>
                      <ListLink
                        activeClassName="active"
                        index={true}
                        isActive={[Function]}
                        to="/org-slug/project-slug/settings/environments/hidden/"
                      >
                        Hidden
                      </ListLink>
                    </NavTabs>
                  }
                >
                  <Base
                    className="css-zs9eah-Title e1kblvez0"
                    tabs={
                      <NavTabs
                        underlined={true}
                      >
                        <ListLink
                          activeClassName="active"
                          index={true}
                          isActive={[Function]}
                          to="/org-slug/project-slug/settings/environments/"
                        >
                          Environments
                        </ListLink>
                        <ListLink
                          activeClassName="active"
                          index={true}
                          isActive={[Function]}
                          to="/org-slug/project-slug/settings/environments/hidden/"
                        >
                          Hidden
                        </ListLink>
                      </NavTabs>
                    }
                  >
                    <div
                      className="css-zs9eah-Title e1kblvez0"
                      is={null}
                      tabs={
                        <NavTabs
                          underlined={true}
                        >
                          <ListLink
                            activeClassName="active"
                            index={true}
                            isActive={[Function]}
                            to="/org-slug/project-slug/settings/environments/"
                          >
                            Environments
                          </ListLink>
                          <ListLink
                            activeClassName="active"
                            index={true}
                            isActive={[Function]}
                            to="/org-slug/project-slug/settings/environments/hidden/"
                          >
                            Hidden
                          </ListLink>
                        </NavTabs>
                      }
                    >
                      <HeaderTitle>
                        <h4
                          className="css-1w8ttcn-HeaderTitle e6lvex72"
                        >
                          Manage Environments
                        </h4>
                      </HeaderTitle>
                    </div>
                  </Base>
                </Title>
              </div>
            </Base>
          </Flex>
          <div>
            <NavTabs
              underlined={true}
            >
              <ul
                className="nav nav-tabs border-bottom"
              >
                <ListLink
                  activeClassName="active"
                  index={true}
                  isActive={[Function]}
                  to="/org-slug/project-slug/settings/environments/"
                >
                  <li
                    className="active"
                  >
                    <Link
                      onlyActiveOnIndex={true}
                      style={Object {}}
                      to="/org-slug/project-slug/settings/environments/"
                    >
                      <a
                        onClick={[Function]}
                        style={Object {}}
                      >
                        Environments
                      </a>
                    </Link>
                  </li>
                </ListLink>
                <ListLink
                  activeClassName="active"
                  index={true}
                  isActive={[Function]}
                  to="/org-slug/project-slug/settings/environments/hidden/"
                >
                  <li
                    className=""
                  >
                    <Link
                      onlyActiveOnIndex={true}
                      style={Object {}}
                      to="/org-slug/project-slug/settings/environments/hidden/"
                    >
                      <a
                        onClick={[Function]}
                        style={Object {}}
                      >
                        Hidden
                      </a>
                    </Link>
                  </li>
                </ListLink>
              </ul>
            </NavTabs>
          </div>
        </div>
      </Wrapper>
    </SettingsPageHeading>
    <PermissionAlert
      access={
        Array [
          "project:write",
        ]
      }
    >
      <AccessContainer
        access={
          Array [
            "project:write",
          ]
        }
      >
        <Access
          access={
            Array [
              "project:write",
            ]
          }
          configUser={
            Object {
              "email": "foo@example.com",
              "flags": Object {
                "newsletter_consent_prompt": false,
              },
              "hasPasswordAuth": true,
              "id": "1",
              "isAuthenticated": true,
              "name": "Foo Bar",
              "options": Object {
                "timezone": "UTC",
              },
              "permissions": Set {},
              "username": "foo@example.com",
            }
          }
          organization={
            Object {
              "access": Array [
                "org:read",
                "org:write",
                "org:admin",
                "project:read",
                "project:write",
                "project:admin",
                "team:read",
                "team:write",
                "team:admin",
              ],
              "features": Array [],
              "id": "3",
              "name": "Organization Name",
              "onboardingTasks": Array [],
              "projects": Array [],
              "scrapeJavaScript": true,
              "slug": "org-slug",
              "status": Object {
                "id": "active",
                "name": "active",
              },
              "teams": Array [],
            }
          }
          renderNoAccessMessage={false}
          requireAll={true}
        />
      </AccessContainer>
    </PermissionAlert>
    <Panel>
      <Component
        className="css-yahxlu-Panel e1laxa7d0"
      >
        <div
          className="css-yahxlu-Panel e1laxa7d0"
        >
          <PanelHeader>
            <Component
              className="css-xhx6pj-PanelHeader-getPadding e1p8v8nv0"
            >
              <Flex
                align="center"
                className="css-xhx6pj-PanelHeader-getPadding e1p8v8nv0"
                justify="space-between"
              >
                <Base
                  align="center"
                  className="e1p8v8nv0 css-b7ices-PanelHeader-getPadding"
                  justify="space-between"
                >
                  <div
                    className="e1p8v8nv0 css-b7ices-PanelHeader-getPadding"
                    is={null}
                  >
                    Active Environments
                  </div>
                </Base>
              </Flex>
            </Component>
          </PanelHeader>
          <PanelBody
            direction="column"
            disablePadding={true}
            flex={false}
          >
            <div
              className="css-9vq8an-textStyles"
            >
              <EnvironmentRow
                environment={
                  Object {
                    "displayName": "All Environments",
                    "id": "__all_environments__",
                    "name": "__all_environments__",
                  }
                }
                isDefault={false}
                isSystemRow={true}
                name="__all_environments__"
                onSetAsDefault={[Function]}
                shouldShowSetDefault={true}
              >
                <PanelItem
                  align="center"
                  justify="space-between"
                  p={2}
                >
                  <Base
                    align="center"
                    className="css-1uaastv-PanelItem eo8n7lk0"
                    justify="space-between"
                    p={2}
                  >
                    <div
                      className="css-1uaastv-PanelItem eo8n7lk0"
                      is={null}
                    >
                      <Flex
                        align="center"
                      >
                        <Base
                          align="center"
                          className="css-5ipae5"
                        >
                          <div
                            className="css-5ipae5"
                            is={null}
                          >
                            All Environments
                          </div>
                        </Base>
                      </Flex>
                      <AccessContainer
                        access={
                          Array [
                            "project:write",
                          ]
                        }
                      >
                        <Access
                          access={
                            Array [
                              "project:write",
                            ]
                          }
                          configUser={
                            Object {
                              "email": "foo@example.com",
                              "flags": Object {
                                "newsletter_consent_prompt": false,
                              },
                              "hasPasswordAuth": true,
                              "id": "1",
                              "isAuthenticated": true,
                              "name": "Foo Bar",
                              "options": Object {
                                "timezone": "UTC",
                              },
                              "permissions": Set {},
                              "username": "foo@example.com",
                            }
                          }
                          organization={
                            Object {
                              "access": Array [
                                "org:read",
                                "org:write",
                                "org:admin",
                                "project:read",
                                "project:write",
                                "project:admin",
                                "team:read",
                                "team:write",
                                "team:admin",
                              ],
                              "features": Array [],
                              "id": "3",
                              "name": "Organization Name",
                              "onboardingTasks": Array [],
                              "projects": Array [],
                              "scrapeJavaScript": true,
                              "slug": "org-slug",
                              "status": Object {
                                "id": "active",
                                "name": "active",
                              },
                              "teams": Array [],
                            }
                          }
                          renderNoAccessMessage={false}
                          requireAll={true}
                        >
                          <div>
                            <EnvironmentButton
                              disabled={false}
                              onClick={[Function]}
                              size="xsmall"
                            >
                              <Button
                                className="css-10adnmx-EnvironmentButton ezuela50"
                                disabled={false}
                                onClick={[Function]}
                                size="xsmall"
                              >
                                <StyledButton
                                  aria-label="Set as default"
                                  className="css-10adnmx-EnvironmentButton ezuela50"
                                  disabled={false}
                                  onClick={[Function]}
                                  role="button"
                                  size="xsmall"
                                >
                                  <Component
                                    aria-label="Set as default"
                                    className="ezuela50 css-fp1reu-StyledButton-getColors-EnvironmentButton eqrebog0"
                                    disabled={false}
                                    onClick={[Function]}
                                    role="button"
                                    size="xsmall"
                                  >
                                    <button
                                      aria-label="Set as default"
                                      className="ezuela50 css-fp1reu-StyledButton-getColors-EnvironmentButton eqrebog0"
                                      disabled={false}
                                      onClick={[Function]}
                                      role="button"
                                      size="xsmall"
                                    >
                                      <ButtonLabel
                                        size="xsmall"
                                      >
                                        <Component
                                          className="css-uthd1f-ButtonLabel eqrebog1"
                                          size="xsmall"
                                        >
                                          <span
                                            className="css-uthd1f-ButtonLabel eqrebog1"
                                          >
                                            Set as default
                                          </span>
                                        </Component>
                                      </ButtonLabel>
                                    </button>
                                  </Component>
                                </StyledButton>
                              </Button>
                            </EnvironmentButton>
                          </div>
                        </Access>
                      </AccessContainer>
                    </div>
                  </Base>
                </PanelItem>
              </EnvironmentRow>
              <EnvironmentRow
                actionText="Hide"
                environment={
                  Object {
                    "displayName": "Production",
                    "id": "1",
                    "name": "production",
                    "urlRoutingName": "production",
                  }
                }
                isDefault={false}
                isHidden={false}
                key="1"
                name="production"
                onHide={[Function]}
                onSetAsDefault={[Function]}
                shouldShowAction={true}
                shouldShowSetDefault={true}
              >
                <PanelItem
                  align="center"
                  justify="space-between"
                  p={2}
                >
                  <Base
                    align="center"
                    className="css-1uaastv-PanelItem eo8n7lk0"
                    justify="space-between"
                    p={2}
                  >
                    <div
                      className="css-1uaastv-PanelItem eo8n7lk0"
                      is={null}
                    >
                      <Flex
                        align="center"
                      >
                        <Base
                          align="center"
                          className="css-5ipae5"
                        >
                          <div
                            className="css-5ipae5"
                            is={null}
                          >
                            production
                          </div>
                        </Base>
                      </Flex>
                      <AccessContainer
                        access={
                          Array [
                            "project:write",
                          ]
                        }
                      >
                        <Access
                          access={
                            Array [
                              "project:write",
                            ]
                          }
                          configUser={
                            Object {
                              "email": "foo@example.com",
                              "flags": Object {
                                "newsletter_consent_prompt": false,
                              },
                              "hasPasswordAuth": true,
                              "id": "1",
                              "isAuthenticated": true,
                              "name": "Foo Bar",
                              "options": Object {
                                "timezone": "UTC",
                              },
                              "permissions": Set {},
                              "username": "foo@example.com",
                            }
                          }
                          organization={
                            Object {
                              "access": Array [
                                "org:read",
                                "org:write",
                                "org:admin",
                                "project:read",
                                "project:write",
                                "project:admin",
                                "team:read",
                                "team:write",
                                "team:admin",
                              ],
                              "features": Array [],
                              "id": "3",
                              "name": "Organization Name",
                              "onboardingTasks": Array [],
                              "projects": Array [],
                              "scrapeJavaScript": true,
                              "slug": "org-slug",
                              "status": Object {
                                "id": "active",
                                "name": "active",
                              },
                              "teams": Array [],
                            }
                          }
                          renderNoAccessMessage={false}
                          requireAll={true}
                        >
                          <div>
                            <EnvironmentButton
                              disabled={false}
                              onClick={[Function]}
                              size="xsmall"
                            >
                              <Button
                                className="css-10adnmx-EnvironmentButton ezuela50"
                                disabled={false}
                                onClick={[Function]}
                                size="xsmall"
                              >
                                <StyledButton
                                  aria-label="Set as default"
                                  className="css-10adnmx-EnvironmentButton ezuela50"
                                  disabled={false}
                                  onClick={[Function]}
                                  role="button"
                                  size="xsmall"
                                >
                                  <Component
                                    aria-label="Set as default"
                                    className="ezuela50 css-fp1reu-StyledButton-getColors-EnvironmentButton eqrebog0"
                                    disabled={false}
                                    onClick={[Function]}
                                    role="button"
                                    size="xsmall"
                                  >
                                    <button
                                      aria-label="Set as default"
                                      className="ezuela50 css-fp1reu-StyledButton-getColors-EnvironmentButton eqrebog0"
                                      disabled={false}
                                      onClick={[Function]}
                                      role="button"
                                      size="xsmall"
                                    >
                                      <ButtonLabel
                                        size="xsmall"
                                      >
                                        <Component
                                          className="css-uthd1f-ButtonLabel eqrebog1"
                                          size="xsmall"
                                        >
                                          <span
                                            className="css-uthd1f-ButtonLabel eqrebog1"
                                          >
                                            Set as default
                                          </span>
                                        </Component>
                                      </ButtonLabel>
                                    </button>
                                  </Component>
                                </StyledButton>
                              </Button>
                            </EnvironmentButton>
                            <EnvironmentButton
                              disabled={false}
                              onClick={[Function]}
                              size="xsmall"
                            >
                              <Button
                                className="css-10adnmx-EnvironmentButton ezuela50"
                                disabled={false}
                                onClick={[Function]}
                                size="xsmall"
                              >
                                <StyledButton
                                  aria-label="Hide"
                                  className="css-10adnmx-EnvironmentButton ezuela50"
                                  disabled={false}
                                  onClick={[Function]}
                                  role="button"
                                  size="xsmall"
                                >
                                  <Component
                                    aria-label="Hide"
                                    className="ezuela50 css-fp1reu-StyledButton-getColors-EnvironmentButton eqrebog0"
                                    disabled={false}
                                    onClick={[Function]}
                                    role="button"
                                    size="xsmall"
                                  >
                                    <button
                                      aria-label="Hide"
                                      className="ezuela50 css-fp1reu-StyledButton-getColors-EnvironmentButton eqrebog0"
                                      disabled={false}
                                      onClick={[Function]}
                                      role="button"
                                      size="xsmall"
                                    >
                                      <ButtonLabel
                                        size="xsmall"
                                      >
                                        <Component
                                          className="css-uthd1f-ButtonLabel eqrebog1"
                                          size="xsmall"
                                        >
                                          <span
                                            className="css-uthd1f-ButtonLabel eqrebog1"
                                          >
                                            Hide
                                          </span>
                                        </Component>
                                      </ButtonLabel>
                                    </button>
                                  </Component>
                                </StyledButton>
                              </Button>
                            </EnvironmentButton>
                          </div>
                        </Access>
                      </AccessContainer>
                    </div>
                  </Base>
                </PanelItem>
              </EnvironmentRow>
              <EnvironmentRow
                actionText="Hide"
                environment={
                  Object {
                    "displayName": "Staging",
                    "id": "2",
                    "name": "staging",
                    "urlRoutingName": "staging",
                  }
                }
                isDefault={true}
                isHidden={false}
                key="2"
                name="staging"
                onHide={[Function]}
                onSetAsDefault={[Function]}
                shouldShowAction={true}
                shouldShowSetDefault={false}
              >
                <PanelItem
                  align="center"
                  justify="space-between"
                  p={2}
                >
                  <Base
                    align="center"
                    className="css-1uaastv-PanelItem eo8n7lk0"
                    justify="space-between"
                    p={2}
                  >
                    <div
                      className="css-1uaastv-PanelItem eo8n7lk0"
                      is={null}
                    >
                      <Flex
                        align="center"
                      >
                        <Base
                          align="center"
                          className="css-5ipae5"
                        >
                          <div
                            className="css-5ipae5"
                            is={null}
                          >
                            staging
                            <Tag
                              ml={1}
                              priority="success"
                            >
                              <TagTextStyled
                                ml={1}
                                priority="success"
                              >
                                <Component
                                  className="css-d9oizi-TagTextStyled e6q9yfr0"
                                  ml={1}
                                  priority="success"
                                >
                                  <Box
                                    className="css-d9oizi-TagTextStyled e6q9yfr0"
                                    ml={1}
                                  >
                                    <Base
                                      className="e6q9yfr0 css-3cvk4g-TagTextStyled"
                                      ml={1}
                                    >
                                      <div
                                        className="e6q9yfr0 css-3cvk4g-TagTextStyled"
                                        is={null}
                                      >
                                        Default
                                      </div>
                                    </Base>
                                  </Box>
                                </Component>
                              </TagTextStyled>
                            </Tag>
                          </div>
                        </Base>
                      </Flex>
                      <AccessContainer
                        access={
                          Array [
                            "project:write",
                          ]
                        }
                      >
                        <Access
                          access={
                            Array [
                              "project:write",
                            ]
                          }
                          configUser={
                            Object {
                              "email": "foo@example.com",
                              "flags": Object {
                                "newsletter_consent_prompt": false,
                              },
                              "hasPasswordAuth": true,
                              "id": "1",
                              "isAuthenticated": true,
                              "name": "Foo Bar",
                              "options": Object {
                                "timezone": "UTC",
                              },
                              "permissions": Set {},
                              "username": "foo@example.com",
                            }
                          }
                          organization={
                            Object {
                              "access": Array [
                                "org:read",
                                "org:write",
                                "org:admin",
                                "project:read",
                                "project:write",
                                "project:admin",
                                "team:read",
                                "team:write",
                                "team:admin",
                              ],
                              "features": Array [],
                              "id": "3",
                              "name": "Organization Name",
                              "onboardingTasks": Array [],
                              "projects": Array [],
                              "scrapeJavaScript": true,
                              "slug": "org-slug",
                              "status": Object {
                                "id": "active",
                                "name": "active",
                              },
                              "teams": Array [],
                            }
                          }
                          renderNoAccessMessage={false}
                          requireAll={true}
                        >
                          <div>
                            <EnvironmentButton
                              disabled={false}
                              onClick={[Function]}
                              size="xsmall"
                            >
                              <Button
                                className="css-10adnmx-EnvironmentButton ezuela50"
                                disabled={false}
                                onClick={[Function]}
                                size="xsmall"
                              >
                                <StyledButton
                                  aria-label="Hide"
                                  className="css-10adnmx-EnvironmentButton ezuela50"
                                  disabled={false}
                                  onClick={[Function]}
                                  role="button"
                                  size="xsmall"
                                >
                                  <Component
                                    aria-label="Hide"
                                    className="ezuela50 css-fp1reu-StyledButton-getColors-EnvironmentButton eqrebog0"
                                    disabled={false}
                                    onClick={[Function]}
                                    role="button"
                                    size="xsmall"
                                  >
                                    <button
                                      aria-label="Hide"
                                      className="ezuela50 css-fp1reu-StyledButton-getColors-EnvironmentButton eqrebog0"
                                      disabled={false}
                                      onClick={[Function]}
                                      role="button"
                                      size="xsmall"
                                    >
                                      <ButtonLabel
                                        size="xsmall"
                                      >
                                        <Component
                                          className="css-uthd1f-ButtonLabel eqrebog1"
                                          size="xsmall"
                                        >
                                          <span
                                            className="css-uthd1f-ButtonLabel eqrebog1"
                                          >
                                            Hide
                                          </span>
                                        </Component>
                                      </ButtonLabel>
                                    </button>
                                  </Component>
                                </StyledButton>
                              </Button>
                            </EnvironmentButton>
                          </div>
                        </Access>
                      </AccessContainer>
                    </div>
                  </Base>
                </PanelItem>
              </EnvironmentRow>
            </div>
          </PanelBody>
        </div>
      </Component>
    </Panel>
  </div>
</ProjectEnvironments>
`;

exports[`ProjectEnvironments render hidden renders empty message 1`] = `
<ProjectEnvironments
  location={
    Object {
      "pathname": "environments/hidden/",
    }
  }
  params={
    Object {
      "orgId": "org-slug",
      "projectId": "project-slug",
    }
  }
  routes={Array []}
>
  <div>
    <SettingsPageHeading
      noTitleStyles={false}
      tabs={
        <NavTabs
          underlined={true}
        >
          <ListLink
            activeClassName="active"
            index={true}
            isActive={[Function]}
            to="/org-slug/project-slug/settings/environments/"
          >
            Environments
          </ListLink>
          <ListLink
            activeClassName="active"
            index={true}
            isActive={[Function]}
            to="/org-slug/project-slug/settings/environments/hidden/"
          >
            Hidden
          </ListLink>
        </NavTabs>
      }
      title="Manage Environments"
    >
      <Wrapper
        tabs={
          <NavTabs
            underlined={true}
          >
            <ListLink
              activeClassName="active"
              index={true}
              isActive={[Function]}
              to="/org-slug/project-slug/settings/environments/"
            >
              Environments
            </ListLink>
            <ListLink
              activeClassName="active"
              index={true}
              isActive={[Function]}
              to="/org-slug/project-slug/settings/environments/hidden/"
            >
              Hidden
            </ListLink>
          </NavTabs>
        }
      >
        <div
          className="css-1r5ylk7-Wrapper e1kblvez2"
        >
          <Flex
            align="center"
          >
            <Base
              align="center"
              className="css-5ipae5"
            >
              <div
                className="css-5ipae5"
                is={null}
              >
                <Title
                  styled={false}
                  tabs={
                    <NavTabs
                      underlined={true}
                    >
                      <ListLink
                        activeClassName="active"
                        index={true}
                        isActive={[Function]}
                        to="/org-slug/project-slug/settings/environments/"
                      >
                        Environments
                      </ListLink>
                      <ListLink
                        activeClassName="active"
                        index={true}
                        isActive={[Function]}
                        to="/org-slug/project-slug/settings/environments/hidden/"
                      >
                        Hidden
                      </ListLink>
                    </NavTabs>
                  }
                >
                  <Base
                    className="css-zs9eah-Title e1kblvez0"
                    tabs={
                      <NavTabs
                        underlined={true}
                      >
                        <ListLink
                          activeClassName="active"
                          index={true}
                          isActive={[Function]}
                          to="/org-slug/project-slug/settings/environments/"
                        >
                          Environments
                        </ListLink>
                        <ListLink
                          activeClassName="active"
                          index={true}
                          isActive={[Function]}
                          to="/org-slug/project-slug/settings/environments/hidden/"
                        >
                          Hidden
                        </ListLink>
                      </NavTabs>
                    }
                  >
                    <div
                      className="css-zs9eah-Title e1kblvez0"
                      is={null}
                      tabs={
                        <NavTabs
                          underlined={true}
                        >
                          <ListLink
                            activeClassName="active"
                            index={true}
                            isActive={[Function]}
                            to="/org-slug/project-slug/settings/environments/"
                          >
                            Environments
                          </ListLink>
                          <ListLink
                            activeClassName="active"
                            index={true}
                            isActive={[Function]}
                            to="/org-slug/project-slug/settings/environments/hidden/"
                          >
                            Hidden
                          </ListLink>
                        </NavTabs>
                      }
                    >
                      <HeaderTitle>
                        <h4
                          className="css-1w8ttcn-HeaderTitle e6lvex72"
                        >
                          Manage Environments
                        </h4>
                      </HeaderTitle>
                    </div>
                  </Base>
                </Title>
              </div>
            </Base>
          </Flex>
          <div>
            <NavTabs
              underlined={true}
            >
              <ul
                className="nav nav-tabs border-bottom"
              >
                <ListLink
                  activeClassName="active"
                  index={true}
                  isActive={[Function]}
                  to="/org-slug/project-slug/settings/environments/"
                >
                  <li
                    className=""
                  >
                    <Link
                      onlyActiveOnIndex={true}
                      style={Object {}}
                      to="/org-slug/project-slug/settings/environments/"
                    >
                      <a
                        onClick={[Function]}
                        style={Object {}}
                      >
                        Environments
                      </a>
                    </Link>
                  </li>
                </ListLink>
                <ListLink
                  activeClassName="active"
                  index={true}
                  isActive={[Function]}
                  to="/org-slug/project-slug/settings/environments/hidden/"
                >
                  <li
                    className="active"
                  >
                    <Link
                      onlyActiveOnIndex={true}
                      style={Object {}}
                      to="/org-slug/project-slug/settings/environments/hidden/"
                    >
                      <a
                        onClick={[Function]}
                        style={Object {}}
                      >
                        Hidden
                      </a>
                    </Link>
                  </li>
                </ListLink>
              </ul>
            </NavTabs>
          </div>
        </div>
      </Wrapper>
    </SettingsPageHeading>
    <PermissionAlert
      access={
        Array [
          "project:write",
        ]
      }
    >
      <AccessContainer
        access={
          Array [
            "project:write",
          ]
        }
      >
        <Access
          access={
            Array [
              "project:write",
            ]
          }
          configUser={
            Object {
              "email": "foo@example.com",
              "flags": Object {
                "newsletter_consent_prompt": false,
              },
              "hasPasswordAuth": true,
              "id": "1",
              "isAuthenticated": true,
              "name": "Foo Bar",
              "options": Object {
                "timezone": "UTC",
              },
              "permissions": Set {},
              "username": "foo@example.com",
            }
          }
          organization={
            Object {
              "access": Array [
                "org:read",
                "org:write",
                "org:admin",
                "project:read",
                "project:write",
                "project:admin",
                "team:read",
                "team:write",
                "team:admin",
              ],
              "features": Array [],
              "id": "3",
              "name": "Organization Name",
              "onboardingTasks": Array [],
              "projects": Array [],
              "scrapeJavaScript": true,
              "slug": "org-slug",
              "status": Object {
                "id": "active",
                "name": "active",
              },
              "teams": Array [],
            }
          }
          renderNoAccessMessage={false}
          requireAll={true}
        />
      </AccessContainer>
    </PermissionAlert>
    <Panel>
      <Component
        className="css-yahxlu-Panel e1laxa7d0"
      >
        <div
          className="css-yahxlu-Panel e1laxa7d0"
        >
          <PanelHeader>
            <Component
              className="css-xhx6pj-PanelHeader-getPadding e1p8v8nv0"
            >
              <Flex
                align="center"
                className="css-xhx6pj-PanelHeader-getPadding e1p8v8nv0"
                justify="space-between"
              >
                <Base
                  align="center"
                  className="e1p8v8nv0 css-b7ices-PanelHeader-getPadding"
                  justify="space-between"
                >
                  <div
                    className="e1p8v8nv0 css-b7ices-PanelHeader-getPadding"
                    is={null}
                  >
                    Hidden
                  </div>
                </Base>
              </Flex>
            </Component>
          </PanelHeader>
          <PanelBody
            direction="column"
            disablePadding={true}
            flex={false}
          >
            <div
              className="css-9vq8an-textStyles"
            >
              <EmptyMessage>
                <Wrapper>
                  <div
                    className="css-ev9qm0-Wrapper eh488yo0"
                  >
                    <Description
                      noMargin={true}
                    >
                      <Component
                        className="css-pwn5v-TextBlock-Description-MarginStyles eh488yo1"
                        noMargin={true}
                      >
                        <div
                          className="css-pwn5v-TextBlock-Description-MarginStyles eh488yo1"
                        >
                          You don't have any hidden environments.
                        </div>
                      </Component>
                    </Description>
                  </div>
                </Wrapper>
              </EmptyMessage>
            </div>
          </PanelBody>
        </div>
      </Component>
    </Panel>
  </div>
</ProjectEnvironments>
`;

exports[`ProjectEnvironments render hidden renders environment list 1`] = `
<ProjectEnvironments
  location={
    Object {
      "pathname": "environments/hidden/",
    }
  }
  params={
    Object {
      "orgId": "org-slug",
      "projectId": "project-slug",
    }
  }
  routes={Array []}
>
  <div>
    <SettingsPageHeading
      noTitleStyles={false}
      tabs={
        <NavTabs
          underlined={true}
        >
          <ListLink
            activeClassName="active"
            index={true}
            isActive={[Function]}
            to="/org-slug/project-slug/settings/environments/"
          >
            Environments
          </ListLink>
          <ListLink
            activeClassName="active"
            index={true}
            isActive={[Function]}
            to="/org-slug/project-slug/settings/environments/hidden/"
          >
            Hidden
          </ListLink>
        </NavTabs>
      }
      title="Manage Environments"
    >
      <Wrapper
        tabs={
          <NavTabs
            underlined={true}
          >
            <ListLink
              activeClassName="active"
              index={true}
              isActive={[Function]}
              to="/org-slug/project-slug/settings/environments/"
            >
              Environments
            </ListLink>
            <ListLink
              activeClassName="active"
              index={true}
              isActive={[Function]}
              to="/org-slug/project-slug/settings/environments/hidden/"
            >
              Hidden
            </ListLink>
          </NavTabs>
        }
      >
        <div
          className="css-1r5ylk7-Wrapper e1kblvez2"
        >
          <Flex
            align="center"
          >
            <Base
              align="center"
              className="css-5ipae5"
            >
              <div
                className="css-5ipae5"
                is={null}
              >
                <Title
                  styled={false}
                  tabs={
                    <NavTabs
                      underlined={true}
                    >
                      <ListLink
                        activeClassName="active"
                        index={true}
                        isActive={[Function]}
                        to="/org-slug/project-slug/settings/environments/"
                      >
                        Environments
                      </ListLink>
                      <ListLink
                        activeClassName="active"
                        index={true}
                        isActive={[Function]}
                        to="/org-slug/project-slug/settings/environments/hidden/"
                      >
                        Hidden
                      </ListLink>
                    </NavTabs>
                  }
                >
                  <Base
                    className="css-zs9eah-Title e1kblvez0"
                    tabs={
                      <NavTabs
                        underlined={true}
                      >
                        <ListLink
                          activeClassName="active"
                          index={true}
                          isActive={[Function]}
                          to="/org-slug/project-slug/settings/environments/"
                        >
                          Environments
                        </ListLink>
                        <ListLink
                          activeClassName="active"
                          index={true}
                          isActive={[Function]}
                          to="/org-slug/project-slug/settings/environments/hidden/"
                        >
                          Hidden
                        </ListLink>
                      </NavTabs>
                    }
                  >
                    <div
                      className="css-zs9eah-Title e1kblvez0"
                      is={null}
                      tabs={
                        <NavTabs
                          underlined={true}
                        >
                          <ListLink
                            activeClassName="active"
                            index={true}
                            isActive={[Function]}
                            to="/org-slug/project-slug/settings/environments/"
                          >
                            Environments
                          </ListLink>
                          <ListLink
                            activeClassName="active"
                            index={true}
                            isActive={[Function]}
                            to="/org-slug/project-slug/settings/environments/hidden/"
                          >
                            Hidden
                          </ListLink>
                        </NavTabs>
                      }
                    >
                      <HeaderTitle>
                        <h4
                          className="css-1w8ttcn-HeaderTitle e6lvex72"
                        >
                          Manage Environments
                        </h4>
                      </HeaderTitle>
                    </div>
                  </Base>
                </Title>
              </div>
            </Base>
          </Flex>
          <div>
            <NavTabs
              underlined={true}
            >
              <ul
                className="nav nav-tabs border-bottom"
              >
                <ListLink
                  activeClassName="active"
                  index={true}
                  isActive={[Function]}
                  to="/org-slug/project-slug/settings/environments/"
                >
                  <li
                    className=""
                  >
                    <Link
                      onlyActiveOnIndex={true}
                      style={Object {}}
                      to="/org-slug/project-slug/settings/environments/"
                    >
                      <a
                        onClick={[Function]}
                        style={Object {}}
                      >
                        Environments
                      </a>
                    </Link>
                  </li>
                </ListLink>
                <ListLink
                  activeClassName="active"
                  index={true}
                  isActive={[Function]}
                  to="/org-slug/project-slug/settings/environments/hidden/"
                >
                  <li
                    className="active"
                  >
                    <Link
                      onlyActiveOnIndex={true}
                      style={Object {}}
                      to="/org-slug/project-slug/settings/environments/hidden/"
                    >
                      <a
                        onClick={[Function]}
                        style={Object {}}
                      >
                        Hidden
                      </a>
                    </Link>
                  </li>
                </ListLink>
              </ul>
            </NavTabs>
          </div>
        </div>
      </Wrapper>
    </SettingsPageHeading>
    <PermissionAlert
      access={
        Array [
          "project:write",
        ]
      }
    >
      <AccessContainer
        access={
          Array [
            "project:write",
          ]
        }
      >
        <Access
          access={
            Array [
              "project:write",
            ]
          }
          configUser={
            Object {
              "email": "foo@example.com",
              "flags": Object {
                "newsletter_consent_prompt": false,
              },
              "hasPasswordAuth": true,
              "id": "1",
              "isAuthenticated": true,
              "name": "Foo Bar",
              "options": Object {
                "timezone": "UTC",
              },
              "permissions": Set {},
              "username": "foo@example.com",
            }
          }
          organization={
            Object {
              "access": Array [
                "org:read",
                "org:write",
                "org:admin",
                "project:read",
                "project:write",
                "project:admin",
                "team:read",
                "team:write",
                "team:admin",
              ],
              "features": Array [],
              "id": "3",
              "name": "Organization Name",
              "onboardingTasks": Array [],
              "projects": Array [],
              "scrapeJavaScript": true,
              "slug": "org-slug",
              "status": Object {
                "id": "active",
                "name": "active",
              },
              "teams": Array [],
            }
          }
          renderNoAccessMessage={false}
          requireAll={true}
        />
      </AccessContainer>
    </PermissionAlert>
    <Panel>
      <Component
        className="css-yahxlu-Panel e1laxa7d0"
      >
        <div
          className="css-yahxlu-Panel e1laxa7d0"
        >
          <PanelHeader>
            <Component
              className="css-xhx6pj-PanelHeader-getPadding e1p8v8nv0"
            >
              <Flex
                align="center"
                className="css-xhx6pj-PanelHeader-getPadding e1p8v8nv0"
                justify="space-between"
              >
                <Base
                  align="center"
                  className="e1p8v8nv0 css-b7ices-PanelHeader-getPadding"
                  justify="space-between"
                >
                  <div
                    className="e1p8v8nv0 css-b7ices-PanelHeader-getPadding"
                    is={null}
                  >
                    Hidden
                  </div>
                </Base>
              </Flex>
            </Component>
          </PanelHeader>
          <PanelBody
            direction="column"
            disablePadding={true}
            flex={false}
          >
            <div
              className="css-9vq8an-textStyles"
            >
              <EnvironmentRow
                actionText="Show"
                environment={
                  Object {
                    "displayName": "Zzz",
                    "id": "1",
                    "name": "zzz",
                    "urlRoutingName": "zzz",
                  }
                }
                isDefault={false}
                isHidden={true}
                key="1"
                name="zzz"
                onHide={[Function]}
                onSetAsDefault={[Function]}
                shouldShowAction={true}
                shouldShowSetDefault={false}
              >
                <PanelItem
                  align="center"
                  justify="space-between"
                  p={2}
                >
                  <Base
                    align="center"
                    className="css-1uaastv-PanelItem eo8n7lk0"
                    justify="space-between"
                    p={2}
                  >
                    <div
                      className="css-1uaastv-PanelItem eo8n7lk0"
                      is={null}
                    >
                      <Flex
                        align="center"
                      >
                        <Base
                          align="center"
                          className="css-5ipae5"
                        >
                          <div
                            className="css-5ipae5"
                            is={null}
                          >
                            zzz
                          </div>
                        </Base>
                      </Flex>
                      <AccessContainer
                        access={
                          Array [
                            "project:write",
                          ]
                        }
                      >
                        <Access
                          access={
                            Array [
                              "project:write",
                            ]
                          }
                          configUser={
                            Object {
                              "email": "foo@example.com",
                              "flags": Object {
                                "newsletter_consent_prompt": false,
                              },
                              "hasPasswordAuth": true,
                              "id": "1",
                              "isAuthenticated": true,
                              "name": "Foo Bar",
                              "options": Object {
                                "timezone": "UTC",
                              },
                              "permissions": Set {},
                              "username": "foo@example.com",
                            }
                          }
                          organization={
                            Object {
                              "access": Array [
                                "org:read",
                                "org:write",
                                "org:admin",
                                "project:read",
                                "project:write",
                                "project:admin",
                                "team:read",
                                "team:write",
                                "team:admin",
                              ],
                              "features": Array [],
                              "id": "3",
                              "name": "Organization Name",
                              "onboardingTasks": Array [],
                              "projects": Array [],
                              "scrapeJavaScript": true,
                              "slug": "org-slug",
                              "status": Object {
                                "id": "active",
                                "name": "active",
                              },
                              "teams": Array [],
                            }
                          }
                          renderNoAccessMessage={false}
                          requireAll={true}
                        >
                          <div>
                            <EnvironmentButton
                              disabled={false}
                              onClick={[Function]}
                              size="xsmall"
                            >
                              <Button
                                className="css-10adnmx-EnvironmentButton ezuela50"
                                disabled={false}
                                onClick={[Function]}
                                size="xsmall"
                              >
                                <StyledButton
                                  aria-label="Show"
                                  className="css-10adnmx-EnvironmentButton ezuela50"
                                  disabled={false}
                                  onClick={[Function]}
                                  role="button"
                                  size="xsmall"
                                >
                                  <Component
                                    aria-label="Show"
                                    className="ezuela50 css-fp1reu-StyledButton-getColors-EnvironmentButton eqrebog0"
                                    disabled={false}
                                    onClick={[Function]}
                                    role="button"
                                    size="xsmall"
                                  >
                                    <button
                                      aria-label="Show"
                                      className="ezuela50 css-fp1reu-StyledButton-getColors-EnvironmentButton eqrebog0"
                                      disabled={false}
                                      onClick={[Function]}
                                      role="button"
                                      size="xsmall"
                                    >
                                      <ButtonLabel
                                        size="xsmall"
                                      >
                                        <Component
                                          className="css-uthd1f-ButtonLabel eqrebog1"
                                          size="xsmall"
                                        >
                                          <span
                                            className="css-uthd1f-ButtonLabel eqrebog1"
                                          >
                                            Show
                                          </span>
                                        </Component>
                                      </ButtonLabel>
                                    </button>
                                  </Component>
                                </StyledButton>
                              </Button>
                            </EnvironmentButton>
                          </div>
                        </Access>
                      </AccessContainer>
                    </div>
                  </Base>
                </PanelItem>
              </EnvironmentRow>
            </div>
          </PanelBody>
        </div>
      </Component>
    </Panel>
  </div>
</ProjectEnvironments>
`;