test(): Manage Access Tokens Cypress test (#8936)

datahub-web-react/src/app/settings/AccessTokenModal.tsx

@@ -60,7 +60,7 @@ export const AccessTokenModal = ({ visible, onClose, accessToken, expiresInText
             onCancel={onClose}
             footer={
                 <>
-                    <Button id="createTokenButton" onClick={onClose}>
+                    <Button id="createTokenButton" onClick={onClose} data-testid="access-token-modal-close-button">
                         Close
                     </Button>
                 </>
@@ -81,7 +81,7 @@ export const AccessTokenModal = ({ visible, onClose, accessToken, expiresInText
                 <ModalSectionHeader strong>Token</ModalSectionHeader>
                 <ModalSectionParagraph>{expiresInText}</ModalSectionParagraph>
                 <Typography.Paragraph copyable={{ text: accessToken }}>
-                    <pre>{accessToken}</pre>
+                    <pre data-testid="access-token-value">{accessToken}</pre>
                 </Typography.Paragraph>
             </ModalSection>
             <ModalSection>

datahub-web-react/src/app/settings/AccessTokens.tsx

@@ -199,7 +199,12 @@ export const AccessTokens = () => {
             key: 'x',
             render: (_, record: any) => (
                 <ActionButtonContainer>
-                    <Button onClick={() => onRemoveToken(record)} icon={<DeleteOutlined />} danger>
+                    <Button
+                        onClick={() => onRemoveToken(record)}
+                        icon={<DeleteOutlined />}
+                        danger
+                        data-testid="revoke-token-button"
+                    >
                         Revoke
                     </Button>
                 </ActionButtonContainer>

datahub-web-react/src/app/settings/CreateTokenModal.tsx

@@ -117,10 +117,15 @@ export default function CreateTokenModal({ currentUserUrn, visible, onClose, onC
                 onCancel={onModalClose}
                 footer={
                     <>
-                        <Button onClick={onModalClose} type="text">
+                        <Button onClick={onModalClose} type="text" data-testid="cancel-create-access-token-button">
                             Cancel
                         </Button>
-                        <Button id="createTokenButton" onClick={onCreateNewToken} disabled={createButtonEnabled}>
+                        <Button
+                            id="createTokenButton"
+                            onClick={onCreateNewToken}
+                            disabled={createButtonEnabled}
+                            data-testid="create-access-token-button"
+                        >
                             Create
                         </Button>
                     </>
@@ -148,18 +153,21 @@ export default function CreateTokenModal({ currentUserUrn, visible, onClose, onC
                             ]}
                             hasFeedback
                         >
-                            <Input placeholder="A name for your token" />
+                            <Input placeholder="A name for your token" data-testid="create-access-token-name" />
                         </Form.Item>
                     </Form.Item>
                     <Form.Item label={<Typography.Text strong>Description</Typography.Text>}>
                         <Typography.Paragraph>An optional description for your new token.</Typography.Paragraph>
                         <Form.Item name="description" rules={[{ whitespace: true }, { min: 1, max: 500 }]} hasFeedback>
-                            <Input placeholder="A description for your token" />
+                            <Input
+                                placeholder="A description for your token"
+                                data-testid="create-access-token-description"
+                            />
                         </Form.Item>
                     </Form.Item>
                     <ExpirationSelectContainer>
                         <Typography.Text strong>Expires in</Typography.Text>
-                        <Form.Item name="duration" noStyle>
+                        <Form.Item name="duration" data-testid="create-access-token-duration" noStyle>
                             <ExpirationDurationSelect>
                                 {ACCESS_TOKEN_DURATIONS.map((duration) => (
                                     <Select.Option key={duration.text} value={duration.duration}>

smoke-test/tests/cypress/cypress/e2e/settings/manage_access_tokens.js

@@ -0,0 +1,43 @@
+import { aliasQuery, hasOperationName } from "../utils";
+const test_id = Math.floor(Math.random() * 100000);
+
+describe("manage access tokens", () => {
+    before(() => {
+      cy.intercept("POST", "/api/v2/graphql", (req) => {
+        aliasQuery(req, "appConfig");
+      });
+    });
+    
+    const setTokenAuthEnabledFlag = (isOn) => {
+      cy.intercept("POST", "/api/v2/graphql", (req) => {
+        if (hasOperationName(req, "appConfig")) {
+          req.reply((res) => {
+            res.body.data.appConfig.authConfig.tokenAuthEnabled = isOn;
+          });
+        }
+      });
+    };
+
+    it("create and revoke access token", () => {
+      //create access token, verify token on ui
+      setTokenAuthEnabledFlag(true);
+      cy.loginWithCredentials();
+      cy.goToAccessTokenSettings();
+      cy.clickOptionWithTestId("add-token-button");
+      cy.enterTextInTestId("create-access-token-name", "Token Name" + test_id);
+      cy.enterTextInTestId("create-access-token-description", "Token Description" + test_id);
+      cy.clickOptionWithTestId("create-access-token-button");
+      cy.waitTextVisible("New Personal Access Token");
+      cy.get('[data-testid="access-token-value"]').should("be.visible");
+      cy.get('[data-testid="access-token-value"]').invoke('text').should('match', /^[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$/);
+      cy.clickOptionWithTestId("access-token-modal-close-button");
+      //revoke access token, verify token removed from ui
+      cy.waitTextVisible("Token Name" + test_id);
+      cy.waitTextVisible("Token Description" + test_id);
+      cy.clickOptionWithTestId("revoke-token-button");
+      cy.waitTextVisible("Are you sure you want to revoke this token?");
+      cy.clickOptionWithText("Yes");
+      cy.ensureTextNotPresent("Token Name" + test_id);
+      cy.ensureTextNotPresent("Token Description" + test_id);
+    });
+});

smoke-test/tests/cypress/cypress/support/commands.js

@@ -84,6 +84,12 @@ Cypress.Commands.add("goToOwnershipTypesSettings", () => {
   cy.waitTextVisible("Manage Ownership");
 });
 
+Cypress.Commands.add("goToAccessTokenSettings", () => {
+  cy.visit("/settings/tokens");
+  cy.waitTextVisible("Manage Access Tokens");
+  cy.wait(3000);
+});
+
 Cypress.Commands.add("goToIngestionPage", () => {
   cy.visit("/ingestion");
   cy.waitTextVisible("Manage Ingestion");