1 files changed, 79 insertions, 0 deletions
diff --git a/app/assets/javascripts/environments/components/deploy_freeze_alert.vue b/app/assets/javascripts/environments/components/deploy_freeze_alert.vue
new file mode 100644
index 00000000000..aaa7e71758c
--- /dev/null
+++ b/app/assets/javascripts/environments/components/deploy_freeze_alert.vue
@@ -0,0 +1,79 @@
+<script>
+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
+import { sortBy } from 'lodash';
+import { formatDate } from '~/lib/utils/datetime/date_format_utility';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { s__ } from '~/locale';
+import deployFreezesQuery from '../graphql/queries/deploy_freezes.query.graphql';
+
+export default {
+  components: {
+    GlAlert,
+    GlLink,
+    GlSprintf,
+  },
+  inject: ['projectFullPath'],
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return { deployFreezes: [] };
+  },
+
+  apollo: {
+    deployFreezes: {
+      query: deployFreezesQuery,
+      update(data) {
+        const freezes = data?.project?.environment?.deployFreezes;
+        return sortBy(freezes, [(freeze) => freeze.startTime]);
+      },
+      variables() {
+        return {
+          projectFullPath: this.projectFullPath,
+          environmentName: this.name,
+        };
+      },
+    },
+  },
+  computed: {
+    shouldShowDeployFreezeAlert() {
+      return this.deployFreezes.length > 0;
+    },
+    nextDeployFreeze() {
+      return this.deployFreezes[0];
+    },
+    deployFreezeStartTime() {
+      return formatDate(this.nextDeployFreeze.startTime);
+    },
+    deployFreezeEndTime() {
+      return formatDate(this.nextDeployFreeze.endTime);
+    },
+  },
+  i18n: {
+    deployFreezeAlert: s__(
+      'Environments|A freeze period is in effect from %{startTime} to %{endTime}. Deployments might fail during this time. For more information, see the %{docsLinkStart}deploy freeze documentation%{docsLinkEnd}.',
+    ),
+  },
+  deployFreezeDocsPath: helpPagePath('user/project/releases/index', {
+    anchor: 'prevent-unintentional-releases-by-setting-a-deploy-freeze',
+  }),
+};
+</script>
+<template>
+  <gl-alert v-if="shouldShowDeployFreezeAlert" :dismissible="false" class="gl-mt-4">
+    <gl-sprintf :message="$options.i18n.deployFreezeAlert">
+      <template #startTime
+        ><span class="gl-font-weight-bold">{{ deployFreezeStartTime }}</span></template
+      >
+      <template #endTime
+        ><span class="gl-font-weight-bold">{{ deployFreezeEndTime }}</span></template
+      >
+      <template #docsLink="{ content }"
+        ><gl-link :href="$options.deployFreezeDocsPath">{{ content }}</gl-link></template
+      >
+    </gl-sprintf>
+  </gl-alert>
+</template>