Move status icon into separate directory

* Remove ButtonGroup export

awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx

@@ -4,7 +4,7 @@ import { Button, Split, SplitItem } from '@patternfly/react-core';
 import styled from 'styled-components';
 import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
 import CodeMirrorInput from './CodeMirrorInput';
-import { ButtonGroup } from '.';
+import ButtonGroup from './ButtonGroup';
 import { JSON_MODE, YAML_MODE } from './constants';
 
 function formatJson(jsonString) {

awx/ui_next/src/components/CodeMirrorInput/YamlJsonToggle.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { oneOf, func } from 'prop-types';
 import styled from 'styled-components';
 import { Button } from '@patternfly/react-core';
-import { ButtonGroup } from '.';
+import ButtonGroup from './ButtonGroup';
 
 const SmallButton = styled(Button)`
   padding: 3px 8px;

awx/ui_next/src/components/CodeMirrorInput/index.js

@@ -4,4 +4,3 @@ export default CodeMirrorInput;
 export { default as VariablesDetail } from './VariablesDetail';
 export { default as VariablesInput } from './VariablesInput';
 export { default as VariablesField } from './VariablesField';
-export { default as ButtonGroup } from './ButtonGroup';

awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx

@@ -184,9 +184,7 @@ class ToolbarDeleteButton extends React.Component {
               </Button>,
             ]}
           >
-            <div css="margin-bottom: 16px;">
-              {i18n._(t`This action will delete the following:`)}
-            </div>
+            <div>{i18n._(t`This action will delete the following:`)}</div>
             {itemsToDelete.map(item => (
               <span key={item.id}>
                 <strong>{item.name || item.username}</strong>

awx/ui_next/src/components/Sparkline/Sparkline.jsx

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import { arrayOf, object } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { Link as _Link } from 'react-router-dom';
-import { StatusIcon } from '@components/Sparkline';
+import StatusIcon from '@components/StatusIcon';
 import { Tooltip } from '@patternfly/react-core';
 import styled from 'styled-components';
 import { t } from '@lingui/macro';

awx/ui_next/src/components/Sparkline/index.js

@@ -1,2 +1 @@
-export { default as Sparkline } from './Sparkline';
-export { default as StatusIcon } from './StatusIcon';
+export { default } from './Sparkline';

awx/ui_next/src/components/StatusIcon/StatusIcon.jsx

@@ -12,8 +12,12 @@ const Pulse = keyframes`
 `;
 
 const Wrapper = styled.div`
-  width: 14px;
+  align-items: center;
+  display: flex;
+  flex-flow: column nowrap;
   height: 14px;
+  margin: 5px 0;
+  width: 14px;
 `;
 
 const WhiteTop = styled.div`

awx/ui_next/src/components/StatusIcon/index.js

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

awx/ui_next/src/components/Workflow/WorkflowActionTooltipItem.test.jsx

@@ -4,7 +4,7 @@ import WorkflowActionTooltipItem from './WorkflowActionTooltipItem';
 
 describe('WorkflowActionTooltipItem', () => {
   test('successfully mounts', () => {
-    const wrapper = mount(<WorkflowActionTooltipItem />);
+    const wrapper = mount(<WorkflowActionTooltipItem id="node" />);
     expect(wrapper).toHaveLength(1);
   });
 });

awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx

@@ -9,7 +9,7 @@ import AlertModal from '@components/AlertModal';
 import ErrorDetail from '@components/ErrorDetail';
 import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
 import { VariablesDetail } from '@components/CodeMirrorInput';
-import { Sparkline } from '@components/Sparkline';
+import Sparkline from '@components/Sparkline';
 import DeleteButton from '@components/DeleteButton';
 import { HostsAPI } from '@api';
 
@@ -107,7 +107,6 @@ function HostDetail({ host, i18n, onUpdateHost }) {
       <DetailList gutter="sm">
         <Detail label={i18n._(t`Name`)} value={name} />
         <Detail
-          css="display: flex; flex: 1;"
           value={<Sparkline jobs={recentPlaybookJobs} />}
           label={i18n._(t`Activity`)}
         />

awx/ui_next/src/screens/Host/HostList/HostListItem.jsx

@@ -16,7 +16,7 @@ import {
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import { Sparkline } from '@components/Sparkline';
+import Sparkline from '@components/Sparkline';
 import { Host } from '@types';
 import styled from 'styled-components';
 

awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx

@@ -15,7 +15,7 @@ import {
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
-import { Sparkline } from '@components/Sparkline';
+import Sparkline from '@components/Sparkline';
 import { Host } from '@types';
 import styled from 'styled-components';
 

awx/ui_next/src/screens/Inventory/shared/InventoryGroupsDeleteModal.jsx

@@ -60,7 +60,7 @@ const InventoryGroupsDeleteModal = ({
           return <ListItem key={group.id}>{group.name}</ListItem>;
         })}
       </div>
-      <div css="padding-left: 1px;">
+      <div>
         <Radio
           id="radio-delete"
           key="radio-delete"

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

@@ -13,7 +13,7 @@ import { VariablesInput as _VariablesInput } from '@components/CodeMirrorInput';
 import DeleteButton from '@components/DeleteButton';
 import ErrorDetail from '@components/ErrorDetail';
 import LaunchButton from '@components/LaunchButton';
-import { StatusIcon } from '@components/Sparkline';
+import StatusIcon from '@components/StatusIcon';
 import { toTitleCase } from '@util/strings';
 import { formatDateString } from '@util/dates';
 import { Job } from '@types';

awx/ui_next/src/screens/Job/JobList/JobListItem.jsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
@@ -15,15 +14,11 @@ import {
 } from '@patternfly/react-core';
 import { RocketIcon } from '@patternfly/react-icons';
 import LaunchButton from '@components/LaunchButton';
-import { StatusIcon } from '@components/Sparkline';
+import StatusIcon from '@components/StatusIcon';
 import { toTitleCase } from '@util/strings';
 import { formatDateString } from '@util/dates';
 import { JOB_TYPE_URL_SEGMENTS } from '@constants';
 
-const PaddedIcon = styled(StatusIcon)`
-  margin: 6px 20px 0 0;
-`;
-
 class JobListItem extends Component {
   render() {
     const { i18n, job, isSelected, onSelect } = this.props;
@@ -40,8 +35,10 @@ class JobListItem extends Component {
           />
           <DataListItemCells
             dataListCells={[
+              <DataListCell key="status" isFilled={false}>
+                {job.status && <StatusIcon status={job.status} />}
+              </DataListCell>,
               <DataListCell key="name" css="display: inline-flex;">
-                {job.status && <PaddedIcon status={job.status} />}
                 <span>
                   <Link
                     to={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}

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

@@ -4,7 +4,7 @@ import CodeMirrorInput from '@components/CodeMirrorInput';
 import ContentEmpty from '@components/ContentEmpty';
 import PropTypes from 'prop-types';
 import { DetailList, Detail } from '@components/DetailList';
-import { StatusIcon } from '@components/Sparkline';
+import StatusIcon from '@components/StatusIcon';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import styled from 'styled-components';

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

@@ -16,7 +16,7 @@ import { CardBody } from '@components/Card';
 import ContentError from '@components/ContentError';
 import ContentLoading from '@components/ContentLoading';
 import ErrorDetail from '@components/ErrorDetail';
-import { StatusIcon } from '@components/Sparkline';
+import StatusIcon from '@components/StatusIcon';
 
 import JobEvent from './JobEvent';
 import JobEventSkeleton from './JobEventSkeleton';

awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputNode.jsx

@@ -5,7 +5,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import styled from 'styled-components';
 import { func, shape } from 'prop-types';
-import { StatusIcon } from '@components/Sparkline';
+import StatusIcon from '@components/StatusIcon';
 import { WorkflowNodeTypeLetter } from '@components/Workflow';
 import { secondsToHHMMSS } from '@util/dates';
 import { constants as wfConstants } from '@components/Workflow/WorkflowUtils';

awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx

@@ -8,7 +8,7 @@ import { t } from '@lingui/macro';
 import { shape } from 'prop-types';
 import { Badge as PFBadge, Button, Tooltip } from '@patternfly/react-core';
 import { CompassIcon, WrenchIcon } from '@patternfly/react-icons';
-import { StatusIcon } from '@components/Sparkline';
+import StatusIcon from '@components/StatusIcon';
 import styled from 'styled-components';
 
 const Toolbar = styled.div`

awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx

@@ -18,14 +18,10 @@ import styled from 'styled-components';
 
 import ClipboardCopyButton from '@components/ClipboardCopyButton';
 import ProjectSyncButton from '../shared/ProjectSyncButton';
-import { StatusIcon } from '@components/Sparkline';
+import StatusIcon from '@components/StatusIcon';
 import { toTitleCase } from '@util/strings';
 import { Project } from '@types';
 
-const PaddedIcon = styled(StatusIcon)`
-  margin: 6px 20px 0 0;
-`;
-
 const DataListAction = styled(_DataListAction)`
   align-items: center;
   display: grid;
@@ -84,7 +80,7 @@ class ProjectListItem extends React.Component {
           />
           <DataListItemCells
             dataListCells={[
-              <DataListCell key="name" css="display: inline-flex">
+              <DataListCell key="status" isFilled={false}>
                 {project.summary_fields.last_job && (
                   <Tooltip
                     position="top"
@@ -96,12 +92,14 @@ class ProjectListItem extends React.Component {
                     <Link
                       to={`/jobs/project/${project.summary_fields.last_job.id}`}
                     >
-                      <PaddedIcon
+                      <StatusIcon
                         status={project.summary_fields.last_job.status}
                       />
                     </Link>
                   </Tooltip>
                 )}
+              </DataListCell>,
+              <DataListCell key="name">
                 <Link id={labelId} to={`${detailUrl}`}>
                   <b>{project.name}</b>
                 </Link>

awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx

@@ -19,7 +19,7 @@ import {
 } from '@patternfly/react-icons';
 
 import LaunchButton from '@components/LaunchButton';
-import { Sparkline } from '@components/Sparkline';
+import Sparkline from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
 import styled from 'styled-components';
 

awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
+import { WorkflowJobTemplatesAPI } from '@api';
 import {
   Chip,
   ChipGroup,
@@ -13,17 +14,16 @@ import {
   Label,
 } from '@patternfly/react-core';
 
-import { CardBody, CardActionsRow } from '@components/Card';
-import ContentLoading from '@components/ContentLoading';
-import { WorkflowJobTemplatesAPI } from '@api';
 import AlertModal from '@components/AlertModal';
-import ErrorDetail from '@components/ErrorDetail';
-import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
+import { CardBody, CardActionsRow } from '@components/Card';
 import { VariablesDetail } from '@components/CodeMirrorInput';
-import LaunchButton from '@components/LaunchButton';
+import ContentLoading from '@components/ContentLoading';
 import DeleteButton from '@components/DeleteButton';
+import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
+import ErrorDetail from '@components/ErrorDetail';
+import LaunchButton from '@components/LaunchButton';
+import Sparkline from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
-import { Sparkline } from '@components/Sparkline';
 
 function WorkflowJobTemplateDetail({ template, i18n, webHookKey }) {
   const {
@@ -104,7 +104,6 @@ function WorkflowJobTemplateDetail({ template, i18n, webHookKey }) {
         <Detail label={i18n._(t`Description`)} value={description} />
         {summary_fields.recent_jobs?.length > 0 && (
           <Detail
-            css="display: flex; flex: 1;"
             value={<Sparkline jobs={recentPlaybookJobs} />}
             label={i18n._(t`Activity`)}
           />
@@ -223,7 +222,7 @@ function WorkflowJobTemplateDetail({ template, i18n, webHookKey }) {
       {deletionError && (
         <AlertModal
           isOpen={deletionError}
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           onClose={() => setDeletionError(null)}
         >

awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx

@@ -12,13 +12,6 @@ import JobTemplatesList from './JobTemplatesList';
 import ProjectsList from './ProjectsList';
 import WorkflowJobTemplatesList from './WorkflowJobTemplatesList';
 
-const Divider = styled.div`
-  height: 1px;
-  background-color: var(--pf-global--Color--light-300);
-  border: 0;
-  flex-shrink: 0;
-`;
-
 const TimeoutInput = styled(TextInput)`
   width: 200px;
   :not(:first-of-type) {
@@ -91,7 +84,6 @@ function NodeTypeStep({
           />
         </div>
       </div>
-      <Divider component="div" />
       {nodeType === 'job_template' && (
         <JobTemplatesList
           nodeResource={nodeResource}

awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerGraph.jsx

@@ -234,7 +234,7 @@ function VisualizerGraph({ i18n, readOnly }) {
           {linkHelp && <WorkflowLinkHelp link={linkHelp} />}
         </WorkflowHelp>
       )}
-      <WorkflowSVG id="workflow-svg" ref={svgRef} css="">
+      <WorkflowSVG id="workflow-svg" ref={svgRef}>
         <defs>
           <marker
             className="WorkflowChart-noPointerEvents"

awx/ui_next/src/screens/User/shared/UserForm.jsx

@@ -80,11 +80,7 @@ function UserForm({ user, handleCancel, handleSubmit, submitError, i18n }) {
       onSubmit={handleValidateAndSubmit}
     >
       {formik => (
-        <Form
-          autoComplete="off"
-          onSubmit={formik.handleSubmit}
-          css="padding: 0 24px"
-        >
+        <Form autoComplete="off" onSubmit={formik.handleSubmit}>
           <FormRow>
             <FormField
               id="user-username"