Show token/refresh token/expires in modal after successful token add

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 />}
+        <Switch>
-        {!isLoading && user && (
+          <Redirect from="/users/:id" to="/users/:id/details" exact />
-          <Switch>
+          {user && [
-            <Redirect from="/users/:id" to="/users/:id/details" exact />
+            <Route path="/users/:id/edit" key="edit">
-            {user && (
+              <UserEdit user={user} />
-              <Route path="/users/:id/edit">
+            </Route>,
-                <UserEdit user={user} />
+            <Route path="/users/:id/details" key="details">
-              </Route>
+              <UserDetail user={user} />
-            )}
+            </Route>,
-            {user && (
+            <Route path="/users/:id/organizations" key="organizations">
-              <Route path="/users/:id/details">
-                <UserDetail user={user} />
-              </Route>
-            )}
-            <Route path="/users/:id/organizations">
               <UserOrganizations id={Number(match.params.id)} />
-            </Route>
+            </Route>,
-            {user && (
+            <Route path="/users/:id/teams" key="teams">
-              <Route path="/users/:id/teams">
+              <UserTeams />
-                <UserTeams />
+            </Route>,
-              </Route>
+            <Route path="/users/:id/roles" key="roles">
-            )}
+              <UserRolesList user={user} />
-            {user && (
+            </Route>,
-              <Route path="/users/:id/roles">
+            <Route path="/users/:id/tokens" key="tokens">
-                <UserRolesList user={user} />
-              </Route>
-            )}
-            <Route path="/users/:id/tokens">
               <UserTokens
                 user={user}
                 setBreadcrumb={setBreadcrumb}
                 id={Number(match.params.id)}
               />
-            </Route>
+            </Route>,
-            <Route key="not-found" path="*">
+          ]}
+          <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>
   );

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 () => {
+  test('should not show Tokens tab', async () => {
-    UsersAPI.readDetail.mockResolvedValue({ data: mockDetails });
-    UsersAPI.read.mockImplementation(getUsers);
     const history = createMemoryHistory({
       initialEntries: ['/users/1'],
     });

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;
+          response = await UsersAPI.createToken(userId, {
-          await UsersAPI.createToken(userId, formData);
+            ...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]
     )
   );
 

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 />, {
+      wrapper = mountWithContexts(
-        context: { router: { history } },
+        <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: {
+      data: rtnData,
-        id: 2,
-        ...tokenData,
-      },
     });
     await act(async () => {
-      wrapper = mountWithContexts(<UserTokenAdd />, {
+      wrapper = mountWithContexts(
-        context: { router: { history } },
+        <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: {
+      data: rtnData,
-        id: 2,
-        ...tokenData,
-      },
     });
     await act(async () => {
-      wrapper = mountWithContexts(<UserTokenAdd />, {
+      wrapper = mountWithContexts(
-        context: { router: { history } },
+        <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);
   });
 });

awx/ui_next/src/screens/User/UserTokenDetail/UserTokenDetail.jsx

@@ -14,11 +14,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;
+  const {
+    scope,
+    description,
+    created,
+    modified,
+    expires,
+    summary_fields,
+  } = token;
   const history = useHistory();
   const { id, tokenId } = useParams();
   const { request: deleteToken, isLoading, error: deleteError } = useRequest(
@@ -39,6 +47,7 @@ function UserTokenDetail({ token, canEditOrDelete, i18n }) {
         />
         <Detail label={i18n._(t`Description`)} value={description} />
         <Detail label={i18n._(t`Scope`)} value={toTitleCase(scope)} />
+        <Detail label={i18n._(t`Expires`)} value={formatDateString(expires)} />
         <UserDateDetail
           label={i18n._(t`Created`)}
           date={created}

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`)}
+              aria-label={i18n._(t`Application name`)}
-              key={token.id}
+              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>,

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()
+      wrapper.find('PFDataListCell[aria-label="Application name"]').text()
-    ).toBe('Applicationapp');
+    ).toContain('Foobar app');
-    expect(wrapper.find('PFDataListCell[aria-label="scope"]').text()).toBe(
+    expect(wrapper.find('PFDataListCell[aria-label="Scope"]').text()).toContain(
-      'ScopeRead'
+      'Read'
     );
-    expect(wrapper.find('PFDataListCell[aria-label="expiration"]').text()).toBe(
+    expect(
-      'Expires10/25/3019, 3:06:43 PM'
+      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 () => {

awx/ui_next/src/screens/User/UserTokens/UserTokens.jsx

@@ -1,24 +1,86 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
 import { Switch, Route, useParams } from 'react-router-dom';
+import {
+  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 }) {
+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">
+      <Switch>
-        <UserTokenAdd id={Number(id)} />
+        <Route key="add" path="/users/:id/tokens/add">
-      </Route>
+          <UserTokenAdd id={Number(id)} onSuccessfulAdd={onSuccessfulAdd} />
-      <Route key="token" path="/users/:id/tokens/:tokenId">
+        </Route>
-        <UserToken user={user} setBreadcrumb={setBreadcrumb} id={Number(id)} />
+        <Route key="token" path="/users/:id/tokens/:tokenId">
-      </Route>
+          <UserToken
-      <Route key="list" path="/users/:id/tokens">
+            user={user}
-        <UserTokenList id={Number(id)} />
+            setBreadcrumb={setBreadcrumb}
-      </Route>
+            id={Number(id)}
-    </Switch>
+          />
+        </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)}
+        >
+          <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>
+      )}
+    </>
   );
 }
 

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);
+  });
+});