Add ability to delete a Story from the UI

timesketch/frontend-ng/src/views/Story.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2023 Google Inc. All rights reserved.
+Copyright 2025 Google Inc. All rights reserved.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -30,12 +30,29 @@ limitations under the License.
       </v-card>
     </v-dialog>
 
+      <v-dialog v-model="deleteStoryDialog" max-width="300">
+        <v-card>
+          <v-card-title class="headline">Delete Story</v-card-title>
+          <v-card-text>
+            Are you sure you want to delete this story?
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn text @click="deleteStoryDialog = false">Cancel</v-btn>
+            <v-btn color="error" text @click="deleteStory">Delete</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+
     <v-hover v-slot="{ hover }">
       <v-toolbar dense flat class="mt-n3" color="transparent">
-        <v-toolbar-title @dblclick="renameStoryDialog = true"> {{ title }}</v-toolbar-title>
+        <v-toolbar-title> {{ title }}</v-toolbar-title>
         <v-btn v-if="hover" icon small @click="renameStoryDialog = true">
           <v-icon small>mdi-pencil</v-icon>
         </v-btn>
+        <v-btn v-if="hover" icon small @click="deleteStoryDialog = true" color="error">
+          <v-icon small>mdi-trash-can-outline</v-icon>
+        </v-btn>
       </v-toolbar>
     </v-hover>
     <div class="pa-4">
@@ -116,7 +133,7 @@ limitations under the License.
                 <component :is="block.componentName" v-bind="formatComponentProps(block)"></component>
               </v-card-text>
             </v-card>
-            <v-card v-if="block.componentName === 'TsAggregationGroupCompact'" outlined class="mb-2">
+            <v-card v-if="block.componentProps.aggregation_group && block.componentName === 'TsAggregationGroupCompact'" outlined class="mb-2">
               <v-toolbar dense flat
                 >{{ block.componentProps.aggregation_group.name }}
                 <v-spacer></v-spacer>
@@ -127,7 +144,7 @@ limitations under the License.
               <v-divider></v-divider>
               <v-card-text>Legacy group Aggregations are not supported. Please view this Story in the old UI or update your analyzer.</v-card-text>
             </v-card>
-            <v-card v-if="block.componentName === 'TsAggregationCompact'" outlined class="mb-2">
+            <v-card v-if="block.componentProps.aggregation && block.componentName === 'TsAggregationCompact'" outlined class="mb-2">
               <v-toolbar dense flat
                 >{{ block.componentProps.aggregation.name }}
                 <v-spacer></v-spacer>
@@ -328,6 +345,7 @@ export default {
       titleDraft: '',
       blocks: [],
       renameStoryDialog: false,
+      deleteStoryDialog: false, // Add state for the delete dialog
     }
   },
   computed: {
@@ -525,6 +543,42 @@ export default {
       this.title = this.titleDraft
       this.save()
     },
+    deleteStory() {
+      this.deleteStoryDialog = false
+
+      ApiClient.deleteStory(this.sketchId, this.storyId)
+        .then((response) => {
+          this.blocks = []
+
+          ApiClient.getStoryList(this.sketchId)
+            .then((storyListResponse) => {
+              const stories = storyListResponse.data.objects[0]
+
+              if (stories && stories.length > 0) {
+                const nextStoryId = stories[0].id
+                this.$router.push({
+                  name: "Story",
+                  params: { sketchId: this.sketchId, storyId: nextStoryId },
+                })
+              } else {
+                this.$router.push({
+                  name: "Overview",
+                  params: { sketchId: this.sketchId },
+                })
+              }
+            })
+            .catch(e => {
+              console.error('Error getStoryList', e)
+              this.$router.push({ name: 'Sketches' })
+            })
+
+          this.$store.dispatch("updateSketch", this.sketchId)
+        })
+        .catch((error) => {
+          console.error("Error deleting story:", error)
+          this.$router.push({ name: 'Sketches' })
+        })
+    },
   },
   mounted() {
     if (this.storyId) {
@@ -560,4 +614,4 @@ export default {
 .theme--dark.v-application code {
   background-color: transparent !important;
 }
-</style>
+</style>