Add latest changes from gitlab-org/gitlab@master

13 files changed, 21 insertions, 276 deletions

diff --git a/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue b/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue
index ba55822f0ca..319666210d6 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlDropdown } from '@gitlab/ui';
-import { mapGetters } from 'vuex';
 import Tracking from '~/tracking';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 import {
@@ -20,6 +19,7 @@ export default {
     GlDropdown,
     CodeInstruction,
   },
+  inject: ['config', 'dockerBuildCommand', 'dockerPushCommand', 'dockerLoginCommand'],
   mixins: [Tracking.mixin({ label: trackingLabel })],
   trackingLabel,
   i18n: {
@@ -31,9 +31,6 @@ export default {
     PUSH_COMMAND_LABEL,
     COPY_PUSH_TITLE,
   },
-  computed: {
-    ...mapGetters(['dockerBuildCommand', 'dockerPushCommand', 'dockerLoginCommand']),
-  },
 };
 </script>
 <template>
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/group_empty_state.vue b/app/assets/javascripts/registry/explorer/components/list_page/group_empty_state.vue
index 80cc392f86a..26e9fee63af 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/group_empty_state.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/group_empty_state.vue
@@ -1,17 +1,14 @@
 <script>
 import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui';
-import { mapState } from 'vuex';
 
 export default {
   name: 'GroupEmptyState',
+  inject: ['config'],
   components: {
     GlEmptyState,
     GlSprintf,
     GlLink,
   },
-  computed: {
-    ...mapState(['config']),
-  },
 };
 </script>
 <template>
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/project_empty_state.vue b/app/assets/javascripts/registry/explorer/components/list_page/project_empty_state.vue
index 35eb0b11e40..5308b025cc0 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/project_empty_state.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/project_empty_state.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlEmptyState, GlSprintf, GlLink, GlFormInputGroup, GlFormInput } from '@gitlab/ui';
-import { mapState, mapGetters } from 'vuex';
 import { s__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import {
@@ -20,6 +19,7 @@ export default {
     GlFormInputGroup,
     GlFormInput,
   },
+  inject: ['config', 'dockerBuildCommand', 'dockerPushCommand', 'dockerLoginCommand'],
   i18n: {
     quickStart: QUICK_START,
     copyLoginTitle: COPY_LOGIN_TITLE,
@@ -35,10 +35,6 @@ export default {
       'ContainerRegistry|You can add an image to this registry with the following commands:',
     ),
   },
-  computed: {
-    ...mapState(['config']),
-    ...mapGetters(['dockerBuildCommand', 'dockerPushCommand', 'dockerLoginCommand']),
-  },
 };
 </script>
 <template>
diff --git a/app/assets/javascripts/registry/explorer/index.js b/app/assets/javascripts/registry/explorer/index.js
index b85f28e2300..d887b6a1b15 100644
--- a/app/assets/javascripts/registry/explorer/index.js
+++ b/app/assets/javascripts/registry/explorer/index.js
@@ -1,9 +1,9 @@
 import Vue from 'vue';
 import { GlToast } from '@gitlab/ui';
 import Translate from '~/vue_shared/translate';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import RegistryExplorer from './pages/index.vue';
 import RegistryBreadcrumb from './components/registry_breadcrumb.vue';
-import { createStore } from './stores';
 import createRouter from './router';
 import { apolloProvider } from './graphql/index';
 
@@ -17,7 +17,7 @@ export default () => {
     return null;
   }
 
-  const { endpoint } = el.dataset;
+  const { endpoint, expirationPolicy, isGroupPage, isAdmin, ...config } = el.dataset;
 
   // This is a mini state to help the breadcrumb have the correct name in the details page
   const breadCrumbState = Vue.observable({
@@ -27,21 +27,31 @@ export default () => {
     },
   });
 
-  const store = createStore();
   const router = createRouter(endpoint, breadCrumbState);
-  store.dispatch('setInitialState', el.dataset);
 
   const attachMainComponent = () =>
     new Vue({
       el,
-      store,
       router,
       apolloProvider,
       components: {
         RegistryExplorer,
       },
       provide() {
-        return { breadCrumbState };
+        return {
+          breadCrumbState,
+          config: {
+            ...config,
+            expirationPolicy: expirationPolicy ? JSON.parse(expirationPolicy) : undefined,
+            isGroupPage: parseBoolean(isGroupPage),
+            isAdmin: parseBoolean(isAdmin),
+          },
+          /* eslint-disable @gitlab/require-i18n-strings */
+          dockerBuildCommand: `docker build -t ${config.repositoryUrl} .`,
+          dockerPushCommand: `docker push ${config.repositoryUrl}`,
+          dockerLoginCommand: `docker login ${config.registryHostUrlWithPort}`,
+          /* eslint-enable @gitlab/require-i18n-strings */
+        };
       },
       render(createElement) {
         return createElement('registry-explorer');
diff --git a/app/assets/javascripts/registry/explorer/pages/details.vue b/app/assets/javascripts/registry/explorer/pages/details.vue
index e47f1d73856..7e93b05b43a 100644
--- a/app/assets/javascripts/registry/explorer/pages/details.vue
+++ b/app/assets/javascripts/registry/explorer/pages/details.vue
@@ -1,5 +1,4 @@
 <script>
-import { mapState } from 'vuex';
 import { GlKeysetPagination, GlResizeObserverDirective } from '@gitlab/ui';
 import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
 import createFlash from '~/flash';
@@ -36,7 +35,7 @@ export default {
     TagsLoader,
     EmptyTagsState,
   },
-  inject: ['breadCrumbState'],
+  inject: ['breadCrumbState', 'config'],
   directives: {
     GlResizeObserver: GlResizeObserverDirective,
   },
@@ -71,7 +70,6 @@ export default {
     };
   },
   computed: {
-    ...mapState(['config']),
     queryVariables() {
       return {
         id: joinPaths(this.config.gidPrefix, `${this.$route.params.id}`),
diff --git a/app/assets/javascripts/registry/explorer/pages/list.vue b/app/assets/javascripts/registry/explorer/pages/list.vue
index 9b8826138ae..ce27b990013 100644
--- a/app/assets/javascripts/registry/explorer/pages/list.vue
+++ b/app/assets/javascripts/registry/explorer/pages/list.vue
@@ -1,5 +1,4 @@
 <script>
-import { mapState } from 'vuex';
 import {
   GlEmptyState,
   GlTooltipDirective,
@@ -54,6 +53,7 @@ export default {
     RegistryHeader,
     CliCommands,
   },
+  inject: ['config'],
   directives: {
     GlTooltip: GlTooltipDirective,
   },
@@ -106,7 +106,6 @@ export default {
     };
   },
   computed: {
-    ...mapState(['config']),
     graphqlResource() {
       return this.config.isGroupPage ? 'group' : 'project';
     },
diff --git a/app/assets/javascripts/registry/explorer/stores/actions.js b/app/assets/javascripts/registry/explorer/stores/actions.js
deleted file mode 100644
index c1883095097..00000000000
--- a/app/assets/javascripts/registry/explorer/stores/actions.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import axios from '~/lib/utils/axios_utils';
-import createFlash from '~/flash';
-import Api from '~/api';
-import * as types from './mutation_types';
-import {
-  FETCH_IMAGES_LIST_ERROR_MESSAGE,
-  DEFAULT_PAGE,
-  DEFAULT_PAGE_SIZE,
-  FETCH_TAGS_LIST_ERROR_MESSAGE,
-  FETCH_IMAGE_DETAILS_ERROR_MESSAGE,
-} from '../constants/index';
-import { pathGenerator } from '../utils';
-
-export const setInitialState = ({ commit }, data) => commit(types.SET_INITIAL_STATE, data);
-export const setShowGarbageCollectionTip = ({ commit }, data) =>
-  commit(types.SET_SHOW_GARBAGE_COLLECTION_TIP, data);
-
-export const receiveImagesListSuccess = ({ commit }, { data, headers }) => {
-  commit(types.SET_IMAGES_LIST_SUCCESS, data);
-  commit(types.SET_PAGINATION, headers);
-};
-
-export const receiveTagsListSuccess = ({ commit }, { data, headers }) => {
-  commit(types.SET_TAGS_LIST_SUCCESS, data);
-  commit(types.SET_TAGS_PAGINATION, headers);
-};
-
-export const requestImagesList = (
-  { commit, dispatch, state },
-  { pagination = {}, name = null } = {},
-) => {
-  commit(types.SET_MAIN_LOADING, true);
-  const { page = DEFAULT_PAGE, perPage = DEFAULT_PAGE_SIZE } = pagination;
-
-  return axios
-    .get(state.config.endpoint, { params: { page, per_page: perPage, name } })
-    .then(({ data, headers }) => {
-      dispatch('receiveImagesListSuccess', { data, headers });
-    })
-    .catch(() => {
-      createFlash({ message: FETCH_IMAGES_LIST_ERROR_MESSAGE });
-    })
-    .finally(() => {
-      commit(types.SET_MAIN_LOADING, false);
-    });
-};
-
-export const requestTagsList = ({ commit, dispatch, state: { imageDetails } }, pagination = {}) => {
-  commit(types.SET_MAIN_LOADING, true);
-  const tagsPath = pathGenerator(imageDetails);
-
-  const { page = DEFAULT_PAGE, perPage = DEFAULT_PAGE_SIZE } = pagination;
-  return axios
-    .get(tagsPath, { params: { page, per_page: perPage } })
-    .then(({ data, headers }) => {
-      dispatch('receiveTagsListSuccess', { data, headers });
-    })
-    .catch(() => {
-      createFlash({ message: FETCH_TAGS_LIST_ERROR_MESSAGE });
-    })
-    .finally(() => {
-      commit(types.SET_MAIN_LOADING, false);
-    });
-};
-
-export const requestImageDetailsAndTagsList = ({ dispatch, commit }, id) => {
-  commit(types.SET_MAIN_LOADING, true);
-  return Api.containerRegistryDetails(id)
-    .then(({ data }) => {
-      commit(types.SET_IMAGE_DETAILS, data);
-      dispatch('requestTagsList');
-    })
-    .catch(() => {
-      createFlash({ message: FETCH_IMAGE_DETAILS_ERROR_MESSAGE });
-      commit(types.SET_MAIN_LOADING, false);
-    });
-};
-
-export const requestDeleteTag = ({ commit, dispatch, state }, { tag }) => {
-  commit(types.SET_MAIN_LOADING, true);
-  return axios
-    .delete(tag.destroy_path)
-    .then(() => {
-      dispatch('setShowGarbageCollectionTip', true);
-
-      return dispatch('requestTagsList', state.tagsPagination);
-    })
-    .finally(() => {
-      commit(types.SET_MAIN_LOADING, false);
-    });
-};
-
-export const requestDeleteTags = ({ commit, dispatch, state }, { ids }) => {
-  commit(types.SET_MAIN_LOADING, true);
-
-  const tagsPath = pathGenerator(state.imageDetails, '/bulk_destroy');
-
-  return axios
-    .delete(tagsPath, { params: { ids } })
-    .then(() => {
-      dispatch('setShowGarbageCollectionTip', true);
-      return dispatch('requestTagsList', state.tagsPagination);
-    })
-    .finally(() => {
-      commit(types.SET_MAIN_LOADING, false);
-    });
-};
-
-export const requestDeleteImage = ({ commit }, image) => {
-  commit(types.SET_MAIN_LOADING, true);
-  return axios
-    .delete(image.destroy_path)
-    .then(() => {
-      commit(types.UPDATE_IMAGE, { ...image, deleting: true });
-    })
-    .finally(() => {
-      commit(types.SET_MAIN_LOADING, false);
-    });
-};
diff --git a/app/assets/javascripts/registry/explorer/stores/getters.js b/app/assets/javascripts/registry/explorer/stores/getters.js
deleted file mode 100644
index 7b5d1bd6da3..00000000000
--- a/app/assets/javascripts/registry/explorer/stores/getters.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export const dockerBuildCommand = state => {
-  /* eslint-disable @gitlab/require-i18n-strings */
-  return `docker build -t ${state.config.repositoryUrl} .`;
-};
-
-export const dockerPushCommand = state => {
-  /* eslint-disable @gitlab/require-i18n-strings */
-  return `docker push ${state.config.repositoryUrl}`;
-};
-
-export const dockerLoginCommand = state => {
-  /* eslint-disable @gitlab/require-i18n-strings */
-  return `docker login ${state.config.registryHostUrlWithPort}`;
-};
-
-export const showGarbageCollection = state => {
-  return state.showGarbageCollectionTip && state.config.isAdmin;
-};
diff --git a/app/assets/javascripts/registry/explorer/stores/index.js b/app/assets/javascripts/registry/explorer/stores/index.js
deleted file mode 100644
index 18e3351ed13..00000000000
--- a/app/assets/javascripts/registry/explorer/stores/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-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';
-
-Vue.use(Vuex);
-
-export const createStore = () =>
-  new Vuex.Store({
-    state,
-    getters,
-    actions,
-    mutations,
-  });
diff --git a/app/assets/javascripts/registry/explorer/stores/mutation_types.js b/app/assets/javascripts/registry/explorer/stores/mutation_types.js
deleted file mode 100644
index 5dd0cec52eb..00000000000
--- a/app/assets/javascripts/registry/explorer/stores/mutation_types.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export const SET_INITIAL_STATE = 'SET_INITIAL_STATE';
-
-export const SET_IMAGES_LIST_SUCCESS = 'SET_PACKAGE_LIST_SUCCESS';
-export const UPDATE_IMAGE = 'UPDATE_IMAGE';
-export const SET_PAGINATION = 'SET_PAGINATION';
-export const SET_MAIN_LOADING = 'SET_MAIN_LOADING';
-export const SET_TAGS_PAGINATION = 'SET_TAGS_PAGINATION';
-export const SET_TAGS_LIST_SUCCESS = 'SET_TAGS_LIST_SUCCESS';
-export const SET_SHOW_GARBAGE_COLLECTION_TIP = 'SET_SHOW_GARBAGE_COLLECTION_TIP';
-export const SET_IMAGE_DETAILS = 'SET_IMAGE_DETAILS';
diff --git a/app/assets/javascripts/registry/explorer/stores/mutations.js b/app/assets/javascripts/registry/explorer/stores/mutations.js
deleted file mode 100644
index 5bdb431ad2e..00000000000
--- a/app/assets/javascripts/registry/explorer/stores/mutations.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as types from './mutation_types';
-import { parseIntPagination, normalizeHeaders, parseBoolean } from '~/lib/utils/common_utils';
-import { IMAGE_DELETE_SCHEDULED_STATUS, IMAGE_FAILED_DELETED_STATUS } from '../constants/index';
-
-export default {
-  [types.SET_INITIAL_STATE](state, config) {
-    state.config = {
-      ...config,
-      expirationPolicy: config.expirationPolicy ? JSON.parse(config.expirationPolicy) : undefined,
-      isGroupPage: parseBoolean(config.isGroupPage),
-      isAdmin: parseBoolean(config.isAdmin),
-    };
-  },
-
-  [types.SET_IMAGES_LIST_SUCCESS](state, images) {
-    state.images = images.map(i => ({
-      ...i,
-      status: undefined,
-      deleting: i.status === IMAGE_DELETE_SCHEDULED_STATUS,
-      failedDelete: i.status === IMAGE_FAILED_DELETED_STATUS,
-    }));
-  },
-
-  [types.UPDATE_IMAGE](state, image) {
-    const index = state.images.findIndex(i => i.id === image.id);
-    state.images.splice(index, 1, { ...image });
-  },
-
-  [types.SET_TAGS_LIST_SUCCESS](state, tags) {
-    state.tags = tags;
-  },
-
-  [types.SET_MAIN_LOADING](state, isLoading) {
-    state.isLoading = isLoading;
-  },
-
-  [types.SET_SHOW_GARBAGE_COLLECTION_TIP](state, showGarbageCollectionTip) {
-    state.showGarbageCollectionTip = showGarbageCollectionTip;
-  },
-
-  [types.SET_PAGINATION](state, headers) {
-    const normalizedHeaders = normalizeHeaders(headers);
-    state.pagination = parseIntPagination(normalizedHeaders);
-  },
-
-  [types.SET_TAGS_PAGINATION](state, headers) {
-    const normalizedHeaders = normalizeHeaders(headers);
-    state.tagsPagination = parseIntPagination(normalizedHeaders);
-  },
-
-  [types.SET_IMAGE_DETAILS](state, details) {
-    state.imageDetails = details;
-  },
-};
diff --git a/app/assets/javascripts/registry/explorer/stores/state.js b/app/assets/javascripts/registry/explorer/stores/state.js
deleted file mode 100644
index 66ee56eb47b..00000000000
--- a/app/assets/javascripts/registry/explorer/stores/state.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export default () => ({
-  isLoading: false,
-  showGarbageCollectionTip: false,
-  config: {},
-  images: [],
-  imageDetails: {},
-  tags: [],
-  pagination: {},
-  tagsPagination: {},
-});
diff --git a/app/assets/javascripts/registry/explorer/utils.js b/app/assets/javascripts/registry/explorer/utils.js
deleted file mode 100644
index a48da51caae..00000000000
--- a/app/assets/javascripts/registry/explorer/utils.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { joinPaths } from '~/lib/utils/url_utility';
-
-export const pathGenerator = (imageDetails, ending = '?format=json') => {
-  // this method is a temporary workaround, to be removed with graphql implementation
-  // https://gitlab.com/gitlab-org/gitlab/-/issues/276432
-
-  const splitPath = imageDetails.path.split('/').reverse();
-  const splitName = imageDetails.name ? imageDetails.name.split('/').reverse() : [];
-  const basePath = splitPath
-    .reduce((acc, curr, index) => {
-      if (splitPath[index] !== splitName[index]) {
-        acc.unshift(curr);
-      }
-      return acc;
-    }, [])
-    .join('/');
-
-  return joinPaths(
-    window.gon.relative_url_root,
-    `/${basePath}`,
-    '/registry/repository/',
-    `${imageDetails.id}`,
-    `tags${ending}`,
-  );
-};