chore: portal ui small fixes & enhancements (#497)

* chore: support copy destination field

* chore: show title for nonsensitive credentials

* fix: destination create flow bottom spacing

* fix: skip topic step if no configured topics

* refactor: destination creation form behavior depending on topics

Author: alexluong

internal/portal/src/scenes/CreateDestination/CreateDestination.scss

@@ -57,8 +57,7 @@
   &__step {
     display: flex;
     flex-direction: column;
-    height: calc(100vh - var(--base-grid-multiplier) * 18);
-    padding-bottom: var(--spacing-8);
+    padding-bottom: var(--spacing-16);
     box-sizing: border-box;
 
     h1 {
@@ -73,7 +72,6 @@
       display: flex;
       flex-direction: column;
       flex: 1;
-      margin-bottom: var(--spacing-16);
     }
 
     &__fields {

internal/portal/src/scenes/CreateDestination/CreateDestination.tsx

@@ -11,130 +11,148 @@ import TopicPicker from "../../common/TopicPicker/TopicPicker";
 import { DestinationTypeReference } from "../../typings/Destination";
 import DestinationConfigFields from "../../common/DestinationConfigFields/DestinationConfigFields";
 import { getFormValues } from "../../utils/formHelper";
+import CONFIGS from "../../config";
 
-const steps = [
-  {
-    title: "Select event topics",
-    sidebar_shortname: "Event topics",
-    description: "Select the event topics you want to send to your destination",
-    isValid: (values: Record<string, any>) => {
-      if (values.topics?.length > 0) {
-        return true;
-      }
-      return false;
-    },
-    FormFields: ({
-      defaultValue,
-      onChange,
-    }: {
-      defaultValue: Record<string, any>;
-      onChange: (value: Record<string, any>) => void;
-    }) => {
-      const [selectedTopics, setSelectedTopics] = useState<string[]>(
-        defaultValue.topics ? defaultValue.topics.split(",") : []
-      );
+type Step = {
+  title: string;
+  sidebar_shortname: string;
+  description: string;
+  isValid: (values: Record<string, any>) => boolean;
+  FormFields: (props: {
+    defaultValue: Record<string, any>;
+    onChange: (value: Record<string, any>) => void;
+  }) => React.ReactNode;
+  action: string;
+};
+
+const EVENT_TOPICS_STEP: Step = {
+  title: "Select event topics",
+  sidebar_shortname: "Event topics",
+  description: "Select the event topics you want to send to your destination",
+  isValid: (values: Record<string, any>) => {
+    if (values.topics?.length > 0) {
+      return true;
+    }
+    return false;
+  },
+  FormFields: ({
+    defaultValue,
+    onChange,
+  }: {
+    defaultValue: Record<string, any>;
+    onChange: (value: Record<string, any>) => void;
+  }) => {
+    const [selectedTopics, setSelectedTopics] = useState<string[]>(
+      defaultValue.topics ? defaultValue.topics.split(",") : []
+    );
 
-      useEffect(() => {
-        onChange({ topics: selectedTopics });
-      }, [selectedTopics]);
+    useEffect(() => {
+      onChange({ topics: selectedTopics });
+    }, [selectedTopics]);
 
-      return (
-        <>
-          <TopicPicker
-            selectedTopics={selectedTopics}
-            onTopicsChange={setSelectedTopics}
-          />
+    return (
+      <>
+        <TopicPicker
+          selectedTopics={selectedTopics}
+          onTopicsChange={setSelectedTopics}
+        />
+        <input
+          readOnly
+          type="text"
+          name="topics"
+          hidden
+          required
+          value={selectedTopics.length > 0 ? selectedTopics.join(",") : ""}
+        />
+      </>
+    );
+  },
+  action: "Next",
+};
+
+const DESTINATION_TYPE_STEP: Step = {
+  title: "Select destination type",
+  sidebar_shortname: "Destination type",
+  description:
+    "Select the destination type you want to send to your destination",
+  isValid: (values: Record<string, any>) => {
+    if (!values.type) {
+      return false;
+    }
+    return true;
+  },
+  FormFields: ({
+    destinations,
+    defaultValue,
+  }: {
+    destinations: DestinationTypeReference[];
+    defaultValue: Record<string, any>;
+  }) => (
+    <div className="destination-types">
+      {destinations?.map((destination) => (
+        <label key={destination.type} className="destination-type-card">
           <input
-            readOnly
-            type="text"
-            name="topics"
-            hidden
+            type="radio"
+            name="type"
+            value={destination.type}
             required
-            value={selectedTopics.length > 0 ? selectedTopics.join(",") : ""}
+            className="destination-type-radio"
+            defaultChecked={
+              defaultValue ? defaultValue.type === destination.type : undefined
+            }
           />
-        </>
-      );
-    },
-    action: "Next",
-  },
-  {
-    title: "Select destination type",
-    sidebar_shortname: "Destination type",
-    description:
-      "Select the destination type you want to send to your destination",
-    isValid: (values: Record<string, any>) => {
-      if (!values.type) {
-        return false;
-      }
-      return true;
-    },
-    FormFields: ({
-      destinations,
-      defaultValue,
-    }: {
-      destinations: DestinationTypeReference[];
-      defaultValue: Record<string, any>;
-    }) => (
-      <div className="destination-types">
-        {destinations?.map((destination) => (
-          <label key={destination.type} className="destination-type-card">
-            <input
-              type="radio"
-              name="type"
-              value={destination.type}
-              required
-              className="destination-type-radio"
-              defaultChecked={
-                defaultValue
-                  ? defaultValue.type === destination.type
-                  : undefined
-              }
-            />
-            <div className="destination-type-content">
-              <h3 className="subtitle-l">
-                <span
-                  className="destination-type-content__icon"
-                  dangerouslySetInnerHTML={{ __html: destination.icon }}
-                />{" "}
-                {destination.label}
-              </h3>
-              <p className="body-m muted">{destination.description}</p>
-            </div>
-          </label>
-        ))}
-      </div>
-    ),
-    action: "Next",
-  },
-  {
-    title: "Configure destination",
-    sidebar_shortname: "Configure destination",
-    description:
-      "Configure the destination you want to send to your destination",
-    FormFields: ({
-      defaultValue,
-      destinations,
-    }: {
-      defaultValue: Record<string, any>;
-      destinations: DestinationTypeReference[];
-    }) => {
-      const destinationType = destinations?.find(
-        (d) => d.type === defaultValue.type
-      );
-      return (
-        <DestinationConfigFields
-          type={destinationType!}
-          destination={undefined}
-        />
-      );
-    },
-    action: "Create Destination",
+          <div className="destination-type-content">
+            <h3 className="subtitle-l">
+              <span
+                className="destination-type-content__icon"
+                dangerouslySetInnerHTML={{ __html: destination.icon }}
+              />{" "}
+              {destination.label}
+            </h3>
+            <p className="body-m muted">{destination.description}</p>
+          </div>
+        </label>
+      ))}
+    </div>
+  ),
+  action: "Next",
+};
+
+const CONFIGURATION_STEP: Step = {
+  title: "Configure destination",
+  sidebar_shortname: "Configure destination",
+  description: "Configure the destination you want to send to your destination",
+  FormFields: ({
+    defaultValue,
+    destinations,
+  }: {
+    defaultValue: Record<string, any>;
+    destinations: DestinationTypeReference[];
+  }) => {
+    const destinationType = destinations?.find(
+      (d) => d.type === defaultValue.type
+    );
+    return (
+      <DestinationConfigFields
+        type={destinationType!}
+        destination={undefined}
+      />
+    );
   },
-];
+  action: "Create Destination",
+};
 
 export default function CreateDestination() {
   const apiClient = useContext(ApiContext);
 
+  const AVAILABLE_TOPICS = CONFIGS.TOPICS.split(",").filter(Boolean);
+  let steps = [EVENT_TOPICS_STEP, DESTINATION_TYPE_STEP, CONFIGURATION_STEP];
+
+  // If there are no topics, skip the first step
+  if (AVAILABLE_TOPICS.length === 0 && steps.length === 3) {
+    steps = [DESTINATION_TYPE_STEP, CONFIGURATION_STEP];
+  }
+
   const navigate = useNavigate();
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
   const [stepValues, setStepValues] = useState<Record<string, any>>({});
@@ -151,12 +169,24 @@ export default function CreateDestination() {
 
     const destination_type = destinations?.find((d) => d.type === values.type);
 
+    let topics: string[];
+    if (typeof values.topics === "string") {
+      topics = values.topics.split(",").filter(Boolean);
+    } else if (typeof values.topics === "undefined") {
+      topics = ["*"];
+    } else if (Array.isArray(values.topics)) {
+      topics = values.topics;
+    } else {
+      // Default to all topics
+      topics = ["*"];
+    }
+
     apiClient
       .fetch(`destinations`, {
         method: "POST",
         body: JSON.stringify({
           type: values.type,
-          topics: values.topics.split(","),
+          topics: topics,
           config: Object.fromEntries(
             Object.entries(values).filter(([key]) =>
               destination_type?.config_fields.some((field) => field.key === key)

internal/portal/src/scenes/Destination/Destination.tsx

@@ -246,14 +246,21 @@ function DestinationDetailsField(props: {
   value: JSX.Element | string;
 }) {
   let label = "";
+  let isSensitive = false;
+  let shouldCopy = false;
   if (props.fieldType === "config") {
-    label =
-      props.type.config_fields.find((field) => field.key === props.fieldKey)
-        ?.label || "";
+    const field = props.type.config_fields.find(
+      (field) => field.key === props.fieldKey
+    );
+    label = field?.label || "";
+    shouldCopy = field?.type === "text";
   } else {
-    label =
-      props.type.credential_fields.find((field) => field.key === props.fieldKey)
-        ?.label || "";
+    const field = props.type.credential_fields.find(
+      (field) => field.key === props.fieldKey
+    );
+    label = field?.label || "";
+    shouldCopy = field?.type === "text" && !field?.sensitive;
+    isSensitive = Boolean(field?.sensitive);
   }
   if (label === "") {
     label = props.fieldKey
@@ -269,10 +276,19 @@ function DestinationDetailsField(props: {
   return (
     <li>
       <span className="body-m">{label}</span>
-      <span className="mono-s" title={typeof props.value === "string" && props.fieldType !== "credentials" ? props.value : undefined}>
-        {typeof props.value === "string" && props.value.length > TRUNCATION_LENGTH
+      <span
+        className="mono-s"
+        title={
+          typeof props.value === "string" && !isSensitive
+            ? props.value
+            : undefined
+        }
+      >
+        {typeof props.value === "string" &&
+        props.value.length > TRUNCATION_LENGTH
           ? `${props.value.substring(0, TRUNCATION_LENGTH)}...`
-          : props.value}
+          : props.value}{" "}
+        {shouldCopy && <CopyButton value={String(props.value)} />}
       </span>
     </li>
   );