Add latest changes from gitlab-org/gitlab@master

3 files changed, 65 insertions, 23 deletions

diff --git a/app/assets/javascripts/releases/components/app_show.vue b/app/assets/javascripts/releases/components/app_show.vue
index 9ef38503c10..c38e93d420b 100644
--- a/app/assets/javascripts/releases/components/app_show.vue
+++ b/app/assets/javascripts/releases/components/app_show.vue
@@ -1,5 +1,8 @@
 <script>
-import { mapState, mapActions } from 'vuex';
+import createFlash from '~/flash';
+import { s__ } from '~/locale';
+import oneReleaseQuery from '../queries/one_release.query.graphql';
+import { convertGraphQLRelease } from '../util';
 import ReleaseBlock from './release_block.vue';
 import ReleaseSkeletonLoader from './release_skeleton_loader.vue';
 
@@ -9,21 +12,58 @@ export default {
     ReleaseBlock,
     ReleaseSkeletonLoader,
   },
-  computed: {
-    ...mapState('detail', ['isFetchingRelease', 'fetchError', 'release']),
+  inject: {
+    fullPath: {
+      default: '',
+    },
+    tagName: {
+      default: '',
+    },
   },
-  created() {
-    this.fetchRelease();
+  apollo: {
+    release: {
+      query: oneReleaseQuery,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+          tagName: this.tagName,
+        };
+      },
+      update(data) {
+        if (data.project?.release) {
+          return convertGraphQLRelease(data.project.release);
+        }
+
+        return null;
+      },
+      result(result) {
+        // Handle the case where the query succeeded but didn't return any data
+        if (!result.error && !this.release) {
+          this.showFlash(
+            new Error(`No release found in project "${this.fullPath}" with tag "${this.tagName}"`),
+          );
+        }
+      },
+      error(error) {
+        this.showFlash(error);
+      },
+    },
   },
   methods: {
-    ...mapActions('detail', ['fetchRelease']),
+    showFlash(error) {
+      createFlash({
+        message: s__('Release|Something went wrong while getting the release details.'),
+        captureError: true,
+        error,
+      });
+    },
   },
 };
 </script>
 <template>
   <div class="gl-mt-3">
-    <release-skeleton-loader v-if="isFetchingRelease" />
+    <release-skeleton-loader v-if="$apollo.queries.release.loading" />
 
-    <release-block v-else-if="!fetchError" :release="release" />
+    <release-block v-else-if="release" :release="release" />
   </div>
 </template>
diff --git a/app/assets/javascripts/releases/mount_show.js b/app/assets/javascripts/releases/mount_show.js
index f3ed7d6c5ff..7272880197a 100644
--- a/app/assets/javascripts/releases/mount_show.js
+++ b/app/assets/javascripts/releases/mount_show.js
@@ -1,26 +1,28 @@
 import Vue from 'vue';
-import Vuex from 'vuex';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
 import ReleaseShowApp from './components/app_show.vue';
-import createStore from './stores';
-import createDetailModule from './stores/modules/detail';
 
-Vue.use(Vuex);
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(),
+});
 
 export default () => {
   const el = document.getElementById('js-show-release-page');
 
-  const store = createStore({
-    modules: {
-      detail: createDetailModule(el.dataset),
-    },
-    featureFlags: {
-      graphqlIndividualReleasePage: Boolean(gon.features?.graphqlIndividualReleasePage),
-    },
-  });
+  if (!el) return false;
+
+  const { projectPath, tagName } = el.dataset;
 
   return new Vue({
     el,
-    store,
+    apolloProvider,
+    provide: {
+      fullPath: projectPath,
+      tagName,
+    },
     render: (h) => h(ReleaseShowApp),
   });
 };
diff --git a/app/assets/javascripts/releases/stores/modules/detail/actions.js b/app/assets/javascripts/releases/stores/modules/detail/actions.js
index 5fa002706c6..8dc2083dd2b 100644
--- a/app/assets/javascripts/releases/stores/modules/detail/actions.js
+++ b/app/assets/javascripts/releases/stores/modules/detail/actions.js
@@ -43,7 +43,7 @@ export const fetchRelease = ({ commit, state, rootState }) => {
       })
       .catch((error) => {
         commit(types.RECEIVE_RELEASE_ERROR, error);
-        createFlash(s__('Release|Something went wrong while getting the release details'));
+        createFlash(s__('Release|Something went wrong while getting the release details.'));
       });
   }
 
@@ -54,7 +54,7 @@ export const fetchRelease = ({ commit, state, rootState }) => {
     })
     .catch((error) => {
       commit(types.RECEIVE_RELEASE_ERROR, error);
-      createFlash(s__('Release|Something went wrong while getting the release details'));
+      createFlash(s__('Release|Something went wrong while getting the release details.'));
     });
 };