feat: release .env secrets out of experimental (#4556)

Release dotenv secrets out of experimental.

Author: mscolnick

frontend/src/components/app-config/user-config-form.tsx

@@ -1294,35 +1294,37 @@ export const UserConfigForm: React.FC = () => {
               )}
             />
 
-            <FormField
-              control={form.control}
-              name="experimental.lsp"
-              render={({ field }) => (
-                <div className="flex flex-col gap-y-1">
-                  <FormItem className={formItemClasses}>
-                    <FormLabel className="font-normal">
-                      LSP (Language Server Protocol)
-                    </FormLabel>
-                    <FormControl>
-                      <Checkbox
-                        data-testid="inline-ai-checkbox"
-                        checked={field.value === true}
-                        onCheckedChange={field.onChange}
-                      />
-                    </FormControl>
-                  </FormItem>
-                  <FormDescription>
-                    Enable experimental LSP support. You will need to have
-                    <Kbd className="inline">marimo[lsp]</Kbd> installed in your
-                    environment to use this. See{" "}
-                    <ExternalLink href="https://docs.marimo.io/guides/editor_features/language_server/">
-                      docs
-                    </ExternalLink>{" "}
-                    for more info.
-                  </FormDescription>
-                </div>
-              )}
-            />
+            {!isWasm() && (
+              <FormField
+                control={form.control}
+                name="experimental.lsp"
+                render={({ field }) => (
+                  <div className="flex flex-col gap-y-1">
+                    <FormItem className={formItemClasses}>
+                      <FormLabel className="font-normal">
+                        LSP (Language Server Protocol)
+                      </FormLabel>
+                      <FormControl>
+                        <Checkbox
+                          data-testid="inline-ai-checkbox"
+                          checked={field.value === true}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                    </FormItem>
+                    <FormDescription>
+                      Enable experimental LSP support. You will need to have
+                      <Kbd className="inline">marimo[lsp]</Kbd> installed in
+                      your environment to use this. See{" "}
+                      <ExternalLink href="https://docs.marimo.io/guides/editor_features/language_server/">
+                        docs
+                      </ExternalLink>{" "}
+                      for more info.
+                    </FormDescription>
+                  </div>
+                )}
+              />
+            )}
             <FormField
               control={form.control}
               name="experimental.inline_ai_tooltip"

frontend/src/components/editor/chrome/panels/write-secret-modal.tsx

@@ -46,12 +46,32 @@ export const WriteSecretModal: React.FC<{
 }> = ({ providerNames, onClose, onSuccess }) => {
   const [key, setKey] = React.useState("");
   const [value, setValue] = React.useState("");
-  const [location, setLocation] = React.useState(providerNames[0] || ".env");
+  const [location, setLocation] = React.useState<string | undefined>(
+    providerNames[0],
+  );
   // Only dotenv is supported for now
   const provider = "dotenv";
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (!location) {
+      toast({
+        title: "Error",
+        description: "No location selected for the secret.",
+        variant: "danger",
+      });
+      return;
+    }
+
+    if (!key || !value || !location) {
+      toast({
+        title: "Error",
+        description: "Please fill in all fields.",
+        variant: "danger",
+      });
+      return;
+    }
+
     try {
       await writeSecret({
         key,
@@ -109,21 +129,28 @@ export const WriteSecretModal: React.FC<{
           </div>
           <div className="grid gap-2">
             <Label htmlFor="location">Location</Label>
-            <Select
-              value={location}
-              onValueChange={(value) => setLocation(value)}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder="Select a provider" />
-              </SelectTrigger>
-              <SelectContent>
-                {providerNames.map((name) => (
-                  <SelectItem key={name} value={name}>
-                    {name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+            {providerNames.length === 0 && (
+              <p className="text-sm text-muted-foreground">
+                No dotenv locations configured.
+              </p>
+            )}
+            {providerNames.length > 0 && (
+              <Select
+                value={location}
+                onValueChange={(value) => setLocation(value)}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a provider" />
+                </SelectTrigger>
+                <SelectContent>
+                  {providerNames.map((name) => (
+                    <SelectItem key={name} value={name}>
+                      {name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
             <FormDescription>
               You can configure the location by setting the{" "}
               <ExternalLink href="https://links.marimo.app/dotenv">
@@ -137,7 +164,9 @@ export const WriteSecretModal: React.FC<{
           <Button type="button" variant="outline" onClick={onClose}>
             Cancel
           </Button>
-          <Button type="submit">Add Secret</Button>
+          <Button type="submit" disabled={!key || !value || !location}>
+            Add Secret
+          </Button>
         </DialogFooter>
       </form>
     </DialogContent>

frontend/src/components/editor/chrome/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-import { getFeatureFlag } from "@/core/config/feature-flag";
+import { isWasm } from "@/core/wasm/utils";
 import {
   XCircleIcon,
   FolderTreeIcon,
@@ -110,10 +110,11 @@ export const PANELS: PanelDescriptor[] = [
     position: "sidebar",
   },
   {
+    // Not supported in WebAssembly yet
     type: "secrets",
     Icon: KeyIcon,
     tooltip: "Secrets",
-    hidden: !getFeatureFlag("secrets"),
+    hidden: isWasm(),
     position: "sidebar",
   },
   {

frontend/src/core/config/feature-flag.tsx

@@ -14,7 +14,6 @@ export interface ExperimentalFeatures {
   rtc_v2: boolean;
   reactive_tests: boolean;
   toplevel_defs: boolean;
-  secrets: boolean;
   table_charts: boolean;
   // Add new feature flags here
 }
@@ -27,7 +26,6 @@ const defaultValues: ExperimentalFeatures = {
   rtc_v2: false,
   reactive_tests: false,
   toplevel_defs: false,
-  secrets: false,
   table_charts: false,
 };
 

marimo/_server/print.py

@@ -118,6 +118,7 @@ def print_experimental_features(config: MarimoConfig) -> None:
         "tracing",
         "markdown",
         "sql_engines",
+        "secrets",
         "reactive_tests",
     }
     keys = keys - finished_experiments