Add latest changes from gitlab-org/gitlab@master

2 files changed, 139 insertions, 3 deletions

diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index 55e6a891e27..b2a69cdb6c6 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -15,6 +15,7 @@ import { ENVIRONMENTS_SCOPE } from '../constants';
 import EnvironmentFolder from './environment_folder.vue';
 import EnableReviewAppModal from './enable_review_app_modal.vue';
 import StopEnvironmentModal from './stop_environment_modal.vue';
+import StopStaleEnvironmentsModal from './stop_stale_environments_modal.vue';
 import EnvironmentItem from './new_environment_item.vue';
 import ConfirmRollbackModal from './confirm_rollback_modal.vue';
 import DeleteEnvironmentModal from './delete_environment_modal.vue';
@@ -31,6 +32,7 @@ export default {
     EnableReviewAppModal,
     EnvironmentItem,
     StopEnvironmentModal,
+    StopStaleEnvironmentsModal,
     GlBadge,
     GlPagination,
     GlSearchBoxByType,
@@ -75,6 +77,7 @@ export default {
   i18n: {
     newEnvironmentButtonLabel: s__('Environments|New environment'),
     reviewAppButtonLabel: s__('Environments|Enable review app'),
+    cleanUpEnvsButtonLabel: s__('Environments|Clean up environments'),
     available: __('Available'),
     stopped: __('Stopped'),
     prevPage: __('Go to previous page'),
@@ -85,11 +88,13 @@ export default {
     searchPlaceholder: s__('Environments|Search by environment name'),
   },
   modalId: 'enable-review-app-info',
+  stopStaleEnvsModalId: 'stop-stale-environments-modal',
   data() {
     const { page = '1', search = '', scope } = queryToObject(window.location.search);
     return {
       interval: undefined,
       isReviewAppModalVisible: false,
+      isStopStaleEnvModalVisible: false,
       page: parseInt(page, 10),
       pageInfo: {},
       scope: Object.values(ENVIRONMENTS_SCOPE).includes(scope)
@@ -107,6 +112,9 @@ export default {
     canSetupReviewApp() {
       return this.environmentApp?.reviewApp?.canSetupReviewApp;
     },
+    canCleanUpEnvs() {
+      return this.environmentApp?.canStopStaleEnvironments;
+    },
     folders() {
       return this.environmentApp?.environments?.filter((e) => e.size > 1) ?? [];
     },
@@ -149,6 +157,19 @@ export default {
         },
       };
     },
+    openCleanUpEnvsModal() {
+      if (!this.canCleanUpEnvs) {
+        return null;
+      }
+
+      return {
+        text: this.$options.i18n.cleanUpEnvsButtonLabel,
+        attributes: {
+          category: 'secondary',
+          variant: 'confirm',
+        },
+      };
+    },
     stoppedCount() {
       return this.environmentApp?.stoppedCount;
     },
@@ -178,6 +199,9 @@ export default {
     showReviewAppModal() {
       this.isReviewAppModalVisible = true;
     },
+    showCleanUpEnvsModal() {
+      this.isStopStaleEnvModalVisible = true;
+    },
     setScope(scope) {
       this.scope = scope;
       this.moveToPage(1);
@@ -219,16 +243,24 @@ export default {
       :modal-id="$options.modalId"
       data-testid="enable-review-app-modal"
     />
+    <stop-stale-environments-modal
+      v-if="canCleanUpEnvs"
+      v-model="isStopStaleEnvModalVisible"
+      :modal-id="$options.stopStaleEnvsModalId"
+      data-testid="stop-stale-environments-modal"
+    />
     <delete-environment-modal :environment="environmentToDelete" graphql />
     <stop-environment-modal :environment="environmentToStop" graphql />
     <confirm-rollback-modal :environment="environmentToRollback" graphql />
     <canary-update-modal :environment="environmentToChangeCanary" :weight="weight" />
     <gl-tabs
-      :action-secondary="addEnvironment"
-      :action-primary="openReviewAppModal"
+      :action-secondary="openReviewAppModal"
+      :action-primary="openCleanUpEnvsModal"
+      :action-tertiary="addEnvironment"
       sync-active-tab-with-query-params
       query-param-name="scope"
-      @primary="showReviewAppModal"
+      @secondary="showReviewAppModal"
+      @primary="showCleanUpEnvsModal"
     >
       <gl-tab
         :query-param-value="$options.ENVIRONMENTS_SCOPE.AVAILABLE"
diff --git a/app/assets/javascripts/environments/components/stop_stale_environments_modal.vue b/app/assets/javascripts/environments/components/stop_stale_environments_modal.vue
new file mode 100644
index 00000000000..57873b28d37
--- /dev/null
+++ b/app/assets/javascripts/environments/components/stop_stale_environments_modal.vue
@@ -0,0 +1,104 @@
+<script>
+import { GlTooltipDirective, GlModal, GlDatepicker, GlFormGroup } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+import { stopStaleEnvironments } from '~/rest_api';
+import { MIN_STALE_ENVIRONMENT_DATE, MAX_STALE_ENVIRONMENT_DATE } from '../constants';
+
+export default {
+  id: 'stop-stale-environments-modal',
+  name: 'StopStaleEnvironmentsModal',
+
+  components: {
+    GlModal,
+    GlDatepicker,
+    GlFormGroup,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  inject: {
+    projectId: {
+      default: '',
+    },
+  },
+  model: {
+    prop: 'visible',
+    event: 'change',
+  },
+  props: {
+    modalId: {
+      type: String,
+      required: true,
+    },
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  modalProps: {
+    primary: {
+      text: s__('Environments|Clean up'),
+      attributes: [{ variant: 'info' }],
+    },
+    cancel: {
+      text: __('Cancel'),
+    },
+    dateRange: {
+      minDate: MIN_STALE_ENVIRONMENT_DATE, // 10 years ago
+      maxDate: MAX_STALE_ENVIRONMENT_DATE,
+    },
+  },
+
+  data() {
+    return {
+      stopEnvironmentsBefore: MAX_STALE_ENVIRONMENT_DATE,
+    };
+  },
+
+  methods: {
+    onSubmit() {
+      stopStaleEnvironments(this.projectId, this.stopEnvironmentsBefore || this.maxDate);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    :action-primary="$options.modalProps.primary"
+    :action-cancel="$options.modalProps.cancel"
+    :visible="visible"
+    :modal-id="modalId"
+    :title="s__('Environments|Clean up environments')"
+    static
+    @primary="onSubmit"
+    @change="$emit('change', $event)"
+  >
+    <p>
+      {{
+        s__(
+          'Environments|Select which environments to clean up. \
+      Protected environments are excluded. Learn more about cleaning up environments.',
+        )
+      }}
+    </p>
+
+    <gl-form-group
+      :label="s__('Environments|Stop unused environments')"
+      :label-description="
+        s__('Environments|Stop environments that have not been updated since the specified date:')
+      "
+      label-for="stop_environments-before"
+    >
+      <gl-datepicker
+        v-model="stopEnvironmentsBefore"
+        input-id="stop-environments-before"
+        data-testid="stop-environments-before"
+        :min-date="$options.modalProps.dateRange.minDate"
+        :max-date="$options.modalProps.dateRange.maxDate"
+        :default-date="$options.modalProps.dateRange.maxDate"
+      />
+    </gl-form-group>
+  </gl-modal>
+</template>