@marimo-team/islands 0.24.1-dev41 → 0.24.1-dev43

package/src/core/codemirror/language/panel/sql.tsx

@@ -10,10 +10,12 @@ import {
   CircleHelpIcon,
   DatabaseZap,
   SearchCheck,
+  SparklesIcon,
 } from "lucide-react";
 import { getCellForDomProps } from "@/components/data-table/cell-utils";
 import { transformDisplayName } from "@/components/databases/display";
 import { DatabaseLogo } from "@/components/databases/icon";
+import { useAddDetectedDataSource } from "@/components/editor/connections/components";
 import { Button } from "@/components/ui/button";
 import {
   Select,
@@ -31,11 +33,13 @@ import {
   dataConnectionsMapAtom,
   setLatestEngineSelected,
 } from "@/core/datasets/data-source-connections";
+import type { DetectedDataSource } from "@/core/datasets/data-source-discovery";
 import {
   type ConnectionName,
   INTERNAL_SQL_ENGINES,
 } from "@/core/datasets/engines";
 import type { DataSourceConnection } from "@/core/kernel/messages";
+import { useDetectedDataSources } from "@/hooks/useDataSourceDiscovery";
 import { useNonce } from "@/hooks/useNonce";
 import { clearAllSqlValidationErrors } from "../languages/sql/banner-validation-errors";
 import { type SQLMode, useSQLMode } from "../languages/sql/sql-mode";
@@ -46,19 +50,61 @@ interface SelectProps {
   cellId: CellId;
 }
 
-export const SQLEngineSelect: React.FC<SelectProps> = ({
+export const SQLEngineSelect: React.FC<SelectProps> = (props) => {
+  const detectedDataSources = useDetectedDataSources("database");
+
+  if (detectedDataSources.length === 0) {
+    return (
+      <SQLEngineSelectImpl
+        {...props}
+        detectedDataSources={detectedDataSources}
+      />
+    );
+  }
+
+  return (
+    <SQLEngineSelectWithDetectedSources
+      {...props}
+      detectedDataSources={detectedDataSources}
+    />
+  );
+};
+
+const SQLEngineSelectWithDetectedSources: React.FC<
+  SelectProps & { detectedDataSources: DetectedDataSource[] }
+> = ({ detectedDataSources, ...props }) => {
+  const addDetectedDataSource = useAddDetectedDataSource();
+  return (
+    <SQLEngineSelectImpl
+      {...props}
+      detectedDataSources={detectedDataSources}
+      addDetectedDataSource={addDetectedDataSource}
+    />
+  );
+};
+
+const SQLEngineSelectImpl: React.FC<
+  SelectProps & {
+    detectedDataSources: DetectedDataSource[];
+    addDetectedDataSource?: (source: DetectedDataSource) => void;
+  }
+> = ({
   selectedEngine,
   onChange,
   cellId,
+  detectedDataSources,
+  addDetectedDataSource,
 }) => {
   const connectionsMap = useAtomValue(dataConnectionsMapAtom);
 
   const internalEngineConnections: DataSourceConnection[] = [];
   const userDefinedConnections: DataSourceConnection[] = [];
   for (const [connName, connection] of connectionsMap.entries()) {
-    INTERNAL_SQL_ENGINES.has(connName)
-      ? internalEngineConnections.push(connection)
-      : userDefinedConnections.push(connection);
+    if (INTERNAL_SQL_ENGINES.has(connName)) {
+      internalEngineConnections.push(connection);
+    } else {
+      userDefinedConnections.push(connection);
+    }
   }
 
   // Use nonce to force re-render as languageAdapter.engine may not trigger change
@@ -74,6 +120,17 @@ export const SQLEngineSelect: React.FC<SelectProps> = ({
       return;
     }
 
+    if (value.startsWith(DETECTED_SOURCE_PREFIX)) {
+      const sourceId = value.slice(DETECTED_SOURCE_PREFIX.length);
+      const source = detectedDataSources.find(
+        (source) => source.id === sourceId,
+      );
+      if (source && addDetectedDataSource) {
+        addDetectedDataSource(source);
+      }
+      return;
+    }
+
     const nextEngine = connectionsMap.get(value as ConnectionName);
     if (nextEngine) {
       rerender();
@@ -125,6 +182,25 @@ export const SQLEngineSelect: React.FC<SelectProps> = ({
             {renderConnections(userDefinedConnections)}
             {userDefinedConnections.length > 0 && <SelectSeparator />}
             {renderConnections(internalEngineConnections)}
+            {detectedDataSources.length > 0 && (
+              <>
+                <SelectSeparator />
+                <SelectLabel>Detected in your environment</SelectLabel>
+                {detectedDataSources.map((source) => (
+                  <SelectItem
+                    key={source.id}
+                    value={`${DETECTED_SOURCE_PREFIX}${source.id}`}
+                  >
+                    <div className="flex items-center gap-1">
+                      <SparklesIcon className="h-3 w-3 text-(--blue-9)" />
+                      <span className="truncate ml-0.5">
+                        Add {source.displayName} connection
+                      </span>
+                    </div>
+                  </SelectItem>
+                ))}
+              </>
+            )}
             <SelectSeparator />
             <SelectItem className="text-muted-foreground" value={HELP_KEY}>
               <a
@@ -145,6 +221,7 @@ export const SQLEngineSelect: React.FC<SelectProps> = ({
 };
 
 const HELP_KEY = "__help__";
+const DETECTED_SOURCE_PREFIX = "__detected_source__:";
 const HELP_URL =
   "http://docs.marimo.io/guides/working_with_data/sql/#connecting-to-a-custom-database";
 

package/src/core/codemirror/markdown/commands.ts

@@ -41,7 +41,7 @@ function toggleAllLines({
     }
   }
 
-  for (let pos = selection.from; pos <= selection.to; ) {
+  for (let pos = selection.from; pos <= selection.to;) {
     const line = view.state.doc.lineAt(pos);
     const lineText = line.text;
 

package/src/core/codemirror/markdown/completions.ts

@@ -94,23 +94,21 @@ const getLucideIconList = once(async (): Promise<Completion[]> => {
     return `https://cdn.jsdelivr.net/npm/lucide-static@0.452.0/icons/${iconName}.svg`;
   };
 
-  return Object.entries(iconList).map(
-    ([iconName, aliases]): Completion => ({
-      label: `::${iconName}`,
-      displayLabel: iconName,
-      type: "lucide-icon",
-      boost: 10,
-      apply: `::lucide:${iconName}::`,
-      detail: aliases.join(", "),
-      info: () => {
-        const img = document.createElement("img");
-        img.src = asSvg(iconName);
-        img.style.width = "24px";
-        img.style.height = "24px";
-        return img;
-      },
-    }),
-  );
+  return Object.entries(iconList).map(([iconName, aliases]): Completion => ({
+    label: `::${iconName}`,
+    displayLabel: iconName,
+    type: "lucide-icon",
+    boost: 10,
+    apply: `::lucide:${iconName}::`,
+    detail: aliases.join(", "),
+    info: () => {
+      const img = document.createElement("img");
+      img.src = asSvg(iconName);
+      img.style.width = "24px";
+      img.style.height = "24px";
+      return img;
+    },
+  }));
 });
 
 // Completion provider for LaTeX-style UTF-8 symbols