From 9ac49b466c98d0a6ebdc446b38d72cf99b4bb569 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Sun, 15 Dec 2024 10:25:12 -0500
Subject: [PATCH] New components for seeding the rule builder.

This uses the wizard introduced by David for workflow exports instead of adapting the upload paradigm. The old component was very compact but also very unintuitive and just hacked together as quickly as possible and never really revisited. The wizard provides more space to explain things and is probably the way we want to go but still needs some serious love from someone better at UI than me.

I need a component like this... but different for sample sheet seeding so I wanted to do a refresh and get something we're all more comfortable with ahead of that.
---
 .../Collections/BuildFileSetWizard.vue        | 169 ++++++++++++++++++
 .../RuleBasedCollectionCreatorModal.js        |  19 +-
 client/src/components/Collections/tables.ts   |  61 +++++++
 .../Collections/wizard/CreatingWhat.vue       |  43 +++++
 .../Collections/wizard/JaggedDataAlert.vue    |  17 ++
 .../Collections/wizard/PasteData.vue          |  82 +++++++++
 .../Collections/wizard/SelectDataset.vue      |  62 +++++++
 .../Collections/wizard/SelectFolder.vue       |  35 ++++
 .../wizard/SourceFromCollection.vue           |  29 +++
 .../wizard/SourceFromDatasetAsTable.vue       |  29 +++
 .../wizard/SourceFromPastedData.vue           |  29 +++
 .../wizard/SourceFromRemoteFiles.vue          |  26 +++
 .../components/Collections/wizard/types.ts    |   8 +
 .../Collections/wizard/useFileSetSources.ts   |  45 +++++
 .../Common/Wizard/GenericWizard.vue           |  30 +++-
 client/src/components/Common/Wizard/utils.ts  |   5 +
 client/src/components/Panels/ToolBox.vue      |   7 +-
 .../src/components/Upload/UploadContainer.vue |  14 ++
 .../Export/InvocationExportWizard.vue         |   5 +-
 client/src/composables/route.ts               |  11 +-
 20 files changed, 696 insertions(+), 30 deletions(-)
 create mode 100644 client/src/components/Collections/BuildFileSetWizard.vue
 create mode 100644 client/src/components/Collections/tables.ts
 create mode 100644 client/src/components/Collections/wizard/CreatingWhat.vue
 create mode 100644 client/src/components/Collections/wizard/JaggedDataAlert.vue
 create mode 100644 client/src/components/Collections/wizard/PasteData.vue
 create mode 100644 client/src/components/Collections/wizard/SelectDataset.vue
 create mode 100644 client/src/components/Collections/wizard/SelectFolder.vue
 create mode 100644 client/src/components/Collections/wizard/SourceFromCollection.vue
 create mode 100644 client/src/components/Collections/wizard/SourceFromDatasetAsTable.vue
 create mode 100644 client/src/components/Collections/wizard/SourceFromPastedData.vue
 create mode 100644 client/src/components/Collections/wizard/SourceFromRemoteFiles.vue
 create mode 100644 client/src/components/Collections/wizard/types.ts
 create mode 100644 client/src/components/Collections/wizard/useFileSetSources.ts
 create mode 100644 client/src/components/Common/Wizard/utils.ts

diff --git a/client/src/components/Collections/BuildFileSetWizard.vue b/client/src/components/Collections/BuildFileSetWizard.vue
new file mode 100644
index 000000000000..9d659ce1e528
--- /dev/null
+++ b/client/src/components/Collections/BuildFileSetWizard.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { BCardGroup } from "bootstrap-vue";
+import { computed, ref } from "vue";
+
+import { getGalaxyInstance } from "@/app";
+import { useWizard } from "@/components/Common/Wizard/useWizard";
+import { useToolRouting } from "@/composables/route";
+
+import { type RemoteFile, type RulesCreatingWhat, type RulesSourceFrom } from "./wizard/types";
+import { useFileSetSources } from "./wizard/useFileSetSources";
+
+import CreatingWhat from "./wizard/CreatingWhat.vue";
+import PasteData from "./wizard/PasteData.vue";
+import SelectDataset from "./wizard/SelectDataset.vue";
+import SelectFolder from "./wizard/SelectFolder.vue";
+import SourceFromCollection from "./wizard/SourceFromCollection.vue";
+import SourceFromDatasetAsTable from "./wizard/SourceFromDatasetAsTable.vue";
+import SourceFromPastedData from "./wizard/SourceFromPastedData.vue";
+import SourceFromRemoteFiles from "./wizard/SourceFromRemoteFiles.vue";
+import GenericWizard from "@/components/Common/Wizard/GenericWizard.vue";
+
+const isBusy = ref<boolean>(false);
+const { pasteData, tabularDatasetContents, uris, setRemoteFilesFolder, onFtp, setDatasetContents, setPasteTable } =
+    useFileSetSources(isBusy);
+
+interface Props {
+    fileSourcesConfigured: boolean;
+    ftpUploadSite?: string;
+}
+
+const props = defineProps<Props>();
+
+const creatingWhat = ref<RulesCreatingWhat>("datasets");
+const creatingWhatTitle = computed(() => {
+    return creatingWhat.value == "datasets" ? "Datasets" : "Collections";
+});
+const sourceInstructions = computed(() => {
+    return `${creatingWhatTitle.value} can be created from a set or files, URIs, or existing datasets.`;
+});
+
+const sourceFrom = ref<RulesSourceFrom>("remote_files");
+
+const { routeToTool } = useToolRouting();
+
+const wizard = useWizard({
+    "select-what": {
+        label: "What is being created?",
+        instructions: computed(() => {
+            return `Are you creating datasets or collections?`;
+        }),
+        isValid: () => true,
+        isSkippable: () => false,
+    },
+    "select-source": {
+        label: "Select source",
+        instructions: sourceInstructions,
+        isValid: () => true,
+        isSkippable: () => false,
+    },
+    "select-remote-files-folder": {
+        label: "Select folder",
+        instructions: "Select folder of files to import.",
+        isValid: () => sourceFrom.value === "remote_files" && Boolean(uris.value.length > 0),
+        isSkippable: () => sourceFrom.value !== "remote_files",
+    },
+    "paste-data": {
+        label: "Paste data",
+        instructions: "Paste data containing URIs and optional extra metadata.",
+        isValid: () => sourceFrom.value === "pasted_table" && pasteData.value.length > 0,
+        isSkippable: () => sourceFrom.value !== "pasted_table",
+    },
+    "select-dataset": {
+        label: "Select dataset",
+        instructions: "Select tabular dataset to load URIs and metadata from.",
+        isValid: () => sourceFrom.value === "dataset_as_table" && tabularDatasetContents.value.length > 0,
+        isSkippable: () => sourceFrom.value !== "dataset_as_table",
+    },
+});
+
+const importButtonLabel = computed(() => {
+    if (sourceFrom.value == "collection") {
+        return "Transform";
+    } else {
+        return "Import";
+    }
+});
+
+const emit = defineEmits(["dismiss"]);
+type SelectionType = "raw" | "remote_files";
+type ElementsType = RemoteFile[] | string[][];
+
+// it would be nice to have a real type from the rule builder but
+// it is older code. This is really outlining what this component can
+// produce and not what the rule builder can consume which is a wide
+// superset of this.
+interface Entry {
+    dataType: RulesCreatingWhat;
+    ftpUploadSite?: string;
+    elements?: ElementsType | undefined;
+    content?: string;
+    selectionType: SelectionType;
+}
+
+function launchRuleBuilder() {
+    const Galaxy = getGalaxyInstance();
+    let elements: ElementsType | undefined = undefined;
+    let selectionType: SelectionType = "raw";
+    if (sourceFrom.value == "remote_files") {
+        elements = uris.value;
+        selectionType = "remote_files";
+    } else if (sourceFrom.value == "pasted_table") {
+        elements = pasteData.value;
+    } else if (sourceFrom.value == "dataset_as_table") {
+        elements = tabularDatasetContents.value;
+    }
+    const entry: Entry = {
+        dataType: creatingWhat.value,
+        ftpUploadSite: props.ftpUploadSite,
+        selectionType: selectionType,
+        elements: elements,
+    };
+    Galaxy.currHistoryPanel.buildCollectionFromRules(entry, null, true);
+}
+
+function submit() {
+    if (sourceFrom.value == "collection") {
+        routeToTool("__APPLY_RULES__");
+    } else {
+        launchRuleBuilder();
+    }
+    emit("dismiss");
+}
+
+function setCreatingWhat(what: RulesCreatingWhat) {
+    creatingWhat.value = what;
+}
+
+function setSourceForm(newValue: RulesSourceFrom) {
+    sourceFrom.value = newValue;
+}
+</script>
+
+<template>
+    <GenericWizard :use="wizard" :submit-button-label="importButtonLabel" @submit="submit">
+        <div v-if="wizard.isCurrent('select-what')">
+            <CreatingWhat :creating-what="creatingWhat" @onChange="setCreatingWhat" />
+        </div>
+        <div v-else-if="wizard.isCurrent('select-source')">
+            <BCardGroup deck>
+                <SourceFromRemoteFiles :selected="sourceFrom === 'remote_files'" @select="setSourceForm" />
+                <SourceFromPastedData :selected="sourceFrom === 'pasted_table'" @select="setSourceForm" />
+                <SourceFromDatasetAsTable :selected="sourceFrom === 'dataset_as_table'" @select="setSourceForm" />
+                <SourceFromCollection
+                    v-if="creatingWhat == 'collections'"
+                    :selected="sourceFrom === 'collection'"
+                    @select="setSourceForm" />
+            </BCardGroup>
+        </div>
+        <div v-else-if="wizard.isCurrent('paste-data')">
+            <PasteData @onChange="setPasteTable" />
+        </div>
+        <div v-else-if="wizard.isCurrent('select-remote-files-folder')">
+            <SelectFolder :ftp-upload-site="ftpUploadSite" @onChange="setRemoteFilesFolder" @onFtp="onFtp" />
+        </div>
+        <div v-else-if="wizard.isCurrent('select-dataset')">
+            <SelectDataset @onChange="setDatasetContents" />
+        </div>
+    </GenericWizard>
+</template>
diff --git a/client/src/components/Collections/RuleBasedCollectionCreatorModal.js b/client/src/components/Collections/RuleBasedCollectionCreatorModal.js
index 353f3e312c7c..ab88bbea5dcf 100644
--- a/client/src/components/Collections/RuleBasedCollectionCreatorModal.js
+++ b/client/src/components/Collections/RuleBasedCollectionCreatorModal.js
@@ -1,6 +1,8 @@
 import _l from "utils/localization";
 import Vue from "vue";
 
+import { rawToTable } from "@/components/Collections/tables";
+
 import { collectionCreatorModalSetup } from "./common/modal";
 
 function ruleBasedCollectionCreatorModal(elements, elementsType, importType, options) {
@@ -58,22 +60,7 @@ function createCollectionViaRules(selection, defaultHideSourceItems = true) {
         importType = selection.dataType || "collections";
         elements = selection.elements;
     } else {
-        const hasNonWhitespaceChars = RegExp(/[^\s]/);
-        // Have pasted data, data from a history dataset, or FTP list.
-        const lines = selection.content
-            .split(/[\n\r]/)
-            .filter((line) => line.length > 0 && hasNonWhitespaceChars.exec(line));
-        // Really poor tabular parser - we should get a library for this or expose options? I'm not
-        // sure.
-        let hasTabs = false;
-        if (lines.length > 0) {
-            const firstLine = lines[0];
-            if (firstLine.indexOf("\t") >= 0) {
-                hasTabs = true;
-            }
-        }
-        const regex = hasTabs ? /\t/ : /\s+/;
-        elements = lines.map((line) => line.split(regex));
+        elements = rawToTable(selection.content);
         elementsType = selection.selectionType;
         importType = selection.dataType || "collections";
     }
diff --git a/client/src/components/Collections/tables.ts b/client/src/components/Collections/tables.ts
new file mode 100644
index 000000000000..9752f232ba8d
--- /dev/null
+++ b/client/src/components/Collections/tables.ts
@@ -0,0 +1,61 @@
+import { computed, ref } from "vue";
+
+export function useTableSummary() {
+    const rawValue = ref<string>("");
+
+    const table = computed(() => {
+        return rawToTable(rawValue.value);
+    });
+
+    const columnCount = computed<number>(() => {
+        const tableVal = table.value;
+        if (tableVal && tableVal.length) {
+            return tableVal[0]?.length || 0;
+        } else {
+            return 0;
+        }
+    });
+
+    const isJaggedData = computed<boolean>(() => {
+        const tableVal = table.value;
+        const columnCountVal = columnCount.value;
+        for (const row of tableVal) {
+            if (row.length != columnCountVal) {
+                return true;
+            }
+        }
+        return false;
+    });
+
+    const jaggedDataWarning = computed<string | undefined>(() => {
+        if (isJaggedData.value) {
+            return "This data contains a different number of columns per-row, this probably shouldn't be used as is.";
+        } else {
+            return undefined;
+        }
+    });
+    return {
+        rawValue,
+        isJaggedData,
+        jaggedDataWarning,
+        columnCount,
+        table,
+    };
+}
+
+export function rawToTable(content: string): string[][] {
+    const hasNonWhitespaceChars = RegExp(/[^\s]/);
+    // Have pasted data, data from a history dataset, or FTP list.
+    const lines = content.split(/[\n\r]/).filter((line) => line.length > 0 && hasNonWhitespaceChars.exec(line));
+    // Really poor tabular parser - we should get a library for this or expose options? I'm not
+    // sure.
+    let hasTabs = false;
+    if (lines.length > 0) {
+        const firstLine = lines[0];
+        if (firstLine && firstLine.indexOf("\t") >= 0) {
+            hasTabs = true;
+        }
+    }
+    const regex = hasTabs ? /\t/ : /\s+/;
+    return lines.map((line) => line.split(regex));
+}
diff --git a/client/src/components/Collections/wizard/CreatingWhat.vue b/client/src/components/Collections/wizard/CreatingWhat.vue
new file mode 100644
index 000000000000..fb971e024c12
--- /dev/null
+++ b/client/src/components/Collections/wizard/CreatingWhat.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { BCard, BCardGroup, BCardTitle } from "bootstrap-vue";
+
+import { borderVariant } from "@/components/Common/Wizard/utils";
+
+import { type RulesCreatingWhat } from "./types";
+
+interface Props {
+    creatingWhat: RulesCreatingWhat;
+}
+
+const emit = defineEmits(["onChange"]);
+
+defineProps<Props>();
+</script>
+
+<template>
+    <BCardGroup deck>
+        <BCard
+            data-creating-what="datasets"
+            class="wizard-selection-card"
+            :border-variant="borderVariant(creatingWhat === 'datasets')"
+            @click="emit('onChange', 'datasets')">
+            <BCardTitle>
+                <b>Datasets</b>
+            </BCardTitle>
+            <div>
+                This options lets you import any number of individual Galaxy datasets. These will be unique items in
+                your Galaxy history.
+            </div>
+        </BCard>
+        <BCard
+            data-creating-what="collections"
+            class="wizard-selection-card"
+            :border-variant="borderVariant(creatingWhat === 'collections')"
+            @click="emit('onChange', 'collections')">
+            <BCardTitle>
+                <b>Collections</b>
+            </BCardTitle>
+            <div>This options lets you create or more Galaxy dataset collections.</div>
+        </BCard>
+    </BCardGroup>
+</template>
diff --git a/client/src/components/Collections/wizard/JaggedDataAlert.vue b/client/src/components/Collections/wizard/JaggedDataAlert.vue
new file mode 100644
index 000000000000..75fa2ef95adc
--- /dev/null
+++ b/client/src/components/Collections/wizard/JaggedDataAlert.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { BAlert } from "bootstrap-vue";
+
+interface Props {
+    jaggedDataWarning?: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <span>
+        <BAlert v-if="jaggedDataWarning" show variant="warning">
+            {{ jaggedDataWarning }}
+        </BAlert>
+    </span>
+</template>
diff --git a/client/src/components/Collections/wizard/PasteData.vue b/client/src/components/Collections/wizard/PasteData.vue
new file mode 100644
index 000000000000..1c9b2849fd65
--- /dev/null
+++ b/client/src/components/Collections/wizard/PasteData.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+import { useTableSummary } from "@/components/Collections/tables";
+
+import JaggedDataAlert from "./JaggedDataAlert.vue";
+
+const emit = defineEmits(["onChange"]);
+
+const isDragging = ref(false);
+const { rawValue, jaggedDataWarning, table } = useTableSummary();
+
+watch(table, (newValue: string[][]) => {
+    emit("onChange", table.value);
+});
+
+const handleDrop = (event: DragEvent) => {
+    isDragging.value = false;
+    const file = event.dataTransfer?.files[0];
+    if (file) {
+        const reader = new FileReader();
+
+        reader.onload = () => {
+            rawValue.value = reader.result as string;
+        };
+
+        reader.onerror = () => {
+            console.error("Failed to read file");
+        };
+
+        reader.readAsText(file); // Read the file as text
+    }
+};
+</script>
+
+<template>
+    <div class="paste-data">
+        <JaggedDataAlert :jaggedDataWarning="jaggedDataWarning" />
+        <div
+            class="dropzone"
+            :class="{ highlight: isDragging }"
+            @drop.prevent="handleDrop"
+            @dragover.prevent="isDragging = true"
+            @dragleave.prevent="isDragging = false">
+            <textarea v-model="rawValue" class="p-2 mt-2" placeholder="Paste URIs and optional metadata here." />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+@import "theme/blue.scss";
+
+.paste-data {
+    min-width: 576px;
+    display: flex;
+    flex-flow: row wrap;
+    margin-right: -15px;
+    margin-left: -15px;
+}
+
+.paste-data textarea {
+    resize: none;
+    width: 100%;
+    height: 300px;
+    font-size: $font-size-base;
+    -moz-border-radius: $border-radius-large;
+    border-radius: $border-radius-large;
+    border-color: $border-color;
+    border-width: 2px;
+}
+.dropzone {
+    padding: 7px !important;
+    width: 100%;
+}
+.dropzone.highlight {
+    border-width: 2px;
+    border-color: $border-color;
+    border-style: dashed;
+    border-radius: $border-radius-large;
+    -moz-border-radius: $border-radius-large;
+}
+</style>
diff --git a/client/src/components/Collections/wizard/SelectDataset.vue b/client/src/components/Collections/wizard/SelectDataset.vue
new file mode 100644
index 000000000000..ac3b8d617e22
--- /dev/null
+++ b/client/src/components/Collections/wizard/SelectDataset.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { BAlert, BCard, BCardTitle } from "bootstrap-vue";
+import { ref, watch } from "vue";
+
+import { getGalaxyInstance } from "@/app";
+import { useTableSummary } from "@/components/Collections/tables";
+import { errorMessageAsString } from "@/utils/simple-error";
+import { urlData } from "@/utils/url";
+
+import JaggedDataAlert from "./JaggedDataAlert.vue";
+
+const emit = defineEmits(["onChange", "onError"]);
+const errorMessage = ref<string | undefined>(undefined);
+const { rawValue, jaggedDataWarning, table } = useTableSummary();
+
+async function fetchAndHandleData(response: Record) {
+    const selectedDatasetId = response.id;
+    const historyId = response.history_id;
+    try {
+        const newSourceContent = await urlData({
+            url: `/api/histories/${historyId}/contents/${selectedDatasetId}/display`,
+        });
+        rawValue.value = newSourceContent as string;
+    } catch (error) {
+        rawValue.value = "";
+        errorMessage.value = errorMessageAsString(error);
+    }
+}
+
+interface Record {
+    id: string;
+    history_id: string;
+}
+
+function inputDialog() {
+    const Galaxy = getGalaxyInstance();
+    Galaxy.data.dialog(fetchAndHandleData, {
+        multiple: false,
+        library: false,
+        format: null,
+        allowUpload: false,
+    });
+}
+
+watch(table, (newValue: string[][]) => {
+    emit("onChange", table.value);
+});
+</script>
+
+<template>
+    <BCard class="wizard-selection-card" border-variant="primary" @click="inputDialog">
+        <BCardTitle>
+            <b>Select dataset</b>
+        </BCardTitle>
+        <div>
+            <BAlert v-if="errorMessage" show variant="danger">{{ errorMessage }}</BAlert>
+            <JaggedDataAlert :jaggedDataWarning="jaggedDataWarning" />
+            Select a history datasets, the contents will be loaded as tabular data and made available to the rule based
+            import utility.
+        </div>
+    </BCard>
+</template>
diff --git a/client/src/components/Collections/wizard/SelectFolder.vue b/client/src/components/Collections/wizard/SelectFolder.vue
new file mode 100644
index 000000000000..643cded78017
--- /dev/null
+++ b/client/src/components/Collections/wizard/SelectFolder.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { BFormGroup, BLink } from "bootstrap-vue";
+import { ref, watch } from "vue";
+
+import FilesInput from "@/components/FilesDialog/FilesInput.vue";
+
+interface Props {
+    ftpUploadSite?: string;
+}
+
+defineProps<Props>();
+
+const remoteUri = ref<string>("");
+
+const emit = defineEmits(["onChange", "onFtp"]);
+
+watch(remoteUri, (newValue: string) => {
+    emit("onChange", newValue);
+});
+</script>
+
+<template>
+    <div>
+        <BFormGroup
+            id="fieldset-directory"
+            label-for="directory"
+            :description="`Select a 'remote files' directory to import from.`"
+            class="mt-3">
+            <FilesInput id="directory" v-model="remoteUri" mode="directory" :require-writable="false" />
+        </BFormGroup>
+        <div v-if="ftpUploadSite">
+            Alternatively, <BLink @click="emit('onFtp')">click here to load your Galaxy FTP directory contents</BLink>.
+        </div>
+    </div>
+</template>
diff --git a/client/src/components/Collections/wizard/SourceFromCollection.vue b/client/src/components/Collections/wizard/SourceFromCollection.vue
new file mode 100644
index 000000000000..4c6098de7c38
--- /dev/null
+++ b/client/src/components/Collections/wizard/SourceFromCollection.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { BCard, BCardTitle } from "bootstrap-vue";
+
+import { borderVariant } from "@/components/Common/Wizard/utils";
+
+interface Props {
+    selected: boolean;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits(["select"]);
+</script>
+
+<template>
+    <BCard
+        data-import-source-from="collection"
+        class="wizard-selection-card"
+        :border-variant="borderVariant(selected)"
+        @click="emit('select', 'collection')">
+        <BCardTitle>
+            <b>An Existing Collection</b>
+        </BCardTitle>
+        <div>
+            The "Apply Rules" tool allows you to transform an existing collection using the same set of rules as can be
+            used to import new data.
+        </div>
+    </BCard>
+</template>
diff --git a/client/src/components/Collections/wizard/SourceFromDatasetAsTable.vue b/client/src/components/Collections/wizard/SourceFromDatasetAsTable.vue
new file mode 100644
index 000000000000..2a3b754de066
--- /dev/null
+++ b/client/src/components/Collections/wizard/SourceFromDatasetAsTable.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { BCard, BCardTitle } from "bootstrap-vue";
+
+import { borderVariant } from "@/components/Common/Wizard/utils";
+
+interface Props {
+    selected: boolean;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits(["select"]);
+</script>
+
+<template>
+    <BCard
+        data-import-source-from="dataset_as_table"
+        class="wizard-selection-card"
+        :border-variant="borderVariant(selected)"
+        @click="emit('select', 'dataset_as_table')">
+        <BCardTitle>
+            <b>Dataset As Table</b>
+        </BCardTitle>
+        <div>
+            This option lets you load a list of URIs or any sort of tabular data that can be transformed into a list of
+            URIs to describe the datasets and metadata to import from an existing Galaxy dataset.
+        </div>
+    </BCard>
+</template>
diff --git a/client/src/components/Collections/wizard/SourceFromPastedData.vue b/client/src/components/Collections/wizard/SourceFromPastedData.vue
new file mode 100644
index 000000000000..74a6bae7d01c
--- /dev/null
+++ b/client/src/components/Collections/wizard/SourceFromPastedData.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { BCard, BCardTitle } from "bootstrap-vue";
+
+import { borderVariant } from "@/components/Common/Wizard/utils";
+
+interface Props {
+    selected: boolean;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits(["select"]);
+</script>
+
+<template>
+    <BCard
+        data-import-source-from="pasted_table"
+        class="wizard-selection-card"
+        :border-variant="borderVariant(selected)"
+        @click="emit('select', 'pasted_table')">
+        <BCardTitle>
+            <b>Pasted Table</b>
+        </BCardTitle>
+        <div>
+            This option lets you just paste in a list of URLs/URIs or any sort of tabular data that can be transformed
+            into a list of URIs to describe the datasets and metadata to import.
+        </div>
+    </BCard>
+</template>
diff --git a/client/src/components/Collections/wizard/SourceFromRemoteFiles.vue b/client/src/components/Collections/wizard/SourceFromRemoteFiles.vue
new file mode 100644
index 000000000000..a0778ca7c64e
--- /dev/null
+++ b/client/src/components/Collections/wizard/SourceFromRemoteFiles.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { BCard, BCardTitle } from "bootstrap-vue";
+
+import { borderVariant } from "@/components/Common/Wizard/utils";
+
+interface Props {
+    selected: boolean;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits(["select"]);
+</script>
+
+<template>
+    <BCard
+        data-import-source-from="remote_files"
+        class="wizard-selection-card"
+        :border-variant="borderVariant(selected)"
+        @click="emit('select', 'remote_files')">
+        <BCardTitle>
+            <b>Remote Files</b>
+        </BCardTitle>
+        <div>This option lets you select a folder of file URIs from Galaxy's configured "remote file" sources.</div>
+    </BCard>
+</template>
diff --git a/client/src/components/Collections/wizard/types.ts b/client/src/components/Collections/wizard/types.ts
new file mode 100644
index 000000000000..070e00717397
--- /dev/null
+++ b/client/src/components/Collections/wizard/types.ts
@@ -0,0 +1,8 @@
+import { type components } from "@/api/schema";
+
+export type RulesCreatingWhat = "datasets" | "collections";
+export type RulesSourceFrom = "remote_files" | "pasted_table" | "dataset_as_table" | "collection";
+
+export type ListUriResponse = components["schemas"]["ListUriResponse"];
+export type RemoteFile = components["schemas"]["RemoteFile"];
+export type RemoteDirectory = components["schemas"]["RemoteDirectory"];
diff --git a/client/src/components/Collections/wizard/useFileSetSources.ts b/client/src/components/Collections/wizard/useFileSetSources.ts
new file mode 100644
index 000000000000..9d7bfcb35747
--- /dev/null
+++ b/client/src/components/Collections/wizard/useFileSetSources.ts
@@ -0,0 +1,45 @@
+import { type Ref, ref } from "vue";
+
+import { getRemoteEntriesAt } from "@/components/Upload/utils";
+
+import { type ListUriResponse, type RemoteDirectory, type RemoteFile } from "./types";
+
+export function useFileSetSources(isBusy: Ref<boolean>) {
+    const pasteData = ref<string[][]>([] as string[][]);
+    const tabularDatasetContents = ref<string[][]>([] as string[][]);
+    const uris = ref<RemoteFile[]>([]);
+
+    async function setRemoteFilesFolder(uri: string) {
+        isBusy.value = true;
+        const rawFiles = await getRemoteEntriesAt(uri);
+        if (rawFiles) {
+            const files: RemoteFile[] = (rawFiles as ListUriResponse).filter(
+                (file: RemoteFile | RemoteDirectory) => file["class"] == "File"
+            ) as RemoteFile[];
+            uris.value = files;
+        }
+        isBusy.value = false;
+    }
+
+    async function onFtp() {
+        setRemoteFilesFolder("gxftp://");
+    }
+
+    function setDatasetContents(contents: string[][]) {
+        tabularDatasetContents.value = contents;
+    }
+
+    function setPasteTable(newValue: string[][]) {
+        pasteData.value = newValue;
+    }
+
+    return {
+        pasteData,
+        tabularDatasetContents,
+        uris,
+        setRemoteFilesFolder,
+        onFtp,
+        setDatasetContents,
+        setPasteTable,
+    };
+}
diff --git a/client/src/components/Common/Wizard/GenericWizard.vue b/client/src/components/Common/Wizard/GenericWizard.vue
index 3a2d165dd015..b51e60df43ae 100644
--- a/client/src/components/Common/Wizard/GenericWizard.vue
+++ b/client/src/components/Common/Wizard/GenericWizard.vue
@@ -41,16 +41,32 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
     use: undefined,
-    title: "Generic Wizard",
+    title: undefined,
     submitButtonLabel: "Submit",
     isBusy: false,
 });
 
+function dynamicIsLast() {
+    if (props.use.isLast.value) {
+        return true;
+    }
+
+    let nextStepIndex = props.use.index.value + 1;
+    let nextStepName = props.use.stepNames.value.at(nextStepIndex);
+
+    while (nextStepName && props.use.steps.value[nextStepName]?.isSkippable()) {
+        nextStepIndex++;
+        nextStepName = props.use.stepNames.value.at(nextStepIndex);
+    }
+
+    return !nextStepName;
+}
+
 const emit = defineEmits(["submit"]);
 
 function goNext() {
     if (props.use.current.value.isValid()) {
-        if (props.use.isLast.value) {
+        if (dynamicIsLast()) {
             emit("submit");
         }
 
@@ -113,7 +129,7 @@ const stepsGridColumnsTemplate = computed(() => {
 
 <template>
     <BCard class="wizard-container">
-        <BCardTitle>
+        <BCardTitle v-if="title">
             <h2>{{ title }}</h2>
         </BCardTitle>
         <BCardBody v-if="props.use?.steps?.value" class="wizard">
@@ -130,7 +146,7 @@ const stepsGridColumnsTemplate = computed(() => {
                             :disabled="(!allStepsBeforeAreValid(i) && props.use.isBefore(id)) || isBusy"
                             @click="props.use.goTo(id)">
                             <FontAwesomeIcon v-if="isStepDone(i)" :icon="faCheck" />
-                            <FontAwesomeIcon v-else-if="props.use.isLast && isBusy" :icon="faSpinner" spin />
+                            <FontAwesomeIcon v-else-if="dynamicIsLast() && isBusy" :icon="faSpinner" spin />
                             <span v-else>{{ determineDisplayStepIndex(i) }}</span>
                         </button>
                         <div class="step-label" v-text="step.label" />
@@ -158,16 +174,16 @@ const stepsGridColumnsTemplate = computed(() => {
                 <button
                     class="go-next-btn"
                     :disabled="!props.use.current.value.isValid() || isBusy"
-                    :class="props.use.isLast.value ? 'btn-primary' : ''"
+                    :class="dynamicIsLast() ? 'btn-primary' : ''"
                     @click="goNext">
-                    {{ props.use.isLast.value ? submitButtonLabel : "Next" }}
+                    {{ dynamicIsLast() ? submitButtonLabel : "Next" }}
                 </button>
             </div>
         </BCardBody>
     </BCard>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
 @import "theme/blue.scss";
 
 .wizard {
diff --git a/client/src/components/Common/Wizard/utils.ts b/client/src/components/Common/Wizard/utils.ts
new file mode 100644
index 000000000000..7a817bcf3283
--- /dev/null
+++ b/client/src/components/Common/Wizard/utils.ts
@@ -0,0 +1,5 @@
+type BorderVariant = "primary" | "default";
+
+export function borderVariant(isPrimary: boolean): BorderVariant {
+    return isPrimary ? "primary" : "default";
+}
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index d34f8ee6f501..9e7880e29d95 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -4,9 +4,9 @@ import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
 import { computed, type ComputedRef, type PropType, type Ref, ref } from "vue";
-import { useRouter } from "vue-router/composables";
 
 import { useGlobalUploadModal } from "@/composables/globalUploadModal";
+import { useToolRouting } from "@/composables/route";
 import { type Tool, type ToolSection as ToolSectionType } from "@/stores/toolStore";
 import { useToolStore } from "@/stores/toolStore";
 import localize from "@/utils/localization";
@@ -19,7 +19,7 @@ import ToolSection from "./Common/ToolSection.vue";
 const SECTION_IDS_TO_EXCLUDE = ["expression_tools"]; // if this isn't the Workflow Editor panel
 
 const { openGlobalUploadModal } = useGlobalUploadModal();
-const router = useRouter();
+const { routeToTool } = useToolRouting();
 
 const emit = defineEmits<{
     (e: "update:show-advanced", showAdvanced: boolean): void;
@@ -143,8 +143,7 @@ function onToolClick(tool: Tool, evt: Event) {
         } else if (tool.form_style === "regular") {
             evt.preventDefault();
             // encode spaces in tool.id
-            const toolId = tool.id;
-            router.push(`/?tool_id=${encodeURIComponent(toolId)}&version=latest`);
+            routeToTool(tool.id);
         }
     } else {
         evt.preventDefault();
diff --git a/client/src/components/Upload/UploadContainer.vue b/client/src/components/Upload/UploadContainer.vue
index 7b918c349545..9922d1325adb 100644
--- a/client/src/components/Upload/UploadContainer.vue
+++ b/client/src/components/Upload/UploadContainer.vue
@@ -13,6 +13,7 @@ import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 
 import { canMutateHistory } from "@/api";
+import BuildFileSetWizard from "@/components/Collections/BuildFileSetWizard";
 import { useHistoryStore } from "@/stores/historyStore";
 import { useUploadStore } from "@/stores/uploadStore";
 import { uploadPayload } from "@/utils/upload-payload.js";
@@ -204,6 +205,19 @@ defineExpose({
                 :history-id="currentHistoryId"
                 v-on="$listeners" />
         </BTab>
+        <BTab
+            v-if="showRules"
+            id="rule-based-import"
+            title="Rule-based (beta)"
+            button-id="tab-title-link-rule-based-import"
+            no-body>
+            <BuildFileSetWizard
+                :file-sources-configured="fileSourcesConfigured"
+                :ftp-upload-site="currentUserId && ftpUploadSite"
+                :has-callback="hasCallback"
+                :history-id="currentHistoryId"
+                v-on="$listeners" />
+        </BTab>
         <DefaultBox
             v-if="showRegular || showCollection"
             v-show="regularTabActive || collectionTabActive"
diff --git a/client/src/components/Workflow/Invocation/Export/InvocationExportWizard.vue b/client/src/components/Workflow/Invocation/Export/InvocationExportWizard.vue
index 23c6d1d0c8dd..f9c6dcad3b38 100644
--- a/client/src/components/Workflow/Invocation/Export/InvocationExportWizard.vue
+++ b/client/src/components/Workflow/Invocation/Export/InvocationExportWizard.vue
@@ -4,6 +4,7 @@ import { computed, reactive, ref, watch } from "vue";
 
 import { GalaxyApi } from "@/api";
 import { useWizard } from "@/components/Common/Wizard/useWizard";
+import { borderVariant } from "@/components/Common/Wizard/utils";
 import {
     AVAILABLE_INVOCATION_EXPORT_PLUGINS,
     getInvocationExportPluginByType,
@@ -329,7 +330,7 @@ Examples of RDM repositories include [Zenodo](https://zenodo.org/), [Invenio RDM
                         :key="plugin.id"
                         :data-invocation-export-type="plugin.id"
                         class="wizard-selection-card"
-                        :border-variant="exportData.exportPluginFormat === plugin.id ? 'primary' : 'default'"
+                        :border-variant="borderVariant(exportData.exportPluginFormat)"
                         @click="exportData.exportPluginFormat = plugin.id">
                         <BCardTitle>
                             <b>{{ plugin.title }}</b>
@@ -352,7 +353,7 @@ Examples of RDM repositories include [Zenodo](https://zenodo.org/), [Invenio RDM
                         v-for="target in exportDestinationTargets"
                         :key="target.destination"
                         :data-invocation-export-destination="target.destination"
-                        :border-variant="exportData.destination === target.destination ? 'primary' : 'default'"
+                        :border-variant="borderVariant(exportData.destination === target.destination)"
                         :header-bg-variant="exportData.destination === target.destination ? 'primary' : 'default'"
                         :header-text-variant="exportData.destination === target.destination ? 'white' : 'default'"
                         :header="target.label"
diff --git a/client/src/composables/route.ts b/client/src/composables/route.ts
index d783f14a36a1..65775ac7f3b2 100644
--- a/client/src/composables/route.ts
+++ b/client/src/composables/route.ts
@@ -1,6 +1,6 @@
 import { type MaybeRefOrGetter, toValue } from "@vueuse/core";
 import { computed } from "vue";
-import { useRoute } from "vue-router/composables";
+import { useRoute, useRouter } from "vue-router/composables";
 
 /** use a route query parameter as a boolean computed */
 export function useRouteQueryBool(
@@ -26,3 +26,12 @@ export function useRouteQueryNumber(parameter: MaybeRefOrGetter<string>, default
         }
     });
 }
+
+export function useToolRouting() {
+    const router = useRouter();
+
+    function routeToTool(toolId: string) {
+        router.push(`/?tool_id=${encodeURIComponent(toolId)}&version=latest`);
+    }
+    return { routeToTool };
+}