Merge branch 'deploy-freeze-table-migration' into 'master'

Deploy freeze table migration to Crud

See merge request !161339



Merged-by: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Approved-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Approved-by: Sharmad Nachnolkar <snachnolkar@gitlab.com>
Approved-by: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Reviewed-by: Sharmad Nachnolkar <snachnolkar@gitlab.com>
Reviewed-by: Sascha Eggenberger <seggenberger@gitlab.com>
Reviewed-by: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Co-authored-by: Sascha Eggenberger <seggenberger@gitlab.com>

app/assets/javascripts/deploy_freeze/components/deploy_freeze_table.vue

 <script>
-import {
-  GlCard,
-  GlTable,
-  GlButton,
-  GlIcon,
-  GlModal,
-  GlModalDirective,
-  GlSprintf,
-} from '@gitlab/ui';
+import { GlTable, GlButton, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui';
 // eslint-disable-next-line no-restricted-imports
 import { mapState, mapActions } from 'vuex';
+import CrudComponent from '~/vue_shared/components/crud_component.vue';
 import { __, s__ } from '~/locale';
 
 export default {
@@ -58,10 +51,9 @@ export default {
     },
   },
   components: {
-    GlCard,
+    CrudComponent,
     GlTable,
     GlButton,
-    GlIcon,
     GlModal,
     GlSprintf,
   },
@@ -96,24 +88,16 @@ export default {
 </script>
 
 <template>
-  <gl-card
-    class="gl-new-card deploy-freeze-table"
-    header-class="gl-new-card-header"
-    body-class="gl-new-card-body gl-px-0"
+  <crud-component
+    class="deploy-freeze-table"
+    :title="$options.i18n.title"
+    icon="deployments"
+    :count="freezePeriods.length"
   >
-    <template #header>
-      <div class="gl-new-card-title-wrapper">
-        <h3 class="gl-new-card-title">{{ $options.i18n.title }}</h3>
-        <span class="gl-new-card-count">
-          <gl-icon name="deployments" class="gl-mr-2" />
-          {{ freezePeriods.length }}
-        </span>
-      </div>
-      <div class="gl-new-card-actions">
-        <gl-button v-gl-modal.deploy-freeze-modal size="small" data-testid="add-deploy-freeze">{{
-          $options.i18n.addDeployFreeze
-        }}</gl-button>
-      </div>
+    <template #actions>
+      <gl-button v-gl-modal.deploy-freeze-modal size="small" data-testid="add-deploy-freeze">{{
+        $options.i18n.addDeployFreeze
+      }}</gl-button>
     </template>
 
     <gl-table
@@ -127,19 +111,18 @@ export default {
         {{ item.cronTimezone.formattedTimezone }}
       </template>
       <template #cell(actions)="{ item }">
-        <div class="gl-display-flex gl-justify-content-end -gl-mt-2 -gl-mb-2">
+        <div class="gl-flex gl-justify-end gl-gap-2 -gl-mt-2 -gl-mb-2">
           <gl-button
             v-gl-modal.deploy-freeze-modal
             icon="pencil"
+            category="tertiary"
             data-testid="edit-deploy-freeze"
             :aria-label="__('Edit deploy freeze')"
-            class="gl-mr-3"
             @click="setFreezePeriod(item)"
           />
           <gl-button
             v-gl-modal="$options.modal.id"
-            category="secondary"
-            variant="danger"
+            category="tertiary"
             icon="remove"
             :aria-label="$options.modal.actionPrimary.text"
             :loading="item.isDeleting"
@@ -149,7 +132,7 @@ export default {
         </div>
       </template>
       <template #empty>
-        <p data-testid="empty-freeze-periods" class="gl-text-secondary gl-text-center gl-mb-0">
+        <p data-testid="empty-freeze-periods" class="gl-text-subtle gl-text-center gl-mb-0">
           <gl-sprintf :message="$options.i18n.emptyStateText">
             <template #strong="{ content }">
               {{ content }}
@@ -178,5 +161,5 @@ export default {
         </gl-sprintf>
       </template>
     </gl-modal>
-  </gl-card>
+  </crud-component>
 </template>

app/assets/javascripts/vue_shared/components/crud_component.vue

@@ -17,9 +17,9 @@ export default {
       default: null,
     },
     count: {
-      type: Number,
+      type: [String, Number],
       required: false,
-      default: null,
+      default: '',
     },
     icon: {
       type: String,

spec/frontend/deploy_freeze/components/deploy_freeze_table_spec.js

 import { GlModal } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 // eslint-disable-next-line no-restricted-imports
 import Vuex from 'vuex';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import DeployFreezeTable from '~/deploy_freeze/components/deploy_freeze_table.vue';
 import createStore from '~/deploy_freeze/store';
 import { RECEIVE_FREEZE_PERIODS_SUCCESS } from '~/deploy_freeze/store/mutation_types';
@@ -21,18 +21,19 @@ describe('Deploy freeze table', () => {
       timezoneData: timezoneDataFixture,
     });
     jest.spyOn(store, 'dispatch').mockImplementation();
-    wrapper = mount(DeployFreezeTable, {
+    wrapper = mountExtended(DeployFreezeTable, {
       attachTo: document.body,
       store,
     });
   };
 
-  const findEmptyFreezePeriods = () => wrapper.find('[data-testid="empty-freeze-periods"]');
-  const findAddDeployFreezeButton = () => wrapper.find('[data-testid="add-deploy-freeze"]');
-  const findEditDeployFreezeButton = () => wrapper.find('[data-testid="edit-deploy-freeze"]');
-  const findDeployFreezeTable = () => wrapper.find('[data-testid="deploy-freeze-table"]');
-  const findDeleteDeployFreezeButton = () => wrapper.find('[data-testid="delete-deploy-freeze"]');
+  const findEmptyFreezePeriods = () => wrapper.findByTestId('empty-freeze-periods');
+  const findAddDeployFreezeButton = () => wrapper.findByTestId('add-deploy-freeze');
+  const findEditDeployFreezeButton = () => wrapper.findByTestId('edit-deploy-freeze');
+  const findDeployFreezeTable = () => wrapper.findByTestId('deploy-freeze-table');
+  const findDeleteDeployFreezeButton = () => wrapper.findByTestId('delete-deploy-freeze');
   const findDeleteDeployFreezeModal = () => wrapper.findComponent(GlModal);
+  const findCount = () => wrapper.findByTestId('crud-count');
 
   beforeEach(() => {
     createComponent();
@@ -65,6 +66,12 @@ describe('Deploy freeze table', () => {
         expect(findEditDeployFreezeButton().exists()).toBe(true);
       });
 
+      it('displays correct count', () => {
+        const tableRows = findDeployFreezeTable().findAll('tbody tr');
+        expect(tableRows.length).toBe(freezePeriodsFixture.length);
+        expect(findCount().text()).toBe('3');
+      });
+
       it('allows user to edit deploy freeze', async () => {
         findEditDeployFreezeButton().trigger('click');
         await nextTick();