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

exports[`SideNav populates the display build information using the response from the healthz endpoint 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#0d6de7"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Build date: 10/23/2018, Commit hash: 0a7b9e3"
    >
      <div
        className="envMetadata"
      >
        <span>
          Version: 
        </span>
        <a
          className="link unstyled"
          href="https://www.github.com/kubeflow/pipelines/commit/0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5"
          rel="noopener"
          target="_blank"
        >
          1.0.0
        </a>
      </div>
    </WithStyles(Tooltip)>
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders Pipelines as active page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#0d6de7"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders Pipelines as active when on PipelineDetails page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#0d6de7"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders collapsed state 1`] = `
<div
  className="root flexColumn noShrink collapsedRoot"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={false}
      disableHoverListener={false}
      disableTouchListener={false}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button active collapsedButton"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#0d6de7"
              />
            </div>
            <span
              className="collapsedLabel label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={false}
      disableHoverListener={false}
      disableTouchListener={false}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button collapsedButton"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="collapsedLabel label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={false}
      disableHoverListener={false}
      disableTouchListener={false}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button collapsedButton"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="collapsedLabel label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={false}
      disableHoverListener={false}
      disableTouchListener={false}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button collapsedButton"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="collapsedLabel label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={false}
      disableHoverListener={false}
      disableTouchListener={false}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button collapsedButton"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="collapsedLabel label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={false}
      disableHoverListener={false}
      disableTouchListener={false}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button collapsedButton"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="collapsedLabel label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator collapsedSeparator"
    />
    <ExternalUri
      collapsed={true}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={true}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator collapsedSeparator"
    />
    <WithStyles(IconButton)
      className="chevron collapsedChevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoHidden"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders expanded state 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#0d6de7"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders experiments as active page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#0d6de7"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders experiments as active page when on AllRuns page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders experiments as active page when on Compare page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders experiments as active page when on NewExperiment page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#0d6de7"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders experiments as active page when on NewRun page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders experiments as active page when on RecurringRunDetails page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders experiments as active page when on RunDetails page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders experiments as active when on ExperimentDetails page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#0d6de7"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav show jupyterhub link if accessible 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Open Jupyter Notebook"
    >
      <a
        className="unstyled"
        href="/hub/"
        id="jupyterhubBtn"
        rel="noopener"
        target="_blank"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(CodeIcon)
              style={
                Object {
                  "height": 20,
                  "width": 20,
                }
              }
            />
            <span
              className="label"
            >
              Notebooks
            </span>
            <pure(OpenInNewIcon)
              className="openInNewTabIcon"
            />
          </div>
        </WithStyles(Button)>
      </a>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;
