Style job output navigation control bar

awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx

@@ -15,25 +15,21 @@ import ContentError from '@components/ContentError';
 import ContentLoading from '@components/ContentLoading';
 import JobEvent from './JobEvent';
 import JobEventSkeleton from './JobEventSkeleton';
-import MenuControls from './MenuControls';
+import PageControls from './PageControls';
 import HostEventModal from './HostEventModal';
 
 const OutputHeader = styled.div`
   font-weight: var(--pf-global--FontWeight--bold);
 `;
-const OutputToolbar = styled.div`
+
-  display: flex;
-  justify-content: flex-end;
-`;
 const OutputWrapper = styled.div`
-  height: calc(100vh - 350px);
   background-color: #fafafa;
-  margin-top: 24px;
-  font-family: monospace;
-  font-size: 15px;
-  outline: 1px solid #d7d7d7;
   display: flex;
   flex-direction: column;
+  font-family: monospace;
+  font-size: 15px;
+  height: calc(100vh - 350px);
+  outline: 1px solid #d7d7d7;
 `;
 const OutputFooter = styled.div`
   background-color: #ebebeb;
@@ -310,14 +306,12 @@ class JobOutput extends Component {
           />
         )}
         <OutputHeader>{job.name}</OutputHeader>
-        <OutputToolbar>
+        <PageControls
-          <MenuControls
+          onScrollFirst={this.handleScrollFirst}
-            onScrollFirst={this.handleScrollFirst}
+          onScrollLast={this.handleScrollLast}
-            onScrollLast={this.handleScrollLast}
+          onScrollNext={this.handleScrollNext}
-            onScrollNext={this.handleScrollNext}
+          onScrollPrevious={this.handleScrollPrevious}
-            onScrollPrevious={this.handleScrollPrevious}
+        />
-          />
-        </OutputToolbar>
         <OutputWrapper>
           <InfiniteLoader
             isRowLoaded={this.isRowLoaded}

awx/ui_next/src/screens/Job/JobOutput/JobOutput.test.jsx

@@ -21,14 +21,14 @@ async function checkOutput(wrapper, expectedLines) {
 }
 
 async function findScrollButtons(wrapper) {
-  const menuControls = await waitForElement(wrapper, 'MenuControls');
+  const pageControls = await waitForElement(wrapper, 'PageControls');
-  const scrollFirstButton = menuControls.find(
+  const scrollFirstButton = pageControls.find(
     'button[aria-label="scroll first"]'
   );
-  const scrollLastButton = menuControls.find(
+  const scrollLastButton = pageControls.find(
     'button[aria-label="scroll last"]'
   );
-  const scrollPreviousButton = menuControls.find(
+  const scrollPreviousButton = pageControls.find(
     'button[aria-label="scroll previous"]'
   );
   return {

awx/ui_next/src/screens/Job/JobOutput/PageControls.jsx

@@ -10,26 +10,25 @@ import {
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  display: grid;
+  display: flex;
-  grid-gap: 20px;
+  height: 35px;
-  grid-template-columns: repeat(5, 1fr);
+  outline: 1px solid #d7d7d7;
+  width: 100%;
 `;
 
 const Button = styled(PFButton)`
-  &:hover {
+  position: relative;
-    background-color: #0066cc;
+  z-index: 1;
-    color: white;
-  }
 `;
 
-const MenuControls = ({
+const PageControls = ({
   onScrollFirst,
   onScrollLast,
   onScrollNext,
   onScrollPrevious,
 }) => (
   <Wrapper>
-    <Button variant="plain">
+    <Button variant="plain" css="margin-right: auto">
       <PlusIcon />
     </Button>
     <Button
@@ -51,4 +50,4 @@ const MenuControls = ({
   </Wrapper>
 );
 
-export default MenuControls;
+export default PageControls;

awx/ui_next/src/screens/Job/JobOutput/PageControls.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import MenuControls from './MenuControls';
+import PageControls from './PageControls';
 
 let wrapper;
 let PlusIcon;
@@ -17,14 +17,14 @@ const findChildren = () => {
   AngleDownIcon = wrapper.find('AngleDownIcon');
 };
 
-describe('MenuControls', () => {
+describe('PageControls', () => {
   test('should render successfully', () => {
-    wrapper = mount(<MenuControls />);
+    wrapper = mount(<PageControls />);
     expect(wrapper).toHaveLength(1);
   });
 
   test('should render menu control icons', () => {
-    wrapper = mount(<MenuControls />);
+    wrapper = mount(<PageControls />);
     findChildren();
     expect(PlusIcon.length).toBe(1);
     expect(AngleDoubleUpIcon.length).toBe(1);