Merge pull request #9122 from hi-rustin/rustin-patch-regenerate

Add support for regenerating the token

Author: Turbo87

app/components/settings/api-tokens.hbs

@@ -113,6 +113,14 @@
 
         <div local-class="actions">
           {{#unless token.isExpired}}
+            <LinkTo
+              @route="settings.tokens.new"
+              @query={{hash from=token.id}}
+              local-class="regenerate-button"
+              data-test-regenerate-token-button
+            >
+              Regenerate
+            </LinkTo>
             <button
               type="button"
               local-class="revoke-button"

app/components/settings/api-tokens.module.css

@@ -89,6 +89,12 @@
     border-radius: var(--space-3xs);
 }
 
+.regenerate-button {
+    composes: yellow-button small from '../../styles/shared/buttons.module.css';
+    flex-grow: 1;
+    border-radius: var(--space-3xs);
+}
+
 .new-token {
     margin-top: var(--space-s);
 }
@@ -190,11 +196,19 @@
         }
 
         .actions {
+            display: flex;
+            flex-direction: column;
             grid-area: actions;
             align-self: start;
             margin: 0 0 0 var(--space-xs);
         }
 
+        .actions > * {
+            flex-grow: 1;
+            width: 100%;
+            margin-top: var(--space-xs);
+        }
+
         .new-token {
             grid-area: details;
             margin-bottom: 0;

e2e/acceptance/api-token.spec.ts

@@ -88,6 +88,15 @@ test.describe('Acceptance | api-tokens', { tag: '@acceptance' }, () => {
     await expect(page.locator('[data-test-error]')).toHaveCount(0);
   });
 
+  test('API tokens can be regenerated', async ({ page }) => {
+    await page.goto('/settings/tokens');
+    await expect(page).toHaveURL('/settings/tokens');
+    await expect(page.locator('[data-test-api-token]')).toHaveCount(3);
+
+    await page.click('[data-test-api-token="1"] [data-test-regenerate-token-button]');
+    await expect(page).toHaveURL('/settings/tokens/new?from=1');
+  });
+
   test('failed API tokens revocation shows an error', async ({ page, mirage }) => {
     await mirage.addHook(server => {
       server.delete('/api/v1/me/tokens/:id', {}, 500);

tests/acceptance/api-token-test.js

@@ -103,6 +103,17 @@ module('Acceptance | api-tokens', function (hooks) {
     assert.dom('[data-test-error]').doesNotExist();
   });
 
+  test('API tokens can be regenerated', async function (assert) {
+    prepare(this);
+
+    await visit('/settings/tokens');
+    assert.strictEqual(currentURL(), '/settings/tokens');
+    assert.dom('[data-test-api-token]').exists({ count: 3 });
+
+    await click('[data-test-api-token="1"] [data-test-regenerate-token-button]');
+    assert.strictEqual(currentURL(), '/settings/tokens/new?from=1');
+  });
+
   test('failed API tokens revocation shows an error', async function (assert) {
     prepare(this);