🪟 Add Segment call for Connection Delete (#15365)

airbyte-webapp/src/hooks/services/useConnectionHook.tsx

@@ -171,15 +171,24 @@ const useCreateConnection = () => {
 const useDeleteConnection = () => {
   const service = useConnectionService();
   const queryClient = useQueryClient();
+  const analyticsService = useAnalyticsService();
+
+  return useMutation((connection: WebBackendConnectionRead) => service.delete(connection.connectionId), {
+    onSuccess: (_data, connection) => {
+      analyticsService.track(Namespace.CONNECTION, Action.DELETE, {
+        actionDescription: "Connection deleted",
+        connector_source: connection.source?.sourceName,
+        connector_source_definition_id: connection.source?.sourceDefinitionId,
+        connector_destination: connection.destination?.destinationName,
+        connector_destination_definition_id: connection.destination?.destinationDefinitionId,
+      });
 
-  return useMutation((connectionId: string) => service.delete(connectionId), {
-    onSuccess: (_data, connectionId) => {
-      queryClient.removeQueries(connectionsKeys.detail(connectionId));
+      queryClient.removeQueries(connectionsKeys.detail(connection.connectionId));
       queryClient.setQueryData(
         connectionsKeys.lists(),
         (lst: ListConnection | undefined) =>
           ({
-            connections: lst?.connections.filter((conn) => conn.connectionId !== connectionId) ?? [],
+            connections: lst?.connections.filter((conn) => conn.connectionId !== connection.connectionId) ?? [],
           } as ListConnection)
       );
     },

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionItemPage.tsx

@@ -87,7 +87,7 @@ const ConnectionItemPage: React.FC = () => {
           />
           <Route
             path={ConnectionSettingsRoutes.SETTINGS}
-            element={isConnectionDeleted ? <Navigate replace to=".." /> : <SettingsView connectionId={connectionId} />}
+            element={isConnectionDeleted ? <Navigate replace to=".." /> : <SettingsView connection={connection} />}
           />
           <Route index element={<Navigate to={ConnectionSettingsRoutes.STATUS} replace />} />
         </Routes>

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/SettingsView.module.scss

@@ -0,0 +1,5 @@
+.container {
+  max-width: 647px;
+  margin: 0 auto;
+  padding-bottom: 10px;
+}

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/SettingsView.tsx

@@ -1,32 +1,27 @@
 import React from "react";
-import styled from "styled-components";
 
 import DeleteBlock from "components/DeleteBlock";
 
 import { useDeleteConnection } from "hooks/services/useConnectionHook";
 
+import { WebBackendConnectionRead } from "../../../../../core/request/AirbyteClient";
+import styles from "./SettingsView.module.scss";
 import { StateBlock } from "./StateBlock";
 
-interface IProps {
-  connectionId: string;
+interface SettingsViewProps {
+  connection: WebBackendConnectionRead;
 }
 
-const Content = styled.div`
-  max-width: 647px;
-  margin: 0 auto;
-  padding-bottom: 10px;
-`;
-
-const SettingsView: React.FC<IProps> = ({ connectionId }) => {
+const SettingsView: React.FC<SettingsViewProps> = ({ connection }) => {
   const { mutateAsync: deleteConnection } = useDeleteConnection();
 
-  const onDelete = () => deleteConnection(connectionId);
+  const onDelete = () => deleteConnection(connection);
 
   return (
-    <Content>
-      <StateBlock connectionId={connectionId} />
+    <div className={styles.container}>
+      <StateBlock connectionId={connection.connectionId} />
       <DeleteBlock type="connection" onDelete={onDelete} />
-    </Content>
+    </div>
   );
 };