From 83eafe885cac8c679ff5deaa9f8e30f576037f56 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Thu, 3 Aug 2023 16:21:54 +0200
Subject: [PATCH] CI/CD Pipeline triggers settings: Use GlCard

Changelog: changed
---
 .../components/triggers_list.vue              | 66 ++++++++++---------
 .../projects/settings/ci_cd/show.html.haml    |  4 +-
 app/views/projects/triggers/_form.html.haml   |  4 ++
 app/views/projects/triggers/_index.html.haml  | 43 ++++++++----
 doc/ci/triggers/index.md                      |  5 +-
 locale/gitlab.pot                             | 23 +++++--
 spec/features/triggers_spec.rb                |  7 +-
 .../components/triggers_list_spec.js          | 24 +++++--
 8 files changed, 113 insertions(+), 63 deletions(-)

diff --git a/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue b/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue
index a1b264cfe54918..0871d543d46d80 100644
--- a/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue
+++ b/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue
@@ -1,13 +1,5 @@
 <script>
-import {
-  GlAlert,
-  GlAvatar,
-  GlAvatarLink,
-  GlBadge,
-  GlButton,
-  GlTable,
-  GlTooltipDirective,
-} from '@gitlab/ui';
+import { GlAvatar, GlAvatarLink, GlBadge, GlButton, GlTable, GlTooltipDirective } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import { thWidthPercent } from '~/lib/utils/table_utility';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -25,7 +17,6 @@ export default {
   },
   components: {
     ClipboardButton,
-    GlAlert,
     GlAvatar,
     GlAvatarLink,
     GlBadge,
@@ -53,28 +44,32 @@ export default {
     {
       key: 'token',
       label: s__('Pipelines|Token'),
-      thClass: thWidthPercent(70),
+      thClass: thWidthPercent(60),
+      tdClass: 'gl-vertical-align-middle!',
     },
     {
       key: 'description',
       label: s__('Pipelines|Description'),
-      thClass: thWidthPercent(15),
+      thClass: thWidthPercent(20),
+      tdClass: 'gl-vertical-align-middle!',
     },
     {
       key: 'owner',
       label: s__('Pipelines|Owner'),
       thClass: thWidthPercent(5),
+      tdClass: 'gl-vertical-align-middle!',
     },
     {
       key: 'lastUsed',
       label: s__('Pipelines|Last Used'),
-      thClass: thWidthPercent(5),
+      thClass: thWidthPercent(10),
+      tdClass: 'gl-vertical-align-middle!',
     },
     {
       key: 'actions',
-      label: '',
+      label: __('Actions'),
       tdClass: 'gl-text-right gl-white-space-nowrap',
-      thClass: thWidthPercent(5),
+      thClass: `gl-text-right ${thWidthPercent(5)}`,
     },
   ],
   computed: {
@@ -88,9 +83,22 @@ export default {
       return '*'.repeat(47);
     },
   },
+  mounted() {
+    const revealButton = document.querySelector('[data-testid="reveal-hide-values-button"]');
+    if (revealButton) {
+      if (this.triggers.length === 0) {
+        revealButton.style.display = 'none';
+      }
+
+      revealButton.addEventListener('click', () => {
+        this.toggleHiddenState(revealButton);
+      });
+    }
+  },
   methods: {
-    toggleHiddenState() {
+    toggleHiddenState(element) {
       this.areValuesHidden = !this.areValuesHidden;
+      element.innerText = this.valuesButtonText;
     },
   },
 };
@@ -102,7 +110,8 @@ export default {
       v-if="hasTriggers"
       :fields="$options.fields"
       :items="triggers"
-      class="triggers-list"
+      class="triggers-list gl-mb-0"
+      stacked="md"
       responsive
     >
       <template #cell(token)="{ item }">
@@ -116,8 +125,8 @@ export default {
           :title="$options.i18n.copyTrigger"
           css-class="gl-border-none gl-py-0 gl-px-2"
         />
-        <div class="gl-display-inline-block gl-ml-3">
-          <gl-badge v-if="!item.canAccessProject" variant="danger">
+        <div v-if="!item.canAccessProject" class="gl-display-inline-block gl-ml-3">
+          <gl-badge variant="danger">
             <span
               v-gl-tooltip.viewport
               boundary="viewport"
@@ -132,7 +141,7 @@ export default {
           :title="item.description"
           truncate-target="child"
           placement="top"
-          class="gl-max-w-15 gl-display-flex"
+          class="gl-max-w-15 gl-display-inline-flex"
         >
           <div class="gl-flex-grow-1 gl-text-truncate">{{ item.description }}</div>
         </tooltip-on-truncate>
@@ -157,6 +166,7 @@ export default {
           :title="$options.i18n.editButton"
           :aria-label="$options.i18n.editButton"
           icon="pencil"
+          category="tertiary"
           data-testid="edit-btn"
           :href="item.editProjectTriggerPath"
         />
@@ -164,32 +174,24 @@ export default {
           :title="$options.i18n.revokeButton"
           :aria-label="$options.i18n.revokeButton"
           icon="remove"
+          category="tertiary"
           :data-confirm="$options.i18n.revokeButtonConfirm"
           data-method="delete"
           data-confirm-btn-variant="danger"
           rel="nofollow"
-          class="gl-ml-3"
           data-testid="trigger_revoke_button"
           data-qa-selector="trigger_revoke_button"
           :href="item.projectTriggerPath"
         />
       </template>
     </gl-table>
-    <gl-alert
+    <div
       v-else
-      variant="warning"
-      :dismissible="false"
-      :show-icon="false"
+      class="gl-new-card-empty gl-px-5 gl-py-4"
       data-testid="no_triggers_content"
       data-qa-selector="no_triggers_content"
     >
       {{ s__('Pipelines|No triggers have been created yet. Add one using the form above.') }}
-    </gl-alert>
-    <gl-button
-      v-if="hasTriggers"
-      data-testid="reveal-hide-values-button"
-      @click="toggleHiddenState"
-      >{{ valuesButtonText }}</gl-button
-    >
+    </div>
   </div>
 </template>
diff --git a/app/views/projects/settings/ci_cd/show.html.haml b/app/views/projects/settings/ci_cd/show.html.haml
index 19f5ae4e6b3a70..62040703c8f56c 100644
--- a/app/views/projects/settings/ci_cd/show.html.haml
+++ b/app/views/projects/settings/ci_cd/show.html.haml
@@ -70,10 +70,10 @@
 %section.settings.no-animate#js-pipeline-triggers{ class: ('expanded' if expanded) }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _("Pipeline triggers")
+      = _("Pipeline trigger tokens")
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
+    %p.gl-text-secondary.gl-mb-0
       = _("Trigger a pipeline for a branch or tag by generating a trigger token and using it with an API call. The token impersonates a user's project access and permissions.")
       = link_to _('Learn more.'), help_page_path('ci/triggers/index'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
diff --git a/app/views/projects/triggers/_form.html.haml b/app/views/projects/triggers/_form.html.haml
index b621f1ab3ed0d7..b7e226b009c009 100644
--- a/app/views/projects/triggers/_form.html.haml
+++ b/app/views/projects/triggers/_form.html.haml
@@ -1,3 +1,4 @@
+- show_cancel_button = local_assigns.fetch(:show_cancel_button, false)
 = gitlab_ui_form_for [@project, @trigger], html: { class: 'gl-show-field-errors' } do |f|
   = form_errors(@trigger)
 
@@ -9,3 +10,6 @@
     = f.label :key, s_("Trigger|Description"), class: "label-bold"
     = f.text_field :description, class: 'form-control gl-form-input', required: true, title: 'Trigger description is required.', placeholder: s_("Trigger|Trigger description")
   = f.submit btn_text, pajamas_button: true
+  - if show_cancel_button
+    = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-2 js-toggle-button' }) do
+      = _('Cancel')
diff --git a/app/views/projects/triggers/_index.html.haml b/app/views/projects/triggers/_index.html.haml
index b68aad24b50b7e..7b6915b7b856d9 100644
--- a/app/views/projects/triggers/_index.html.haml
+++ b/app/views/projects/triggers/_index.html.haml
@@ -1,17 +1,38 @@
+- add_form_class = 'gl-display-none' if !form_errors(@trigger)
+- hide_class = 'gl-display-none' if form_errors(@trigger)
+
 .row.gl-mt-3.gl-mb-3
   .col-lg-12
-    = render Pajamas::CardComponent.new do |c|
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header gl-flex-wrap gl-sm-flex-nowrap' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
       - c.with_header do
-        = _("Manage your project's triggers")
+        .gl-new-card-title-wrapper
+          %h5.gl-new-card-title
+            = _("Active pipeline trigger tokens")
+            .gl-new-card-count
+              = sprite_icon('token', css_class: 'gl-mr-2')
+              = @triggers.size
+        .gl-new-card-actions.gl-display-flex.gl-justify-content-end.gl-w-full.gl-sm-w-auto.gl-mt-3.gl-sm-mt-0
+          = render Pajamas::ButtonComponent.new(size: :small, category: :tertiary, button_options: { data: { testid: 'reveal-hide-values-button' } }) do
+            = _('Reveal values')
+          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "gl-ml-2 js-toggle-button js-toggle-content #{hide_class}" }) do
+            = _('Add new token')
+
       - c.with_body do
-        = render 'projects/triggers/form', btn_text: _('Add trigger')
-        .gl-mb-5
+        .gl-new-card-add-form.gl-m-3.js-toggle-content{ class: add_form_class }
+          %h4.gl-mt-0
+            = _('Add new pipeline trigger token')
+          = render 'projects/triggers/form', btn_text: _('Create pipeline trigger token'), show_cancel_button: true
+
         #js-ci-pipeline-triggers-list.triggers-list{ data: { triggers: @triggers_json } }
-      - c.with_footer do
-        %p
-          = _("These examples show how to trigger this project's pipeline for a branch or tag.")
 
-        %p.light
+    %details.gl-mt-5.gl-border.gl-rounded-base
+      %summary.gl-py-3.gl-px-5.gl-font-weight-semibold
+        = _("View trigger token usage examples")
+      .gl-p-5
+        %p.gl-text-secondary
+          = _("These examples show common methods of triggering a pipeline with a pipeline trigger token. The URL and ID for this project is prefilled.")
+
+        %p.gl-text-secondary
           = _('In each example, replace %{code_start}TOKEN%{code_end} with the trigger token you generated and replace %{code_start}REF_NAME%{code_end} with the branch or tag name.').html_safe % { code_start: '<code>'.html_safe, code_end: '</code>'.html_safe }
 
         %h5.gl-mt-3
@@ -40,10 +61,10 @@
         %h5.gl-mt-3
           = _('Pass job variables')
 
-        %p.light
+        %p.gl-text-secondary
           = _('To pass variables to the triggered pipeline, add %{code_start}variables[VARIABLE]=VALUE%{code_end} to the API request.').html_safe % { code_start: '<code>'.html_safe, code_end: '</code>'.html_safe }
 
-        %p.light
+        %p.gl-text-secondary
           = _('cURL:')
 
         %pre
@@ -54,7 +75,7 @@
                  -F "ref=REF_NAME" \
                  -F "variables[RUN_NIGHTLY_BUILD]=true" \
                  #{builds_trigger_url(@project.id)}
-        %p.light
+        %p.gl-text-secondary
           = _('Webhook:')
 
         %pre.gl-mb-0
diff --git a/doc/ci/triggers/index.md b/doc/ci/triggers/index.md
index c955097f6f5fcf..0b2b46f28fe086 100644
--- a/doc/ci/triggers/index.md
+++ b/doc/ci/triggers/index.md
@@ -28,8 +28,9 @@ To create a trigger token:
 
 1. On the left sidebar, at the top, select **Search GitLab** (**{search}**) to find your project.
 1. Select **Settings > CI/CD**.
-1. Expand **Pipeline triggers**.
-1. Enter a description and select **Add trigger**.
+1. Expand **Pipeline trigger tokens**.
+1. Select **Add new token**
+1. Enter a description and select **Create pipeline trigger token**.
    - You can view and copy the full token for all triggers you have created.
    - You can only see the first 4 characters for tokens created by other project members.
 
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 952e3e6e6ee097..8844e4af240db5 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2683,6 +2683,9 @@ msgstr ""
 msgid "Active personal access tokens"
 msgstr ""
 
+msgid "Active pipeline trigger tokens"
+msgstr ""
+
 msgid "Active project access tokens"
 msgstr ""
 
@@ -2908,6 +2911,9 @@ msgstr ""
 msgid "Add new key"
 msgstr ""
 
+msgid "Add new pipeline trigger token"
+msgstr ""
+
 msgid "Add new token"
 msgstr ""
 
@@ -2977,9 +2983,6 @@ msgstr ""
 msgid "Add topics to projects to help users find them."
 msgstr ""
 
-msgid "Add trigger"
-msgstr ""
-
 msgid "Add variable"
 msgstr ""
 
@@ -13667,6 +13670,9 @@ msgstr ""
 msgid "Create phone verification exemption"
 msgstr ""
 
+msgid "Create pipeline trigger token"
+msgstr ""
+
 msgid "Create project"
 msgstr ""
 
@@ -28463,9 +28469,6 @@ msgstr ""
 msgid "Manage usage"
 msgstr ""
 
-msgid "Manage your project's triggers"
-msgstr ""
-
 msgid "Manage your subscription"
 msgstr ""
 
@@ -33972,6 +33975,9 @@ msgstr ""
 msgid "Pipeline subscriptions trigger a new pipeline on the default branch of this project when a pipeline successfully completes for a new tag on the %{default_branch_docs} of the subscribed project."
 msgstr ""
 
+msgid "Pipeline trigger tokens"
+msgstr ""
+
 msgid "Pipeline triggers"
 msgstr ""
 
@@ -47653,7 +47659,7 @@ msgstr ""
 msgid "These dates affect how your epics appear in the roadmap. Set a fixed date or one inherited from the milestones assigned to issues in this epic."
 msgstr ""
 
-msgid "These examples show how to trigger this project's pipeline for a branch or tag."
+msgid "These examples show common methods of triggering a pipeline with a pipeline trigger token. The URL and ID for this project is prefilled."
 msgstr ""
 
 msgid "These existing issues have a similar title. It might be better to comment there instead of creating another similar issue."
@@ -51662,6 +51668,9 @@ msgstr ""
 msgid "View the latest successful deployment to this environment"
 msgstr ""
 
+msgid "View trigger token usage examples"
+msgstr ""
+
 msgid "View usage details"
 msgstr ""
 
diff --git a/spec/features/triggers_spec.rb b/spec/features/triggers_spec.rb
index 903211ec250f82..52df4bfece27a1 100644
--- a/spec/features/triggers_spec.rb
+++ b/spec/features/triggers_spec.rb
@@ -26,16 +26,18 @@
   describe 'triggers page' do
     describe 'create trigger workflow' do
       it 'prevents adding new trigger with no description' do
+        click_button 'Add new token'
         fill_in 'trigger_description', with: ''
-        click_button 'Add trigger'
+        click_button 'Create pipeline trigger token'
 
         # See if input has error due to empty value
         expect(page.find('form.gl-show-field-errors .gl-field-error')).to be_visible
       end
 
       it 'adds new trigger with description' do
+        click_button 'Add new token'
         fill_in 'trigger_description', with: 'trigger desc'
-        click_button 'Add trigger'
+        click_button 'Create pipeline trigger token'
 
         aggregate_failures 'display creation notice and trigger is created' do
           expect(page.find('[data-testid="alert-info"]')).to have_content 'Trigger was created successfully.'
@@ -100,6 +102,7 @@
 
     describe 'show triggers workflow' do
       it 'contains trigger description placeholder' do
+        click_button 'Add new token'
         expect(page.find('#trigger_description')['placeholder']).to eq 'Trigger description'
       end
 
diff --git a/spec/frontend/ci_settings_pipeline_triggers/components/triggers_list_spec.js b/spec/frontend/ci_settings_pipeline_triggers/components/triggers_list_spec.js
index f1df4208fa2a35..6ce86852095f24 100644
--- a/spec/frontend/ci_settings_pipeline_triggers/components/triggers_list_spec.js
+++ b/spec/frontend/ci_settings_pipeline_triggers/components/triggers_list_spec.js
@@ -1,6 +1,7 @@
 import { GlTable, GlBadge } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import TriggersList from '~/ci_settings_pipeline_triggers/components/triggers_list.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -25,17 +26,26 @@ describe('TriggersList', () => {
   const findInvalidBadge = (i) => findCell(i, 0).findComponent(GlBadge);
   const findEditBtn = (i) => findRowAt(i).find('[data-testid="edit-btn"]');
   const findRevokeBtn = (i) => findRowAt(i).find('[data-testid="trigger_revoke_button"]');
-  const findRevealHideButton = () => wrapper.findByTestId('reveal-hide-values-button');
+  const findRevealHideButton = () =>
+    document.querySelector('[data-testid="reveal-hide-values-button"]');
 
   describe('With triggers set', () => {
     beforeEach(async () => {
+      setHTMLFixture(`
+        <button data-testid="reveal-hide-values-button">Reveal values</button>
+      `);
+
       createComponent();
 
       await nextTick();
     });
 
+    afterEach(() => {
+      resetHTMLFixture();
+    });
+
     it('displays a table with expected headers', () => {
-      const headers = ['Token', 'Description', 'Owner', 'Last Used', ''];
+      const headers = ['Token', 'Description', 'Owner', 'Last Used', 'Actions'];
       headers.forEach((header, i) => {
         expect(findHeaderAt(i).text()).toBe(header);
       });
@@ -44,16 +54,16 @@ describe('TriggersList', () => {
     it('displays a "Reveal/Hide values" button', async () => {
       const revealHideButton = findRevealHideButton();
 
-      expect(revealHideButton.exists()).toBe(true);
-      expect(revealHideButton.text()).toBe('Reveal values');
+      expect(Boolean(revealHideButton)).toBe(true);
+      expect(revealHideButton.innerText).toBe('Reveal values');
 
-      await revealHideButton.vm.$emit('click');
+      await revealHideButton.click();
 
-      expect(revealHideButton.text()).toBe('Hide values');
+      expect(revealHideButton.innerText).toBe('Hide values');
     });
 
     it('displays a table with rows', async () => {
-      await findRevealHideButton().vm.$emit('click');
+      await findRevealHideButton().click();
 
       expect(findRows()).toHaveLength(triggers.length);
 
-- 
GitLab