Merge pull request #8684 from mabashian/8666-app-token-modal

Show modals with app/token info after creation Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
2026-01-13 11:00:03 -03:30 · 2020-12-11 13:52:26 +00:00 · 2020-12-11 13:52:26 +00:00 · d72f8eaf2c
commit d72f8eaf2c
parent 9bf721665d 86d289c375
20 changed files with 490 additions and 218 deletions
--- a/awx/ui_next/src/screens/Application/ApplicationAdd/ApplicationAdd.jsx
+++ b/awx/ui_next/src/screens/Application/ApplicationAdd/ApplicationAdd.jsx
@ -8,7 +8,7 @@ import ApplicationForm from '../shared/ApplicationForm';
 import { ApplicationsAPI } from '../../../api';
 import { CardBody } from '../../../components/Card';

-function ApplicationAdd() {
+function ApplicationAdd({ onSuccessfulAdd }) {
  const history = useHistory();
  const [submitError, setSubmitError] = useState(null);

@ -53,10 +53,9 @@ function ApplicationAdd() {
  const handleSubmit = async ({ ...values }) => {
    values.organization = values.organization.id;
    try {
-      const {
-        data: { id },
-      } = await ApplicationsAPI.create(values);
-      history.push(`/applications/${id}/details`);
+      const { data } = await ApplicationsAPI.create(values);
+      onSuccessfulAdd(data);
+      history.push(`/applications/${data.id}/details`);
    } catch (err) {
      setSubmitError(err);
    }
--- a/awx/ui_next/src/screens/Application/ApplicationAdd/ApplicationAdd.test.jsx
+++ b/awx/ui_next/src/screens/Application/ApplicationAdd/ApplicationAdd.test.jsx
@ -39,12 +39,16 @@ const options = {
  },
 };

+const onSuccessfulAdd = jest.fn();
+
 describe('<ApplicationAdd/>', () => {
  let wrapper;
  test('should render properly', async () => {
    ApplicationsAPI.readOptions.mockResolvedValue(options);
    await act(async () => {
-      wrapper = mountWithContexts(<ApplicationAdd />);
+      wrapper = mountWithContexts(
+        <ApplicationAdd onSuccessfulAdd={onSuccessfulAdd} />
+      );
    });
    expect(wrapper.find('ApplicationAdd').length).toBe(1);
    expect(wrapper.find('ApplicationForm').length).toBe(1);
@ -59,9 +63,12 @@ describe('<ApplicationAdd/>', () => {

    ApplicationsAPI.create.mockResolvedValue({ data: { id: 8 } });
    await act(async () => {
-      wrapper = mountWithContexts(<ApplicationAdd />, {
-        context: { router: { history } },
-      });
+      wrapper = mountWithContexts(
+        <ApplicationAdd onSuccessfulAdd={onSuccessfulAdd} />,
+        {
+          context: { router: { history } },
+        }
+      );
    });

    await act(async () => {
@ -124,6 +131,7 @@ describe('<ApplicationAdd/>', () => {
      redirect_uris: 'http://www.google.com',
    });
    expect(history.location.pathname).toBe('/applications/8/details');
+    expect(onSuccessfulAdd).toHaveBeenCalledWith({ id: 8 });
  });

  test('should cancel form properly', async () => {
@ -134,9 +142,12 @@ describe('<ApplicationAdd/>', () => {

    ApplicationsAPI.create.mockResolvedValue({ data: { id: 8 } });
    await act(async () => {
-      wrapper = mountWithContexts(<ApplicationAdd />, {
-        context: { router: { history } },
-      });
+      wrapper = mountWithContexts(
+        <ApplicationAdd onSuccessfulAdd={onSuccessfulAdd} />,
+        {
+          context: { router: { history } },
+        }
+      );
    });
    await act(async () => {
      wrapper.find('Button[aria-label="Cancel"]').prop('onClick')();
@ -157,7 +168,9 @@ describe('<ApplicationAdd/>', () => {
    ApplicationsAPI.create.mockRejectedValue(error);
    ApplicationsAPI.readOptions.mockResolvedValue(options);
    await act(async () => {
-      wrapper = mountWithContexts(<ApplicationAdd />);
+      wrapper = mountWithContexts(
+        <ApplicationAdd onSuccessfulAdd={onSuccessfulAdd} />
+      );
    });
    await act(async () => {
      wrapper.find('Formik').prop('onSubmit')({
@ -181,7 +194,9 @@ describe('<ApplicationAdd/>', () => {
      })
    );
    await act(async () => {
-      wrapper = mountWithContexts(<ApplicationAdd />);
+      wrapper = mountWithContexts(
+        <ApplicationAdd onSuccessfulAdd={onSuccessfulAdd} />
+      );
    });

    wrapper.update();
--- a/awx/ui_next/src/screens/Application/ApplicationDetails/ApplicationDetails.jsx
+++ b/awx/ui_next/src/screens/Application/ApplicationDetails/ApplicationDetails.jsx
@ -58,11 +58,12 @@ function ApplicationDetails({
        <Detail
          label={i18n._(t`Name`)}
          value={application.name}
-          dataCy="jt-detail-name"
+          dataCy="app-detail-name"
        />
        <Detail
          label={i18n._(t`Description`)}
          value={application.description}
+          dataCy="app-detail-description"
        />
        <Detail
          label={i18n._(t`Organization`)}
@ -73,20 +74,29 @@ function ApplicationDetails({
              {application.summary_fields.organization.name}
            </Link>
          }
+          dataCy="app-detail-organization"
        />
        <Detail
          label={i18n._(t`Authorization grant type`)}
          value={getAuthorizationGrantType(
            application.authorization_grant_type
          )}
+          dataCy="app-detail-authorization-grant-type"
+        />
+        <Detail
+          label={i18n._(t`Client ID`)}
+          value={application.client_id}
+          dataCy="app-detail-client-id"
        />
        <Detail
          label={i18n._(t`Redirect uris`)}
          value={application.redirect_uris}
+          dataCy="app-detail-redirect-uris"
        />
        <Detail
          label={i18n._(t`Client type`)}
          value={getClientType(application.client_type)}
+          dataCy="app-detail-client-type"
        />
      </DetailList>
      <CardActionsRow>
--- a/awx/ui_next/src/screens/Application/ApplicationDetails/ApplicationDetails.test.jsx
+++ b/awx/ui_next/src/screens/Application/ApplicationDetails/ApplicationDetails.test.jsx
@ -120,6 +120,9 @@ describe('<ApplicationDetails/>', () => {
    expect(wrapper.find('Detail[label="Client type"]').prop('value')).toBe(
      'Confidential'
    );
+    expect(wrapper.find('Detail[label="Client ID"]').prop('value')).toBe(
+      'b1dmj8xzkbFm1ZQ27ygw2ZeE9I0AXqqeL74fiyk4'
+    );
    expect(wrapper.find('Button[aria-label="Edit"]').prop('to')).toBe(
      '/applications/10/edit'
    );
--- a/awx/ui_next/src/screens/Application/ApplicationEdit/ApplicationEdit.jsx
+++ b/awx/ui_next/src/screens/Application/ApplicationEdit/ApplicationEdit.jsx
@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';

-import { Card, PageSection } from '@patternfly/react-core';
+import { Card } from '@patternfly/react-core';
 import ApplicationForm from '../shared/ApplicationForm';
 import { ApplicationsAPI } from '../../../api';
 import { CardBody } from '../../../components/Card';
@ -29,22 +29,18 @@ function ApplicationEdit({
    history.push(`/applications/${id}/details`);
  };
  return (
-    <>
-      <PageSection>
-        <Card>
-          <CardBody>
-            <ApplicationForm
-              onSubmit={handleSubmit}
-              application={application}
-              onCancel={handleCancel}
-              authorizationOptions={authorizationOptions}
-              clientTypeOptions={clientTypeOptions}
-              submitError={submitError}
-            />
-          </CardBody>
-        </Card>
-      </PageSection>
-    </>
+    <Card>
+      <CardBody>
+        <ApplicationForm
+          onSubmit={handleSubmit}
+          application={application}
+          onCancel={handleCancel}
+          authorizationOptions={authorizationOptions}
+          clientTypeOptions={clientTypeOptions}
+          submitError={submitError}
+        />
+      </CardBody>
+    </Card>
  );
 }
 export default ApplicationEdit;
--- a/awx/ui_next/src/screens/Application/Applications.jsx
+++ b/awx/ui_next/src/screens/Application/Applications.jsx
@ -1,14 +1,26 @@
 import React, { useState, useCallback } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
+import styled from 'styled-components';
 import { Route, Switch } from 'react-router-dom';
-
+import {
+  Alert,
+  ClipboardCopy,
+  ClipboardCopyVariant,
+  Modal,
+} from '@patternfly/react-core';
 import ApplicationsList from './ApplicationsList';
 import ApplicationAdd from './ApplicationAdd';
 import Application from './Application';
 import Breadcrumbs from '../../components/Breadcrumbs';
+import { Detail, DetailList } from '../../components/DetailList';
+
+const ApplicationAlert = styled(Alert)`
+  margin-bottom: 20px;
+`;

 function Applications({ i18n }) {
+  const [applicationModalSource, setApplicationModalSource] = useState(null);
  const [breadcrumbConfig, setBreadcrumbConfig] = useState({
    '/applications': i18n._(t`Applications`),
    '/applications/add': i18n._(t`Create New Application`),
@ -36,7 +48,9 @@ function Applications({ i18n }) {
      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
      <Switch>
        <Route path="/applications/add">
-          <ApplicationAdd />
+          <ApplicationAdd
+            onSuccessfulAdd={app => setApplicationModalSource(app)}
+          />
        </Route>
        <Route path="/applications/:id">
          <Application setBreadcrumb={buildBreadcrumbConfig} />
@ -45,6 +59,57 @@ function Applications({ i18n }) {
          <ApplicationsList />
        </Route>
      </Switch>
+      {applicationModalSource && (
+        <Modal
+          aria-label={i18n._(t`Application information`)}
+          isOpen
+          variant="medium"
+          title={i18n._(t`Application information`)}
+          onClose={() => setApplicationModalSource(null)}
+        >
+          {applicationModalSource.client_secret && (
+            <ApplicationAlert
+              variant="info"
+              isInline
+              title={i18n._(
+                t`This is the only time the client secret will be shown.`
+              )}
+            />
+          )}
+          <DetailList stacked>
+            <Detail
+              label={i18n._(t`Name`)}
+              value={applicationModalSource.name}
+            />
+            {applicationModalSource.client_id && (
+              <Detail
+                label={i18n._(t`Client ID`)}
+                value={
+                  <ClipboardCopy
+                    isReadOnly
+                    variant={ClipboardCopyVariant.expansion}
+                  >
+                    {applicationModalSource.client_id}
+                  </ClipboardCopy>
+                }
+              />
+            )}
+            {applicationModalSource.client_secret && (
+              <Detail
+                label={i18n._(t`Client secret`)}
+                value={
+                  <ClipboardCopy
+                    isReadOnly
+                    variant={ClipboardCopyVariant.expansion}
+                  >
+                    {applicationModalSource.client_secret}
+                  </ClipboardCopy>
+                }
+              />
+            )}
+          </DetailList>
+        </Modal>
+      )}
    </>
  );
 }
--- a/awx/ui_next/src/screens/Application/Applications.test.jsx
+++ b/awx/ui_next/src/screens/Application/Applications.test.jsx
@ -1,25 +1,48 @@
 import React from 'react';
-
+import { act } from 'react-dom/test-utils';
+import { createMemoryHistory } from 'history';
 import { mountWithContexts } from '../../../testUtils/enzymeHelpers';

 import Applications from './Applications';

 describe('<Applications />', () => {
-  let pageWrapper;
-  let pageSections;
-
-  beforeEach(() => {
-    pageWrapper = mountWithContexts(<Applications />);
-    pageSections = pageWrapper.find('PageSection');
-  });
+  let wrapper;

  afterEach(() => {
-    pageWrapper.unmount();
+    wrapper.unmount();
  });

-  test('initially renders without crashing', () => {
-    expect(pageWrapper.length).toBe(1);
+  test('renders successfully', () => {
+    wrapper = mountWithContexts(<Applications />);
+    const pageSections = wrapper.find('PageSection');
+    expect(wrapper.length).toBe(1);
    expect(pageSections.length).toBe(1);
    expect(pageSections.first().props().variant).toBe('light');
  });
+
+  test('shows Application information modal after successful creation', async () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/applications/add'],
+    });
+    wrapper = mountWithContexts(<Applications />, {
+      context: { router: { history } },
+    });
+    expect(wrapper.find('Modal[title="Application information"]').length).toBe(
+      0
+    );
+    await act(async () => {
+      wrapper
+        .find('ApplicationAdd')
+        .props()
+        .onSuccessfulAdd({
+          name: 'test',
+          client_id: 'foobar',
+          client_secret: 'aaaaaaaaaaaaaaaaaaaaaaaaaa',
+        });
+    });
+    wrapper.update();
+    expect(wrapper.find('Modal[title="Application information"]').length).toBe(
+      1
+    );
+  });
 });
--- a/awx/ui_next/src/screens/User/User.jsx
+++ b/awx/ui_next/src/screens/User/User.jsx
@ -14,7 +14,6 @@ import { Card, PageSection } from '@patternfly/react-core';
 import useRequest from '../../util/useRequest';
 import { UsersAPI } from '../../api';
 import ContentError from '../../components/ContentError';
-import ContentLoading from '../../components/ContentLoading';
 import RoutedTabs from '../../components/RoutedTabs';
 import UserDetail from './UserDetail';
 import UserEdit from './UserEdit';
@ -86,7 +85,7 @@ function User({ i18n, setBreadcrumb, me }) {
    showCardHeader = false;
  }

-  if (contentError) {
+  if (!isLoading && contentError) {
    return (
      <PageSection>
        <Card>
@ -107,41 +106,34 @@ function User({ i18n, setBreadcrumb, me }) {
    <PageSection>
      <Card>
        {showCardHeader && <RoutedTabs tabsArray={tabsArray} />}
-        {isLoading && <ContentLoading />}
-        {!isLoading && user && (
-          <Switch>
-            <Redirect from="/users/:id" to="/users/:id/details" exact />
-            {user && (
-              <Route path="/users/:id/edit">
-                <UserEdit user={user} />
-              </Route>
-            )}
-            {user && (
-              <Route path="/users/:id/details">
-                <UserDetail user={user} />
-              </Route>
-            )}
-            <Route path="/users/:id/organizations">
+        <Switch>
+          <Redirect from="/users/:id" to="/users/:id/details" exact />
+          {user && [
+            <Route path="/users/:id/edit" key="edit">
+              <UserEdit user={user} />
+            </Route>,
+            <Route path="/users/:id/details" key="details">
+              <UserDetail user={user} />
+            </Route>,
+            <Route path="/users/:id/organizations" key="organizations">
              <UserOrganizations id={Number(match.params.id)} />
-            </Route>
-            {user && (
-              <Route path="/users/:id/teams">
-                <UserTeams />
-              </Route>
-            )}
-            {user && (
-              <Route path="/users/:id/roles">
-                <UserRolesList user={user} />
-              </Route>
-            )}
-            <Route path="/users/:id/tokens">
+            </Route>,
+            <Route path="/users/:id/teams" key="teams">
+              <UserTeams />
+            </Route>,
+            <Route path="/users/:id/roles" key="roles">
+              <UserRolesList user={user} />
+            </Route>,
+            <Route path="/users/:id/tokens" key="tokens">
              <UserTokens
                user={user}
                setBreadcrumb={setBreadcrumb}
                id={Number(match.params.id)}
              />
-            </Route>
-            <Route key="not-found" path="*">
+            </Route>,
+          ]}
+          <Route key="not-found" path="*">
+            {!isLoading && (
              <ContentError isNotFound>
                {match.params.id && (
                  <Link to={`/users/${match.params.id}/details`}>
@ -149,9 +141,9 @@ function User({ i18n, setBreadcrumb, me }) {
                  </Link>
                )}
              </ContentError>
-            </Route>
-          </Switch>
-        )}
+            )}
+          </Route>
+        </Switch>
      </Card>
    </PageSection>
  );
--- a/awx/ui_next/src/screens/User/User.test.jsx
+++ b/awx/ui_next/src/screens/User/User.test.jsx
@ -22,10 +22,11 @@ async function getUsers() {
  };
 }

+UsersAPI.readDetail.mockResolvedValue({ data: mockDetails });
+UsersAPI.read.mockImplementation(getUsers);
+
 describe('<User />', () => {
  test('initially renders successfully', async () => {
-    UsersAPI.readDetail.mockResolvedValue({ data: mockDetails });
-    UsersAPI.read.mockImplementation(getUsers);
    const history = createMemoryHistory({
      initialEntries: ['/users/1'],
    });
@ -49,8 +50,6 @@ describe('<User />', () => {
  });

  test('tabs shown for users', async () => {
-    UsersAPI.readDetail.mockResolvedValue({ data: mockDetails });
-    UsersAPI.read.mockImplementation(getUsers);
    const history = createMemoryHistory({
      initialEntries: ['/users/1'],
    });
@ -81,9 +80,7 @@ describe('<User />', () => {
    expect(wrapper.find('Tabs TabButton').length).toEqual(6);
  });

-  test('should not now Tokens tab', async () => {
-    UsersAPI.readDetail.mockResolvedValue({ data: mockDetails });
-    UsersAPI.read.mockImplementation(getUsers);
+  test('should not show Tokens tab', async () => {
    const history = createMemoryHistory({
      initialEntries: ['/users/1'],
    });
--- a/awx/ui_next/src/screens/User/UserToken/UserToken.jsx
+++ b/awx/ui_next/src/screens/User/UserToken/UserToken.jsx
@ -24,20 +24,16 @@ function UserToken({ i18n, setBreadcrumb, user }) {
    isLoading,
    error,
    request: fetchToken,
-    result: { token, actions },
+    result: { token },
  } = useRequest(
    useCallback(async () => {
-      const [response, actionsResponse] = await Promise.all([
-        TokensAPI.readDetail(tokenId),
-        TokensAPI.readOptions(),
-      ]);
+      const response = await TokensAPI.readDetail(tokenId);
      setBreadcrumb(user, response.data);
      return {
        token: response.data,
-        actions: actionsResponse.data.actions.POST,
      };
    }, [setBreadcrumb, user, tokenId]),
-    { token: null, actions: null }
+    { token: null }
  );
  useEffect(() => {
    fetchToken();
@ -97,7 +93,7 @@ function UserToken({ i18n, setBreadcrumb, user }) {
        />
        {token && (
          <Route path="/users/:id/tokens/:tokenId/details">
-            <UserTokenDetail canEditOrDelete={actions} token={token} />
+            <UserTokenDetail token={token} />
          </Route>
        )}
        <Route key="not-found" path="*">
--- a/awx/ui_next/src/screens/User/UserToken/UserToken.test.jsx
+++ b/awx/ui_next/src/screens/User/UserToken/UserToken.test.jsx
@ -54,9 +54,6 @@ describe('<UserToken/>', () => {
      description: 'cdfsg',
      scope: 'read',
    });
-    TokensAPI.readOptions.mockResolvedValue({
-      data: { actions: { POST: true } },
-    });
    await act(async () => {
      wrapper = mountWithContexts(
        <UserToken setBreadcrumb={jest.fn()} user={user} />
@ -87,15 +84,11 @@ describe('<UserToken/>', () => {
      description: 'cdfsg',
      scope: 'read',
    });
-    TokensAPI.readOptions.mockResolvedValue({
-      data: { actions: { POST: true } },
-    });
    await act(async () => {
      wrapper = mountWithContexts(
        <UserToken setBreadcrumb={jest.fn()} user={user} />
      );
    });
    expect(TokensAPI.readDetail).toBeCalledWith(2);
-    expect(TokensAPI.readOptions).toBeCalled();
  });
 });
--- a/awx/ui_next/src/screens/User/UserTokenAdd/UserTokenAdd.jsx
+++ b/awx/ui_next/src/screens/User/UserTokenAdd/UserTokenAdd.jsx
@ -6,22 +6,27 @@ import { TokensAPI, UsersAPI } from '../../../api';
 import useRequest from '../../../util/useRequest';
 import UserTokenFrom from '../shared/UserTokenForm';

-function UserTokenAdd() {
+function UserTokenAdd({ onSuccessfulAdd }) {
  const history = useHistory();
  const { id: userId } = useParams();
  const { error: submitError, request: handleSubmit } = useRequest(
    useCallback(
      async formData => {
+        let response;
        if (formData.application) {
-          formData.application = formData.application?.id || null;
-          await UsersAPI.createToken(userId, formData);
+          response = await UsersAPI.createToken(userId, {
+            ...formData,
+            application: formData.application?.id || null,
+          });
        } else {
-          await TokensAPI.create(formData);
+          response = await TokensAPI.create(formData);
        }

-        history.push(`/users/${userId}/tokens`);
+        onSuccessfulAdd(response.data);
+
+        history.push(`/users/${userId}/tokens/${response.data.id}/details`);
      },
-      [history, userId]
+      [history, userId, onSuccessfulAdd]
    )
  );

--- a/awx/ui_next/src/screens/User/UserTokenAdd/UserTokenAdd.test.jsx
+++ b/awx/ui_next/src/screens/User/UserTokenAdd/UserTokenAdd.test.jsx
@ -18,29 +18,46 @@ jest.mock('react-router-dom', () => ({
 }));
 let wrapper;

+const onSuccessfulAdd = jest.fn();
+
 describe('<UserTokenAdd />', () => {
+  afterEach(() => {
+    wrapper.unmount();
+    jest.clearAllMocks();
+  });
  test('handleSubmit should post to api', async () => {
    await act(async () => {
-      wrapper = mountWithContexts(<UserTokenAdd />);
+      wrapper = mountWithContexts(
+        <UserTokenAdd onSuccessfulAdd={onSuccessfulAdd} />
+      );
    });
    UsersAPI.createToken.mockResolvedValueOnce({ data: { id: 1 } });
    const tokenData = {
-      application: 1,
+      application: {
+        id: 1,
+      },
      description: 'foo',
      scope: 'read',
    };
    await act(async () => {
      wrapper.find('UserTokenForm').prop('handleSubmit')(tokenData);
    });
-    expect(UsersAPI.createToken).toHaveBeenCalledWith(1, tokenData);
+    expect(UsersAPI.createToken).toHaveBeenCalledWith(1, {
+      application: 1,
+      description: 'foo',
+      scope: 'read',
+    });
  });

  test('should navigate to tokens list when cancel is clicked', async () => {
    const history = createMemoryHistory({});
    await act(async () => {
-      wrapper = mountWithContexts(<UserTokenAdd />, {
-        context: { router: { history } },
-      });
+      wrapper = mountWithContexts(
+        <UserTokenAdd onSuccessfulAdd={onSuccessfulAdd} />,
+        {
+          context: { router: { history } },
+        }
+      );
    });
    await act(async () => {
      wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
@ -48,51 +65,67 @@ describe('<UserTokenAdd />', () => {
    expect(history.location.pathname).toEqual('/users/1/tokens');
  });

-  test('successful form submission should trigger redirect', async () => {
+  test('successful form submission with application', async () => {
    const history = createMemoryHistory({});
    const tokenData = {
-      application: 1,
+      application: {
+        id: 1,
+      },
      description: 'foo',
      scope: 'read',
    };
+    const rtnData = {
+      id: 2,
+      token: 'abc',
+      refresh_token: 'def',
+      expires: '3020-03-28T14:26:48.099297Z',
+    };
    UsersAPI.createToken.mockResolvedValueOnce({
-      data: {
-        id: 2,
-        ...tokenData,
-      },
+      data: rtnData,
    });
    await act(async () => {
-      wrapper = mountWithContexts(<UserTokenAdd />, {
-        context: { router: { history } },
-      });
+      wrapper = mountWithContexts(
+        <UserTokenAdd onSuccessfulAdd={onSuccessfulAdd} />,
+        {
+          context: { router: { history } },
+        }
+      );
    });
    await waitForElement(wrapper, 'button[aria-label="Save"]');
    await act(async () => {
      wrapper.find('UserTokenForm').prop('handleSubmit')(tokenData);
    });
-    expect(history.location.pathname).toEqual('/users/1/tokens');
+    expect(history.location.pathname).toEqual('/users/1/tokens/2/details');
+    expect(onSuccessfulAdd).toHaveBeenCalledWith(rtnData);
  });

-  test('should successful submit form with application', async () => {
+  test('successful form submission without application', async () => {
    const history = createMemoryHistory({});
    const tokenData = {
      scope: 'read',
    };
+    const rtnData = {
+      id: 2,
+      token: 'abc',
+      refresh_token: null,
+      expires: '3020-03-28T14:26:48.099297Z',
+    };
    TokensAPI.create.mockResolvedValueOnce({
-      data: {
-        id: 2,
-        ...tokenData,
-      },
+      data: rtnData,
    });
    await act(async () => {
-      wrapper = mountWithContexts(<UserTokenAdd />, {
-        context: { router: { history } },
-      });
+      wrapper = mountWithContexts(
+        <UserTokenAdd onSuccessfulAdd={onSuccessfulAdd} />,
+        {
+          context: { router: { history } },
+        }
+      );
    });
    await waitForElement(wrapper, 'button[aria-label="Save"]');
    await act(async () => {
      wrapper.find('UserTokenForm').prop('handleSubmit')(tokenData);
    });
-    expect(history.location.pathname).toEqual('/users/1/tokens');
+    expect(history.location.pathname).toEqual('/users/1/tokens/2/details');
+    expect(onSuccessfulAdd).toHaveBeenCalledWith(rtnData);
  });
 });
--- a/awx/ui_next/src/screens/User/UserTokenDetail/UserTokenDetail.jsx
+++ b/awx/ui_next/src/screens/User/UserTokenDetail/UserTokenDetail.jsx
@ -1,8 +1,7 @@
 import React, { useCallback } from 'react';
-import { Link, useHistory, useParams } from 'react-router-dom';
+import { useHistory, useParams } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Button } from '@patternfly/react-core';

 import AlertModal from '../../../components/AlertModal';
 import { CardBody, CardActionsRow } from '../../../components/Card';
@ -14,11 +13,19 @@ import {
 } from '../../../components/DetailList';
 import ErrorDetail from '../../../components/ErrorDetail';
 import { TokensAPI } from '../../../api';
+import { formatDateString } from '../../../util/dates';
 import useRequest, { useDismissableError } from '../../../util/useRequest';
 import { toTitleCase } from '../../../util/strings';

-function UserTokenDetail({ token, canEditOrDelete, i18n }) {
-  const { scope, description, created, modified, summary_fields } = token;
+function UserTokenDetail({ token, i18n }) {
+  const {
+    scope,
+    description,
+    created,
+    modified,
+    expires,
+    summary_fields,
+  } = token;
  const history = useHistory();
  const { id, tokenId } = useParams();
  const { request: deleteToken, isLoading, error: deleteError } = useRequest(
@ -37,39 +44,43 @@ function UserTokenDetail({ token, canEditOrDelete, i18n }) {
          value={summary_fields?.application?.name}
          dataCy="application-token-detail-name"
        />
-        <Detail label={i18n._(t`Description`)} value={description} />
-        <Detail label={i18n._(t`Scope`)} value={toTitleCase(scope)} />
+        <Detail
+          label={i18n._(t`Description`)}
+          value={description}
+          dataCy="application-token-detail-description"
+        />
+        <Detail
+          label={i18n._(t`Scope`)}
+          value={toTitleCase(scope)}
+          dataCy="application-token-detail-scope"
+        />
+        <Detail
+          label={i18n._(t`Expires`)}
+          value={formatDateString(expires)}
+          dataCy="application-token-detail-expires"
+        />
        <UserDateDetail
          label={i18n._(t`Created`)}
          date={created}
          user={summary_fields.user}
+          dataCy="application-token-detail-created"
        />
        <UserDateDetail
          label={i18n._(t`Last Modified`)}
          date={modified}
          user={summary_fields.user}
+          dataCy="application-token-detail-last-modified"
        />
      </DetailList>
      <CardActionsRow>
-        {canEditOrDelete && (
-          <>
-            <Button
-              aria-label={i18n._(t`Edit`)}
-              component={Link}
-              to={`/users/${id}/tokens/${tokenId}/details`}
-            >
-              {i18n._(t`Edit`)}
-            </Button>
-            <DeleteButton
-              name={summary_fields?.application?.name}
-              modalTitle={i18n._(t`Delete User Token`)}
-              onConfirm={deleteToken}
-              isDisabled={isLoading}
-            >
-              {i18n._(t`Delete`)}
-            </DeleteButton>
-          </>
-        )}
+        <DeleteButton
+          name={summary_fields?.application?.name}
+          modalTitle={i18n._(t`Delete User Token`)}
+          onConfirm={deleteToken}
+          isDisabled={isLoading}
+        >
+          {i18n._(t`Delete`)}
+        </DeleteButton>
      </CardActionsRow>
      {error && (
        <AlertModal
--- a/awx/ui_next/src/screens/User/UserTokenDetail/UserTokenDetail.test.jsx
+++ b/awx/ui_next/src/screens/User/UserTokenDetail/UserTokenDetail.test.jsx
@ -37,20 +37,12 @@ describe('<UserTokenDetail/>', () => {
    description: 'cdfsg',
    scope: 'read',
  };
-  test('should call api for token details and actions', async () => {
+  test('should render properly', async () => {
    await act(async () => {
-      wrapper = mountWithContexts(
-        <UserTokenDetail canEditOrDelete token={token} />
-      );
+      wrapper = mountWithContexts(<UserTokenDetail token={token} />);
    });
+
    expect(wrapper.find('UserTokenDetail').length).toBe(1);
-  });
-  test('should call api for token details and actions', async () => {
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <UserTokenDetail canEditOrDelete token={token} />
-      );
-    });

    expect(wrapper.find('Detail[label="Application"]').prop('value')).toBe(
      'hg'
@ -65,23 +57,11 @@ describe('<UserTokenDetail/>', () => {
    expect(
      wrapper.find('UserDateDetail[label="Last Modified"]').prop('date')
    ).toBe('2020-06-23T19:56:38.441353Z');
-    expect(wrapper.find('Button[aria-label="Edit"]').length).toBe(1);
    expect(wrapper.find('Button[aria-label="Delete"]').length).toBe(1);
  });
-  test('should not render edit or delete buttons', async () => {
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <UserTokenDetail canEditOrDelete={false} token={token} />
-      );
-    });
-    expect(wrapper.find('Button[aria-label="Edit"]').length).toBe(0);
-    expect(wrapper.find('Button[aria-label="Delete"]').length).toBe(0);
-  });
  test('should delete token properly', async () => {
    await act(async () => {
-      wrapper = mountWithContexts(
-        <UserTokenDetail canEditOrDelete token={token} />
-      );
+      wrapper = mountWithContexts(<UserTokenDetail token={token} />);
    });
    await act(async () =>
      wrapper.find('Button[aria-label="Delete"]').prop('onClick')()
@ -90,7 +70,7 @@ describe('<UserTokenDetail/>', () => {
    await act(async () => wrapper.find('DeleteButton').prop('onConfirm')());
    expect(TokensAPI.destroy).toBeCalledWith(2);
  });
-  test('should throw deletion error', async () => {
+  test('should display error on failed deletion', async () => {
    TokensAPI.destroy.mockRejectedValue(
      new Error({
        response: {
@ -104,9 +84,7 @@ describe('<UserTokenDetail/>', () => {
      })
    );
    await act(async () => {
-      wrapper = mountWithContexts(
-        <UserTokenDetail canEditOrDelete token={token} />
-      );
+      wrapper = mountWithContexts(<UserTokenDetail token={token} />);
    });
    await act(async () =>
      wrapper.find('Button[aria-label="Delete"]').prop('onClick')()
--- a/awx/ui_next/src/screens/User/UserTokenList/UserTokenList.jsx
+++ b/awx/ui_next/src/screens/User/UserTokenList/UserTokenList.jsx
@ -108,7 +108,7 @@ function UserTokenList({ i18n }) {
        onRowClick={handleSelect}
        toolbarSearchColumns={[
          {
-            name: i18n._(t`Name`),
+            name: i18n._(t`Application name`),
            key: 'application__name__icontains',
            isDefault: true,
          },
@ -119,7 +119,7 @@ function UserTokenList({ i18n }) {
        ]}
        toolbarSortColumns={[
          {
-            name: i18n._(t`Name`),
+            name: i18n._(t`Application name`),
            key: 'application__name',
          },
          {
--- a/awx/ui_next/src/screens/User/UserTokenList/UserTokenListItem.jsx
+++ b/awx/ui_next/src/screens/User/UserTokenList/UserTokenListItem.jsx
@ -36,28 +36,33 @@ function UserTokenListItem({ i18n, token, isSelected, onSelect }) {
        />
        <DataListItemCells
          dataListCells={[
+            <DataListCell aria-label={i18n._(t`Token type`)} key="type">
+              <Link to={`/users/${id}/tokens/${token.id}/details`}>
+                {token.summary_fields?.application
+                  ? i18n._(t`Application access token`)
+                  : i18n._(t`Personal access token`)}
+              </Link>
+            </DataListCell>,
            <DataListCell
-              aria-label={i18n._(t`application name`)}
-              key={token.id}
+              aria-label={i18n._(t`Application name`)}
+              key="applicationName"
            >
-              {token.summary_fields?.application?.name ? (
+              {token.summary_fields?.application && (
                <span>
                  <NameLabel>{i18n._(t`Application`)}</NameLabel>
-                  <Link to={`/users/${id}/tokens/${token.id}/details`}>
+                  <Link
+                    to={`/applications/${token.summary_fields.application.id}/details`}
+                  >
                    {token.summary_fields.application.name}
                  </Link>
                </span>
-              ) : (
-                <Link to={`/users/${id}/tokens/${token.id}/details`}>
-                  {i18n._(t`Personal access token`)}
-                </Link>
              )}
            </DataListCell>,
-            <DataListCell aria-label={i18n._(t`scope`)} key={token.scope}>
+            <DataListCell aria-label={i18n._(t`Scope`)} key="scope">
              <Label>{i18n._(t`Scope`)}</Label>
              {toTitleCase(token.scope)}
            </DataListCell>,
-            <DataListCell aria-label={i18n._(t`expiration`)} key="expiration">
+            <DataListCell aria-label={i18n._(t`Expiration`)} key="expiration">
              <Label>{i18n._(t`Expires`)}</Label>
              {formatDateString(token.expires)}
            </DataListCell>,
--- a/awx/ui_next/src/screens/User/UserTokenList/UserTokenListItem.test.jsx
+++ b/awx/ui_next/src/screens/User/UserTokenList/UserTokenListItem.test.jsx
@ -21,7 +21,7 @@ const token = {
    },
    application: {
      id: 1,
-      name: 'app',
+      name: 'Foobar app',
    },
  },
  created: '2020-06-23T15:06:43.188634Z',
@ -44,22 +44,57 @@ describe('<UserTokenListItem />', () => {
    expect(wrapper.find('UserTokenListItem').length).toBe(1);
  });

-  test('should render proper data', async () => {
+  test('should render application access token row properly', async () => {
    await act(async () => {
      wrapper = mountWithContexts(
        <UserTokenListItem isSelected={false} token={token} />
      );
    });
    expect(wrapper.find('DataListCheck').prop('checked')).toBe(false);
+    expect(wrapper.find('PFDataListCell[aria-label="Token type"]').text()).toBe(
+      'Application access token'
+    );
    expect(
-      wrapper.find('PFDataListCell[aria-label="application name"]').text()
-    ).toBe('Applicationapp');
-    expect(wrapper.find('PFDataListCell[aria-label="scope"]').text()).toBe(
-      'ScopeRead'
+      wrapper.find('PFDataListCell[aria-label="Application name"]').text()
+    ).toContain('Foobar app');
+    expect(wrapper.find('PFDataListCell[aria-label="Scope"]').text()).toContain(
+      'Read'
    );
-    expect(wrapper.find('PFDataListCell[aria-label="expiration"]').text()).toBe(
-      'Expires10/25/3019, 3:06:43 PM'
+    expect(
+      wrapper.find('PFDataListCell[aria-label="Expiration"]').text()
+    ).toContain('10/25/3019, 3:06:43 PM');
+  });
+
+  test('should render personal access token row properly', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <UserTokenListItem
+          isSelected={false}
+          token={{
+            ...token,
+            refresh_token: null,
+            application: null,
+            scope: 'write',
+            summary_fields: {
+              user: token.summary_fields.user,
+            },
+          }}
+        />
+      );
+    });
+    expect(wrapper.find('DataListCheck').prop('checked')).toBe(false);
+    expect(wrapper.find('PFDataListCell[aria-label="Token type"]').text()).toBe(
+      'Personal access token'
    );
+    expect(
+      wrapper.find('PFDataListCell[aria-label="Application name"]').text()
+    ).toBe('');
+    expect(wrapper.find('PFDataListCell[aria-label="Scope"]').text()).toContain(
+      'Write'
+    );
+    expect(
+      wrapper.find('PFDataListCell[aria-label="Expiration"]').text()
+    ).toContain('10/25/3019, 3:06:43 PM');
  });

  test('should be checked', async () => {
--- a/awx/ui_next/src/screens/User/UserTokens/UserTokens.jsx
+++ b/awx/ui_next/src/screens/User/UserTokens/UserTokens.jsx
@ -1,24 +1,99 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import styled from 'styled-components';
 import { Switch, Route, useParams } from 'react-router-dom';
+import {
+  Alert,
+  ClipboardCopy,
+  ClipboardCopyVariant,
+  Modal,
+} from '@patternfly/react-core';
+import { formatDateString } from '../../../util/dates';
+import { Detail, DetailList } from '../../../components/DetailList';
 import UserTokenAdd from '../UserTokenAdd';
 import UserTokenList from '../UserTokenList';
 import UserToken from '../UserToken';

-function UserTokens({ setBreadcrumb, user }) {
+const TokenAlert = styled(Alert)`
+  margin-bottom: 20px;
+`;
+
+function UserTokens({ i18n, setBreadcrumb, user }) {
+  const [tokenModalSource, setTokenModalSource] = useState(null);
  const { id } = useParams();
+
+  const onSuccessfulAdd = useCallback(token => setTokenModalSource(token), [
+    setTokenModalSource,
+  ]);
+
  return (
-    <Switch>
-      <Route key="add" path="/users/:id/tokens/add">
-        <UserTokenAdd id={Number(id)} />
-      </Route>
-      <Route key="token" path="/users/:id/tokens/:tokenId">
-        <UserToken user={user} setBreadcrumb={setBreadcrumb} id={Number(id)} />
-      </Route>
-      <Route key="list" path="/users/:id/tokens">
-        <UserTokenList id={Number(id)} />
-      </Route>
-    </Switch>
+    <>
+      <Switch>
+        <Route key="add" path="/users/:id/tokens/add">
+          <UserTokenAdd id={Number(id)} onSuccessfulAdd={onSuccessfulAdd} />
+        </Route>
+        <Route key="token" path="/users/:id/tokens/:tokenId">
+          <UserToken
+            user={user}
+            setBreadcrumb={setBreadcrumb}
+            id={Number(id)}
+          />
+        </Route>
+        <Route key="list" path="/users/:id/tokens">
+          <UserTokenList id={Number(id)} />
+        </Route>
+      </Switch>
+      {tokenModalSource && (
+        <Modal
+          aria-label={i18n._(t`Token information`)}
+          isOpen
+          variant="medium"
+          title={i18n._(t`Token information`)}
+          onClose={() => setTokenModalSource(null)}
+        >
+          <TokenAlert
+            variant="info"
+            isInline
+            title={i18n._(
+              t`This is the only time the token value and associated refresh token value will be shown.`
+            )}
+          />
+          <DetailList stacked>
+            {tokenModalSource.token && (
+              <Detail
+                label={i18n._(t`Token`)}
+                value={
+                  <ClipboardCopy
+                    isReadOnly
+                    variant={ClipboardCopyVariant.expansion}
+                  >
+                    {tokenModalSource.token}
+                  </ClipboardCopy>
+                }
+              />
+            )}
+            {tokenModalSource.refresh_token && (
+              <Detail
+                label={i18n._(t`Refresh Token`)}
+                value={
+                  <ClipboardCopy
+                    isReadOnly
+                    variant={ClipboardCopyVariant.expansion}
+                  >
+                    {tokenModalSource.refresh_token}
+                  </ClipboardCopy>
+                }
+              />
+            )}
+            <Detail
+              label={i18n._(t`Expires`)}
+              value={formatDateString(tokenModalSource.expires)}
+            />
+          </DetailList>
+        </Modal>
+      )}
+    </>
  );
 }

--- a/awx/ui_next/src/screens/User/UserTokens/UserTokens.test.jsx
+++ b/awx/ui_next/src/screens/User/UserTokens/UserTokens.test.jsx
@ -0,0 +1,41 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { createMemoryHistory } from 'history';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+
+import UserTokens from './UserTokens';
+
+describe('<UserTokens />', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  test('renders successfully', () => {
+    wrapper = mountWithContexts(<UserTokens />);
+    expect(wrapper.length).toBe(1);
+  });
+
+  test('shows Application information modal after successful creation', async () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/users/1/tokens/add'],
+    });
+    wrapper = mountWithContexts(<UserTokens />, {
+      context: { router: { history } },
+    });
+    expect(wrapper.find('Modal[title="Token information"]').length).toBe(0);
+    await act(async () => {
+      wrapper
+        .find('UserTokenAdd')
+        .props()
+        .onSuccessfulAdd({
+          expires: '3020-03-28T14:26:48.099297Z',
+          token: 'foobar',
+          refresh_token: 'aaaaaaaaaaaaaaaaaaaaaaaaaa',
+        });
+    });
+    wrapper.update();
+    expect(wrapper.find('Modal[title="Token information"]').length).toBe(1);
+  });
+});