<commit_before>import { Brand, Button, ButtonVariant, Page, PageHeader, Toolbar, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
import * as React from 'react';
import logo from './assets/logo/RHD-logo.svg';
import { CogIcon } from '@patternfly/react-icons';
import style from './layout.module.scss';

export function Layout(props: { children: React.ReactNode }) {
  const PageToolbar = (
    <Toolbar>
      <ToolbarGroup>
        <ToolbarItem>
          <Button id="nav-toggle" aria-label="Overflow actions" variant={ButtonVariant.plain}>
            <CogIcon/>
          </Button>
        </ToolbarItem>
      </ToolbarGroup>
    </Toolbar>
  );

  const Header = (
    <PageHeader
      logo={<Brand src={logo} alt="Red Hat" className={style.brand}/>}
      toolbar={PageToolbar}
      className={style.header}
    />
  );

  return (
    <React.Fragment>
      <Page header={Header}>
        {props.children}
      </Page>
    </React.Fragment>
  );
}<commit_msg>feat: logout is now possible<commit_after>import {
  Brand,
  Dropdown,
  DropdownItem,
  DropdownToggle,
  Page,
  PageHeader,
  Toolbar,
  ToolbarGroup,
  ToolbarItem
} from '@patternfly/react-core';
import * as React from 'react';
import { useState } from 'react';
import logo from './assets/logo/RHD-logo.svg';
import style from './layout.module.scss';
import { useAuthApi } from 'keycloak-react';

export function Layout(props: { children: React.ReactNode }) {
  const [isUserDropdownOpen, setIsUserDropdownOpen] = useState(false);
  const auth = useAuthApi();
  const userDropdownItems = [
    <DropdownItem onClick={auth.logout} key="logout">Logout</DropdownItem>,
  ];
  const PageToolbar = auth.user && (
    <Toolbar>
      <ToolbarGroup>
        <ToolbarItem>
          <Dropdown
            isPlain
            position="right"
            onSelect={() => setIsUserDropdownOpen((prev) => !prev)}
            isOpen={isUserDropdownOpen}
            toggle={<DropdownToggle onToggle={setIsUserDropdownOpen}>{auth.user.userPreferredName}</DropdownToggle>}
            dropdownItems={userDropdownItems}
          />
        </ToolbarItem>
      </ToolbarGroup>
    </Toolbar>
  );

  const Header = (
    <PageHeader
      logo={<Brand src={logo} alt="Red Hat" className={style.brand}/>}
      toolbar={PageToolbar}
      className={style.header}
    />
  );

  return (
    <React.Fragment>
      <Page header={Header}>
        {props.children}
      </Page>
    </React.Fragment>
  );
}
{'fraction_non_alphanumeric': 0.1402020202020202, 'fraction_numerical': 0.0, 'mean_word_length': 2.93015873015873, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 37, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '654048', 'n_tokens_mistral': 758, 'n_tokens_neox': 771, 'n_words': 155}