adding public option, remove skip, and help text changes

web-common/src/features/sources/modal/AddDataForm.svelte

@@ -16,6 +16,7 @@
   import {
     CONNECTION_TAB_OPTIONS,
     type ClickHouseConnectorType,
+    type GCSAuthMethod,
   } from "./constants";
   import { getInitialFormValuesFromProperties } from "../sourceUtils";
 
@@ -131,6 +132,8 @@
   let clickhouseDsnForm;
   let clickhouseShowSaveAnyway: boolean = false;
 
+  let gcsAuthMethod: GCSAuthMethod = "credentials";
+
   $: isSubmitDisabled = (() => {
     if (onlyDsn || connectionTab === "dsn") {
       // DSN form: check required DSN properties
@@ -392,6 +395,7 @@
               paramsErrors={$paramsErrors}
               {onStringInputChange}
               {handleFileUpload}
+              bind:gcsAuthMethod
             />
           </AddDataFormSection>
         {:else}
@@ -448,66 +452,99 @@
           </Button>
         {/if}
 
-        {#if isMultiStepConnector && stepState.step === "connector"}
-          <Button onClick={() => formManager.handleSkip()} type="secondary"
-            >Skip</Button
-          >
-        {/if}
-
         <Button
-          disabled={connector.name === "clickhouse"
-            ? clickhouseSubmitting || clickhouseIsSubmitDisabled
-            : submitting || isSubmitDisabled}
+          disabled={isMultiStepConnector &&
+          stepState.step === "connector" &&
+          gcsAuthMethod === "public"
+            ? false
+            : connector.name === "clickhouse"
+              ? clickhouseSubmitting || clickhouseIsSubmitDisabled
+              : submitting || isSubmitDisabled}
           loading={connector.name === "clickhouse"
             ? clickhouseSubmitting
             : submitting}
           loadingCopy={connector.name === "clickhouse"
             ? "Connecting..."
             : "Testing connection..."}
-          form={connector.name === "clickhouse" ? clickhouseFormId : formId}
-          submitForm
+          form={isMultiStepConnector &&
+          stepState.step === "connector" &&
+          gcsAuthMethod === "public"
+            ? undefined
+            : connector.name === "clickhouse"
+              ? clickhouseFormId
+              : formId}
+          submitForm={!(
+            isMultiStepConnector &&
+            stepState.step === "connector" &&
+            gcsAuthMethod === "public"
+          )}
+          onClick={isMultiStepConnector &&
+          stepState.step === "connector" &&
+          gcsAuthMethod === "public"
+            ? () => formManager.handleSkip()
+            : undefined}
           type="primary"
         >
-          {formManager.getPrimaryButtonLabel({
-            isConnectorForm,
-            step: stepState.step,
-            submitting,
-            clickhouseConnectorType,
-            clickhouseSubmitting,
-          })}
+          {isMultiStepConnector &&
+          stepState.step === "connector" &&
+          gcsAuthMethod === "public"
+            ? "Continue"
+            : formManager.getPrimaryButtonLabel({
+                isConnectorForm,
+                step: stepState.step,
+                submitting,
+                clickhouseConnectorType,
+                clickhouseSubmitting,
+              })}
         </Button>
       </div>
     </div>
   </div>
 
   <!-- RIGHT SIDE PANEL -->
   <div
-    class="add-data-side-panel flex flex-col gap-6 p-6 bg-surface w-full max-w-full border-l-0 border-t mt-6 pl-0 pt-6 md:w-96 md:min-w-[320px] md:max-w-[400px] md:border-l md:border-t-0 md:mt-0 md:pl-6"
+    class="add-data-side-panel flex flex-col p-6 bg-surface w-full max-w-full border-l-0 border-t mt-6 pl-0 pt-6 md:w-96 md:min-w-[320px] md:max-w-[400px] md:border-l md:border-t-0 md:mt-0 md:pl-6 h-full overflow-hidden"
   >
-    {#if dsnError || paramsError || clickhouseError}
-      <SubmissionError
-        message={clickhouseError ??
-          (onlyDsn || connectionTab === "dsn" ? dsnError : paramsError) ??
-          ""}
-        details={clickhouseErrorDetails ??
-          (onlyDsn || connectionTab === "dsn"
-            ? dsnErrorDetails
-            : paramsErrorDetails) ??
-          ""}
+    <div class="flex flex-col gap-6 flex-1 overflow-y-auto">
+      {#if dsnError || paramsError || clickhouseError}
+        <SubmissionError
+          message={clickhouseError ??
+            (onlyDsn || connectionTab === "dsn" ? dsnError : paramsError) ??
+            ""}
+          details={clickhouseErrorDetails ??
+            (onlyDsn || connectionTab === "dsn"
+              ? dsnErrorDetails
+              : paramsErrorDetails) ??
+            ""}
+        />
+      {/if}
+
+      <YamlPreview
+        title={isMultiStepConnector
+          ? stepState.step === "connector"
+            ? "Connector preview"
+            : "Model preview"
+          : isSourceForm
+            ? "Model preview"
+            : "Connector preview"}
+        yaml={yamlPreview}
       />
-    {/if}
-
-    <YamlPreview
-      title={isMultiStepConnector
-        ? stepState.step === "connector"
-          ? "Connector preview"
-          : "Model preview"
-        : isSourceForm
-          ? "Model preview"
-          : "Connector preview"}
-      yaml={yamlPreview}
-    />
-
-    <NeedHelpText {connector} />
+
+      {#if isMultiStepConnector && $connectorStepStore.step === "connector"}
+        <div class="text-sm leading-normal font-medium text-muted-foreground">
+          Already connected? <button
+            type="button"
+            class="text-sm leading-normal text-primary-500 hover:text-primary-600 font-medium hover:underline break-all"
+            on:click={() => formManager.handleSkip()}
+          >
+            Import your data
+          </button>
+        </div>
+      {/if}
+    </div>
+
+    <div class="mt-6 flex-shrink-0">
+      <NeedHelpText {connector} />
+    </div>
   </div>
 </div>

web-common/src/features/sources/modal/GCSMultiStepForm.svelte

@@ -14,7 +14,7 @@
   export let onStringInputChange: (e: Event) => void;
   export let handleFileUpload: (file: File) => Promise<string>;
 
-  let gcsAuthMethod: GCSAuthMethod = "credentials";
+  export let gcsAuthMethod: GCSAuthMethod = "credentials";
 
   const filteredParamsProperties = properties;
 

web-common/src/features/sources/modal/NeedHelpText.svelte

@@ -1,27 +1,45 @@
 <script lang="ts">
   import type { V1ConnectorDriver } from "@rilldata/web-common/runtime-client";
   import { ExternalLinkIcon } from "lucide-svelte";
+  import { connectorStepStore } from "./connectorStepStore";
 
   export let connector: V1ConnectorDriver;
+
+  $: stepState = $connectorStepStore;
 </script>
 
 <div>
   <div class="text-sm leading-none font-medium mb-4">Help</div>
-  <div class="text-sm leading-normal font-medium text-muted-foreground mb-2">
-    Need help connecting to {connector.displayName}? Check out our documentation
-    for detailed instructions.
-  </div>
-  <span class="flex flex-row items-center gap-2 group">
-    <a
-      href={connector.docsUrl || "https://docs.rilldata.com/build/connectors/"}
-      rel="noreferrer noopener"
-      target="_blank"
-      class="text-sm leading-normal text-primary-500 hover:text-primary-600 font-medium group-hover:underline break-all"
-    >
-      How to connect to {connector.displayName}
-    </a>
-    <ExternalLinkIcon size="16px" color="#6366F1" />
-  </span>
+  {#if stepState.step === "connector"}
+    <div class="text-sm leading-normal font-medium text-muted-foreground mb-2">
+      Need help connecting to {connector.displayName}? Check out our
+      documentation for detailed instructions.
+    </div>
+    <span class="flex flex-row items-center gap-2 group mb-4">
+      <a
+        href={connector.docsUrl ||
+          "https://docs.rilldata.com/build/connectors/"}
+        rel="noreferrer noopener"
+        target="_blank"
+        class="text-sm leading-normal text-primary-500 hover:text-primary-600 font-medium group-hover:underline break-all"
+      >
+        How to connect to {connector.displayName}
+      </a>
+      <ExternalLinkIcon size="16px" color="#6366F1" />
+    </span>
+  {:else}
+    <div class="text-sm leading-normal font-medium text-muted-foreground mb-2">
+      Check out our <a
+        href="https://docs.rilldata.com/build/models/source-models/"
+        rel="noreferrer noopener"
+        target="_blank"
+        class="text-sm leading-normal text-primary-500 hover:text-primary-600 font-medium group-hover:underline break-all"
+      >
+        source model documentation
+      </a> for detailed instructions on how to customize up your data source ingestion.
+    </div>
+  {/if}
+
   {#if connector.displayName === "DuckDB" || connector.displayName === "SQLite"}
     <div class="mt-8">
       <div class="text-sm leading-none font-medium mb-4">

web-common/src/features/sources/modal/constants.ts

@@ -17,7 +17,7 @@ export const CONNECTION_TAB_OPTIONS: { value: string; label: string }[] = [
   { value: "dsn", label: "Enter connection string" },
 ];
 
-export type GCSAuthMethod = "credentials" | "hmac";
+export type GCSAuthMethod = "credentials" | "hmac" | "public";
 
 export const GCS_AUTH_OPTIONS: {
   value: GCSAuthMethod;
@@ -37,6 +37,11 @@ export const GCS_AUTH_OPTIONS: {
     description:
       "Use HMAC access key and secret for S3-compatible authentication.",
   },
+  {
+    value: "public",
+    label: "Public",
+    description: "Access public GCS buckets without authentication.",
+  },
 ];
 
 // pre-defined order for sources