Addresses needed styling changes to Card and Page Section

These changes were necessary to remove an additional page section
to ProjectJobTemplateList.

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { Card, PageSection } from '@patternfly/react-core';
+import { Card } from '@patternfly/react-core';
 import { CardBody } from '@components/Card';
 import JobTemplateForm from '../shared/JobTemplateForm';
 import { JobTemplatesAPI } from '@api';
@@ -61,17 +61,15 @@ function JobTemplateAdd() {
   }
 
   return (
-    <PageSection>
-      <Card>
-        <CardBody>
-          <JobTemplateForm
-            handleCancel={handleCancel}
-            handleSubmit={handleSubmit}
-          />
-        </CardBody>
-        {formSubmitError ? <div>formSubmitError</div> : ''}
-      </Card>
-    </PageSection>
+    <Card>
+      <CardBody>
+        <JobTemplateForm
+          handleCancel={handleCancel}
+          handleSubmit={handleSubmit}
+        />
+      </CardBody>
+      {formSubmitError ? <div>formSubmitError</div> : ''}
+    </Card>
   );
 }
 

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

@@ -150,78 +150,76 @@ class Template extends Component {
     }
 
     return (
-      <PageSection>
-        <Card className="awx-c-card">
-          {cardHeader}
-          <Switch>
-            <Redirect
-              from="/templates/:templateType/:id"
-              to="/templates/:templateType/:id/details"
-              exact
-            />
-            {template && (
-              <Route
-                key="details"
-                path="/templates/:templateType/:id/details"
-                render={() => (
-                  <JobTemplateDetail
-                    hasTemplateLoading={hasContentLoading}
-                    template={template}
-                  />
-                )}
-              />
-            )}
-            {template && (
-              <Route
-                key="edit"
-                path="/templates/:templateType/:id/edit"
-                render={() => <JobTemplateEdit template={template} />}
-              />
-            )}
-            {template && (
-              <Route
-                key="access"
-                path="/templates/:templateType/:id/access"
-                render={() => (
-                  <ResourceAccessList
-                    resource={template}
-                    apiModel={JobTemplatesAPI}
-                  />
-                )}
-              />
-            )}
-            {canSeeNotificationsTab && (
-              <Route
-                path="/templates/:templateType/:id/notifications"
-                render={() => (
-                  <NotificationList
-                    id={Number(match.params.id)}
-                    canToggleNotifications={isNotifAdmin}
-                    apiModel={JobTemplatesAPI}
-                  />
-                )}
-              />
-            )}
+      <Card className="awx-c-card">
+        {cardHeader}
+        <Switch>
+          <Redirect
+            from="/templates/:templateType/:id"
+            to="/templates/:templateType/:id/details"
+            exact
+          />
+          {template && (
             <Route
-              key="not-found"
-              path="*"
-              render={() =>
-                !hasContentLoading && (
-                  <ContentError isNotFound>
-                    {match.params.id && (
-                      <Link
-                        to={`/templates/${match.params.templateType}/${match.params.id}/details`}
-                      >
-                        {i18n._(`View Template Details`)}
-                      </Link>
-                    )}
-                  </ContentError>
-                )
-              }
+              key="details"
+              path="/templates/:templateType/:id/details"
+              render={() => (
+                <JobTemplateDetail
+                  hasTemplateLoading={hasContentLoading}
+                  template={template}
+                />
+              )}
             />
-          </Switch>
-        </Card>
-      </PageSection>
+          )}
+          {template && (
+            <Route
+              key="edit"
+              path="/templates/:templateType/:id/edit"
+              render={() => <JobTemplateEdit template={template} />}
+            />
+          )}
+          {template && (
+            <Route
+              key="access"
+              path="/templates/:templateType/:id/access"
+              render={() => (
+                <ResourceAccessList
+                  resource={template}
+                  apiModel={JobTemplatesAPI}
+                />
+              )}
+            />
+          )}
+          {canSeeNotificationsTab && (
+            <Route
+              path="/templates/:templateType/:id/notifications"
+              render={() => (
+                <NotificationList
+                  id={Number(match.params.id)}
+                  canToggleNotifications={isNotifAdmin}
+                  apiModel={JobTemplatesAPI}
+                />
+              )}
+            />
+          )}
+          <Route
+            key="not-found"
+            path="*"
+            render={() =>
+              !hasContentLoading && (
+                <ContentError isNotFound>
+                  {match.params.id && (
+                    <Link
+                      to={`/templates/${match.params.templateType}/${match.params.id}/details`}
+                    >
+                      {i18n._(`View Template Details`)}
+                    </Link>
+                  )}
+                </ContentError>
+              )
+            }
+          />
+        </Switch>
+      </Card>
     );
   }
 }

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

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Card, PageSection } from '@patternfly/react-core';
+import { Card } from '@patternfly/react-core';
 
 import {
   JobTemplatesAPI,
@@ -109,7 +109,13 @@ class TemplatesList extends Component {
   }
 
   async loadTemplates() {
-    const { location, match } = this.props;
+    const {
+      location,
+      match: {
+        params: { id: projectId },
+        url,
+      },
+    } = this.props;
     const {
       jtActions: cachedJTActions,
       wfjtActions: cachedWFJTActions,
@@ -135,8 +141,8 @@ class TemplatesList extends Component {
     } else {
       wfjtOptionsPromise = WorkflowJobTemplatesAPI.readOptions();
     }
-    if (match.url.startsWith('/projects') && match.params.id) {
-      params.jobtemplate__project = match.params.id;
+    if (url.startsWith('/projects') && projectId) {
+      params.jobtemplate__project = projectId;
     }
 
     const promises = Promise.all([

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

@@ -1,7 +1,8 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Route, withRouter, Switch } from 'react-router-dom';
+import { PageSection } from '@patternfly/react-core';
 
 import { Config } from '@contexts/Config';
 import Breadcrumbs from '@components/Breadcrumbs/Breadcrumbs';
@@ -50,48 +51,50 @@ class Templates extends Component {
     const { match, history, location } = this.props;
     const { breadcrumbConfig } = this.state;
     return (
-      <Fragment>
+      <>
         <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
-        <Switch>
-          <Route
-            path={`${match.path}/job_template/add`}
-            render={() => <JobTemplateAdd />}
-          />
-          <Route
-            path={`${match.path}/job_template/:id`}
-            render={({ match: newRouteMatch }) => (
-              <Config>
-                {({ me }) => (
-                  <Template
-                    history={history}
-                    location={location}
-                    setBreadcrumb={this.setBreadCrumbConfig}
-                    me={me || {}}
-                    match={newRouteMatch}
-                  />
-                )}
-              </Config>
-            )}
-          />
-          <Route
-            path={`${match.path}/workflow_job_template/:id`}
-            render={({ match: newRouteMatch }) => (
-              <Config>
-                {({ me }) => (
-                  <WorkflowJobTemplate
-                    history={history}
-                    location={location}
-                    setBreadcrumb={this.setBreadCrumbConfig}
-                    me={me || {}}
-                    match={newRouteMatch}
-                  />
-                )}
-              </Config>
-            )}
-          />
-          <Route path={`${match.path}`} render={() => <TemplateList />} />
-        </Switch>
-      </Fragment>
+        <PageSection>
+          <Switch>
+            <Route
+              path={`${match.path}/job_template/add`}
+              render={() => <JobTemplateAdd />}
+            />
+            <Route
+              path={`${match.path}/job_template/:id`}
+              render={({ match: newRouteMatch }) => (
+                <Config>
+                  {({ me }) => (
+                    <Template
+                      history={history}
+                      location={location}
+                      setBreadcrumb={this.setBreadCrumbConfig}
+                      me={me || {}}
+                      match={newRouteMatch}
+                    />
+                  )}
+                </Config>
+              )}
+            />
+            <Route
+              path={`${match.path}/workflow_job_template/:id`}
+              render={({ match: newRouteMatch }) => (
+                <Config>
+                  {({ me }) => (
+                    <WorkflowJobTemplate
+                      history={history}
+                      location={location}
+                      setBreadcrumb={this.setBreadCrumbConfig}
+                      me={me || {}}
+                      match={newRouteMatch}
+                    />
+                  )}
+                </Config>
+              )}
+            />
+            <Route path={`${match.path}`} render={() => <TemplateList />} />
+          </Switch>
+        </PageSection>
+      </>
     );
   }
 }

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

@@ -94,60 +94,58 @@ class WorkflowJobTemplate extends Component {
     }
 
     return (
-      <PageSection>
-        <Card className="awx-c-card">
-          {cardHeader}
-          <Switch>
-            <Redirect
-              from="/templates/workflow_job_template/:id"
-              to="/templates/workflow_job_template/:id/details"
-              exact
-            />
-            {template && (
-              <Route
-                key="wfjt-details"
-                path="/templates/workflow_job_template/:id/details"
-                render={() => (
-                  <WorkflowJobTemplateDetail
-                    hasTemplateLoading={hasContentLoading}
-                    template={template}
-                  />
-                )}
-              />
-            )}
-            {template && (
-              <Route
-                key="wfjt-visualizer"
-                path="/templates/workflow_job_template/:id/visualizer"
-                render={() => (
-                  <AppendBody>
-                    <FullPage>
-                      <Visualizer template={template} />
-                    </FullPage>
-                  </AppendBody>
-                )}
-              />
-            )}
+      <Card className="awx-c-card">
+        {cardHeader}
+        <Switch>
+          <Redirect
+            from="/templates/workflow_job_template/:id"
+            to="/templates/workflow_job_template/:id/details"
+            exact
+          />
+          {template && (
             <Route
-              key="not-found"
-              path="*"
-              render={() =>
-                !hasContentLoading && (
-                  <ContentError isNotFound>
-                    {match.params.id && (
-                      <Link
-                        to={`/templates/workflow_job_template/${match.params.id}/details`}
-                      >
-                        {i18n._(`View Template Details`)}
-                      </Link>
-                    )}
-                  </ContentError>
-                )
-              }
+              key="wfjt-details"
+              path="/templates/workflow_job_template/:id/details"
+              render={() => (
+                <WorkflowJobTemplateDetail
+                  hasTemplateLoading={hasContentLoading}
+                  template={template}
+                />
+              )}
             />
-          </Switch>
-        </Card>
-      </PageSection>
+          )}
+          {template && (
+            <Route
+              key="wfjt-visualizer"
+              path="/templates/workflow_job_template/:id/visualizer"
+              render={() => (
+                <AppendBody>
+                  <FullPage>
+                    <Visualizer template={template} />
+                  </FullPage>
+                </AppendBody>
+              )}
+            />
+          )}
+          <Route
+            key="not-found"
+            path="*"
+            render={() =>
+              !hasContentLoading && (
+                <ContentError isNotFound>
+                  {match.params.id && (
+                    <Link
+                      to={`/templates/workflow_job_template/${match.params.id}/details`}
+                    >
+                      {i18n._(`View Template Details`)}
+                    </Link>
+                  )}
+                </ContentError>
+              )
+            }
+          />
+        </Switch>
+      </Card>
     );
   }
 }