Merge branch '201889-design-skeleton-loaders-content-for-the-package-stage' into 'master'

Add skeleton loaders to container registry

See merge request gitlab-org/gitlab!25994

app/assets/javascripts/registry/explorer/pages/list.vue

 <script>
 import { mapState, mapActions } from 'vuex';
 import {
-  GlLoadingIcon,
   GlEmptyState,
   GlPagination,
   GlTooltipDirective,
@@ -10,6 +9,7 @@ import {
   GlModal,
   GlSprintf,
   GlLink,
+  GlSkeletonLoader,
 } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -20,7 +20,6 @@ export default {
   name: 'RegistryListApp',
   components: {
     GlEmptyState,
-    GlLoadingIcon,
     GlPagination,
     ProjectEmptyState,
     GroupEmptyState,
@@ -30,11 +29,17 @@ export default {
     GlModal,
     GlSprintf,
     GlLink,
+    GlSkeletonLoader,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
   mixins: [Tracking.mixin()],
+  loader: {
+    repeat: 10,
+    width: 1000,
+    height: 40,
+  },
   data() {
     return {
       itemToDelete: {},
@@ -104,74 +109,81 @@ export default {
     </gl-empty-state>
 
     <template v-else>
-      <gl-loading-icon v-if="isLoading" size="md" class="prepend-top-16" />
-
-      <template v-else>
-        <div v-if="images.length" ref="imagesList">
-          <h4>{{ s__('ContainerRegistry|Container Registry') }}</h4>
-          <p>
-            <gl-sprintf
-              :message="
-                s__(`ContainerRegistry|With the Docker Container Registry integrated into GitLab, every
+      <div>
+        <h4>{{ s__('ContainerRegistry|Container Registry') }}</h4>
+        <p>
+          <gl-sprintf
+            :message="
+              s__(`ContainerRegistry|With the Docker Container Registry integrated into GitLab, every
             project can have its own space to store its Docker images.
             %{docLinkStart}More Information%{docLinkEnd}`)
-              "
-            >
-              <template #docLink="{content}">
-                <gl-link :href="config.helpPagePath" target="_blank">
-                  {{ content }}
-                </gl-link>
-              </template>
-            </gl-sprintf>
-          </p>
+            "
+          >
+            <template #docLink="{content}">
+              <gl-link :href="config.helpPagePath" target="_blank">
+                {{ content }}
+              </gl-link>
+            </template>
+          </gl-sprintf>
+        </p>
+      </div>
 
-          <div class="d-flex flex-column">
+      <div v-if="isLoading" class="mt-2">
+        <gl-skeleton-loader
+          v-for="index in $options.loader.repeat"
+          :key="index"
+          :width="$options.loader.width"
+          :height="$options.loader.height"
+          preserve-aspect-ratio="xMinYMax meet"
+        >
+          <rect width="500" x="10" y="10" height="20" rx="4" />
+          <circle cx="525" cy="20" r="10" />
+          <rect x="960" y="0" width="40" height="40" rx="4" />
+        </gl-skeleton-loader>
+      </div>
+      <template v-else>
+        <div v-if="images.length" ref="imagesList" class="d-flex flex-column">
+          <div
+            v-for="(listItem, index) in images"
+            :key="index"
+            ref="rowItem"
+            :class="{ 'border-top': index === 0 }"
+            class="d-flex justify-content-between align-items-center py-2 border-bottom"
+          >
+            <div>
+              <router-link
+                ref="detailsLink"
+                :to="{ name: 'details', params: { id: encodeListItem(listItem) } }"
+              >
+                {{ listItem.path }}
+              </router-link>
+              <clipboard-button
+                v-if="listItem.location"
+                ref="clipboardButton"
+                :text="listItem.location"
+                :title="listItem.location"
+                css-class="btn-default btn-transparent btn-clipboard"
+              />
+            </div>
             <div
-              v-for="(listItem, index) in images"
-              :key="index"
-              ref="rowItem"
-              :class="[
-                'd-flex justify-content-between align-items-center py-2 border-bottom',
-                { 'border-top': index === 0 },
-              ]"
+              v-gl-tooltip="{ disabled: listItem.destroy_path }"
+              class="d-none d-sm-block"
+              :title="
+                s__('ContainerRegistry|Missing or insufficient permission, delete button disabled')
+              "
             >
-              <div>
-                <router-link
-                  ref="detailsLink"
-                  :to="{ name: 'details', params: { id: encodeListItem(listItem) } }"
-                >
-                  {{ listItem.path }}
-                </router-link>
-                <clipboard-button
-                  v-if="listItem.location"
-                  ref="clipboardButton"
-                  :text="listItem.location"
-                  :title="listItem.location"
-                  css-class="btn-default btn-transparent btn-clipboard"
-                />
-              </div>
-              <div
-                v-gl-tooltip="{ disabled: listItem.destroy_path }"
-                class="d-none d-sm-block"
-                :title="
-                  s__(
-                    'ContainerRegistry|Missing or insufficient permission, delete button disabled',
-                  )
-                "
+              <gl-button
+                ref="deleteImageButton"
+                v-gl-tooltip
+                :disabled="!listItem.destroy_path"
+                :title="s__('ContainerRegistry|Remove repository')"
+                :aria-label="s__('ContainerRegistry|Remove repository')"
+                class="btn-inverted"
+                variant="danger"
+                @click="deleteImage(listItem)"
               >
-                <gl-button
-                  ref="deleteImageButton"
-                  v-gl-tooltip
-                  :disabled="!listItem.destroy_path"
-                  :title="s__('ContainerRegistry|Remove repository')"
-                  :aria-label="s__('ContainerRegistry|Remove repository')"
-                  class="btn-inverted"
-                  variant="danger"
-                  @click="deleteImage(listItem)"
-                >
-                  <gl-icon name="remove" />
-                </gl-button>
-              </div>
+                <gl-icon name="remove" />
+              </gl-button>
             </div>
           </div>
           <gl-pagination
@@ -182,6 +194,7 @@ export default {
             class="w-100 mt-2"
           />
         </div>
+
         <template v-else>
           <project-empty-state v-if="!config.isGroupPage" />
           <group-empty-state v-else />

app/assets/javascripts/registry/explorer/stores/actions.js

@@ -68,31 +68,28 @@ export const requestDeleteTag = ({ commit, dispatch, state }, { tag, params }) =
     .delete(tag.destroy_path)
     .then(() => {
       createFlash(DELETE_TAG_SUCCESS_MESSAGE, 'success');
-      dispatch('requestTagsList', { pagination: state.tagsPagination, params });
+      return dispatch('requestTagsList', { pagination: state.tagsPagination, params });
     })
     .catch(() => {
       createFlash(DELETE_TAG_ERROR_MESSAGE);
-    })
-    .finally(() => {
       commit(types.SET_MAIN_LOADING, false);
     });
 };
 
 export const requestDeleteTags = ({ commit, dispatch, state }, { ids, params }) => {
   commit(types.SET_MAIN_LOADING, true);
-  const { id } = decodeAndParse(params);
-  const url = `/${state.config.projectPath}/registry/repository/${id}/tags/bulk_destroy`;
+  const { tags_path } = decodeAndParse(params);
+
+  const url = tags_path.replace('?format=json', '/bulk_destroy');
 
   return axios
     .delete(url, { params: { ids } })
     .then(() => {
       createFlash(DELETE_TAGS_SUCCESS_MESSAGE, 'success');
-      dispatch('requestTagsList', { pagination: state.tagsPagination, params });
+      return dispatch('requestTagsList', { pagination: state.tagsPagination, params });
     })
     .catch(() => {
       createFlash(DELETE_TAGS_ERROR_MESSAGE);
-    })
-    .finally(() => {
       commit(types.SET_MAIN_LOADING, false);
     });
 };

app/assets/javascripts/registry/explorer/stores/getters.js

+// eslint-disable-next-line import/prefer-default-export
+export const tags = state => {
+  // to show the loader inside the table we need to pass an empty array to gl-table whenever the table is loading
+  // this is to take in account isLoading = true and state.tags =[1,2,3] during pagination and delete
+  return state.isLoading ? [] : state.tags;
+};

app/assets/javascripts/registry/explorer/stores/index.js

 import Vue from 'vue';
 import Vuex from 'vuex';
 import * as actions from './actions';
+import * as getters from './getters';
 import mutations from './mutations';
 import state from './state';
 
@@ -9,6 +10,7 @@ Vue.use(Vuex);
 export const createStore = () =>
   new Vuex.Store({
     state,
+    getters,
     actions,
     mutations,
   });

app/assets/stylesheets/utilities.scss

@@ -54,7 +54,7 @@
 .mh-50vh { max-height: 50vh; }
 
 .font-size-inherit { font-size: inherit; }
-
+.gl-w-16 { width: px-to-rem($grid-size * 2); }
 .gl-w-64 { width: px-to-rem($grid-size * 8); }
 .gl-h-32 { height: px-to-rem($grid-size * 4); }
 .gl-h-64 { height: px-to-rem($grid-size * 8); }

app/views/projects/registry/repositories/index.html.haml

@@ -6,7 +6,6 @@
     .col-12
       - if Feature.enabled?(:vue_container_registry_explorer, @project.group)
         #js-container-registry{ data: { endpoint: project_container_registry_index_path(@project),
-          project_path: @project.full_path,
           "help_page_path" => help_page_path('user/packages/container_registry/index'),
           "two_factor_auth_help_link" => help_page_path('user/profile/account/two_factor_authentication'),
           "personal_access_tokens_help_link" => help_page_path('user/profile/personal_access_tokens'),

spec/frontend/registry/explorer/pages/details_spec.js

 import { mount } from '@vue/test-utils';
-import { GlTable, GlPagination, GlLoadingIcon } from '@gitlab/ui';
+import { GlTable, GlPagination, GlSkeletonLoader } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import stubChildren from 'helpers/stub_children';
 import component from '~/registry/explorer/pages/details.vue';
@@ -14,8 +14,7 @@ describe('Details Page', () => {
 
   const findDeleteModal = () => wrapper.find(GlModal);
   const findPagination = () => wrapper.find(GlPagination);
-  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
-  const findTagsTable = () => wrapper.find(GlTable);
+  const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
   const findMainCheckbox = () => wrapper.find({ ref: 'mainCheckbox' });
   const findFirstRowItem = ref => wrapper.find({ ref });
   const findBulkDeleteButton = () => wrapper.find({ ref: 'bulkDeleteButton' });
@@ -33,7 +32,7 @@ describe('Details Page', () => {
         ...stubChildren(component),
         GlModal,
         GlSprintf: false,
-        GlTable: false,
+        GlTable,
       },
       mocks: {
         $route: {
@@ -53,18 +52,19 @@ describe('Details Page', () => {
   });
 
   describe('when isLoading is true', () => {
-    beforeAll(() => store.commit(SET_MAIN_LOADING, true));
+    beforeEach(() => {
+      store.dispatch('receiveTagsListSuccess', { ...tagsListResponse, data: [] });
+      store.commit(SET_MAIN_LOADING, true);
+    });
 
     afterAll(() => store.commit(SET_MAIN_LOADING, false));
 
-    it('has a loading icon', () => {
-      expect(findLoadingIcon().exists()).toBe(true);
+    it('has a skeleton loader', () => {
+      expect(findSkeletonLoader().exists()).toBe(true);
     });
 
-    it('does not have a main content', () => {
-      expect(findTagsTable().exists()).toBe(false);
-      expect(findPagination().exists()).toBe(false);
-      expect(findDeleteModal().exists()).toBe(false);
+    it('does not have list items', () => {
+      expect(findFirstRowItem('rowCheckbox').exists()).toBe(false);
     });
   });
 

spec/frontend/registry/explorer/pages/list_spec.js

 import VueRouter from 'vue-router';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { GlPagination, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
+import { GlPagination, GlSkeletonLoader, GlSprintf } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import component from '~/registry/explorer/pages/list.vue';
 import store from '~/registry/explorer/stores/';
@@ -17,7 +17,7 @@ describe('List Page', () => {
 
   const findDeleteBtn = () => wrapper.find({ ref: 'deleteImageButton' });
   const findDeleteModal = () => wrapper.find(GlModal);
-  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
   const findImagesList = () => wrapper.find({ ref: 'imagesList' });
   const findRowItems = () => wrapper.findAll({ ref: 'rowItem' });
   const findEmptyState = () => wrapper.find(GlEmptyState);
@@ -71,7 +71,7 @@ describe('List Page', () => {
     });
 
     it('should not show the loading or default state', () => {
-      expect(findLoadingIcon().exists()).toBe(false);
+      expect(findSkeletonLoader().exists()).toBe(false);
       expect(findImagesList().exists()).toBe(false);
     });
   });
@@ -81,8 +81,8 @@ describe('List Page', () => {
 
     afterAll(() => store.commit(SET_MAIN_LOADING, false));
 
-    it('shows the loading icon', () => {
-      expect(findLoadingIcon().exists()).toBe(true);
+    it('shows the skeleton loader', () => {
+      expect(findSkeletonLoader().exists()).toBe(true);
     });
 
     it('imagesList is not visible', () => {

spec/frontend/registry/explorer/stores/actions_spec.js

@@ -180,10 +180,7 @@ describe('Actions RegistryExplorer Store', () => {
         {
           tagsPagination: {},
         },
-        [
-          { type: types.SET_MAIN_LOADING, payload: true },
-          { type: types.SET_MAIN_LOADING, payload: false },
-        ],
+        [{ type: types.SET_MAIN_LOADING, payload: true }],
         [
           {
             type: 'requestTagsList',
@@ -220,13 +217,11 @@ describe('Actions RegistryExplorer Store', () => {
   });
 
   describe('request delete multiple tags', () => {
-    const id = 1;
-    const params = window.btoa(JSON.stringify({ id }));
-    const projectPath = 'project-path';
-    const url = `${projectPath}/registry/repository/${id}/tags/bulk_destroy`;
+    const url = `project-path/registry/repository/foo/tags`;
+    const params = window.btoa(JSON.stringify({ tags_path: `${url}?format=json` }));
 
     it('successfully performs the delete request', done => {
-      mock.onDelete(url).replyOnce(200);
+      mock.onDelete(`${url}/bulk_destroy`).replyOnce(200);
 
       testAction(
         actions.requestDeleteTags,
@@ -235,15 +230,9 @@ describe('Actions RegistryExplorer Store', () => {
           params,
         },
         {
-          config: {
-            projectPath,
-          },
           tagsPagination: {},
         },
-        [
-          { type: types.SET_MAIN_LOADING, payload: true },
-          { type: types.SET_MAIN_LOADING, payload: false },
-        ],
+        [{ type: types.SET_MAIN_LOADING, payload: true }],
         [
           {
             type: 'requestTagsList',
@@ -267,9 +256,6 @@ describe('Actions RegistryExplorer Store', () => {
           params,
         },
         {
-          config: {
-            projectPath,
-          },
           tagsPagination: {},
         },
         [

spec/frontend/registry/explorer/stores/getters_spec.js

+import * as getters from '~/registry/explorer/stores/getters';
+
+describe('Getters RegistryExplorer  store', () => {
+  let state;
+  const tags = ['foo', 'bar'];
+
+  describe('tags', () => {
+    describe('when isLoading is false', () => {
+      beforeEach(() => {
+        state = {
+          tags,
+          isLoading: false,
+        };
+      });
+
+      it('returns tags', () => {
+        expect(getters.tags(state)).toEqual(state.tags);
+      });
+    });
+
+    describe('when isLoading is true', () => {
+      beforeEach(() => {
+        state = {
+          tags,
+          isLoading: true,
+        };
+      });
+
+      it('returns empty array', () => {
+        expect(getters.tags(state)).toEqual([]);
+      });
+    });
+  });
+});