Skip to content

Commit

Permalink
Merge pull request #19373 from jmchilton/upload_tab_optional
Browse files Browse the repository at this point in the history 
[24.2] Fix to not display upload when creating collections from existing datasets.
  • Loading branch information
@jmchilton
jmchilton authored Jan 9, 2025
2 parents 3c9f126 + 9023ef3 commit fed368f
Show file tree
Hide file tree
Showing 10 changed files with 334 additions and 140 deletions.
1 change: 1 addition & 0 deletions client/src/components/Collections/ListCollectionCreator.vue
View file
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
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
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
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 { useUserStore } from "@/stores/userStore";
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 Down Expand Up @@ -40,12 +46,14 @@ interface Props {
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 @@ const emit = defineEmits<{
(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 @@ function addUploadedFiles(value: HDASummary[]) {
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 @@ watch(
</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
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

0 comments on commit fed368f

Please sign in to comment.