From 24abb3da84aa09b4c44514c84092be4c039529b3 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Mon, 31 Jul 2023 12:11:28 +0200
Subject: [PATCH] CI/CD Settings Variables: use GlCard

Changelog: changed
---
 .../components/ci_variable_settings.vue       |   1 +
 .../components/ci_variable_table.vue          | 397 ++++++++++--------
 .../stylesheets/framework/new_card.scss       |   3 +-
 app/assets/stylesheets/pages/settings.scss    |   1 -
 .../application_settings/ci_cd.html.haml      |   2 +-
 app/views/ci/variables/_index.html.haml       |   6 +-
 locale/gitlab.pot                             |  12 +
 .../components/ci_variable_table_spec.js      |  25 +-
 8 files changed, 269 insertions(+), 178 deletions(-)

diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue
index 4faec24e19d849..f4e1da9b34ff09 100644
--- a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue
+++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue
@@ -117,6 +117,7 @@ export default {
         @handle-prev-page="$emit('handle-prev-page')"
         @handle-next-page="$emit('handle-next-page')"
         @set-selected-variable="setSelectedVariable"
+        @delete-variable="deleteVariable"
         @sort-changed="(val) => $emit('sort-changed', val)"
       />
       <ci-variable-modal
diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue
index ec7a921664f097..a14cd1e387a598 100644
--- a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue
+++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue
@@ -3,11 +3,14 @@ import {
   GlAlert,
   GlBadge,
   GlButton,
+  GlCard,
+  GlIcon,
   GlLoadingIcon,
   GlModalDirective,
   GlKeysetPagination,
   GlLink,
   GlTable,
+  GlModal,
   GlTooltipDirective,
 } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
@@ -45,9 +48,8 @@ export default {
     },
     {
       key: 'actions',
-      label: '',
-      tdClass: 'text-right',
-      thClass: 'gl-w-5p',
+      label: __('Actions'),
+      thClass: 'gl-text-right',
     },
   ],
   inheritedVarsFields: [
@@ -73,10 +75,13 @@ export default {
     GlAlert,
     GlBadge,
     GlButton,
+    GlCard,
     GlKeysetPagination,
     GlLink,
+    GlIcon,
     GlLoadingIcon,
     GlTable,
+    GlModal,
   },
   directives: {
     GlModalDirective,
@@ -84,6 +89,14 @@ export default {
   },
   mixins: [glFeatureFlagsMixin()],
   inject: ['isInheritedGroupVars'],
+  i18n: {
+    title: s__('CiVariables|CI/CD Variables'),
+    addButton: s__('CiVariables|Add variable'),
+    editButton: __('Edit'),
+    deleteButton: __('Delete'),
+    modalDeleteTitle: s__('CiVariables|Delete variable'),
+    modalDeleteMessage: s__('CiVariables|Do you want to delete the variable %{key}?'),
+  },
   props: {
     entity: {
       type: String,
@@ -107,6 +120,20 @@ export default {
       required: true,
     },
   },
+  deleteModal: {
+    actionPrimary: {
+      text: __('Delete'),
+      attributes: {
+        variant: 'danger',
+      },
+    },
+    actionSecondary: {
+      text: __('Cancel'),
+      attributes: {
+        variant: 'default',
+      },
+    },
+  },
   data() {
     return {
       areValuesHidden: true,
@@ -165,6 +192,9 @@ export default {
     setSelectedVariable(index = -1) {
       this.$emit('set-selected-variable', this.variables[index] ?? null);
     },
+    deleteSelectedVariable(index = -1) {
+      this.$emit('delete-variable', this.variables[index] ?? null);
+    },
     getAttributes(item) {
       const attributes = [];
       if (item.variableType === variableTypes.fileType) {
@@ -181,188 +211,219 @@ export default {
       }
       return attributes;
     },
+    removeVariableMessage(key) {
+      return sprintf(this.$options.i18n.modalDeleteMessage, {
+        key,
+      });
+    },
   },
   maximumVariableLimitReached: MAXIMUM_VARIABLE_LIMIT_REACHED,
 };
 </script>
 
 <template>
-  <div class="ci-variable-table" :data-testid="tableDataTestId">
-    <gl-loading-icon v-if="isLoading" />
-    <gl-alert
-      v-if="showAlert"
-      :dismissible="false"
-      :title="$options.maximumVariableLimitReached"
-      variant="info"
-    >
-      {{ exceedsVariableLimitText }}
-    </gl-alert>
-    <div
-      v-if="showPagination && !isInheritedGroupVars"
-      class="ci-variable-actions gl-display-flex gl-justify-content-end gl-my-3"
+  <div>
+    <gl-card
+      class="gl-new-card ci-variable-table"
+      header-class="gl-new-card-header"
+      body-class="gl-new-card-body gl-px-0"
+      :data-testid="tableDataTestId"
     >
-      <gl-button v-if="!isTableEmpty" @click="toggleHiddenState">{{ valuesButtonText }}</gl-button>
-      <gl-button
-        v-gl-modal-directive="$options.modalId"
-        class="gl-mx-3"
-        data-qa-selector="add_ci_variable_button"
-        variant="confirm"
-        category="primary"
-        :aria-label="__('Add')"
-        :disabled="exceedsVariableLimit"
-        @click="setSelectedVariable()"
-        >{{ __('Add variable') }}</gl-button
-      >
-    </div>
-    <gl-table
-      v-if="!isLoading"
-      :fields="fields"
-      :items="variablesWithAttributes"
-      tbody-tr-class="js-ci-variable-row"
-      sort-by="key"
-      sort-direction="asc"
-      stacked="lg"
-      fixed
-      show-empty
-      sort-icon-left
-      no-sort-reset
-      no-local-sorting
-      @sort-changed="(val) => $emit('sort-changed', val)"
-    >
-      <template #table-colgroup="scope">
-        <col v-for="field in scope.fields" :key="field.key" :style="field.customStyle" />
-      </template>
-      <template #cell(key)="{ item }">
-        <div
-          class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3"
-        >
-          <span
-            :id="`ci-variable-key-${item.id}`"
-            class="gl-display-inline-block gl-max-w-full gl-word-break-word"
-            >{{ item.key }}</span
-          >
+      <template #header>
+        <div class="gl-new-card-title-wrapper">
+          <h5 class="gl-new-card-title">{{ $options.i18n.title }}</h5>
+          <span class="gl-new-card-count">
+            <gl-icon name="code" class="gl-mr-2" />
+            {{ variables.length }}
+          </span>
+        </div>
+        <div v-if="!isInheritedGroupVars" class="gl-new-card-actions gl-font-size-0">
           <gl-button
-            v-gl-tooltip
+            v-if="!isTableEmpty"
             category="tertiary"
-            icon="copy-to-clipboard"
-            class="gl-my-n3 gl-ml-2"
-            :title="__('Copy key')"
-            :data-clipboard-text="item.key"
-            :aria-label="__('Copy to clipboard')"
-          />
-        </div>
-      </template>
-      <template v-if="!isInheritedGroupVars" #cell(value)="{ item }">
-        <div
-          class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3"
-        >
-          <span v-if="areValuesHidden" data-testid="hiddenValue">*****</span>
-          <span
-            v-else
-            :id="`ci-variable-value-${item.id}`"
-            class="gl-display-inline-block gl-max-w-full gl-text-truncate"
-            data-testid="revealedValue"
-            >{{ item.value }}</span
+            size="small"
+            class="gl-mr-3"
+            @click="toggleHiddenState"
+            >{{ valuesButtonText }}</gl-button
           >
           <gl-button
-            v-gl-tooltip
-            category="tertiary"
-            icon="copy-to-clipboard"
-            class="gl-my-n3 gl-ml-2"
-            :title="__('Copy value')"
-            :data-clipboard-text="item.value"
-            :aria-label="__('Copy to clipboard')"
-          />
+            v-gl-modal-directive="$options.modalId"
+            size="small"
+            :disabled="exceedsVariableLimit"
+            data-qa-selector="add_ci_variable_button"
+            data-testid="add-ci-variable-button"
+            @click="setSelectedVariable()"
+            >{{ $options.i18n.addButton }}</gl-button
+          >
         </div>
       </template>
-      <template #cell(attributes)="{ item }">
-        <span data-testid="ci-variable-table-row-attributes">
-          <gl-badge
-            v-for="attribute in item.attributes"
-            :key="`${item.key}-${attribute}`"
-            class="gl-mr-2"
-            variant="info"
-            size="sm"
+
+      <gl-loading-icon v-if="isLoading" class="gl-p-4" />
+      <gl-alert
+        v-if="showAlert"
+        :dismissible="false"
+        :title="$options.maximumVariableLimitReached"
+        variant="info"
+      >
+        {{ exceedsVariableLimitText }}
+      </gl-alert>
+      <gl-table
+        v-if="!isLoading"
+        :fields="fields"
+        :items="variablesWithAttributes"
+        tbody-tr-class="js-ci-variable-row"
+        sort-by="key"
+        sort-direction="asc"
+        stacked="md"
+        fixed
+        show-empty
+        sort-icon-left
+        no-sort-reset
+        no-local-sorting
+        @sort-changed="(val) => $emit('sort-changed', val)"
+      >
+        <template #table-colgroup="scope">
+          <col v-for="field in scope.fields" :key="field.key" :style="field.customStyle" />
+        </template>
+        <template #cell(key)="{ item }">
+          <div
+            class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3"
           >
-            {{ attribute }}
-          </gl-badge>
-        </span>
-      </template>
-      <template #cell(environmentScope)="{ item }">
-        <div
-          class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3"
-        >
-          <span
-            :id="`ci-variable-env-${item.id}`"
-            class="gl-display-inline-block gl-max-w-full gl-word-break-word"
-            >{{ convertEnvironmentScopeValue(item.environmentScope) }}</span
+            <span
+              :id="`ci-variable-key-${item.id}`"
+              class="gl-display-inline-block gl-max-w-full gl-word-break-word"
+              >{{ item.key }}</span
+            >
+            <gl-button
+              v-gl-tooltip
+              category="tertiary"
+              icon="copy-to-clipboard"
+              class="gl-my-n3 gl-ml-2"
+              :title="__('Copy key')"
+              :data-clipboard-text="item.key"
+              :aria-label="__('Copy to clipboard')"
+            />
+          </div>
+        </template>
+        <template v-if="!isInheritedGroupVars" #cell(value)="{ item }">
+          <div
+            class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3"
           >
-          <gl-button
-            v-gl-tooltip
-            category="tertiary"
-            icon="copy-to-clipboard"
-            class="gl-my-n3 gl-ml-2"
-            :title="__('Copy environment')"
-            :data-clipboard-text="convertEnvironmentScopeValue(item.environmentScope)"
-            :aria-label="__('Copy to clipboard')"
-          />
-        </div>
-      </template>
-      <template v-if="isInheritedGroupVars" #cell(group)="{ item }">
-        <div
-          class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3"
-        >
-          <gl-link
-            :id="`ci-variable-group-${item.id}`"
-            data-testid="ci-variable-table-row-cicd-path"
-            class="gl-display-inline-block gl-max-w-full gl-word-break-word"
-            :href="item.groupCiCdSettingsPath"
+            <span v-if="areValuesHidden" data-testid="hiddenValue">*****</span>
+            <span
+              v-else
+              :id="`ci-variable-value-${item.id}`"
+              class="gl-display-inline-block gl-max-w-full gl-text-truncate"
+              data-testid="revealedValue"
+              >{{ item.value }}</span
+            >
+            <gl-button
+              v-gl-tooltip
+              category="tertiary"
+              icon="copy-to-clipboard"
+              class="gl-my-n3 gl-ml-2"
+              :title="__('Copy value')"
+              :data-clipboard-text="item.value"
+              :aria-label="__('Copy to clipboard')"
+            />
+          </div>
+        </template>
+        <template #cell(attributes)="{ item }">
+          <span data-testid="ci-variable-table-row-attributes">
+            <gl-badge
+              v-for="attribute in item.attributes"
+              :key="`${item.key}-${attribute}`"
+              class="gl-mr-2"
+              variant="info"
+              size="sm"
+            >
+              {{ attribute }}
+            </gl-badge>
+          </span>
+        </template>
+        <template #cell(environmentScope)="{ item }">
+          <div
+            class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3"
           >
-            {{ item.groupName }}
-          </gl-link>
-        </div>
-      </template>
-      <template v-if="!isInheritedGroupVars" #cell(actions)="{ item }">
-        <gl-button
-          v-gl-modal-directive="$options.modalId"
-          icon="pencil"
-          :aria-label="__('Edit')"
-          data-qa-selector="edit_ci_variable_button"
-          @click="setSelectedVariable(item.index)"
-        />
-      </template>
-      <template #empty>
-        <p class="gl-text-center gl-py-6 gl-text-black-normal gl-mb-0">
-          {{ __('There are no variables yet.') }}
-        </p>
-      </template>
-    </gl-table>
-    <gl-alert
-      v-if="showAlert"
-      :dismissible="false"
-      :title="$options.maximumVariableLimitReached"
-      variant="info"
-    >
-      {{ exceedsVariableLimitText }}
-    </gl-alert>
+            <span
+              :id="`ci-variable-env-${item.id}`"
+              class="gl-display-inline-block gl-max-w-full gl-word-break-word"
+              >{{ convertEnvironmentScopeValue(item.environmentScope) }}</span
+            >
+            <gl-button
+              v-gl-tooltip
+              category="tertiary"
+              icon="copy-to-clipboard"
+              class="gl-my-n3 gl-ml-2"
+              :title="__('Copy environment')"
+              :data-clipboard-text="convertEnvironmentScopeValue(item.environmentScope)"
+              :aria-label="__('Copy to clipboard')"
+            />
+          </div>
+        </template>
+        <template v-if="isInheritedGroupVars" #cell(group)="{ item }">
+          <div
+            class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3"
+          >
+            <gl-link
+              :id="`ci-variable-group-${item.id}`"
+              data-testid="ci-variable-table-row-cicd-path"
+              class="gl-display-inline-block gl-max-w-full gl-word-break-word"
+              :href="item.groupCiCdSettingsPath"
+            >
+              {{ item.groupName }}
+            </gl-link>
+          </div>
+        </template>
+        <template v-if="!isInheritedGroupVars" #cell(actions)="{ item }">
+          <div class="gl-display-flex gl-justify-content-end gl-mt-n2 gl-mb-n2">
+            <gl-button
+              v-gl-modal-directive="$options.modalId"
+              icon="pencil"
+              size="small"
+              class="gl-mr-3"
+              :aria-label="$options.i18n.editButton"
+              data-qa-selector="edit_ci_variable_button"
+              @click="setSelectedVariable(item.index)"
+            />
+            <gl-button
+              v-gl-modal-directive="`delete-variable-${item.index}`"
+              variant="danger"
+              category="secondary"
+              icon="remove"
+              size="small"
+              :aria-label="$options.i18n.deleteButton"
+              data-qa-selector="delete_ci_variable_button"
+            />
+            <gl-modal
+              ref="modal"
+              :modal-id="`delete-variable-${item.index}`"
+              :title="$options.i18n.modalDeleteTitle"
+              :action-primary="$options.deleteModal.actionPrimary"
+              :action-secondary="$options.deleteModal.actionSecondary"
+              @primary="deleteSelectedVariable(item.index)"
+            >
+              {{ removeVariableMessage(item.key) }}
+            </gl-modal>
+          </div>
+        </template>
+        <template #empty>
+          <p class="gl-text-secondary gl-text-center gl-py-1 gl-mb-0">
+            {{ __('There are no variables yet.') }}
+          </p>
+        </template>
+      </gl-table>
+      <gl-alert
+        v-if="showAlert"
+        :dismissible="false"
+        :title="$options.maximumVariableLimitReached"
+        variant="info"
+      >
+        {{ exceedsVariableLimitText }}
+      </gl-alert>
+    </gl-card>
     <div v-if="!isInheritedGroupVars">
-      <div v-if="!showPagination" class="ci-variable-actions gl-display-flex gl-mt-5">
-        <gl-button
-          v-gl-modal-directive="$options.modalId"
-          class="gl-mr-3"
-          data-qa-selector="add_ci_variable_button"
-          variant="confirm"
-          category="primary"
-          :aria-label="__('Add')"
-          :disabled="exceedsVariableLimit"
-          @click="setSelectedVariable()"
-          >{{ __('Add variable') }}</gl-button
-        >
-        <gl-button v-if="!isTableEmpty" @click="toggleHiddenState">{{
-          valuesButtonText
-        }}</gl-button>
-      </div>
-      <div v-else class="gl-display-flex gl-justify-content-center gl-mt-6">
+      <div v-if="showPagination" class="gl-display-flex gl-justify-content-center gl-mt-5">
         <gl-keyset-pagination
           v-bind="pageInfo"
           :prev-text="__('Previous')"
diff --git a/app/assets/stylesheets/framework/new_card.scss b/app/assets/stylesheets/framework/new_card.scss
index 411f5300120f34..709d44498777ba 100644
--- a/app/assets/stylesheets/framework/new_card.scss
+++ b/app/assets/stylesheets/framework/new_card.scss
@@ -95,7 +95,8 @@
   // Table adjustments
   @mixin new-card-table-adjustments {
     tbody > tr {
-      &:first-of-type > td[data-label] {
+      &:first-of-type > td[data-label],
+      &:first-of-type > td:first-of-type:last-of-type {
         @include gl-border-t-0;
       }
 
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 6aca2b5646c17e..b183bee38da0fb 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -50,7 +50,6 @@
   }
 }
 
-.ci-variable-table,
 .deploy-freeze-table,
 .ci-secure-files-table {
   table {
diff --git a/app/views/admin/application_settings/ci_cd.html.haml b/app/views/admin/application_settings/ci_cd.html.haml
index a9a16f72ebe74f..9b36a983f26963 100644
--- a/app/views/admin/application_settings/ci_cd.html.haml
+++ b/app/views/admin/application_settings/ci_cd.html.haml
@@ -8,7 +8,7 @@
     = render 'admin/application_settings/ci/header', expanded: expanded_by_default?
   .settings-content
     - if ci_variable_protected_by_default?
-      %p.settings-message.text-center
+      %p.settings-message.text-center.gl-mb-0
         - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('ci/variables/index', anchor: 'protect-a-cicd-variable') }
         = s_('Environment variables on this GitLab instance are configured to be %{link_start}protected%{link_end} by default.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
     #js-instance-variables{ data: { endpoint: admin_ci_variables_path, maskable_regex: ci_variable_maskable_regex, protected_by_default: ci_variable_protected_by_default?.to_s} }
diff --git a/app/views/ci/variables/_index.html.haml b/app/views/ci/variables/_index.html.haml
index 5eed4e92386c09..7e5e8d8f961bfc 100644
--- a/app/views/ci/variables/_index.html.haml
+++ b/app/views/ci/variables/_index.html.haml
@@ -32,7 +32,5 @@
   environment_scope_link: help_page_path('ci/environments/index', anchor: 'limit-the-environment-scope-of-a-cicd-variable') } }
 
 - if !@group && @project.group
-  .settings-header.border-top.gl-mt-6
-    = render 'ci/group_variables/header'
-  .settings-content.pr-0
-    = render 'ci/group_variables/index'
+  = render 'ci/group_variables/header'
+  = render 'ci/group_variables/index'
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index f710122c87b436..2faccc34f6468e 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -9975,15 +9975,27 @@ msgstr ""
 msgid "CiVariables|Add Variable"
 msgstr ""
 
+msgid "CiVariables|Add variable"
+msgstr ""
+
 msgid "CiVariables|Attributes"
 msgstr ""
 
+msgid "CiVariables|CI/CD Variables"
+msgstr ""
+
 msgid "CiVariables|Cancel"
 msgstr ""
 
 msgid "CiVariables|Cannot use Masked Variable with current value"
 msgstr ""
 
+msgid "CiVariables|Delete variable"
+msgstr ""
+
+msgid "CiVariables|Do you want to delete the variable %{key}?"
+msgstr ""
+
 msgid "CiVariables|Environments"
 msgstr ""
 
diff --git a/spec/frontend/ci/ci_variable_list/components/ci_variable_table_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_variable_table_spec.js
index f3f1c5bd2c5a6c..39c03a4166081e 100644
--- a/spec/frontend/ci/ci_variable_list/components/ci_variable_table_spec.js
+++ b/spec/frontend/ci/ci_variable_list/components/ci_variable_table_spec.js
@@ -1,4 +1,4 @@
-import { GlAlert, GlBadge, GlKeysetPagination } from '@gitlab/ui';
+import { GlAlert, GlBadge, GlKeysetPagination, GlCard, GlIcon } from '@gitlab/ui';
 import { sprintf } from '~/locale';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import CiVariableTable from '~/ci/ci_variable_list/components/ci_variable_table.vue';
@@ -36,7 +36,7 @@ describe('Ci variable table', () => {
   };
 
   const findRevealButton = () => wrapper.findByText('Reveal values');
-  const findAddButton = () => wrapper.findByLabelText('Add');
+  const findAddButton = () => wrapper.findByTestId('add-ci-variable-button');
   const findEditButton = () => wrapper.findByLabelText('Edit');
   const findEmptyVariablesPlaceholder = () => wrapper.findByText('There are no variables yet.');
   const findHiddenValues = () => wrapper.findAllByTestId('hiddenValue');
@@ -50,11 +50,30 @@ describe('Ci variable table', () => {
   const findGroupCiCdSettingsLink = (rowIndex) =>
     wrapper.findAllByTestId('ci-variable-table-row-cicd-path').at(rowIndex).attributes('href');
   const findKeysetPagination = () => wrapper.findComponent(GlKeysetPagination);
+  const findCard = () => wrapper.findComponent(GlCard);
 
   const generateExceedsVariableLimitText = (entity, currentVariableCount, maxVariableLimit) => {
     return sprintf(EXCEEDS_VARIABLE_LIMIT_TEXT, { entity, currentVariableCount, maxVariableLimit });
   };
 
+  describe('card', () => {
+    it('displays the correct title', () => {
+      createComponent();
+      expect(findCard().text()).toContain('CI/CD Variables');
+    });
+
+    it('displays the correct icon', () => {
+      createComponent();
+      expect(findCard().findComponent(GlIcon).props('name')).toBe('code');
+    });
+
+    it('displays the number of added CI/CD Variables', () => {
+      const variables = [1, 2, 3];
+      createComponent({ props: { variables } });
+      expect(findCard().text()).toContain(String(variables.length));
+    });
+  });
+
   describe.each`
     isVariablePagesEnabled | text
     ${true}                | ${'enabled'}
@@ -88,7 +107,7 @@ describe('Ci variable table', () => {
         ${1}  | ${'Value'}
         ${2}  | ${'Attributes'}
         ${3}  | ${'Environments'}
-        ${4}  | ${''}
+        ${4}  | ${'Actions'}
       `('renders the $text column', ({ index, text }) => {
         expect(findTableColumnText(index)).toEqual(text);
       });
-- 
GitLab