🪟 🔧 Refactor FrequentlyUsedDestinations component (airbytehq#19019)

* 🪟 🔧 Refactor FrequentlyUsedDestinations

We need to reuse this component in an experiment to suggest sources.
This PR covers the refactor so it's not destination-dependant and can be
used later on.

Demo: https://www.loom.com/share/c207ab2a53c146bd8e4fe57a57660a6b 

* PR comments

Author: letiescanciano

airbyte-webapp/src/locales/en.json

@@ -250,6 +250,7 @@
   "sources.incrementalDefault": "{value} (default)",
   "sources.incrementalSourceCursor": "Incremental - source-defined cursor",
   "sources.full_refresh": "Full refresh",
+  "sources.frequentlyUsed": "Suggested sources",
   "sources.incremental": "Incremental - based on...",
   "sources.newSource": "New source",
   "sources.createFirst": "Connect your first source",

airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/components/DestinationForm.tsx

@@ -5,10 +5,11 @@ import { useLocation } from "react-router-dom";
 import { ConnectionConfiguration } from "core/domain/connection";
 import { DestinationDefinitionRead } from "core/request/AirbyteClient";
 import { LogsRequestError } from "core/request/LogsRequestError";
+import { useExperiment } from "hooks/services/Experiment";
 import { useGetDestinationDefinitionSpecificationAsync } from "services/connector/DestinationDefinitionSpecificationService";
 import { generateMessageFromError, FormError } from "utils/errorStatusMessage";
 import { ConnectorCard } from "views/Connector/ConnectorCard";
-import { ConnectorCardValues, FrequentlyUsedDestinations, StartWithDestination } from "views/Connector/ConnectorForm";
+import { ConnectorCardValues, FrequentlyUsedConnectors, StartWithDestination } from "views/Connector/ConnectorForm";
 
 import styles from "./DestinationForm.module.scss";
 
@@ -63,8 +64,17 @@ export const DestinationForm: React.FC<DestinationFormProps> = ({
 
   const errorMessage = error ? generateMessageFromError(error) : null;
 
+  const frequentlyUsedDestinationIds = useExperiment("connector.frequentlyUsedDestinationIds", [
+    "22f6c74f-5699-40ff-833c-4a879ea40133",
+    "424892c4-daac-4491-b35d-c6688ba547ba",
+  ]);
   const frequentlyUsedDestinationsComponent = !isLoading && !destinationDefinitionId && (
-    <FrequentlyUsedDestinations onDestinationSelect={onDropDownSelect} availableServices={destinationDefinitions} />
+    <FrequentlyUsedConnectors
+      connectorType="destination"
+      onConnectorSelect={onDropDownSelect}
+      availableServices={destinationDefinitions}
+      connectorIds={frequentlyUsedDestinationIds}
+    />
   );
   const startWithDestinationComponent = !isLoading && !destinationDefinitionId && (
     <div className={styles.startWithDestinationContainer}>

airbyte-webapp/src/test-utils/mock-data/mockFrequentlyUsedDestinations.ts

@@ -0,0 +1,37 @@
+import React from "react";
+
+import { ConnectorDefinition } from "core/domain/connector";
+
+import { FrequentlyUsedConnectorsCard } from "./FrequentlyUsedConnectorsCard";
+import { useAnalyticsTrackFunctions } from "./useAnalyticsTrackFunctions";
+import { useSuggestedConnectors } from "./useSuggestedConnectors";
+
+interface FrequentlyUsedConnectorsProps {
+  availableServices: ConnectorDefinition[];
+  connectorType: "source" | "destination";
+  connectorIds: string[];
+  onConnectorSelect: (id: string) => void;
+}
+
+export const FrequentlyUsedConnectors: React.FC<FrequentlyUsedConnectorsProps> = ({
+  availableServices,
+  connectorType,
+  connectorIds,
+  onConnectorSelect,
+}) => {
+  const { trackSelectedSuggestedDestination } = useAnalyticsTrackFunctions();
+
+  const suggestedConnectors = useSuggestedConnectors({ availableServices, connectorIds });
+  const onConnectorCardClick = (id: string, connectorName: string) => {
+    onConnectorSelect(id);
+    trackSelectedSuggestedDestination(id, connectorName);
+  };
+
+  return (
+    <FrequentlyUsedConnectorsCard
+      connectors={suggestedConnectors}
+      onConnectorSelect={onConnectorCardClick}
+      connectorType={connectorType}
+    />
+  );
+};

airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/FrequentlyUsedConnectors.tsx

@@ -0,0 +1,41 @@
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import { IntlProvider } from "react-intl";
+import { mockDestinationsData } from "test-utils/mock-data/mockFrequentlyUsedDestinations";
+
+import en from "locales/en.json";
+
+import { FrequentlyUsedConnectorsCard, FrequentlyUsedConnectorsCardProps } from "./FrequentlyUsedConnectorsCard";
+
+const renderFrequentlyUsedConnectorsComponent = (props: FrequentlyUsedConnectorsCardProps) =>
+  render(
+    <IntlProvider locale="en" messages={en}>
+      <FrequentlyUsedConnectorsCard {...props} />
+    </IntlProvider>
+  );
+
+describe("<mockFrequentlyUsedConnectors />", () => {
+  it("should renders with mock data without crash", () => {
+    const component = renderFrequentlyUsedConnectorsComponent({
+      connectors: mockDestinationsData,
+      connectorType: "destination",
+      onConnectorSelect: jest.fn(),
+    });
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it("should call provided handler with right param", async () => {
+    const handler = jest.fn();
+    const { getByText } = renderFrequentlyUsedConnectorsComponent({
+      connectors: mockDestinationsData,
+      connectorType: "destination",
+      onConnectorSelect: handler,
+    });
+    fireEvent.click(getByText("BigQuery"));
+
+    await waitFor(() => {
+      expect(handler).toHaveBeenCalledTimes(1);
+      expect(handler).toHaveBeenCalledWith("2", "BigQuery");
+    });
+  });
+});

airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedDestinations/FrequentlyUsedDestinationsCard.module.scss renamed to airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/FrequentlyUsedConnectorsCard.module.scss

@@ -0,0 +1,42 @@
+import React from "react";
+import { useIntl } from "react-intl";
+
+import { ConnectorCard } from "components";
+import { SlickSlider } from "components/ui/SlickSlider";
+
+import { ConnectorCard as ConnectorCardType } from "../../types";
+import styles from "./FrequentlyUsedConnectorsCard.module.scss";
+
+export interface FrequentlyUsedConnectorsCardProps {
+  connectors: ConnectorCardType[];
+  connectorType: "source" | "destination";
+  onConnectorSelect: (id: string, connectorName: string) => void;
+}
+
+export const FrequentlyUsedConnectorsCard: React.FC<FrequentlyUsedConnectorsCardProps> = ({
+  connectors,
+  onConnectorSelect,
+  connectorType,
+}) => {
+  const { formatMessage } = useIntl();
+
+  if (connectors.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={styles.container}>
+      <SlickSlider
+        title={formatMessage({
+          id: `${connectorType}s.frequentlyUsed`,
+        })}
+      >
+        {connectors.map(({ id, name, icon, releaseStage }, index) => (
+          <button key={index} className={styles.card} onClick={() => onConnectorSelect(id, name)}>
+            <ConnectorCard connectionName={name} icon={icon} releaseStage={releaseStage} fullWidth />
+          </button>
+        ))}
+      </SlickSlider>
+    </div>
+  );
+};

airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/FrequentlyUsedConnectorsCard.test.tsx

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<FrequentlyUsedDestinations /> should renders with mock data without crash 1`] = `
+exports[`<mockFrequentlyUsedConnectors /> should renders with mock data without crash 1`] = `
 <body>
   <div>
     <div

airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/FrequentlyUsedConnectorsCard.tsx

@@ -0,0 +1,27 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { mockDestinationsData, mockSourcesData } from "test-utils/mock-data/mockFrequentlyUsedDestinations";
+
+import { FrequentlyUsedConnectorsCard } from "./FrequentlyUsedConnectorsCard";
+
+export default {
+  title: "Views/FrequentlyUsedConnectors",
+  component: FrequentlyUsedConnectorsCard,
+  args: {
+    connectors: mockDestinationsData,
+    connectorType: "destination",
+  },
+} as ComponentMeta<typeof FrequentlyUsedConnectorsCard>;
+
+const Template: ComponentStory<typeof FrequentlyUsedConnectorsCard> = (args) => (
+  <div style={{ maxWidth: 560 }}>
+    <FrequentlyUsedConnectorsCard {...args} />
+  </div>
+);
+export const Destinations = Template.bind({});
+
+export const Sources = Template.bind({});
+Sources.args = {
+  ...Template.args,
+  connectors: mockSourcesData,
+  connectorType: "source",
+};

airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinationsCard.test.tsx.snap renamed to airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/__snapshots__/FrequentlyUsedConnectorsCard.test.tsx.snap

@@ -0,0 +1 @@
+export { FrequentlyUsedConnectors } from "./FrequentlyUsedConnectors";

airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/index.stories.tsx

@@ -0,0 +1,47 @@
+import { useMemo } from "react";
+
+import { ConnectorDefinition } from "core/domain/connector";
+import { isDestinationDefinition } from "core/domain/connector/destination";
+import { isSourceDefinition } from "core/domain/connector/source";
+
+import { ConnectorCard } from "../../types";
+
+interface Props {
+  availableServices: ConnectorDefinition[];
+  connectorIds: string[];
+}
+export const useSuggestedConnectors = ({ availableServices, connectorIds }: Props): ConnectorCard[] => {
+  return useMemo(
+    () =>
+      availableServices
+        .filter((service) => {
+          if (isDestinationDefinition(service)) {
+            return connectorIds.includes(service.destinationDefinitionId);
+          }
+
+          return isSourceDefinition(service) && connectorIds.includes(service.sourceDefinitionId);
+        })
+        .map((service) => {
+          if (isDestinationDefinition(service)) {
+            const { destinationDefinitionId, name, icon, releaseStage } = service;
+            return {
+              id: destinationDefinitionId,
+              destinationDefinitionId,
+              name,
+              icon,
+              releaseStage,
+            };
+          }
+
+          const { sourceDefinitionId, name, icon, releaseStage } = service;
+          return {
+            id: sourceDefinitionId,
+            sourceDefinitionId,
+            name,
+            icon,
+            releaseStage,
+          };
+        }),
+    [availableServices, connectorIds]
+  );
+};