Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[24.2] Fix to not display upload when creating collections from existing datasets. #19373

Merged
merged 8 commits into from
Jan 9, 2025
Merged

[24.2] Fix to not display upload when creating collections from existing datasets. #19373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5229449
Refactor collection name input out of CollectionCreator.
jmchilton Dec 22, 2024
e6742ed
Refactor the source options out of collection creator.
jmchilton Dec 22, 2024
40eb1d9
Refactor collection creator help out to simplify.
jmchilton Dec 22, 2024
df03361
Refactor showing of extensions into own component.
jmchilton Dec 22, 2024
d206720
Refactor collection creator footer buttons into a component.
jmchilton Dec 22, 2024
1bbe39c
Refactor no items message out of collection creator for reuse.
jmchilton Dec 22, 2024
b2e2053
Don't show upload files option when selecting datasets.
jmchilton Dec 22, 2024
9023ef3
Update client/src/components/Collections/common/CollectionCreator.vue
jmchilton Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions client/src/components/Collections/ListCollectionCreator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -414,6 +414,7 @@ function renameElement(element: any, name: string) {
:extensions="extensions"
collection-type="list"
:no-items="props.initialElements.length == 0 && !props.fromSelection"
:show-upload="!fromSelection"
@add-uploaded-files="addUploadedFiles"
@on-update-datatype-toggle="changeDatatypeFilter"
@onUpdateHideSourceItems="onUpdateHideSourceItems"
Expand Down
1 change: 1 addition & 0 deletions client/src/components/Collections/PairCollectionCreator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,6 +376,7 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
:extensions-toggle="removeExtensions"
collection-type="paired"
:no-items="props.initialElements.length == 0 && !props.fromSelection"
:show-upload="!fromSelection"
@add-uploaded-files="addUploadedFiles"
@onUpdateHideSourceItems="onUpdateHideSourceItems"
@clicked-create="clickedCreate"
Expand Down
1 change: 1 addition & 0 deletions client/src/components/Collections/PairedListCollectionCreator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -881,6 +881,7 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
:extensions="extensions"
collection-type="list:paired"
:no-items="props.initialElements.length == 0 && !props.fromSelection"
:show-upload="!fromSelection"
@add-uploaded-files="addUploadedFiles"
@onUpdateHideSourceItems="hideSourceItems = $event"
@clicked-create="clickedCreate"
Expand Down
248 changes: 108 additions & 140 deletions client/src/components/Collections/common/CollectionCreator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { faChevronDown, faChevronUp, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
import { faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { BAlert, BButton, BFormCheckbox, BFormGroup, BFormInput, BLink, BTab, BTabs } from "bootstrap-vue";
import { BAlert, BTab, BTabs } from "bootstrap-vue";
import { storeToRefs } from "pinia";
import { computed, ref, watch } from "vue";

Expand All @@ -13,6 +13,12 @@
import localize from "@/utils/localization";
import { orList } from "@/utils/strings";

import CollectionCreatorFooterButtons from "./CollectionCreatorFooterButtons.vue";
import CollectionCreatorHelpHeader from "./CollectionCreatorHelpHeader.vue";
import CollectionCreatorNoItemsMessage from "./CollectionCreatorNoItemsMessage.vue";
import CollectionCreatorShowExtensions from "./CollectionCreatorShowExtensions.vue";
import CollectionCreatorSourceOptions from "./CollectionCreatorSourceOptions.vue";
import CollectionNameInput from "./CollectionNameInput.vue";
import HelpText from "@/components/Help/HelpText.vue";
import DefaultBox from "@/components/Upload/DefaultBox.vue";

Expand All @@ -39,13 +45,15 @@
extensions?: string[];
extensionsToggle?: boolean;
noItems?: boolean;
collectionType?: string;

Check warning on line 48 in client/src/components/Collections/common/CollectionCreator.vue

View workflow job for this annotation

GitHub Actions / client-unit-test (18) 

Prop 'collectionType' requires default value to be set
showUpload: boolean;
}

const props = withDefaults(defineProps<Props>(), {
suggestedName: "",
extensions: undefined,
extensionsToggle: false,
showUpload: true,
});

const emit = defineEmits<{
Expand All @@ -56,7 +64,6 @@
(e: "add-uploaded-files", value: HDASummary[]): void;
}>();

const isExpanded = ref(false);
const currentTab = ref(Tabs.create);
const collectionName = ref(props.suggestedName);
const localHideSourceItems = ref(props.hideSourceItems);
Expand Down Expand Up @@ -122,15 +129,14 @@
emit("add-uploaded-files", value);
}

function clickForHelp() {
isExpanded.value = !isExpanded.value;
return isExpanded.value;
}

function cancelCreate() {
props.oncancel();
}

function removeExtensionsToggle() {
emit("remove-extensions-toggle");
}

async function loadExtensions() {
listExtensions.value = await getUploadDatatypes(false, AUTO_EXTENSION);
extensionsSet.value = true;
Expand All @@ -147,157 +153,119 @@
</script>

<template>
<BTabs v-model="currentTab" fill justified>
<BTab class="collection-creator" :title="localize('Create Collection')">
<span>
<span v-if="!showUpload" class="collection-creator">
<div v-if="props.noItems">
<BAlert variant="info" show>
{{ localize("No items available to create a collection.") }}
{{ localize("Exit and change your current history, or") }}
<BLink class="text-decoration-none" @click.stop.prevent="currentTab = Tabs.upload">
{{ localize("Upload some datasets.") }}
</BLink>
</BAlert>
<CollectionCreatorNoItemsMessage @click-upload="currentTab = Tabs.upload" />
</div>
<div v-else>
<div class="header flex-row no-flex">
<div class="main-help well clear" :class="{ expanded: isExpanded }">
<a
class="more-help"
href="javascript:void(0);"
role="button"
:title="localize('Expand or Close Help')"
@click="clickForHelp">
<div v-if="!isExpanded">
<FontAwesomeIcon :icon="faChevronDown" />
<span class="sr-only">{{ localize("Expand Help") }}</span>
</div>
<div v-else>
<FontAwesomeIcon :icon="faChevronUp" />
<span class="sr-only">{{ localize("Close Help") }}</span>
</div>
</a>

<div class="help-content">
<!-- each collection that extends this will add their own help content -->
<slot name="help-content"></slot>

<a
class="more-help"
href="javascript:void(0);"
role="button"
:title="localize('Expand or Close Help')"
@click="clickForHelp">
<span class="sr-only">{{ localize("Expand Help") }}</span>
</a>
</div>
</div>
</div>
<CollectionCreatorHelpHeader>
<slot name="help-content"></slot>
</CollectionCreatorHelpHeader>

<div class="middle flex-row flex-row-container">
<slot name="middle-content"></slot>
</div>

<div class="footer flex-row">
<div class="vertically-spaced">
<div class="d-flex align-items-center justify-content-between">
<BAlert v-if="extensions?.length" class="w-100 py-0" variant="secondary" show>
<HelpText
uri="galaxy.collections.collectionBuilder.filteredExtensions"
:text="localize('Filtered extensions: ')" />
<strong>{{ orList(extensions) }}</strong>
</BAlert>
</div>
<CollectionCreatorShowExtensions :extensions="extensions" />

<div class="d-flex align-items-center justify-content-between">
<BFormGroup class="inputs-form-group">
<BFormCheckbox
v-if="renderExtensionsToggle"
name="remove-extensions"
switch
:checked="extensionsToggle"
@input="emit('remove-extensions-toggle')">
{{ localize("Remove file extensions?") }}
</BFormCheckbox>

<div data-description="hide original elements">
<BFormCheckbox v-model="localHideSourceItems" name="hide-originals" switch>
<HelpText
uri="galaxy.collections.collectionBuilder.hideOriginalElements"
:text="localize('Hide original elements')" />
</BFormCheckbox>
</div>
</BFormGroup>

<BFormGroup
class="flex-gapx-1 d-flex align-items-center w-50 inputs-form-group"
:label="localize('Name:')"
label-for="collection-name">
<BFormInput
id="collection-name"
v-model="collectionName"
class="collection-name"
:placeholder="localize('Enter a name for your new ' + shortWhatIsBeingCreated)"
size="sm"
required
:state="!collectionName ? false : null" />
</BFormGroup>
<CollectionCreatorSourceOptions
v-model="localHideSourceItems"
:render-extensions-toggle="renderExtensionsToggle"
:extensions-toggle="extensionsToggle"
@remove-extensions-toggle="removeExtensionsToggle" />
<CollectionNameInput
v-model="collectionName"
:short-what-is-being-created="shortWhatIsBeingCreated" />
</div>
</div>

<div class="actions vertically-spaced d-flex justify-content-between">
<BButton tabindex="-1" @click="cancelCreate">
{{ localize("Cancel") }}
</BButton>

<BButton
class="create-collection"
variant="primary"
:disabled="!validInput"
@click="emit('clicked-create', collectionName)">
{{ localize("Create " + shortWhatIsBeingCreated) }}
</BButton>
</div>
<CollectionCreatorFooterButtons
:short-what-is-being-created="shortWhatIsBeingCreated"
:valid-input="validInput"
@clicked-cancel="cancelCreate"
@clicked-create="emit('clicked-create', collectionName)" />
</div>
</div>
</BTab>
<BTab>
<template v-slot:title>
<FontAwesomeIcon :icon="faUpload" fixed-width />
<span>{{ localize("Upload Files to Add to Collection") }}</span>
</template>
<!-- TODO: This is incomplete; need to return uploadValues to parent -->
<DefaultBox
v-if="configOptions && extensionsSet"
:chunk-upload-size="configOptions.chunkUploadSize"
:default-db-key="configOptions.defaultDbKey"
:default-extension="defaultExtension"
:effective-extensions="props.extensions?.length ? validExtensions : listExtensions"
:file-sources-configured="configOptions.fileSourcesConfigured"
:ftp-upload-site="ftpUploadSite"
:has-callback="false"
:history-id="historyId"
:list-db-keys="[]"
disable-footer
emit-uploaded
@uploaded="addUploadedFiles"
@dismiss="currentTab = Tabs.create">
<template v-slot:footer>
<div class="d-flex align-items-center justify-content-between mt-2">
<BAlert v-if="extensions?.length" class="w-100 py-0" variant="secondary" show>
<HelpText
uri="galaxy.collections.collectionBuilder.requiredUploadExtensions"
:text="localize('Required extensions: ')" />
<strong>{{ orList(extensions) }}</strong>
</BAlert>
</span>
<BTabs v-else v-model="currentTab" fill justified>
<BTab class="collection-creator" :title="localize('Create Collection')">
<div v-if="props.noItems">
<CollectionCreatorNoItemsMessage @click-upload="currentTab = Tabs.upload" />
</div>
<div v-else>
<CollectionCreatorHelpHeader>
<slot name="help-content"></slot>
</CollectionCreatorHelpHeader>

<div class="middle flex-row flex-row-container">
<slot name="middle-content"></slot>
</div>

<div class="footer flex-row">
<div class="vertically-spaced">
<CollectionCreatorShowExtensions :extensions="extensions" />

<div class="d-flex align-items-center justify-content-between">
<CollectionCreatorSourceOptions
v-model="localHideSourceItems"
:render-extensions-toggle="renderExtensionsToggle"
:extensions-toggle="extensionsToggle" />
<CollectionNameInput
v-model="collectionName"
:short-what-is-being-created="shortWhatIsBeingCreated" />
</div>
</div>

<CollectionCreatorFooterButtons
:short-what-is-being-created="shortWhatIsBeingCreated"
:valid-input="validInput"
@clicked-cancel="cancelCreate"
@clicked-create="emit('clicked-create', collectionName)" />
</div>
</div>
</BTab>
<BTab>
<template v-slot:title>
<FontAwesomeIcon :icon="faUpload" fixed-width />
<span>{{ localize("Upload Files to Add to Collection") }}</span>
</template>
<template v-slot:emit-btn-txt>
<FontAwesomeIcon :icon="faPlus" fixed-width />
{{ localize("Add Uploaded") }}
</template>
</DefaultBox>
</BTab>
</BTabs>
<DefaultBox
v-if="configOptions && extensionsSet"
:chunk-upload-size="configOptions.chunkUploadSize"
:default-db-key="configOptions.defaultDbKey"
:default-extension="defaultExtension"
:effective-extensions="props.extensions?.length ? validExtensions : listExtensions"
:file-sources-configured="configOptions.fileSourcesConfigured"
:ftp-upload-site="ftpUploadSite"
:has-callback="false"
:history-id="historyId"
:list-db-keys="[]"
disable-footer
emit-uploaded
@uploaded="addUploadedFiles"
@dismiss="currentTab = Tabs.create">
<template v-slot:footer>
<div class="d-flex align-items-center justify-content-between mt-2">
<BAlert v-if="extensions?.length" class="w-100 py-0" variant="secondary" show>
<HelpText
uri="galaxy.collections.collectionBuilder.requiredUploadExtensions"
:text="localize('Required extensions: ')" />
<strong>{{ orList(extensions) }}</strong>
</BAlert>
</div>
</template>
<template v-slot:emit-btn-txt>
<FontAwesomeIcon :icon="faPlus" fixed-width />
{{ localize("Add Uploaded") }}
</template>
</DefaultBox>
</BTab>
</BTabs>
</span>
</template>

<style lang="scss">
Expand Down
27 changes: 27 additions & 0 deletions client/src/components/Collections/common/CollectionCreatorFooterButtons.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<script setup lang="ts">
import localize from "@/utils/localization";

interface Props {
validInput: boolean;
shortWhatIsBeingCreated: string;
}

defineProps<Props>();

const emit = defineEmits<{
(e: "clicked-create"): void;
(e: "clicked-cancel"): void;
}>();
</script>

<template>
<div class="actions vertically-spaced d-flex justify-content-between">
<BButton tabindex="-1" @click="emit('clicked-cancel')">
{{ localize("Cancel") }}
</BButton>

<BButton class="create-collection" variant="primary" :disabled="!validInput" @click="emit('clicked-create')">
{{ localize("Create " + shortWhatIsBeingCreated) }}
</BButton>
</div>
</template>
Loading
Loading