Add latest changes from gitlab-org/gitlab@master

5 files changed, 40 insertions, 3 deletions

diff --git a/app/assets/javascripts/registry/settings/components/registry_settings_app.vue b/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
index 7530c1dfcaf..28f4ef62242 100644
--- a/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
+++ b/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
@@ -1,5 +1,8 @@
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapState } from 'vuex';
+import { GlAlert } from '@gitlab/ui';
+import { sprintf, s__ } from '~/locale';
+
 import { FETCH_SETTINGS_ERROR_MESSAGE } from '../constants';
 
 import SettingsForm from './settings_form.vue';
@@ -7,6 +10,23 @@ import SettingsForm from './settings_form.vue';
 export default {
   components: {
     SettingsForm,
+    GlAlert,
+  },
+  computed: {
+    ...mapState(['isDisabled']),
+    notAvailableMessage() {
+      return sprintf(
+        s__(
+          'ContainerRegistry|Currently, the Container Registry tag expiration feature is not available for projects created before GitLab version 12.8. For updates and more information, visit Issue %{linkStart}#196124%{linkEnd}',
+        ),
+        {
+          linkStart:
+            '<a href="https://gitlab.com/gitlab-org/gitlab/issues/196124" target="_blank" rel="noopener noreferrer">',
+          linkEnd: '</a>',
+        },
+        false,
+      );
+    },
   },
   mounted() {
     this.fetchSettings().catch(() =>
@@ -34,6 +54,9 @@ export default {
         }}
       </li>
     </ul>
-    <settings-form ref="settings-form" />
+    <settings-form v-if="!isDisabled" />
+    <gl-alert v-else :dismissible="false">
+      <p v-html="notAvailableMessage"></p>
+    </gl-alert>
   </div>
 </template>
diff --git a/app/assets/javascripts/registry/settings/store/actions.js b/app/assets/javascripts/registry/settings/store/actions.js
index 21a2008fef6..d0379d05164 100644
--- a/app/assets/javascripts/registry/settings/store/actions.js
+++ b/app/assets/javascripts/registry/settings/store/actions.js
@@ -4,7 +4,13 @@ import * as types from './mutation_types';
 export const setInitialState = ({ commit }, data) => commit(types.SET_INITIAL_STATE, data);
 export const updateSettings = ({ commit }, data) => commit(types.UPDATE_SETTINGS, data);
 export const toggleLoading = ({ commit }) => commit(types.TOGGLE_LOADING);
-export const receiveSettingsSuccess = ({ commit }, data = {}) => commit(types.SET_SETTINGS, data);
+export const receiveSettingsSuccess = ({ commit }, data) => {
+  if (data) {
+    commit(types.SET_SETTINGS, data);
+  } else {
+    commit(types.SET_IS_DISABLED, true);
+  }
+};
 export const resetSettings = ({ commit }) => commit(types.RESET_SETTINGS);
 
 export const fetchSettings = ({ dispatch, state }) => {
diff --git a/app/assets/javascripts/registry/settings/store/mutation_types.js b/app/assets/javascripts/registry/settings/store/mutation_types.js
index db499ffa761..2d071567c1f 100644
--- a/app/assets/javascripts/registry/settings/store/mutation_types.js
+++ b/app/assets/javascripts/registry/settings/store/mutation_types.js
@@ -3,3 +3,4 @@ export const UPDATE_SETTINGS = 'UPDATE_SETTINGS';
 export const TOGGLE_LOADING = 'TOGGLE_LOADING';
 export const SET_SETTINGS = 'SET_SETTINGS';
 export const RESET_SETTINGS = 'RESET_SETTINGS';
+export const SET_IS_DISABLED = 'SET_IS_DISABLED';
diff --git a/app/assets/javascripts/registry/settings/store/mutations.js b/app/assets/javascripts/registry/settings/store/mutations.js
index 25a67cc6973..b773f2dd44c 100644
--- a/app/assets/javascripts/registry/settings/store/mutations.js
+++ b/app/assets/javascripts/registry/settings/store/mutations.js
@@ -16,6 +16,9 @@ export default {
     state.settings = settings;
     state.original = Object.freeze(settings);
   },
+  [types.SET_IS_DISABLED](state, isDisabled) {
+    state.isDisabled = isDisabled;
+  },
   [types.RESET_SETTINGS](state) {
     state.settings = { ...state.original };
   },
diff --git a/app/assets/javascripts/registry/settings/store/state.js b/app/assets/javascripts/registry/settings/store/state.js
index 50c882e1839..582e18e5465 100644
--- a/app/assets/javascripts/registry/settings/store/state.js
+++ b/app/assets/javascripts/registry/settings/store/state.js
@@ -8,6 +8,10 @@ export default () => ({
    */
   isLoading: false,
   /*
+   * Boolean to determine if the user is allowed to interact with the form
+   */
+  isDisabled: false,
+  /*
    * This contains the data shown and manipulated in the UI
    * Has the following structure:
    * {