Merge pull request #37 from cloudblue/feat/LITE-29280-remaining-actio…

…ns-on-feed

LITE-29280: Add delete feed dialog

connect_bi_reporter/static/main.html

@@ -11,7 +11,7 @@
       content="width=device-width, initial-scale=1.0"
     />
     <title>Connect BI Reporter Extension</title>
-    <script type="module" crossorigin src="/static/assets/main-DsiEWvlr.js"></script>
+    <script type="module" crossorigin src="/static/assets/main-BD6Cjczn.js"></script>
     <link rel="modulepreload" crossorigin href="/static/assets/vendor-QZT6KSBV.js">
     <link rel="modulepreload" crossorigin href="/static/assets/connect-4XpspIZx.js">
     <link rel="stylesheet" crossorigin href="/static/assets/main-C96VsnTa.css">

ui/components/DeleteFeedDialog.vue

@@ -0,0 +1,46 @@
+<template>
+  <simple-dialog
+    v-model="isOpen"
+    :actions="actions"
+    :onSubmit="deleteFeed"
+    height="auto"
+    title="Delete Feed"
+    width="480px"
+  >
+    <p>
+      <span>Are you sure you want to delete this feed ({{ feedId }})?</span>
+      <br />
+      <span>You cannot undo this action once performed.</span>
+    </p>
+  </simple-dialog>
+</template>
+
+<script setup>
+import { useToolkit } from '@cloudblueconnect/connect-ui-toolkit/tools/vue/toolkitPlugin';
+
+import SimpleDialog from '~/components/SimpleDialog.vue';
+import { useRequest } from '~/composables/api';
+
+const props = defineProps({
+  feedId: {
+    type: String,
+    required: true,
+  },
+});
+
+const isOpen = defineModel({
+  type: Boolean,
+  required: true,
+});
+
+const emit = defineEmits(['deleted']);
+
+const actions = ['cancel', 'delete'];
+
+const { request } = useRequest(useToolkit());
+
+const deleteFeed = async () => {
+  const status = await request(`/api/feeds/${props.feedId}`, 'DELETE');
+  if (status < 400) emit('deleted');
+};
+</script>

ui/components/FeedActions.vue

@@ -10,13 +10,19 @@
       <slot />
     </template>
   </actions-menu>
+  <delete-feed-dialog
+    v-model="isDeleteFeedDialogOpen"
+    :feedId="feedId"
+    @deleted="emit('deleted')"
+  />
 </template>
 
 <script setup>
 import { useToolkit } from '@cloudblueconnect/connect-ui-toolkit/tools/vue/toolkitPlugin';
-import { computed, reactive } from 'vue';
+import { computed, reactive, ref } from 'vue';
 
 import ActionsMenu from '~/components/ActionsMenu.vue';
+import DeleteFeedDialog from '~/components/DeleteFeedDialog.vue';
 import { useRequest } from '~/composables/api';
 import { COLORS_DICT } from '~/constants/colors';
 import { STATUSES_DICT } from '~/constants/statuses';
@@ -34,7 +40,6 @@ const toolkit = useToolkit();
 
 const enableAction = useRequest(toolkit);
 const disableAction = useRequest(toolkit);
-const deleteAction = useRequest(toolkit);
 const forceUploadAction = useRequest(toolkit);
 
 const feedId = computed(() => props.feed.id);
@@ -55,9 +60,10 @@ const forceUpload = async () => {
   );
   if (status < 400) emit('uploaded');
 };
-const deleteFeed = async () => {
-  const status = await deleteAction.request(`/api/feeds/${feedId.value}`, 'DELETE');
-  if (status < 400) emit('deleted');
+
+const isDeleteFeedDialogOpen = ref(false);
+const openDeleteFeedDialog = () => {
+  isDeleteFeedDialogOpen.value = true;
 };
 
 const actions = reactive([
@@ -94,8 +100,7 @@ const actions = reactive([
     color: COLORS_DICT.NICE_RED,
     text: 'Delete',
     icon: 'googleDeleteForeverBaseline',
-    loading: deleteAction.loading,
-    handler: deleteFeed,
+    handler: openDeleteFeedDialog,
   },
 ]);
 </script>