FIX: Add back missing API key 'peek' step (#30683)

In #30096 we converted the API keys UI to follow the new admin UI guidelines.

During this conversion, the step where you get a chance to copy the API key after creating, was lost due to a rebase mistake.

This re-introduces it.

app/assets/javascripts/admin/addon/components/admin-config-areas/api-keys-new.gjs

@@ -24,6 +24,8 @@ export default class AdminConfigAreasApiKeysNew extends Component {
   @tracked loadingScopes = false;
   @tracked scopes = null;
 
+  @tracked generatedApiKey = null;
+
   userModes = [
     { id: "all", name: i18n("admin.api.all_users") },
     { id: "single", name: i18n("admin.api.single_user") },
@@ -93,8 +95,8 @@ export default class AdminConfigAreasApiKeysNew extends Component {
     }
 
     try {
-      await this.store.createRecord("api-key").save(payload);
-      this.router.transitionTo("adminApiKeys");
+      const result = await this.store.createRecord("api-key").save(payload);
+      this.generatedApiKey = result.payload.key;
     } catch (error) {
       popupAjaxError(error);
     }
@@ -148,9 +150,18 @@ export default class AdminConfigAreasApiKeysNew extends Component {
   <template>
     <BackButton @route="adminApiKeys.index" @label="admin.api_keys.back" />
 
-    <div class="admin-config-area user-field">
+    <div class="admin-config-area">
       <div class="admin-config-area__primary-content">
         <div class="admin-config-area-card">
+          {{#if this.generatedApiKey}}
+            <div>{{i18n "admin.api.not_shown_again"}}</div>
+            <div class="generated-api-key">{{this.generatedApiKey}}</div>
+            <DButton
+              @route="adminApiKeys.index"
+              @label="admin.api_keys.continue"
+              class="continue btn-danger"
+            />
+          {{else}}
             <ConditionalLoadingSection @isLoading={{this.loadingScopes}}>
               <Form
                 @onSubmit={{this.save}}
@@ -221,7 +232,9 @@ export default class AdminConfigAreasApiKeysNew extends Component {
                 </form.Field>
 
                 {{#if (eq transientData.scope_mode "granular")}}
-                <h2 class="scopes-title">{{i18n "admin.api.scopes.title"}}</h2>
+                  <h2 class="scopes-title">{{i18n
+                      "admin.api.scopes.title"
+                    }}</h2>
                   <p>{{i18n "admin.api.scopes.description"}}</p>
                   <table class="scopes-table grid">
                     <thead>
@@ -259,7 +272,9 @@ export default class AdminConfigAreasApiKeysNew extends Component {
                             </topicsCollection.Field>
                           </td>
                           <td>
-                          <div class="scope-name">{{collectionData.name}}</div>
+                            <div
+                              class="scope-name"
+                            >{{collectionData.name}}</div>
                             <DTooltip
                               @icon="circle-question"
                               @content={{i18n
@@ -311,6 +326,7 @@ export default class AdminConfigAreasApiKeysNew extends Component {
                 </form.Actions>
               </Form>
             </ConditionalLoadingSection>
+          {{/if}}
         </div>
       </div>
     </div>

app/assets/stylesheets/common/admin/api.scss

@@ -100,6 +100,10 @@
     }
   }
 
+  .generated-api-key {
+    margin: 1em 0;
+  }
+
   .api-key {
     padding: 10px;
     margin-bottom: 10px;

config/locales/client.en.yml

@@ -5403,6 +5403,7 @@ en:
         edit: "Edit"
         save: "Save"
         cancel: "Cancel"
+        continue: "Continue"
         back: "Back to API keys"
         revoke: "Revoke"
         undo_revoke: "Undo revoke"

spec/system/admin_api_keys_spec.rb

@@ -22,6 +22,10 @@ describe "Admin API Keys Page", type: :system do
     api_keys_page.visit_page
     api_keys_page.add_api_key(description: "Second Integration")
 
+    expect(api_keys_page).to have_generated_api_key
+
+    api_keys_page.click_continue
+
     expect(api_keys_page).to have_api_key_listed("Second Integration")
   end
 

spec/system/page_objects/admin_api_keys.rb

@@ -26,6 +26,10 @@ module PageObjects
         page.has_no_css?(table_selector, text: name)
       end
 
+      def has_generated_api_key?
+        page.has_css?(".generated-api-key")
+      end
+
       def add_api_key(description:)
         page.find(header_actions_selector, text: I18n.t("admin_js.admin.api_keys.add")).click
 
@@ -34,6 +38,10 @@ module PageObjects
         form.find(".save").click
       end
 
+      def click_continue
+        page.find("button", text: I18n.t("admin_js.admin.api_keys.continue")).click
+      end
+
       def click_edit(description)
         row = page.find(row_selector, text: description)
         row.find("button", text: I18n.t("admin_js.admin.api_keys.edit")).click