awx/src/App.jsx

import React, { Fragment } from 'react';
import { I18nProvider, I18n } from '@lingui/react';
import { t } from '@lingui/macro';
import {
  Redirect,
  Switch,
  withRouter
} from 'react-router-dom';

import {
  BackgroundImage,
  BackgroundImageSrc,
  Nav,
  NavList,
  Page,
  PageHeader,
  PageSidebar,
  Toolbar,
  ToolbarGroup,
  ToolbarItem
} from '@patternfly/react-core';
import { global_breakpoint_md as breakpointMd } from '@patternfly/react-tokens';

import api from './api';
import { API_LOGOUT } from './endpoints';

import HelpDropdown from './components/HelpDropdown';
import LogoutButton from './components/LogoutButton';
import TowerLogo from './components/TowerLogo';
import ConditionalRedirect from './components/ConditionalRedirect';
import NavExpandable from './components/NavExpandable';
import NavItem from './components/NavItem';

import Applications from './pages/Applications';
import Credentials from './pages/Credentials';
import CredentialTypes from './pages/CredentialTypes';
import Dashboard from './pages/Dashboard';
import InstanceGroups from './pages/InstanceGroups';
import Inventories from './pages/Inventories';
import InventoryScripts from './pages/InventoryScripts';
import Jobs from './pages/Jobs';
import Login from './pages/Login';
import ManagementJobs from './pages/ManagementJobs';
import NotificationTemplates from './pages/NotificationTemplates';
import Organizations from './pages/Organizations';
import Portal from './pages/Portal';
import Projects from './pages/Projects';
import Schedules from './pages/Schedules';
import AuthSettings from './pages/AuthSettings';
import JobsSettings from './pages/JobsSettings';
import SystemSettings from './pages/SystemSettings';
import UISettings from './pages/UISettings';
import License from './pages/License';
import Teams from './pages/Teams';
import Templates from './pages/Templates';
import Users from './pages/Users';

import ja from '../build/locales/ja/messages';
import en from '../build/locales/en/messages';

const catalogs = { en, ja };

// This spits out the language and the region.  Example: es-US
const language = (navigator.languages && navigator.languages[0])
|| navigator.language
|| navigator.userLanguage;

const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];


class App extends React.Component {
  constructor (props) {
    super(props);

    const isNavOpen = typeof window !== 'undefined' && window.innerWidth >= parseInt(breakpointMd.value, 10);
    this.state = {
      isNavOpen
    };
  }

  onNavToggle = () => {
    this.setState(({ isNavOpen }) => ({ isNavOpen: !isNavOpen }));
  };

  onLogoClick = () => {
    this.setState({ activeGroup: 'views_group' });
  }

  onDevLogout = async () => {
    await api.get(API_LOGOUT);
    this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
  }

  render () {
    const { isNavOpen } = this.state;
    const { logo, loginInfo, history } = this.props;

    const PageToolbar = (
      <Toolbar>
        <ToolbarGroup>
          <ToolbarItem>
            <HelpDropdown />
          </ToolbarItem>
          <ToolbarItem>
            <LogoutButton onDevLogout={() => this.onDevLogout()} />
          </ToolbarItem>
        </ToolbarGroup>
      </Toolbar>
    );

    return (
      <I18nProvider language={languageWithoutRegionCode} catalogs={catalogs}>
        <Fragment>
          <BackgroundImage
            src={{
              [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
              [BackgroundImageSrc.md]: '/assets/images/pfbg_992.jpg',
              [BackgroundImageSrc.md2x]: '/assets/images/pfbg_992@2x.jpg',
              [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
              [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
              [BackgroundImageSrc.xl]: '/assets/images/pfbg_2000.jpg',
              [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
              [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
              [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg'
            }}
          />
          <Switch>
            <ConditionalRedirect
              shouldRedirect={() => api.isAuthenticated()}
              redirectPath="/"
              path="/login"
              component={() => <Login logo={logo} loginInfo={loginInfo} />}
            />
            <Fragment>
              <Page
                header={(
                  <PageHeader
                    logo={<TowerLogo onClick={this.onLogoClick} />}
                    toolbar={PageToolbar}
                    showNavToggle
                    onNavToggle={this.onNavToggle}
                  />
                )}
                sidebar={(
                  <PageSidebar
                    isNavOpen={isNavOpen}
                    nav={(
                      <I18n>
                        {({ i18n }) => (
                          <Nav aria-label={i18n._(t`Primary Navigation`)}>
                            <NavList>
                              <NavExpandable
                                key="views"
                                groupId="views_group"
                                title={i18n._("Views")}>
                                  <NavItem key="home"
                                    to="/#/home"
                                    groupId="views_group">
                                    {i18n._("Dashboard")}
                                  </NavItem>
                                  <NavItem
                                    key="jobs"
                                    to="/#/jobs"
                                    groupId="views_group">
                                    {i18n._("Jobs")}
                                  </NavItem>
                                  <NavItem
                                    key="schedules"
                                    to="/#/schedules"
                                    groupId="views_group">
                                    {i18n._("Schedules")}
                                  </NavItem>
                                  <NavItem
                                    key="portal"
                                    to="/#/portal"
                                    groupId="views_group">
                                    {i18n._("Portal Mode")}
                                  </NavItem>
                              </NavExpandable>

                              <NavExpandable
                                key="resources"
                                groupId="resources_group"
                                title={i18n._("Resources")}>
                                  <NavItem key="templates"
                                    to="/#/templates"
                                    groupId="resources_group">
                                    {i18n._("Templates")}
                                  </NavItem>
                                  <NavItem
                                    key="credentials"
                                    to="/#/credentials"
                                    groupId="resources_group">
                                    {i18n._("Credentials")}
                                  </NavItem>
                                  <NavItem
                                    key="projects"
                                    to="/#/projects"
                                    groupId="resources_group">
                                    {i18n._("Projects")}
                                  </NavItem>
                                  <NavItem
                                    key="inventories"
                                    to="/#/inventories"
                                    groupId="resources_group">
                                    {i18n._("Inventories")}
                                  </NavItem>
                                  <NavItem
                                    key="inventory_scropts"
                                    to="/#/inventory_scripts"
                                    groupId="resources_group">
                                    {i18n._("Inventory Scripts")}
                                  </NavItem>
                              </NavExpandable>

                              <NavExpandable
                                key="access"
                                groupId="access_group"
                                title={i18n._("Access")}>
                                  <NavItem key="organizations"
                                    to="/#/organizations"
                                    groupId="access_group">
                                    {i18n._("Organizations")}
                                  </NavItem>
                                  <NavItem
                                    key="users"
                                    to="/#/users"
                                    groupId="access_group">
                                    {i18n._("Users")}
                                  </NavItem>
                                  <NavItem
                                    key="teams"
                                    to="/#/teams"
                                    groupId="access_group">
                                    {i18n._("Teams")}
                                  </NavItem>
                              </NavExpandable>

                              <NavExpandable
                                key="administration"
                                groupId="administration_group"
                                title={i18n._("Administration")}>
                                  <NavItem key="credential_types"
                                    to="/#/credential_types"
                                    groupId="administration_group">
                                    {i18n._("Credential Types")}
                                  </NavItem>
                                  <NavItem
                                    key="notification_templates"
                                    to="/#/notification_templates"
                                    groupId="administration_group">
                                    {i18n._("Notification Templates")}
                                  </NavItem>
                                  <NavItem
                                    key="management_jobs"
                                    to="/#/management_jobs"
                                    groupId="administration_group">
                                    {i18n._("Management Jobs")}
                                  </NavItem>
                                  <NavItem
                                    key="instance_groups"
                                    to="/#/instance_groups"
                                    groupId="administration_group">
                                    {i18n._("Instance Groups")}
                                  </NavItem>
                                  <NavItem
                                    key="applications"
                                    to="/#/applications"
                                    groupId="administration_group">
                                    {i18n._("Applications")}
                                  </NavItem>
                              </NavExpandable>


                              <NavExpandable
                                key="settings"
                                groupId="settings_group"
                                title={i18n._("Settings")}>
                                  <NavItem key="auth_settings"
                                    to="/#/auth_settings"
                                    groupId="auth_settings">
                                    {i18n._("Authentication")}
                                  </NavItem>
                                  <NavItem
                                    key="jobs_settings"
                                    to="/#/jobs_settings"
                                    groupId="settings_group">
                                    {i18n._("Jobs")}
                                  </NavItem>
                                  <NavItem
                                    key="s"
                                    to="/#/system_settings"
                                    groupId="settings_group">
                                    {i18n._("System")}
                                  </NavItem>
                                  <NavItem
                                    key="ui_settings"
                                    to="/#/ui_settings"
                                    groupId="settings_group">
                                    {i18n._("User Interface")}
                                  </NavItem>
                                  <NavItem
                                    key="license"
                                    to="/#/license"
                                    groupId="settings_group">
                                    {i18n._("License")}
                                  </NavItem>
                              </NavExpandable>

                            </NavList>
                          </Nav>
                        )}
                      </I18n>
                    )}
                  />
                )}
                useCondensed
              >
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" exact path="/" component={() => (<Redirect to="/home" />)} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/home" component={Dashboard} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs" component={Jobs} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/schedules" component={Schedules} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/portal" component={Portal} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/templates" component={Templates} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/credentials" component={Credentials} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/projects" component={Projects} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/inventories" component={Inventories} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/inventory_scripts" component={InventoryScripts} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/organizations" component={Organizations} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/users" component={Users} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/teams" component={Teams} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/credential_types" component={CredentialTypes} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/notification_templates" component={NotificationTemplates} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/management_jobs" component={ManagementJobs} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/instance_groups" component={InstanceGroups} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/applications" component={Applications} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/auth_settings" component={AuthSettings} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs_settings" component={JobsSettings} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/system_settings" component={SystemSettings} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/ui_settings" component={UISettings} />
                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/license" component={License} />
              </Page>
            </Fragment>
          </Switch>
        </Fragment>
      </I18nProvider>
    );
  }
}

export default withRouter(App);