Add latest changes from gitlab-org/gitlab@master

12 files changed, 122 insertions, 16 deletions

diff --git a/app/assets/javascripts/graphql_shared/utils.js b/app/assets/javascripts/graphql_shared/utils.js
new file mode 100644
index 00000000000..a262fbd9ac3
--- /dev/null
+++ b/app/assets/javascripts/graphql_shared/utils.js
@@ -0,0 +1,12 @@
+/**
+ * Ids generated by GraphQL endpoints are usually in the format
+ * gid://gitlab/Environments/123. This method extracts Id number
+ * from the Id path
+ *
+ * @param {String} gid GraphQL global ID
+ * @returns {Number}
+ */
+export const getIdFromGraphQLId = (gid = '') =>
+  parseInt((gid || '').replace(/gid:\/\/gitlab\/.*\//g, ''), 10) || null;
+
+export default {};
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index af9399a37bd..b192fb78631 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlBadge } from '@gitlab/ui';
 import { visitUrl } from '../../lib/utils/url_utility';
 import tooltip from '../../vue_shared/directives/tooltip';
 import identicon from '../../vue_shared/components/identicon.vue';
@@ -17,6 +17,7 @@ export default {
     tooltip,
   },
   components: {
+    GlBadge,
     GlLoadingIcon,
     identicon,
     itemCaret,
@@ -62,6 +63,9 @@ export default {
     isGroup() {
       return this.group.type === 'group';
     },
+    isGroupPendingRemoval() {
+      return this.group.type === 'group' && this.group.pendingRemoval;
+    },
     visibilityIcon() {
       return VISIBILITY_TYPE_ICON[this.group.visibility];
     },
@@ -139,6 +143,9 @@ export default {
             <span v-html="group.description"> </span>
           </div>
         </div>
+        <div v-if="isGroupPendingRemoval">
+          <gl-badge variant="warning">{{ __('pending removal') }}</gl-badge>
+        </div>
         <div
           class="metadata align-items-md-center d-flex flex-grow-1 flex-shrink-0 flex-wrap justify-content-md-between"
         >
diff --git a/app/assets/javascripts/groups/store/groups_store.js b/app/assets/javascripts/groups/store/groups_store.js
index 214ac5e3db5..6a1197fa163 100644
--- a/app/assets/javascripts/groups/store/groups_store.js
+++ b/app/assets/javascripts/groups/store/groups_store.js
@@ -93,7 +93,7 @@ export default class GroupsStore {
       memberCount: rawGroupItem.number_users_with_delimiter,
       starCount: rawGroupItem.star_count,
       updatedAt: rawGroupItem.updated_at,
-      pendingRemoval: rawGroupItem.marked_for_deletion_at,
+      pendingRemoval: rawGroupItem.marked_for_deletion,
     };
   }
 
diff --git a/app/assets/javascripts/monitoring/queries/getEnvironments.query.graphql b/app/assets/javascripts/monitoring/queries/getEnvironments.query.graphql
new file mode 100644
index 00000000000..fd3a4348509
--- /dev/null
+++ b/app/assets/javascripts/monitoring/queries/getEnvironments.query.graphql
@@ -0,0 +1,10 @@
+query getEnvironments($projectPath: ID!, $search: String) {
+  project(fullPath: $projectPath) {
+    data: environments(search: $search) {
+      environments: nodes {
+        name
+        id
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js
index 6303ed2b82f..e26e1457f55 100644
--- a/app/assets/javascripts/monitoring/stores/actions.js
+++ b/app/assets/javascripts/monitoring/stores/actions.js
@@ -1,7 +1,9 @@
 import * as types from './mutation_types';
 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
+import { gqClient, parseEnvironmentsResponse, removeLeadingSlash } from './utils';
 import trackDashboardLoad from '../monitoring_tracking_helper';
+import getEnvironments from '../queries/getEnvironments.query.graphql';
 import statusCodes from '../../lib/utils/http_status';
 import { backOff } from '../../lib/utils/common_utils';
 import { s__, sprintf } from '../../locale';
@@ -187,26 +189,30 @@ export const fetchDeploymentsData = ({ state, dispatch }) => {
     });
 };
 
-export const fetchEnvironmentsData = ({ state, dispatch }) => {
-  if (!state.environmentsEndpoint) {
-    return Promise.resolve([]);
-  }
-  return axios
-    .get(state.environmentsEndpoint)
-    .then(resp => resp.data)
-    .then(response => {
-      if (!response || !response.environments) {
+export const fetchEnvironmentsData = ({ state, dispatch }) =>
+  gqClient
+    .mutate({
+      mutation: getEnvironments,
+      variables: {
+        projectPath: removeLeadingSlash(state.projectPath),
+        search: state.environmentsSearchTerm,
+      },
+    })
+    .then(resp =>
+      parseEnvironmentsResponse(resp.data?.project?.data?.environments, state.projectPath),
+    )
+    .then(environments => {
+      if (!environments) {
         createFlash(
           s__('Metrics|There was an error fetching the environments data, please try again'),
         );
       }
-      dispatch('receiveEnvironmentsDataSuccess', response.environments);
+      dispatch('receiveEnvironmentsDataSuccess', environments);
     })
     .catch(() => {
       dispatch('receiveEnvironmentsDataFailure');
       createFlash(s__('Metrics|There was an error getting environments information.'));
     });
-};
 
 /**
  * Set a new array of metrics to a panel group
diff --git a/app/assets/javascripts/monitoring/stores/utils.js b/app/assets/javascripts/monitoring/stores/utils.js
index 616d2e9bfd8..56244a4ca66 100644
--- a/app/assets/javascripts/monitoring/stores/utils.js
+++ b/app/assets/javascripts/monitoring/stores/utils.js
@@ -1,8 +1,41 @@
 import { omit } from 'lodash';
+import createGqClient from '~/lib/graphql';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+
+export const gqClient = createGqClient();
 
 export const uniqMetricsId = metric => `${metric.metric_id}_${metric.id}`;
 
 /**
+ * Project path has a leading slash that doesn't work well
+ * with project full path resolver here
+ * https://gitlab.com/gitlab-org/gitlab/blob/5cad4bd721ab91305af4505b2abc92b36a56ad6b/app/graphql/resolvers/full_path_resolver.rb#L10
+ *
+ * @param {String} str String with leading slash
+ * @returns {String}
+ */
+export const removeLeadingSlash = str => (str || '').replace(/^\/+/, '');
+
+/**
+ * GraphQL environments API returns only id and name.
+ * For the environments dropdown we need metrics_path.
+ * This method parses the results and add neccessart attrs
+ *
+ * @param {Array} response Environments API result
+ * @param {String} projectPath Current project path
+ * @returns {Array}
+ */
+export const parseEnvironmentsResponse = (response = [], projectPath) =>
+  (response || []).map(env => {
+    const id = getIdFromGraphQLId(env.id);
+    return {
+      ...env,
+      id,
+      metrics_path: `${projectPath}/environments/${id}/metrics`,
+    };
+  });
+
+/**
  * Metrics loaded from project-defined dashboards do not have a metric_id.
  * This method creates a unique ID combining metric_id and id, if either is present.
  * This is hopefully a temporary solution until BE processes metrics before passing to fE
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:
    * {
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 1358b3aa6dd..9e99c92d3f2 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -56,6 +56,7 @@
 .gl-bg-green-100 { @include gl-bg-green-100;}
 
 .gl-text-blue-500 { @include gl-text-blue-500; }
+.gl-text-gray-700 { @include gl-text-gray-700; }
 .gl-text-gray-900 { @include gl-text-gray-900; }
 .gl-text-red-700 { @include gl-text-red-700; }
 .gl-text-orange-700 { @include gl-text-orange-700; }