From 311381940ddabfb5aa04fcae2c14eea8d7e4d236 Mon Sep 17 00:00:00 2001
From: Scott Bishel <scott.bishel@mattermost.com>
Date: Tue, 5 Nov 2024 17:00:26 -0700
Subject: [PATCH] update manage token model to work on load (#29022)

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../manage_tokens_modal.test.tsx.snap         | 270 +++++++++++++++++-
 .../manage_tokens_modal.test.tsx              |  45 ++-
 .../manage_tokens_modal.tsx                   |  11 +-
 3 files changed, 303 insertions(+), 23 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/manage_tokens_modal/__snapshots__/manage_tokens_modal.test.tsx.snap b/webapp/channels/src/components/admin_console/manage_tokens_modal/__snapshots__/manage_tokens_modal.test.tsx.snap
index 9ccf398081..6e3d8e48dc 100644
--- a/webapp/channels/src/components/admin_console/manage_tokens_modal/__snapshots__/manage_tokens_modal.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/manage_tokens_modal/__snapshots__/manage_tokens_modal.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components/admin_console/manage_tokens_modal/manage_tokens_modal.tsx should match snapshot 1`] = `
+exports[`components/admin_console/manage_tokens_modal/manage_tokens_modal.tsx initial call should match snapshot 1`] = `
 <Modal
   animation={true}
   aria-labelledby="manageTokensModalLabel"
@@ -95,3 +95,271 @@ exports[`components/admin_console/manage_tokens_modal/manage_tokens_modal.tsx sh
   </ModalBody>
 </Modal>
 `;
+
+exports[`components/admin_console/manage_tokens_modal/manage_tokens_modal.tsx should display list of tokens 1`] = `
+<Modal
+  animation={true}
+  aria-labelledby="manageTokensModalLabel"
+  autoFocus={true}
+  backdrop={true}
+  bsClass="modal"
+  dialogClassName="a11y__modal manage-teams"
+  dialogComponentClass={[Function]}
+  enforceFocus={true}
+  keyboard={true}
+  manager={
+    ModalManager {
+      "add": [Function],
+      "containers": Array [],
+      "data": Array [],
+      "handleContainerOverflow": true,
+      "hideSiblingNodes": true,
+      "isTopModal": [Function],
+      "modals": Array [],
+      "remove": [Function],
+    }
+  }
+  onExited={[MockFunction]}
+  onHide={[Function]}
+  renderBackdrop={[Function]}
+  restoreFocus={true}
+  role="dialog"
+  show={true}
+>
+  <ModalHeader
+    bsClass="modal-header"
+    closeButton={true}
+    closeLabel="Close"
+  >
+    <ModalTitle
+      bsClass="modal-title"
+      componentClass="h1"
+      id="manageTokensModalLabel"
+    >
+      <MemoizedFormattedMessage
+        defaultMessage="Manage Personal Access Tokens"
+        id="admin.manage_tokens.manageTokensTitle"
+      />
+    </ModalTitle>
+  </ModalHeader>
+  <ModalBody
+    bsClass="modal-body"
+    componentClass="div"
+  >
+    <div>
+      <div
+        className="manage-teams__user"
+      >
+        <Memo(Avatar)
+          size="lg"
+          url="/api/v4/users/defaultuser/image"
+          username="some-user"
+        />
+        <div
+          className="manage-teams__info"
+        >
+          <div
+            className="manage-teams__name"
+          >
+            @some-user
+          </div>
+          <div
+            className="manage-teams__email"
+          />
+        </div>
+      </div>
+      <div
+        className="pt-3"
+      >
+        <MemoizedFormattedMessage
+          defaultMessage="Personal access tokens function similarly to session tokens and can be used by integrations to <linkAuthentication>interact with this Mattermost server</linkAuthentication>. Tokens are disabled if the user is deactivated. Learn more about <linkPersonalAccessTokens>personal access tokens</linkPersonalAccessTokens>."
+          id="admin.manage_tokens.userAccessTokensDescription"
+          values={
+            Object {
+              "linkAuthentication": [Function],
+              "linkPersonalAccessTokens": [Function],
+            }
+          }
+        />
+      </div>
+      <div
+        className="manage-teams__teams"
+      >
+        <div
+          className="manage-teams__team"
+          key="id1"
+        >
+          <div
+            className="manage-teams__team-name"
+          >
+            <div
+              className="whitespace--nowrap overflow--ellipsis"
+            >
+              <MemoizedFormattedMessage
+                defaultMessage="Token Description: "
+                id="admin.manage_tokens.userAccessTokensNameLabel"
+              />
+              description
+            </div>
+            <div
+              className="whitespace--nowrap overflow--ellipsis"
+            >
+              <MemoizedFormattedMessage
+                defaultMessage="Token ID: "
+                id="admin.manage_tokens.userAccessTokensIdLabel"
+              />
+              id1
+            </div>
+          </div>
+          <div
+            className="manage-teams__team-actions"
+          >
+            <Connect(Component)
+              onError={[Function]}
+              tokenId="id1"
+            />
+          </div>
+        </div>
+        <div
+          className="manage-teams__team"
+          key="id2"
+        >
+          <div
+            className="manage-teams__team-name"
+          >
+            <div
+              className="whitespace--nowrap overflow--ellipsis"
+            >
+              <MemoizedFormattedMessage
+                defaultMessage="Token Description: "
+                id="admin.manage_tokens.userAccessTokensNameLabel"
+              />
+              description
+            </div>
+            <div
+              className="whitespace--nowrap overflow--ellipsis"
+            >
+              <MemoizedFormattedMessage
+                defaultMessage="Token ID: "
+                id="admin.manage_tokens.userAccessTokensIdLabel"
+              />
+              id2
+            </div>
+          </div>
+          <div
+            className="manage-teams__team-actions"
+          >
+            <Connect(Component)
+              onError={[Function]}
+              tokenId="id2"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </ModalBody>
+</Modal>
+`;
+
+exports[`components/admin_console/manage_tokens_modal/manage_tokens_modal.tsx should replace loading screen on update 1`] = `
+<Modal
+  animation={true}
+  aria-labelledby="manageTokensModalLabel"
+  autoFocus={true}
+  backdrop={true}
+  bsClass="modal"
+  dialogClassName="a11y__modal manage-teams"
+  dialogComponentClass={[Function]}
+  enforceFocus={true}
+  keyboard={true}
+  manager={
+    ModalManager {
+      "add": [Function],
+      "containers": Array [],
+      "data": Array [],
+      "handleContainerOverflow": true,
+      "hideSiblingNodes": true,
+      "isTopModal": [Function],
+      "modals": Array [],
+      "remove": [Function],
+    }
+  }
+  onExited={[MockFunction]}
+  onHide={[Function]}
+  renderBackdrop={[Function]}
+  restoreFocus={true}
+  role="dialog"
+  show={true}
+>
+  <ModalHeader
+    bsClass="modal-header"
+    closeButton={true}
+    closeLabel="Close"
+  >
+    <ModalTitle
+      bsClass="modal-title"
+      componentClass="h1"
+      id="manageTokensModalLabel"
+    >
+      <MemoizedFormattedMessage
+        defaultMessage="Manage Personal Access Tokens"
+        id="admin.manage_tokens.manageTokensTitle"
+      />
+    </ModalTitle>
+  </ModalHeader>
+  <ModalBody
+    bsClass="modal-body"
+    componentClass="div"
+  >
+    <div>
+      <div
+        className="manage-teams__user"
+      >
+        <Memo(Avatar)
+          size="lg"
+          url="/api/v4/users/defaultuser/image"
+          username="some-user"
+        />
+        <div
+          className="manage-teams__info"
+        >
+          <div
+            className="manage-teams__name"
+          >
+            @some-user
+          </div>
+          <div
+            className="manage-teams__email"
+          />
+        </div>
+      </div>
+      <div
+        className="pt-3"
+      >
+        <MemoizedFormattedMessage
+          defaultMessage="Personal access tokens function similarly to session tokens and can be used by integrations to <linkAuthentication>interact with this Mattermost server</linkAuthentication>. Tokens are disabled if the user is deactivated. Learn more about <linkPersonalAccessTokens>personal access tokens</linkPersonalAccessTokens>."
+          id="admin.manage_tokens.userAccessTokensDescription"
+          values={
+            Object {
+              "linkAuthentication": [Function],
+              "linkPersonalAccessTokens": [Function],
+            }
+          }
+        />
+      </div>
+      <div
+        className="manage-teams__teams"
+      >
+        <div
+          className="manage-row__empty"
+        >
+          <MemoizedFormattedMessage
+            defaultMessage="No personal access tokens."
+            id="admin.manage_tokens.userAccessTokensNone"
+          />
+        </div>
+      </div>
+    </div>
+  </ModalBody>
+</Modal>
+`;
diff --git a/webapp/channels/src/components/admin_console/manage_tokens_modal/manage_tokens_modal.test.tsx b/webapp/channels/src/components/admin_console/manage_tokens_modal/manage_tokens_modal.test.tsx
index 008f05ad15..16c3b8e1bc 100644
--- a/webapp/channels/src/components/admin_console/manage_tokens_modal/manage_tokens_modal.test.tsx
+++ b/webapp/channels/src/components/admin_console/manage_tokens_modal/manage_tokens_modal.test.tsx
@@ -4,6 +4,8 @@
 import {shallow} from 'enzyme';
 import React from 'react';
 
+import LoadingScreen from 'components/loading_screen';
+
 import {TestHelper} from 'utils/test_helper';
 
 import ManageTokensModal from './manage_tokens_modal';
@@ -20,36 +22,51 @@ describe('components/admin_console/manage_tokens_modal/manage_tokens_modal.tsx',
         onExited: jest.fn(),
     };
 
-    test('should match snapshot', () => {
+    test('initial call should match snapshot', () => {
         const wrapper = shallow(
             <ManageTokensModal {...baseProps}/>,
         );
         expect(wrapper).toMatchSnapshot();
+        expect(baseProps.actions.getUserAccessTokensForUser).toHaveBeenCalledTimes(1);
+        expect(wrapper.find('.manage-teams__teams').exists()).toBe(true);
+        expect(wrapper.find(LoadingScreen).exists()).toBe(true);
     });
 
-    test('should not call getUserAccessTokensForUser on mount', () => {
+    test('should replace loading screen on update', () => {
         const wrapper = shallow(
             <ManageTokensModal {...baseProps}/>,
         );
-        expect(baseProps.actions.getUserAccessTokensForUser).toHaveBeenCalledTimes(0);
-        expect(wrapper.state('userAccessTokens')).toBeUndefined();
-    });
 
-    test('should call getUserAccessTokensForUser on user change', () => {
-        // create new user as only by then the update method triggers token retrieval
         const newProps = {
             ...baseProps,
-            user: TestHelper.getUserMock({
-                id: 'newuser',
-            }),
+            userAccessTokens: {},
         };
+        wrapper.setProps(newProps);
+        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.find('.manage-teams__teams').exists()).toBe(true);
+        expect(wrapper.find('.manage-row__empty').exists()).toBe(true);
+    });
+
+    test('should display list of tokens', () => {
         const wrapper = shallow(
             <ManageTokensModal {...baseProps}/>,
         );
+        const newProps = {
+            ...baseProps,
+            userAccessTokens: [
+                {
+                    id: 'id1',
+                    description: 'description',
+                },
+                {
+                    id: 'id2',
+                    description: 'description',
+                },
+            ],
+        };
         wrapper.setProps(newProps);
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        wrapper.instance().componentDidUpdate(baseProps, newProps);
-        expect(newProps.actions.getUserAccessTokensForUser).toHaveBeenCalledTimes(2);
+        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.find('.manage-teams__teams').exists()).toBe(true);
+        expect(wrapper.find('.manage-teams__team').length).toBe(2);
     });
 });
diff --git a/webapp/channels/src/components/admin_console/manage_tokens_modal/manage_tokens_modal.tsx b/webapp/channels/src/components/admin_console/manage_tokens_modal/manage_tokens_modal.tsx
index 01c452ffdb..37c0b08236 100644
--- a/webapp/channels/src/components/admin_console/manage_tokens_modal/manage_tokens_modal.tsx
+++ b/webapp/channels/src/components/admin_console/manage_tokens_modal/manage_tokens_modal.tsx
@@ -22,7 +22,7 @@ export type Props = {
     /**
      * The user the roles are being managed for
      */
-    user?: UserProfile;
+    user: UserProfile;
 
     /**
      * The personal access tokens for a user, object with token ids as keys
@@ -53,10 +53,9 @@ export default class ManageTokensModal extends React.PureComponent<Props, State>
         };
     }
 
-    public componentDidUpdate(prevProps: Props): void {
+    public componentDidMount(): void {
         const userId = this.props.user ? this.props.user.id : null;
-        const prevUserId = prevProps.user ? prevProps.user.id : null;
-        if (userId && prevUserId !== userId) {
+        if (userId) {
             this.props.actions.getUserAccessTokensForUser(userId, 0, 200);
         }
     }
@@ -74,10 +73,6 @@ export default class ManageTokensModal extends React.PureComponent<Props, State>
     private renderContents = (): JSX.Element => {
         const {user, userAccessTokens} = this.props;
 
-        if (!user) {
-            return <LoadingScreen/>;
-        }
-
         let name = UserUtils.getFullName(user);
         if (name) {
             name += ` (@${user.username})`;