1 files changed, 67 insertions, 0 deletions
diff --git a/app/assets/javascripts/design_management_new/components/design_destroyer.vue b/app/assets/javascripts/design_management_new/components/design_destroyer.vue
new file mode 100644
index 00000000000..7ae569216f0
--- /dev/null
+++ b/app/assets/javascripts/design_management_new/components/design_destroyer.vue
@@ -0,0 +1,67 @@
+<script>
+import { ApolloMutation } from 'vue-apollo';
+import getDesignListQuery from '../graphql/queries/get_design_list.query.graphql';
+import destroyDesignMutation from '../graphql/mutations/destroy_design.mutation.graphql';
+import { updateStoreAfterDesignsDelete } from '../utils/cache_update';
+
+export default {
+  components: {
+    ApolloMutation,
+  },
+  props: {
+    filenames: {
+      type: Array,
+      required: true,
+    },
+  },
+  inject: {
+    projectPath: {
+      default: '',
+    },
+    iid: {
+      from: 'issueIid',
+      defaut: '',
+    },
+  },
+  computed: {
+    projectQueryBody() {
+      return {
+        query: getDesignListQuery,
+        variables: { fullPath: this.projectPath, iid: this.iid, atVersion: null },
+      };
+    },
+  },
+  methods: {
+    updateStoreAfterDelete(
+      store,
+      {
+        data: { designManagementDelete },
+      },
+    ) {
+      updateStoreAfterDesignsDelete(
+        store,
+        designManagementDelete,
+        this.projectQueryBody,
+        this.filenames,
+      );
+    },
+  },
+  destroyDesignMutation,
+};
+</script>
+
+<template>
+  <apollo-mutation
+    #default="{ mutate, loading, error }"
+    :mutation="$options.destroyDesignMutation"
+    :variables="{
+      filenames,
+      projectPath,
+      iid,
+    }"
+    :update="updateStoreAfterDelete"
+    v-on="$listeners"
+  >
+    <slot v-bind="{ mutate, loading, error }"></slot>
+  </apollo-mutation>
+</template>