feat: mapping file creator and csv editor in RD

web-common/src/features/editor/FileWorkspaceHeader.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
+  import Button from "@rilldata/web-common/components/button/Button.svelte";
   import { splitFolderAndFileName } from "@rilldata/web-common/features/entity-management/file-path-utils";
   import { handleEntityRename } from "@rilldata/web-common/features/entity-management/ui-actions";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import { WorkspaceHeader } from "../../layout/workspace";
   import type { ResourceKind } from "../entity-management/resource-selectors";
   import { PROTECTED_FILES } from "../file-explorer/protected-paths";
   import type { V1Resource } from "@rilldata/web-common/runtime-client";
+  import { Table } from "lucide-svelte";
 
   export let filePath: string;
   export let hasUnsavedChanges: boolean;
@@ -17,6 +19,7 @@
 
   $: [, fileName] = splitFolderAndFileName(filePath);
   $: isProtectedFile = PROTECTED_FILES.includes(filePath);
+  $: isEditableCSV = filePath.startsWith("/data/") && filePath.endsWith(".csv");
 
   $: ({ instanceId } = $runtime);
 
@@ -29,6 +32,14 @@
     );
     if (route) await goto(route);
   };
+
+  async function handleEditInTable() {
+    // Remove leading slash for the route
+    const pathWithoutLeadingSlash = filePath.startsWith("/")
+      ? filePath.slice(1)
+      : filePath;
+    await goto(`/mapping/edit/${pathWithoutLeadingSlash}`);
+  }
 </script>
 
 <WorkspaceHeader
@@ -40,4 +51,13 @@
   showInspectorToggle={false}
   titleInput={fileName}
   {resource}
-/>
+>
+  <svelte:fragment slot="cta">
+    {#if isEditableCSV}
+      <Button type="secondary" onClick={handleEditInTable}>
+        <Table size="14px" />
+        Edit in Table
+      </Button>
+    {/if}
+  </svelte:fragment>
+</WorkspaceHeader>

web-common/src/features/entity-management/AddAssetButton.svelte

@@ -4,7 +4,12 @@
   import Button from "@rilldata/web-common/components/button/Button.svelte";
   import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
   import { getScreenNameFromPage } from "@rilldata/web-common/features/file-explorer/telemetry";
-  import { Database, Folder, PlusCircleIcon } from "lucide-svelte";
+  import {
+    Database,
+    Folder,
+    PlusCircleIcon,
+    FileSpreadsheet,
+  } from "lucide-svelte";
   import CaretDownIcon from "../../components/icons/CaretDownIcon.svelte";
   import File from "../../components/icons/File.svelte";
   import { behaviourEvent } from "../../metrics/initMetrics";
@@ -153,6 +158,13 @@
 
     await goto(`/files/${path}`);
   }
+
+  /**
+   * Navigate to the mapping file workspace
+   */
+  async function handleAddMappingFile() {
+    await goto("/mapping/new");
+  }
 </script>
 
 <DropdownMenu.Root bind:open={active}>
@@ -283,6 +295,9 @@
         <DropdownMenu.Item class="flex gap-x-2" on:click={handleAddBlankFile}>
           <File size="16px" /> Blank file
         </DropdownMenu.Item>
+        <DropdownMenu.Item class="flex gap-x-2" on:click={handleAddMappingFile}>
+          <FileSpreadsheet size="16px" /> Mapping file
+        </DropdownMenu.Item>
         <DropdownMenu.Item
           class="flex gap-x-2"
           on:click={() => (generateDataDialog = true)}