Add latest changes from gitlab-org/gitlab@master

2 files changed, 135 insertions, 0 deletions

diff --git a/app/assets/javascripts/comment_templates/pages/edit.vue b/app/assets/javascripts/comment_templates/pages/edit.vue
new file mode 100644
index 00000000000..343efdccefa
--- /dev/null
+++ b/app/assets/javascripts/comment_templates/pages/edit.vue
@@ -0,0 +1,68 @@
+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+import { fetchPolicies } from '~/lib/graphql';
+import { createAlert } from '~/alert';
+import { __ } from '~/locale';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import { TYPE_USERS_SAVED_REPLY } from '~/graphql_shared/constants';
+import CreateForm from '../components/form.vue';
+import getSavedReply from '../queries/get_saved_reply.query.graphql';
+
+export default {
+  components: {
+    GlLoadingIcon,
+    CreateForm,
+  },
+  apollo: {
+    savedReply: {
+      fetchPolicy: fetchPolicies.NETWORK_ONLY,
+      query: getSavedReply,
+      variables() {
+        return {
+          id: convertToGraphQLId(TYPE_USERS_SAVED_REPLY, this.$route.params.id),
+        };
+      },
+      update: (r) => r.currentUser.savedReply,
+      skip() {
+        return !this.$route.params.id;
+      },
+      result({
+        data: {
+          currentUser: { savedReply },
+        },
+      }) {
+        if (!savedReply) {
+          createAlert({ message: __('Unable to find comment template') });
+          this.redirectToRoot();
+        }
+      },
+    },
+  },
+  data() {
+    return {
+      savedReply: null,
+    };
+  },
+  methods: {
+    redirectToRoot() {
+      this.$router.push({ path: '/' });
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h5 class="gl-mt-0 gl-font-lg">
+      {{ __('Edit comment template') }}
+    </h5>
+    <gl-loading-icon v-if="$apollo.queries.savedReply.loading" size="lg" />
+    <create-form
+      v-else-if="savedReply"
+      :id="savedReply.id"
+      :name="savedReply.name"
+      :content="savedReply.content"
+      @saved="redirectToRoot"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/comment_templates/pages/index.vue b/app/assets/javascripts/comment_templates/pages/index.vue
new file mode 100644
index 00000000000..72a94dafc58
--- /dev/null
+++ b/app/assets/javascripts/comment_templates/pages/index.vue
@@ -0,0 +1,67 @@
+<script>
+import { fetchPolicies } from '~/lib/graphql';
+import CreateForm from '../components/form.vue';
+import savedRepliesQuery from '../queries/saved_replies.query.graphql';
+import List from '../components/list.vue';
+
+export default {
+  apollo: {
+    savedReplies: {
+      fetchPolicy: fetchPolicies.NETWORK_ONLY,
+      query: savedRepliesQuery,
+      update: (r) => r.currentUser?.savedReplies?.nodes,
+      variables() {
+        return {
+          ...this.pagination,
+        };
+      },
+      result({ data }) {
+        const pageInfo = data.currentUser?.savedReplies?.pageInfo;
+
+        this.count = data.currentUser?.savedReplies?.count;
+
+        if (pageInfo) {
+          this.pageInfo = pageInfo;
+        }
+      },
+    },
+  },
+  components: {
+    CreateForm,
+    List,
+  },
+  data() {
+    return {
+      savedReplies: [],
+      count: 0,
+      pageInfo: {},
+      pagination: {},
+    };
+  },
+  methods: {
+    refetchSavedReplies() {
+      this.pagination = {};
+      this.$apollo.queries.savedReplies.refetch();
+    },
+    changePage(pageInfo) {
+      this.pagination = pageInfo;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h5 class="gl-mt-0 gl-font-lg">
+      {{ __('Add new comment template') }}
+    </h5>
+    <create-form @saved="refetchSavedReplies" />
+    <list
+      :loading="$apollo.queries.savedReplies.loading"
+      :saved-replies="savedReplies"
+      :page-info="pageInfo"
+      :count="count"
+      @input="changePage"
+    />
+  </div>
+</template>