1 files changed, 68 insertions, 0 deletions
diff --git a/app/assets/javascripts/saved_replies/pages/edit.vue b/app/assets/javascripts/saved_replies/pages/edit.vue
new file mode 100644
index 00000000000..6f736015e5f
--- /dev/null
+++ b/app/assets/javascripts/saved_replies/pages/edit.vue
@@ -0,0 +1,68 @@
+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+import { fetchPolicies } from '~/lib/graphql';
+import { createAlert } from '~/flash';
+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 saved reply') });
+          this.redirectToRoot();
+        }
+      },
+    },
+  },
+  data() {
+    return {
+      savedReply: null,
+    };
+  },
+  methods: {
+    redirectToRoot() {
+      this.$router.push({ path: '/' });
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h5 class="gl-mt-0 gl-font-lg">
+      {{ __('Edit saved reply') }}
+    </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>