Add NoMatchingConnector event (#12036)

* Add NoMatchingConnector event * Remove console.log
airbytehq · Apr 15, 2022 · b176625 · b176625
1 parent 281e0ee
commit b176625
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -34,6 +34,7 @@
   "form.selectConnector": "Type to search for a connector",
   "form.searchName": "search by name...",
   "form.noResult": "No result",
+  "form.noConnectorFound": "No matching connector found",
   "form.sourceName.placeholder": "Your source name",
   "form.destinationName.placeholder": "Your destination name",
   "form.connectionName.placeholder": "Name",

diff --git a/...ebapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx b/...ebapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx
@@ -162,7 +162,7 @@ const ConnectorServiceTypeControl: React.FC<{
   documentationUrl,
   onOpenRequestConnectorModal,
 }) => {
-  const formatMessage = useIntl().formatMessage;
+  const { formatMessage } = useIntl();
   const [field, fieldMeta, { setValue }] = useField(property.path);
   const analytics = useAnalyticsService();
 
@@ -212,6 +212,21 @@ const ConnectorServiceTypeControl: React.FC<{
     [availableServices]
   );
 
+  const getNoOptionsMessage = useCallback(
+    ({ inputValue }: { inputValue: string }) => {
+      analytics.track(
+        formType === "source"
+          ? "Airbyte.UI.NewSource.NoMatchingConnector"
+          : "Airbyte.UI.NewDestination.NoMatchingConnector",
+        {
+          query: inputValue,
+        }
+      );
+      return formatMessage({ id: "form.noConnectorFound" });
+    },
+    [analytics, formType, formatMessage]
+  );
+
   const selectedService = React.useMemo(
     () => availableServices.find((s) => Connector.id(s) === field.value),
     [field.value, availableServices]
@@ -259,6 +274,7 @@ const ConnectorServiceTypeControl: React.FC<{
           options={sortedDropDownData}
           onChange={handleSelect}
           onMenuOpen={onMenuOpen}
+          noOptionsMessage={getNoOptionsMessage}
         />
       </ControlLabels>
       {selectedService && documentationUrl && (