Reorganize file locations/directory structure (#270)

Reorganize file locations

src/components/PageHeaderToolbar/PageHeaderToolbar.jsx

@@ -0,0 +1,142 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+  DropdownPosition,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarItem,
+  Tooltip
+} from '@patternfly/react-core';
+import { QuestionCircleIcon, UserIcon } from '@patternfly/react-icons';
+
+const DOCLINK = 'https://docs.ansible.com/ansible-tower/latest/html/userguide/index.html';
+
+class PageHeaderToolbar extends Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      isHelpOpen: false,
+      isUserOpen: false
+    };
+
+    this.handleHelpSelect = this.handleHelpSelect.bind(this);
+    this.handleHelpToggle = this.handleHelpToggle.bind(this);
+    this.handleUserSelect = this.handleUserSelect.bind(this);
+    this.handleUserToggle = this.handleUserToggle.bind(this);
+  }
+
+  handleHelpSelect () {
+    const { isHelpOpen } = this.state;
+
+    this.setState({ isHelpOpen: !isHelpOpen });
+  }
+
+  handleUserSelect () {
+    const { isUserOpen } = this.state;
+
+    this.setState({ isUserOpen: !isUserOpen });
+  }
+
+  handleHelpToggle (isOpen) {
+    this.setState({ isHelpOpen: isOpen });
+  }
+
+  handleUserToggle (isOpen) {
+    this.setState({ isUserOpen: isOpen });
+  }
+
+  render () {
+    const { isHelpOpen, isUserOpen } = this.state;
+    const {
+      isAboutDisabled,
+      onAboutClick,
+      onLogoutClick,
+      loggedInUser,
+      i18n
+    } = this.props;
+
+    return (
+      <Toolbar>
+        <ToolbarGroup>
+          <Tooltip position="left" content={<div>{i18n._(t`Info`)}</div>}>
+            <ToolbarItem>
+              <Dropdown
+                isPlain
+                isOpen={isHelpOpen}
+                position={DropdownPosition.right}
+                onSelect={this.handleHelpSelect}
+                toggle={(
+                  <DropdownToggle onToggle={this.handleHelpToggle}>
+                    <QuestionCircleIcon />
+                  </DropdownToggle>
+                )}
+                dropdownItems={[
+                  <DropdownItem key="help" target="_blank" href={DOCLINK}>
+                    {i18n._(t`Help`)}
+                  </DropdownItem>,
+                  <DropdownItem
+                    key="about"
+                    component="button"
+                    isDisabled={isAboutDisabled}
+                    onClick={onAboutClick}
+                  >
+                    {i18n._(t`About`)}
+                  </DropdownItem>
+                ]}
+              />
+            </ToolbarItem>
+          </Tooltip>
+          <Tooltip position="left" content={<div>User</div>}>
+            <ToolbarItem>
+              <Dropdown
+                isPlain
+                isOpen={isUserOpen}
+                position={DropdownPosition.right}
+                onSelect={this.handleUserSelect}
+                toggle={(
+                  <DropdownToggle onToggle={this.handleUserToggle}>
+                    <UserIcon />
+                    {loggedInUser && (
+                      <span style={{ marginLeft: '10px' }}>
+                        {loggedInUser.username}
+                      </span>
+                    )}
+                  </DropdownToggle>
+                )}
+                dropdownItems={[
+                  <DropdownItem key="user" href="#/home">
+                    {i18n._(t`User Details`)}
+                  </DropdownItem>,
+                  <DropdownItem
+                    key="logout"
+                    component="button"
+                    onClick={onLogoutClick}
+                  >
+                    {i18n._(t`Logout`)}
+                  </DropdownItem>
+                ]}
+              />
+            </ToolbarItem>
+          </Tooltip>
+        </ToolbarGroup>
+      </Toolbar>
+    );
+  }
+}
+
+PageHeaderToolbar.propTypes = {
+  isAboutDisabled: PropTypes.bool,
+  onAboutClick: PropTypes.func.isRequired,
+  onLogoutClick: PropTypes.func.isRequired
+};
+
+PageHeaderToolbar.defaultProps = {
+  isAboutDisabled: false
+};
+
+export default withI18n()(PageHeaderToolbar);

src/components/PageHeaderToolbar/PageHeaderToolbar.test.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import PageHeaderToolbar from './PageHeaderToolbar';
+
+describe('PageHeaderToolbar', () => {
+  const pageHelpDropdownSelector = 'Dropdown QuestionCircleIcon';
+  const pageUserDropdownSelector = 'Dropdown UserIcon';
+  const onAboutClick = jest.fn();
+  const onLogoutClick = jest.fn();
+
+  test('expected content is rendered on initialization', () => {
+    const wrapper = mountWithContexts(
+      <PageHeaderToolbar
+        onAboutClick={onAboutClick}
+        onLogoutClick={onLogoutClick}
+      />
+    );
+
+    expect(wrapper.find(pageHelpDropdownSelector)).toHaveLength(1);
+    expect(wrapper.find(pageUserDropdownSelector)).toHaveLength(1);
+  });
+
+  test('dropdowns have expected items and callbacks', () => {
+    const wrapper = mountWithContexts(
+      <PageHeaderToolbar
+        onAboutClick={onAboutClick}
+        onLogoutClick={onLogoutClick}
+      />
+    );
+    expect(wrapper.find('DropdownItem')).toHaveLength(0);
+    wrapper.find(pageHelpDropdownSelector).simulate('click');
+    expect(wrapper.find('DropdownItem')).toHaveLength(2);
+
+    const about = wrapper.find('DropdownItem li button');
+    about.simulate('click');
+    expect(onAboutClick).toHaveBeenCalled();
+
+    expect(wrapper.find('DropdownItem')).toHaveLength(0);
+    wrapper.find(pageUserDropdownSelector).simulate('click');
+    expect(wrapper.find('DropdownItem')).toHaveLength(2);
+
+    const logout = wrapper.find('DropdownItem li button');
+    logout.simulate('click');
+    expect(onLogoutClick).toHaveBeenCalled();
+  });
+});

src/components/PageHeaderToolbar/index.js

@@ -0,0 +1 @@
+export { default } from './PageHeaderToolbar';