Avail PropertyUI types and hide sensitive fields in the destination configuration

libs/core-functions/src/lib/meta-types.ts

@@ -0,0 +1,48 @@
+/**
+ * UI for property
+ */
+export type PropertyUI = {
+  /**
+   * Optional human-friendly name of the field
+   */
+  displayName?: string;
+  /**
+   * If string field should be treated as textarea (multiline input)
+   */
+  textarea?: boolean;
+  /**
+   * If string field should be treated as password
+   */
+  password?: boolean;
+  /**
+   * If the field should not be displayed. That field must have a default value
+   */
+  hidden?: boolean | ((obj: any) => boolean);
+  /**
+   * If the field should be a constant
+   */
+  constant?: any | ((obj: any) => any);
+  /**
+   * correction to field value. e.g: set default value for property that was missing before
+   */
+  correction?: any | ((obj: any) => any);
+
+  /**
+   * Documentation for the field
+   */
+  documentation?: string;
+  /**
+   * Name of custom editor component. See getEditorComponent() function from `[workspaceId]/destinations.txt`
+   */
+  editor?:
+    | "ArrayTextarea"
+    | "StringArrayEditor"
+    | "CodeEditor"
+    | "SnippedEditor"
+    | "MultiSelectWithCustomOptions"
+    | string;
+  /**
+   * Properties of an editor component (not implemented yet, reserved for the future)
+   */
+  editorProps?: any;
+};

libs/core-functions/src/meta.ts

@@ -1,8 +1,9 @@
 import { z } from "zod";
+import { PropertyUI } from "./lib/meta-types";
 
 const eventsParamDescription = `
-List of events to send, delimited by comma. Following <code>page</code>, <code>screen</code>, or any arbitrary event (name of <code>track</code> event). 
-Special values: <b>empty string</b> - send only <code>track</code> events, <b>*</b> - send all events useful if you want to filter events with Functions 
+List of events to send, delimited by comma. Following <code>page</code>, <code>screen</code>, or any arbitrary event (name of <code>track</code> event).
+Special values: <b>empty string</b> - send only <code>track</code> events, <b>*</b> - send all events useful if you want to filter events with Functions
 `;
 export const FacebookConversionApiCredentials = z.object({
   pixelId: z.string().describe("Facebook Pixel ID"),
@@ -21,7 +22,7 @@ export const FacebookConversionApiCredentials = z.object({
     ),
 });
 
-export const FacebookConversionApiCredentialsUi = {
+export const FacebookConversionApiCredentialsUi: Partial<Record<keyof FacebookConversionApiCredentials, PropertyUI>> = {
   accessToken: {
     password: true,
   },
@@ -68,6 +69,14 @@ export const IntercomDestinationCredentials = z.object({
     ),
 });
 
+export const IntercomDestinationCredentialsUi: Partial<
+  Record<keyof z.infer<typeof IntercomDestinationCredentials>, PropertyUI>
+> = {
+  accessToken: {
+    password: true,
+  },
+};
+
 export type IntercomDestinationCredentials = z.infer<typeof IntercomDestinationCredentials>;
 
 export const MixpanelCredentials = z.object({
@@ -124,9 +133,7 @@ export const MixpanelCredentials = z.object({
 });
 export type MixpanelCredentials = z.infer<typeof MixpanelCredentials>;
 
-export const MixpanelCredentialsUi: Partial<
-  Record<keyof MixpanelCredentials, { documentation?: string; password?: boolean; hidden?: boolean }>
-> = {
+export const MixpanelCredentialsUi: Partial<Record<keyof MixpanelCredentials, PropertyUI>> = {
   serviceAccountPassword: {
     password: true,
   },
@@ -144,6 +151,13 @@ export const JuneCredentials = z.object({
     .default(false)
     .describe("If enabled, anonymous users will be tracked in June"),
 });
+
+export const JuneCredentialsUi: Partial<Record<keyof JuneCredentials, PropertyUI>> = {
+  apiKey: {
+    password: true,
+  },
+};
+
 export type JuneCredentials = z.infer<typeof JuneCredentials>;
 
 export const BrazeCredentials = z.object({
@@ -186,6 +200,13 @@ export const BrazeCredentials = z.object({
     .default(false)
     .describe("Send <code>page</code> and <code>screen</code> events as Braze Custom Events"),
 });
+
+export const BrazeCredentialsUi: Partial<Record<keyof BrazeCredentials, PropertyUI>> = {
+  apiKey: {
+    password: true,
+  },
+};
+
 export type BrazeCredentials = z.infer<typeof BrazeCredentials>;
 
 export const SegmentCredentials = z.object({
@@ -196,6 +217,13 @@ export const SegmentCredentials = z.object({
       `To get an API Key you need to add the HTTP API source to your Segment workspace. Write Key can be found on the HTTP API source Overview page.`
     ),
 });
+
+export const SegmentCredentialsUi: Partial<Record<keyof SegmentCredentials, PropertyUI>> = {
+  writeKey: {
+    password: true,
+  },
+};
+
 export type SegmentCredentials = z.infer<typeof SegmentCredentials>;
 
 export const POSTHOG_DEFAULT_HOST = "https://app.posthog.com";
@@ -235,9 +263,10 @@ export const PosthogDestinationConfig = z.object({
     ),
 });
 
-export const PosthogDestinationConfigUi: Partial<
-  Record<keyof PosthogDestinationConfig, { correction?: any; hidden?: any }>
-> = {
+export const PosthogDestinationConfigUi: Partial<Record<keyof z.infer<typeof PosthogDestinationConfig>, PropertyUI>> = {
+  key: {
+    password: true,
+  },
   sendAnonymousEvents: {
     // assumes value of this freshly added property from the value of the `enableAnonymousUserProfiles` property
     correction: obj =>
@@ -275,6 +304,13 @@ export const AmplitudeDestinationConfig = z.object({
   dataResidency: z.enum(["US", "EU"]).optional().default("US"),
   sessionWindow: z.number().optional().default(30).describe("Session window in minutes"),
 });
+export const AmplitudeDestinationConfigUi: Partial<
+  Record<keyof z.infer<typeof AmplitudeDestinationConfig>, PropertyUI>
+> = {
+  key: {
+    password: true,
+  },
+};
 
 export type AmplitudeDestinationConfig = z.infer<typeof AmplitudeDestinationConfig>;
 
@@ -298,17 +334,7 @@ export const MongodbDestinationConfig = z.object({
   options: z.object({}).catchall(z.string().default("")).optional().describe("Additional MongoDB connection options."),
 });
 
-export const MongodbDestinationConfigUi: Partial<
-  Record<
-    keyof MongodbDestinationConfig,
-    {
-      documentation?: string;
-      editor?: string;
-      hidden?: boolean;
-      password?: boolean;
-    }
-  >
-> = {
+export const MongodbDestinationConfigUi: Partial<Record<keyof MongodbDestinationConfig, PropertyUI>> = {
   hosts: {
     editor: "StringArrayEditor",
   },
@@ -344,6 +370,13 @@ export const Ga4Credentials = z.object({
     .default("https://www.google-analytics.com/mp/collect"),
   events: z.string().optional().default("").describe(eventsParamDescription),
 });
+
+export const Ga4CredentialsUi: Partial<Record<keyof z.infer<typeof Ga4Credentials>, PropertyUI>> = {
+  apiSecret: {
+    password: true,
+  },
+};
+
 export type Ga4Credentials = z.infer<typeof Ga4Credentials>;
 
 export const HubspotCredentials = z.object({
@@ -367,4 +400,10 @@ export const HubspotCredentials = z.object({
     ),
 });
 
+export const HubspotCredentialsConfigUi: Partial<Record<keyof z.infer<typeof HubspotCredentials>, PropertyUI>> = {
+  accessToken: {
+    password: true,
+  },
+};
+
 export type HubspotCredentials = z.infer<typeof HubspotCredentials>;

webapps/console/lib/schema/destinations.tsx

@@ -1,6 +1,8 @@
 import { SomeZodObject, z } from "zod";
 import React, { ReactNode } from "react";
 
+import type { PropertyUI } from "@jitsu/core-functions/src/lib/meta-types";
+
 import amplitudeIcon from "./icons/amplitude";
 import bigqueryIcon from "./icons/bigquery";
 import ClickhouseIcon from "./icons/clickhouse";
@@ -28,7 +30,6 @@ import intercomIcon from "./icons/intercom";
 import webhookIcon from "./icons/webhook";
 import { branding } from "../branding";
 import * as meta from "@jitsu/core-functions/src/meta";
-import { HubspotCredentials } from "@jitsu/core-functions/src/meta";
 
 const s3Regions = [
   "us-west-1",
@@ -56,49 +57,6 @@ const s3Regions = [
   "us-gov-west-1",
 ] as const;
 
-/**
- * UI for property
- */
-export type PropertyUI = {
-  /**
-   * Optional human-friendly name of the field
-   */
-  displayName?: string;
-  /**
-   * If string field should be treated as textarea (multiline input)
-   */
-  textarea?: boolean;
-  /**
-   * If string field should be treated as password
-   */
-  password?: boolean;
-  /**
-   * If the field should not be displayed. That field must have a default value
-   */
-  hidden?: boolean | ((obj: any) => boolean);
-  /**
-   * If the field should be a constant
-   */
-  constant?: any | ((obj: any) => any);
-  /**
-   * correction to field value. e.g: set default value for property that was missing before
-   */
-  correction?: any | ((obj: any) => any);
-
-  /**
-   * Documentation for the field
-   */
-  documentation?: string;
-  /**
-   * Name of custom editor component. See getEditorComponent() function from `[workspaceId]/destinations.txt`
-   */
-  editor?: string;
-  /**
-   * Properties of an editor component (not implemented yet, reserved for the future)
-   */
-  editorProps?: any;
-};
-
 export type SchemaUI = Record<string, PropertyUI>;
 
 export const FunctionsConnectionOptions = z.object({
@@ -790,6 +748,7 @@ export const coreDestinations: DestinationType<any>[] = [
     title: "Intercom",
     tags: "Product Analytics",
     credentials: meta.IntercomDestinationCredentials,
+    credentialsUi: meta.IntercomDestinationCredentialsUi,
     connectionOptions: CloudDestinationsConnectionOptions,
     description: (
       <>
@@ -815,6 +774,7 @@ export const coreDestinations: DestinationType<any>[] = [
     tags: "Product Analytics",
     connectionOptions: CloudDestinationsConnectionOptions,
     credentials: meta.JuneCredentials,
+    credentialsUi: meta.JuneCredentialsUi,
     description: "June.so is a product analytics platform that provides insights into user behavior.",
   },
   {
@@ -824,6 +784,7 @@ export const coreDestinations: DestinationType<any>[] = [
     tags: "Product Analytics",
     connectionOptions: CloudDestinationsConnectionOptions,
     credentials: meta.BrazeCredentials,
+    credentialsUi: meta.BrazeCredentialsUi,
     description: "Braze is a customer engagement platform used by businesses for multichannel marketing.",
   },
   {
@@ -844,6 +805,7 @@ export const coreDestinations: DestinationType<any>[] = [
     tags: "Product Analytics",
     connectionOptions: CloudDestinationsConnectionOptions,
     credentials: meta.Ga4Credentials,
+    credentialsUi: meta.Ga4CredentialsUi,
     description:
       "Google Analytics 4 is a service offered by Google that reports website traffic data and marketing trends.",
   },
@@ -854,6 +816,7 @@ export const coreDestinations: DestinationType<any>[] = [
     tags: "Product Analytics",
     connectionOptions: CloudDestinationsConnectionOptions,
     credentials: meta.PosthogDestinationConfig,
+    credentialsUi: meta.PosthogDestinationConfigUi,
     description:
       "Posthog is an open-source product analytics tool. Jitsu supports both self-hosted Posthog and Posthog Cloud.",
   },
@@ -864,6 +827,7 @@ export const coreDestinations: DestinationType<any>[] = [
     title: "Amplitude",
     tags: "Product Analytics",
     credentials: meta.AmplitudeDestinationConfig,
+    credentialsUi: meta.AmplitudeDestinationConfigUi,
     description: "Amplitude is a product analytics platform",
   },
   {
@@ -872,7 +836,8 @@ export const coreDestinations: DestinationType<any>[] = [
     connectionOptions: CloudDestinationsConnectionOptions,
     title: "Hubspot",
     tags: "CRM",
-    credentials: HubspotCredentials,
+    credentials: meta.HubspotCredentials,
+    credentialsUi: meta.HubspotCredentialsConfigUi,
     description: "Hubspot is a CRM. Jitsu sends data to Hubspot API and updates contacts and company records",
     documentation: (
       <>
@@ -921,6 +886,7 @@ export const coreDestinations: DestinationType<any>[] = [
     title: "Segment",
     tags: "Special",
     credentials: meta.SegmentCredentials,
+    credentialsUi: meta.SegmentCredentialsUi,
     description: (
       <>
         Forward events for to Segment-compatible endpoint. It's useful if you want to use {branding.productName} for

webapps/console/pages/[workspaceId]/destinations.tsx

@@ -8,8 +8,8 @@ import {
   coreDestinationsMap,
   DestinationType,
   getCoreDestinationType,
-  PropertyUI,
 } from "../../lib/schema/destinations";
+import type { PropertyUI } from "@jitsu/core-functions/src/lib/meta-types";
 import { DestinationCatalog, getDestinationIcon } from "../../components/DestinationsCatalog/DestinationsCatalog";
 import { useAppConfig, useWorkspace } from "../../lib/context";
 import { useRouter } from "next/router";

webapps/console/pages/api/destinations.ts

@@ -1,5 +1,6 @@
 import { createRoute } from "../../lib/api";
-import { coreDestinations, PropertyUI } from "../../lib/schema/destinations";
+import { coreDestinations } from "../../lib/schema/destinations";
+import { PropertyUI } from "@jitsu/core-functions/src/lib/meta-types";
 import omit from "lodash/omit";
 import { renderToStaticMarkup } from "react-dom/server";
 import { createDisplayName } from "../../lib/zod";