feat: more internal links

webapps/console/components/ConfigObjectEditor/EditorTitle.tsx

@@ -11,7 +11,7 @@ export type EditorTitleProps<T extends { id: string } = { id: string }> = {
 export const EditorTitle: React.FC<EditorTitleProps> = ({ title, subtitle, onBack }) => {
   return (
     <>
-      <div className="flex justify-between pt-6 pb-6 mb-0 items-center ">
+      <div className="flex justify-between pt-6 pb-4 mb-0 items-center ">
         <h1 className="text-3xl">{title}</h1>
         <div>
           <JitsuButton icon={<ChevronLeft className="w-6 h-6" />} type="link" size="small" onClick={onBack}>

webapps/console/components/ConnectionsDiagram/ConnectionsDiagram.tsx

@@ -252,7 +252,6 @@ export const ConnectionsDiagram: React.FC<ConnectionDiagramProps> = ({
               key={s.id}
               ref={connectorsRef.current[idx] as any}
               className="cursor-pointer mb-4"
-              onClick={() => console.log("Clicked", s.id)}
               onMouseOver={() => {
                 setMouseOverSrc(s.id);
               }}
@@ -281,7 +280,6 @@ export const ConnectionsDiagram: React.FC<ConnectionDiagramProps> = ({
               key={s.id}
               ref={srcRefs.current[idx] as any}
               className="cursor-pointer mb-4"
-              onClick={() => console.log("Clicked", s.id)}
               onMouseOver={() => {
                 setMouseOverSrc(s.id);
               }}

webapps/console/components/EditorToolbar/EditorToolbar.tsx

@@ -0,0 +1,31 @@
+import React, { ReactNode } from "react";
+import classNames from "classnames";
+import Link from "next/link";
+
+export type EditorToolbarProps = {
+  items: {
+    title: ReactNode;
+    icon: ReactNode;
+    href: string;
+    onClick?: () => void;
+  }[];
+  className?: string;
+};
+
+export const EditorToolbar: React.FC<EditorToolbarProps> = ({ items, className }) => {
+  return (
+    <div className={classNames(className, `flex flex-nowrap items-center gap-2`)}>
+      {items.map(({ href, icon, title, onClick }, index) => (
+        <Link
+          key={index}
+          href={href}
+          className="flex items-center space-x-2 border border-textLight px-2 py-1 rounded text-textLight text-xs"
+          onClick={onClick}
+        >
+          <div className="h-4 w-4">{icon}</div>
+          <span>{title}</span>
+        </Link>
+      ))}
+    </div>
+  );
+};

webapps/console/components/ObjectTitle/ObjectTitle.tsx

@@ -1,10 +1,13 @@
 import React from "react";
+import Link from "next/link";
+import { FaExternalLinkAlt } from "react-icons/fa";
 
 export const ObjectTitle: React.FC<{
   size?: "small" | "default" | "large";
   icon?: React.ReactNode;
   title: string | React.ReactNode;
-}> = ({ icon, title, size = "default" }) => {
+  href?: string;
+}> = ({ icon, title, size = "default", href }) => {
   const iconClassName = (() => {
     switch (size) {
       case "small":
@@ -19,6 +22,11 @@ export const ObjectTitle: React.FC<{
     <div className={`flex overflow-auto items-center ${size !== "small" ? "gap-3" : "gap-2"}`}>
       {icon && <div className={iconClassName}>{icon}</div>}
       <div className={`text-text truncate overflow-hidden  ${size !== "small" ? "font-semibold" : ""}`}>{title}</div>
+      {href && (
+        <Link className={size === "small" ? `-ml-1` : `-ml-2`} href={href}>
+          <FaExternalLinkAlt className="w-2.5 h-2.5" />
+        </Link>
+      )}
     </div>
   );
 };

webapps/console/components/PageLayout/WorkspacePageLayout.tsx

@@ -533,7 +533,7 @@ function PageHeader() {
       title: "Connectors",
       icon: <PlugZap className="w-full h-full" />,
       items: [
-        { title: "Connected Services", path: "/services", icon: <ServerCog className="w-full h-full" /> },
+        { title: "Service Connections", path: "/services", icon: <ServerCog className="w-full h-full" /> },
         { title: "Syncs", path: "/syncs", icon: <Share2 className="w-full h-full" /> },
         { title: "All Logs", path: "/syncs/tasks", icon: <ScrollText className="w-full h-full" /> },
       ],

webapps/console/pages/[workspaceId]/connections/index.tsx

@@ -19,7 +19,7 @@ import { TableProps } from "antd/es/table/InternalTable";
 import { ColumnType, SortOrder } from "antd/es/table/interface";
 import { Activity, Edit3, Inbox, XCircle } from "lucide-react";
 import { PlusOutlined } from "@ant-design/icons";
-import { JitsuButton, WJitsuButton } from "../../../components/JitsuButton/JitsuButton";
+import { WJitsuButton } from "../../../components/JitsuButton/JitsuButton";
 import { DestinationTitle } from "../destinations";
 import { ButtonGroup, ButtonProps } from "../../../components/ButtonGroup/ButtonGroup";
 import { StreamTitle } from "../streams";
@@ -152,14 +152,7 @@ function ConnectionsTable({ links, streams, destinations, functions, reloadCallb
         }
         return (
           <div className="flex items-center">
-            <StreamTitle stream={stream} />
-            <WJitsuButton
-              href={`/streams?id=${link.fromId}`}
-              type="link"
-              className="link"
-              size="small"
-              icon={<FaExternalLinkAlt className="w-2.5 h-2.5" />}
-            />
+            <StreamTitle stream={stream} link />
           </div>
         );
       },
@@ -179,17 +172,9 @@ function ConnectionsTable({ links, streams, destinations, functions, reloadCallb
         if (!destination) {
           return <div>Destination not found</div>;
         }
-        const coreDestinationType = getCoreDestinationType(destination.destinationType);
         return (
           <div className="flex items-center">
-            <DestinationTitle destination={destination} />
-            <JitsuButton
-              type="link"
-              icon={<FaExternalLinkAlt className="w-2.5 h-2.5" />}
-              className="link"
-              size="small"
-              href={`/${workspace.id}/destinations?id=${link.toId}`}
-            />
+            <DestinationTitle destination={destination} link />
           </div>
         );
       },

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

@@ -38,6 +38,7 @@ import { useQueryStringState } from "../../lib/useQueryStringState";
 import { CustomWidgetProps } from "../../components/ConfigObjectEditor/Editors";
 import { Htmlizer } from "../../components/Htmlizer/Htmlizer";
 import omit from "lodash/omit";
+import { EditorToolbar } from "../../components/EditorToolbar/EditorToolbar";
 
 const log = getLog("destinations");
 const Loader: React.FC<{}> = () => {
@@ -198,13 +199,16 @@ function getEditorComponent(editor: string, editorProps?: any) {
 export const DestinationTitle: React.FC<{
   destination?: DestinationConfig;
   size?: "small" | "default" | "large";
-  title?: (d: DestinationConfig, t: DestinationType) => string | React.ReactNode;
-}> = ({ destination, title = (d, t) => d.name, size = "default" }) => {
+  title?: (d: DestinationConfig, t: DestinationType) => React.ReactNode;
+  link?: boolean;
+}> = ({ destination, title = (d, t) => d.name, size = "default", link }) => {
+  const w = useWorkspace();
   const destinationType = coreDestinationsMap[destination?.destinationType ?? ""];
   return (
     <ObjectTitle
       icon={getDestinationIcon(destinationType)}
       size={size}
+      href={link && destination ? `/${w.slugOrId}/destinations?id=${destination.id}` : undefined}
       title={destination ? title(destination, destinationType) : "Unknown destination"}
     />
   );
@@ -668,6 +672,38 @@ const DestinationsList: React.FC<{ type?: string }> = ({ type }) => {
         </div>
       );
     },
+    subtitle: (obj: DestinationConfig, isNew: boolean) => {
+      if (isNew) {
+        return undefined;
+      }
+
+      return (
+        <EditorToolbar
+          items={
+            [
+              obj.provisioned || obj.destinationType === "clickhouse"
+                ? {
+                    title: "SQL Query Editor",
+                    icon: <TerminalSquare className="w-full h-full" />,
+                    href: `/${workspace.slugOrId}/sql?destinationId=${obj.id}`,
+                  }
+                : undefined,
+              {
+                title: "Connected Sources",
+                icon: <Zap className="w-full h-full" />,
+                href: `/${workspace.slugOrId}/connections?destination=${obj.id}`,
+              },
+              {
+                title: "Syncs",
+                icon: <Share2 className="w-full h-full" />,
+                href: `/${workspace.slugOrId}/syncs?destination=${obj.id}`,
+              },
+            ].filter(Boolean) as any
+          }
+          className="mb-4"
+        />
+      );
+    },
   };
   return (
     <>

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

@@ -30,7 +30,7 @@ function HoverBorder({ children, forceHover }: { children: ReactNode; forceHover
   return (
     <div
       className={classNames(
-        "border border-transparent transition duration-150 rounded-lg",
+        "border border-transparent transition duration-150 rounded-lg w-full",
         hover ? "border-primary" : "border-primaryLighter"
       )}
       onMouseEnter={() => setHover(true)}
@@ -42,42 +42,60 @@ function HoverBorder({ children, forceHover }: { children: ReactNode; forceHover
   );
 }
 
+function ConditionalBadge({ icon, tooltip, children }: { icon?: ReactNode; tooltip?: ReactNode; children: ReactNode }) {
+  if (!icon) {
+    return <>{children}</>;
+  }
+  return (
+    <Badge className="w-full block min-w-full" count={tooltip ? <Tooltip title={tooltip}>{icon}</Tooltip> : icon}>
+      {children}
+    </Badge>
+  );
+}
+
 function Card({
   title,
   configLink,
   icon,
   selected,
+  badge,
   actions,
 }: {
   title: string;
   configLink?: string;
   icon: ReactNode;
   actions?: { label: ReactNode; icon?: ReactNode; href: string }[];
   selected?: boolean;
+  badge?: {
+    icon: ReactNode;
+    tooltip?: ReactNode;
+  };
 }) {
   const card = (
-    <HoverBorder forceHover={selected}>
-      <div className={classNames(`w-full px-4 py-5 rounded-lg text-primary`)}>
-        <div className="flex flex-nowrap justify-between items-start">
-          <div className="flex flex-start items-center space-x-4">
-            <div className="w-6 h-6">{icon}</div>
-            <div className="text-lg py-0 text-neutral-600 text-ellipsis">
-              <LabelEllipsis maxLen={29}>{title}</LabelEllipsis>
+    <ConditionalBadge icon={badge?.icon} tooltip={badge?.tooltip}>
+      <HoverBorder forceHover={selected}>
+        <div className={classNames(`w-full px-4 py-5 rounded-lg text-primary`)}>
+          <div className="flex flex-nowrap justify-between items-start">
+            <div className="flex flex-start items-center space-x-4">
+              <div className="w-6 h-6">{icon}</div>
+              <div className="text-lg py-0 text-neutral-600 text-ellipsis">
+                <LabelEllipsis maxLen={29}>{title}</LabelEllipsis>
+              </div>
             </div>
+            {actions && actions.length > 0 && (
+              <ButtonGroup
+                dotsButtonProps={{
+                  size: "small",
+                  type: "ghost",
+                  icon: <MoreVertical strokeWidth={2} className="text-textLight w-5 h-5" />,
+                }}
+                items={actions.map(a => ({ ...a, collapsed: true }))}
+              />
+            )}
           </div>
-          {actions && actions.length > 0 && (
-            <ButtonGroup
-              dotsButtonProps={{
-                size: "small",
-                type: "ghost",
-                icon: <MoreVertical strokeWidth={2} className="text-textLight w-5 h-5" />,
-              }}
-              items={actions.map(a => ({ ...a, collapsed: true }))}
-            />
-          )}
         </div>
-      </div>
-    </HoverBorder>
+      </HoverBorder>
+    </ConditionalBadge>
   );
   return configLink ? <a href={configLink}>{card}</a> : card;
 }
@@ -203,6 +221,19 @@ function WorkspaceOverview(props: {
                     src={`/api/sources/logo?package=${encodeURIComponent(cfg.package)}&protocol=${cfg.protocol}`}
                   />
                 }
+                badge={
+                  links?.find(l => l.fromId === id)
+                    ? undefined
+                    : {
+                        icon: (
+                          <div className="bg-warning w-5 h-5 rounded-full flex items-center justify-center font-bold text-text">
+                            !
+                          </div>
+                        ),
+                        tooltip:
+                          "The source is not connected to any destination. Connect it to any destination to start seeing the data",
+                      }
+                }
                 title={name || id}
                 configLink={`/${workspace.slug || workspace.id}/services?id=${id}`}
                 actions={[
@@ -233,6 +264,19 @@ function WorkspaceOverview(props: {
                 selected={forceSelect}
                 icon={<FaviconLoader potentialUrl={name} />}
                 title={name || id}
+                badge={
+                  links.find(l => l.fromId === id)
+                    ? undefined
+                    : {
+                        icon: (
+                          <div className="bg-warning w-5 h-5 rounded-full flex items-center justify-center font-bold text-text">
+                            !
+                          </div>
+                        ),
+                        tooltip:
+                          "The source is not connected to any destination. Connect it to any destination to start seeing the data",
+                      }
+                }
                 configLink={`/${workspace.slug || workspace.id}/streams?id=${id}`}
                 actions={[
                   { label: "Edit", href: `/streams?id=${id}`, icon: <Edit3 className={"w-4 h-4"} /> },

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

@@ -35,7 +35,9 @@ export const ServiceTitle: React.FC<{
   service?: ServiceConfig;
   size?: "small" | "default" | "large";
   title?: (d: ServiceConfig) => string | React.ReactNode;
-}> = ({ service, title = d => d.name, size = "default" }) => {
+  link?: boolean;
+}> = ({ service, title = d => d.name, size = "default", link }) => {
+  const workspace = useWorkspace();
   return (
     <ObjectTitle
       icon={
@@ -45,6 +47,7 @@ export const ServiceTitle: React.FC<{
         />
       }
       size={size}
+      href={link && service ? `/${workspace.slugOrId}/services?id=${service?.id}` : undefined}
       title={service ? title(service) : "Unknown service"}
     />
   );