feat: added delete integration confirmation box (#3556)

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

Author: emlimlf

frontend/src/modules/admin/modules/integration/components/integration-list-item.vue

@@ -92,7 +92,7 @@
               :grandparent-id="route.params.grandparentId"
               @open-setting="isSettingsOpen = true"
             />
-            <lf-dropdown-item type="danger" @click="disconnectIntegration()">
+            <lf-dropdown-item type="danger" @click="isModalOpen = true">
               <lf-icon name="link-simple-slash" type="regular" />
               Disconnect integration
             </lf-dropdown-item>
@@ -114,6 +114,37 @@
       v-if="props.config.mappedReposComponent"
       :segment-id="route.params.id"
     />
+
+    <lf-modal v-model="isModalOpen">
+      <template #default>
+        <div class="px-6 pt-6 flex gap-4">
+          <div class="min-w-10 w-10 h-10 rounded-full bg-red-50 flex items-center justify-center">
+            <lf-icon name="link-simple-slash" class="text-red-500" :size="16" />
+          </div>
+          <div class="flex flex-col gap-6">
+            <div class="flex flex-col gap-2">
+              <span class="font-semibold">Are you sure you want to disconnect this integration?</span>
+              <p class="text-gray-500 text-small">
+                Once disconnected, data will no longer sync from this source.
+                You can reconnect anytime to resume syncing, but this action can’t be undone.
+              </p>
+            </div>
+            <div class="flex flex-col gap-1">
+              <span class="font-semibold">Type DISCONNECT to confirm</span>
+              <lf-input v-model="disconnectConfirm" placeholder="DISCONNECT" class="w-full" />
+            </div>
+          </div>
+        </div>
+        <div class="px-6 py-4.5 bg-gray-50 mt-8 flex justify-end gap-4">
+          <lf-button type="secondary-ghost-light" @click="isModalOpen = false">
+            Cancel
+          </lf-button>
+          <lf-button type="danger" :disabled="disconnectConfirm !== 'DISCONNECT'" @click="disconnectIntegration()">
+            Disconnect integration
+          </lf-button>
+        </div>
+      </template>
+    </lf-modal>
   </article>
 </template>
 
@@ -133,6 +164,8 @@ import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/ev
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { useRoute } from 'vue-router';
 import { dateHelper } from '@/shared/date-helper/date-helper';
+import LfModal from '@/ui-kit/modal/Modal.vue';
+import LfInput from '@/ui-kit/input/Input.vue';
 
 const props = defineProps<{
   config: IntegrationConfig,
@@ -145,6 +178,9 @@ const route = useRoute();
 const { doDestroy } = mapActions('integration');
 const { findByPlatform } = mapGetters('integration');
 
+const isModalOpen = ref(false);
+const disconnectConfirm = ref('');
+
 const { trackEvent } = useProductTracking();
 
 const integration = computed(() => findByPlatform.value(props.config.key));