feat: marketplace UI (#12899)

airbyte-webapp/cypress/commands/connector.ts

@@ -26,7 +26,7 @@ export const fillPostgresForm = (
 ) => {
   cy.intercept("/api/v1/source_definition_specifications/get").as("getSourceSpecifications");
 
-  selectServiceType("Postgres");
+  selectServiceType("Postgres", "certified");
 
   if (openOptional) {
     openOptionalFields();
@@ -44,7 +44,7 @@ export const fillPostgresForm = (
 export const fillPokeAPIForm = (name: string, pokeName: string) => {
   cy.intercept("/api/v1/source_definition_specifications/get").as("getSourceSpecifications");
 
-  selectServiceType("PokeAPI");
+  selectServiceType("PokeAPI", "marketplace");
 
   enterName(name);
   enterPokemonName(pokeName);
@@ -53,7 +53,7 @@ export const fillPokeAPIForm = (name: string, pokeName: string) => {
 export const fillDummyApiForm = (name: string, apiKey: string) => {
   cy.intercept("/api/v1/source_definition_specifications/get").as("getSourceSpecifications");
 
-  selectServiceType(name);
+  selectServiceType(name, "custom");
 
   enterName(name);
   enterApiKey(apiKey);
@@ -62,7 +62,7 @@ export const fillDummyApiForm = (name: string, apiKey: string) => {
 export const fillLocalJsonForm = (name: string, destinationPath: string) => {
   cy.intercept("/api/v1/destination_definition_specifications/get").as("getDestinationSpecifications");
 
-  selectServiceType("Local JSON");
+  selectServiceType("Local JSON", "marketplace");
 
   cy.wait("@getDestinationSpecifications");
 

airbyte-webapp/cypress/e2e/source.cy.ts

@@ -76,7 +76,7 @@ describe("Unsaved changes modal on create source page", () => {
   it("Check leaving Source page without any changes after selection type", () => {
     goToSourcePage();
     openNewSourcePage();
-    selectServiceType("PokeAPI");
+    selectServiceType("PokeAPI", "marketplace");
 
     openHomepage();
 

airbyte-webapp/cypress/pages/createConnectorPage.ts

@@ -1,4 +1,5 @@
 import { updateField } from "@cy/commands/common";
+import { ConnectorTab } from "@src/components/source/SelectConnector";
 
 const nameInput = "input[name=name]";
 const apiKeyInput = "input[name='connectionConfiguration.api_key']";
@@ -12,9 +13,9 @@ const destinationPathInput = "input[name='connectionConfiguration.destination_pa
 const optionalFieldsButton = "button[data-testid='optional-fields']";
 const xminOption = "label[data-testid='radio-option.1']";
 
-export const selectServiceType = (type: string) => {
-  // Make sure community connectors are visible in the grid, since they are hidden by default
-  cy.get("#filter-support-level-community").check({ force: true });
+export const selectServiceType = (type: string, tab: ConnectorTab) => {
+  // Click on the corresponding tab to see the desired connector
+  cy.get(`button[data-id='${tab}-step']`).click();
   cy.contains("button", type).click();
 };
 

airbyte-webapp/src/area/connector/utils/SvgIcon.module.scss

@@ -5,6 +5,7 @@
   height: 100%;
   width: 100%;
   object-fit: contain;
+  display: block;
 }
 
 .background {

airbyte-webapp/src/area/connector/utils/useSuggestedSources.ts

@@ -4,5 +4,12 @@ import { useExperiment } from "hooks/services/Experiment/ExperimentService";
 
 export const useSuggestedSources = () => {
   const suggestedSourceConnectors = useExperiment("connector.suggestedSourceConnectors", "");
-  return useMemo(() => suggestedSourceConnectors.split(",").map((id) => id.trim()), [suggestedSourceConnectors]);
+  return useMemo(
+    () =>
+      suggestedSourceConnectors
+        .split(",")
+        .filter(Boolean)
+        .map((id) => id.trim()),
+    [suggestedSourceConnectors]
+  );
 };

airbyte-webapp/src/components/common/ConnectorIcon/ConnectorIcon.tsx

@@ -1,6 +1,8 @@
 import classNames from "classnames";
 import React from "react";
 
+import { FlexContainer } from "components/ui/Flex";
+
 import { SvgIcon } from "area/connector/utils";
 
 import styles from "./ConnectorIcon.module.scss";
@@ -11,7 +13,7 @@ interface ConnectorIconProps {
 }
 
 export const ConnectorIcon: React.FC<ConnectorIconProps> = ({ className, icon }) => (
-  <div className={classNames(styles.content, className)} aria-hidden="true">
+  <FlexContainer className={classNames(styles.content, className)} aria-hidden="true" alignItems="center">
     <SvgIcon src={icon} />
-  </div>
+  </FlexContainer>
 );

airbyte-webapp/src/components/connector/ConnectorQualityMetrics.tsx

@@ -1,4 +1,5 @@
 import dayjs from "dayjs";
+import isString from "lodash/isString";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -77,19 +78,30 @@ const SUCCESS_ICON_MAP: IconMap = {
 } as const;
 
 interface MetricIconProps {
-  iconMap: IconMap;
-  level: MetricLevel;
+  metric: "usage" | "success";
+  connectorDefinition: ConnectorDefinition;
 }
 
-const MetricIcon: React.FC<MetricIconProps> = ({ iconMap, level }) => {
+export const MetricIcon: React.FC<MetricIconProps> = ({ metric, connectorDefinition }) => {
   const { formatMessage } = useIntl();
 
-  const lowercaseLevel = level.toLowerCase() as MetricLevel;
-  if (!iconMap[lowercaseLevel]) {
+  const metricValue =
+    metric === "usage"
+      ? connectorDefinition?.metrics?.all?.usage
+      : connectorDefinition?.metrics?.all?.sync_success_rate;
+  if (!isString(metricValue)) {
+    return null;
+  }
+  const lowercaseMetricValue = metricValue.toLowerCase();
+  if (lowercaseMetricValue !== "low" && lowercaseMetricValue !== "medium" && lowercaseMetricValue !== "high") {
+    return null;
+  }
+  const iconMap = metric === "usage" ? USAGE_ICON_MAP : SUCCESS_ICON_MAP;
+  if (!iconMap[lowercaseMetricValue]) {
     return null;
   }
 
-  const { icon, title } = iconMap[lowercaseLevel];
+  const { icon, title } = iconMap[lowercaseMetricValue];
   return (
     <Icon
       className={styles.wideIcon}
@@ -135,7 +147,11 @@ export const ConnectorQualityMetrics: React.FC<ConnectorQualityMetricsProps> = (
   return (
     <FlexContainer direction="column" gap="sm" className={styles.connectorMetadata}>
       <MetadataStat label={formatMessage({ id: "docs.metrics.supportLevel.label" })}>
-        <SupportLevelBadge supportLevel={connectorDefinition.supportLevel} className={styles.statChip} />
+        <SupportLevelBadge
+          supportLevel={connectorDefinition.supportLevel}
+          className={styles.statChip}
+          hideCertified={false}
+        />
       </MetadataStat>
       <MetadataStat label={formatMessage({ id: "docs.metrics.connectorVersion.label" })}>
         <a href="#changelog">{connectorDefinition.dockerImageTag}</a>
@@ -164,12 +180,12 @@ export const ConnectorQualityMetrics: React.FC<ConnectorQualityMetricsProps> = (
       )}
       {syncSuccessRate && (
         <MetadataStat label={formatMessage({ id: "docs.metrics.syncSuccessRate.label" })}>
-          <MetricIcon iconMap={SUCCESS_ICON_MAP} level={syncSuccessRate} />
+          <MetricIcon metric="success" connectorDefinition={connectorDefinition} />
         </MetadataStat>
       )}
       {usageRate && (
         <MetadataStat label={formatMessage({ id: "docs.metrics.usageRate.label" })}>
-          <MetricIcon iconMap={USAGE_ICON_MAP} level={usageRate} />
+          <MetricIcon metric="usage" connectorDefinition={connectorDefinition} />
         </MetadataStat>
       )}
     </FlexContainer>

airbyte-webapp/src/components/source/SelectConnector/ConnectorButton.module.scss

@@ -1,11 +1,14 @@
 @use "scss/colors";
 @use "scss/variables";
 
+$iconWidth: 38px;
+
 .button {
   border: 1px solid transparent;
   display: flex;
   gap: variables.$spacing-lg;
   align-items: center;
+  justify-content: space-between;
   padding: variables.$spacing-lg;
   box-shadow: variables.$box-shadow;
   background-color: colors.$foreground;
@@ -21,20 +24,58 @@
   }
 }
 
+.iconAndName {
+  min-width: $iconWidth;
+}
+
 .text {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
+  min-width: 0;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  &.twoMaxLines {
+    // supported on all modern browsers, official support is being worked on
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+  }
+
+  &.threeMaxLines {
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+  }
 }
 
-.supportLevel {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
+.metrics {
+  padding-right: variables.$spacing-xl;
+  gap: calc(2 * variables.$spacing-lg);
 }
 
 .icon {
-  width: 38px;
-  height: 38px;
+  width: $iconWidth;
+  height: $iconWidth;
+}
+
+.builderPrompt {
+  min-width: 0;
+}
+
+.builderPromptIcon {
+  flex-shrink: 0;
+}
+
+.builderPromptText {
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &.builderPromptPrimary {
+    flex-shrink: 0;
+  }
+
+  &.builderPromptSecondary {
+    flex-shrink: 1;
+  }
 }