More feedback changes

Add artifacts table row details spec
Remove unnecessary namespacing from one word strings
Rename deleting prop to isLoading

app/assets/javascripts/artifacts/components/artifact_row.vue

@@ -15,7 +15,7 @@ export default {
       type: Object,
       required: true,
     },
-    deleting: {
+    isLoading: {
       type: Boolean,
       required: true,
     },
@@ -70,7 +70,7 @@ export default {
           icon="remove"
           :title="$options.i18n.delete"
           :aria-label="$options.i18n.delete"
-          :loading="deleting"
+          :loading="isLoading"
           data-testid="job-artifact-row-delete-button"
           @click="$emit('delete')"
         />

app/assets/javascripts/artifacts/components/artifacts_table_row_details.vue

@@ -71,7 +71,7 @@ export default {
           >
             <artifact-row
               :artifact="item"
-              :deleting="item.id === deletingArtifactId"
+              :is-loading="item.id === deletingArtifactId"
               @delete="destroyArtifact(item.id)"
             />
           </div>

app/assets/javascripts/artifacts/constants.js

-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 
 export const JOB_STATUS_GROUP_SUCCESS = 'success';
 
@@ -24,16 +24,16 @@ export const STATUS_BADGE_VARIANTS = {
 };
 
 export const i18n = {
-  download: s__('Artifacts|Download'),
+  download: __('Download'),
   browse: s__('Artifacts|Browse'),
-  delete: s__('Artifacts|Delete'),
-  expired: s__('Artifacts|Expired'),
+  delete: __('Delete'),
+  expired: __('Expired'),
   destroyArtifactError: s__('Artifacts|An error occurred while deleting the artifact'),
   fetchArtifactsError: s__('Artifacts|An error occurred while retrieving job artifacts'),
-  artifactsLabel: s__('Artifacts|Artifacts'),
-  jobLabel: s__('Artifacts|Job'),
-  sizeLabel: s__('Artifacts|Size'),
-  createdLabel: s__('Artifacts|Created'),
+  artifactsLabel: __('Artifacts'),
+  jobLabel: __('Job'),
+  sizeLabel: __('Size'),
+  createdLabel: __('Created'),
 };
 
 export const JOBS_PER_PAGE = 20;

locale/gitlab.pot

@@ -5251,24 +5251,6 @@ msgstr ""
 msgid "Artifacts|Browse"
 msgstr ""
-msgid "Artifacts|Created"
-msgstr ""
-
-msgid "Artifacts|Delete"
-msgstr ""
-
-msgid "Artifacts|Download"
-msgstr ""
-
-msgid "Artifacts|Expired"
-msgstr ""
-
-msgid "Artifacts|Job"
-msgstr ""
-
-msgid "Artifacts|Size"
-msgstr ""
-
 msgid "Artifacts|Total artifacts size"
 msgstr ""

spec/frontend/artifacts/components/artifact_row_spec.js

@@ -20,7 +20,7 @@ describe('ArtifactRow component', () => {
     wrapper = mountFn(ArtifactRow, {
       propsData: {
         artifact,
-        deleting: false,
+        isLoading: false,
       },
       stubs: { GlBadge, GlButton },
     });

spec/frontend/artifacts/components/artifacts_table_row_details_spec.js

+import { RecycleScroller, DynamicScroller } from 'vendor/vue-virtual-scroller';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import getJobArtifactsResponse from 'test_fixtures/graphql/artifacts/graphql/queries/get_job_artifacts.query.graphql.json';
+import waitForPromises from 'helpers/wait_for_promises';
+import ArtifactsTableRowDetails from '~/artifacts/components/artifacts_table_row_details.vue';
+import ArtifactRow from '~/artifacts/components/artifact_row.vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import destroyArtifactMutation from '~/artifacts/graphql/mutations/destroy_artifact.mutation.graphql';
+import { i18n } from '~/artifacts/constants';
+import { createAlert } from '~/flash';
+
+jest.mock('~/flash');
+
+const { artifacts } = getJobArtifactsResponse.data.project.jobs.nodes[0];
+const refetchArtifacts = jest.fn();
+
+Vue.use(VueApollo);
+
+describe('ArtifactsTableRowDetails component', () => {
+  let wrapper;
+  let requestHandlers;
+
+  const createComponent = (
+    handlers = {
+      destroyArtifactMutation: jest.fn(),
+    },
+  ) => {
+    requestHandlers = handlers;
+    wrapper = shallowMountExtended(ArtifactsTableRowDetails, {
+      apolloProvider: createMockApollo([
+        [destroyArtifactMutation, requestHandlers.destroyArtifactMutation],
+      ]),
+      propsData: {
+        artifacts,
+        refetchArtifacts,
+        queryVariables: {},
+      },
+      data() {
+        return { deletingArtifactId: null };
+      },
+      stubs: {
+        RecycleScroller,
+        DynamicScroller,
+        ArtifactRow,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('passes correct props', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('to the dynamic scroller', () => {
+      expect(wrapper.findComponent(DynamicScroller).props()).toMatchObject({
+        items: artifacts.nodes,
+      });
+    });
+
+    it('to the artifact row', () => {
+      expect(wrapper.findAllComponents(ArtifactRow).at(0).props()).toMatchObject({
+        artifact: artifacts.nodes[0],
+        isLoading: false,
+      });
+    });
+  });
+
+  describe('when an artifact row emits the delete event', () => {
+    it('triggers the destroyArtifact GraphQL mutation', async () => {
+      createComponent();
+      await waitForPromises();
+
+      wrapper.findComponent(ArtifactRow).vm.$emit('delete');
+
+      expect(requestHandlers.destroyArtifactMutation).toHaveBeenCalled();
+    });
+
+    it('displays a flash message and refetches artifacts when the mutation fails', async () => {
+      createComponent({
+        destroyArtifactMutation: jest.fn().mockRejectedValue(new Error('Error!')),
+      });
+      await waitForPromises();
+
+      wrapper.findComponent(ArtifactRow).vm.$emit('delete');
+      await waitForPromises();
+
+      expect(createAlert).toHaveBeenCalledWith({ message: i18n.destroyArtifactError });
+      expect(refetchArtifacts).toHaveBeenCalled();
+    });
+  });
+});

spec/frontend/artifacts/components/job_artifacts_table_spec.js

@@ -5,7 +5,6 @@ import getJobArtifactsResponse from 'test_fixtures/graphql/artifacts/graphql/que
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import JobArtifactsTable from '~/artifacts/components/job_artifacts_table.vue';
-import ArtifactRow from '~/artifacts/components/artifact_row.vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import getJobArtifactsQuery from '~/artifacts/graphql/queries/get_job_artifacts.query.graphql';
@@ -172,36 +171,6 @@ describe('JobArtifactsTable component', () => {
     });
   });
 
-  describe('when an artifact row emits the delete event', () => {
-    it('triggers the destroyArtifact GraphQL mutation', async () => {
-      createComponent();
-      await waitForPromises();
-
-      findCount().trigger('click');
-      await waitForPromises();
-
-      wrapper.findComponent(ArtifactRow).vm.$emit('delete');
-
-      expect(requestHandlers.destroyArtifactMutation).toHaveBeenCalled();
-    });
-
-    it('displays a flash message when the mutation fails', async () => {
-      createComponent({
-        getJobArtifactsQuery: jest.fn().mockResolvedValue(getJobArtifactsResponse),
-        destroyArtifactMutation: jest.fn().mockRejectedValue(new Error('Error!')),
-      });
-      await waitForPromises();
-
-      findCount().trigger('click');
-      await waitForPromises();
-
-      wrapper.findComponent(ArtifactRow).vm.$emit('delete');
-      await waitForPromises();
-
-      expect(createAlert).toHaveBeenCalledWith({ message: i18n.destroyArtifactError });
-    });
-  });
-
   describe('pagination', () => {
     const { pageInfo } = getJobArtifactsResponse.data.project.jobs;