Commit 3e226aea authored by Ahmed Awan's avatar Ahmed Awan
Browse files

use text only collection element; fix rename bug; add rename modal 

This aims to fix all of the issues here: Fixes https://github.com/galaxyproject/galaxy/issues/20441

Using the default text-only value for the slot in `FormSelectMany` works best as it prevents layout shifting on hover/focused states.

This commit also fixes a bug with the `renameElement` function, which would create a duplicate of the renamed element (1 in `inListElements`, 1 in `workingElements` upon rename).

This adds a modal where the user can choose to rename elements if they'd like, instead of renaming the elements inside the multi select; which is not intuitive and can also interfere with clicking an element to select it.
parent 70891f68

client/src/components/Collections/ListCollectionCreator.vue

+69 −9
Original line number Diff line number Diff line
@@ -18,6 +18,7 @@ import { type Mode, useCollectionCreator } from "./common/useCollectionCreator"; 


import GButton from "../BaseComponents/GButton.vue";

import GButtonGroup from "../BaseComponents/GButtonGroup.vue";

import GModal from "../BaseComponents/GModal.vue";

import FormSelectMany from "../Form/Elements/FormSelectMany/FormSelectMany.vue";

import HelpText from "../Help/HelpText.vue";

import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
@@ -343,12 +344,39 @@ function addUploadedFiles(files: HDASummary[]) { 
    });

}



/** If we are creating a collection from a history (not a pre-selection of elements),

 * once we have some selected elements, we provide an option to rename them in a modal.

 */

const canRenameElements = computed(() => {

    return !props.fromSelection && inListElements.value.length > 0;

});

/** A toggle for the modal that allows renaming elements in the selected list */

const renamingElements = ref(false);

/** find the element in the workingElements array and update its name */

function renameElement(element: any, name: string) {

    // We do this whole process of removing and readding because inListElements

    // might be reacting to changes in workingElements, and we want to

    // prevent that from causing issues with producing duplicate elements in either list:



    // first check at what index of inlistElements the element is

    const index = inListElements.value.findIndex((e) => e.id === element.id);

    if (index < 0) {

        return;

    }



    // remove from inListElements

    inListElements.value = inListElements.value.filter((e) => e.id !== element.id);



    // then find the element in workingElements, and rename it

    element = workingElements.value.find((e) => e.id === element.id);

    if (element) {

        element.name = name;

    }



    // now add again to inListElements at same index

    if (index >= 0) {

        inListElements.value.splice(index, 0, element);

    }

}



function selectionAsHdaSummary(value: any): HDASummary {
@@ -413,11 +441,13 @@ function selectionAsHdaSummary(value: any): HDASummary { 
                :show-buttons="showButtonsForModal"

                :collection-name="collectionName"

                :mode="mode"

                :can-rename-elements="canRenameElements"

                @on-update-collection-name="onUpdateCollectionName"

                @add-uploaded-files="addUploadedFiles"

                @on-update-datatype-toggle="changeDatatypeFilter"

                @onUpdateHideSourceItems="onUpdateHideSourceItems"

                @remove-extensions-toggle="removeExtensionsToggle"

                @clicked-rename="renamingElements = true"

                @clicked-create="attemptCreate">

                <template v-slot:help-content>

                    <p>
@@ -443,7 +473,7 @@ function selectionAsHdaSummary(value: any): HDASummary { 
                        <li v-if="!fromSelection">

                            The filter textbox can be used to rapidly find the datasets of interest by name.

                        </li>

                        <li>

                        <li v-if="fromSelection">

                            {{ localize("Change the identifier of elements in the list by clicking on") }}

                            <i data-target=".collection-element .name">

                                {{ localize("the existing name") }}
@@ -520,6 +550,21 @@ function selectionAsHdaSummary(value: any): HDASummary { 
                        </i>

                        {{ localize(".") }}

                    </p>



                    <p v-if="!fromSelection">

                        <strong>

                            {{ localize("Optional:") }}

                        </strong>

                        {{

                            localize(

                                "Once you have made your selection, if you wish to rename the elements in the list, click"

                            )

                        }}

                        <i data-target=".rename-elements">

                            {{ localize("Rename list elements") }}

                        </i>

                        {{ localize(". This opens a modal where you can rename the elements individually.") }}

                    </p>

                </template>



                <template v-slot:middle-content>
@@ -669,14 +714,28 @@ function selectionAsHdaSummary(value: any): HDASummary { 
                        :options="workingElements.map((e) => ({ label: e.name || '', value: e }))">

                        <template v-slot:label-area="{ value }">

                            <DatasetCollectionElementView

                                class="w-100"

                                text-only

                                not-editable

                                :element="selectionAsHdaSummary(value)"

                                :hide-extension="!showElementExtension"

                                @onRename="(name) => renameElement(value, name)" />

                                :hide-extension="!showElementExtension" />

                        </template>

                    </FormSelectMany>

                </template>

            </CollectionCreator>



            <GModal

                class="rename-elements-modal"

                :show.sync="renamingElements"

                size="small"

                title="Click on dataset names to rename them">

                <DatasetCollectionElementView

                    v-for="value in inListElements"

                    :key="value.id"

                    class="w-100"

                    :element="selectionAsHdaSummary(value)"

                    :hide-extension="!showElementExtension"

                    @onRename="(name) => renameElement(value, name)" />

            </GModal>

        </div>

    </div>

</template>
@@ -686,6 +745,12 @@ function selectionAsHdaSummary(value: any): HDASummary { 
@import "theme/blue.scss";



.list-collection-creator {

    .rename-elements-modal {

        .collection-element {

            cursor: unset;

        }

    }



    .footer {

        margin-top: 8px;

    }
@@ -732,11 +797,6 @@ function selectionAsHdaSummary(value: any): HDASummary { 
                border-color: black;

            }

        }

        &:not(.with-actions) {

            &:hover {

                border: none;

            }

        }



        &:last-of-type {

            margin-bottom: 2px;

client/src/components/Collections/ListDatasetCollectionElementView.vue

+4 −2
Original line number Diff line number Diff line
@@ -15,6 +15,7 @@ interface Props { 
    notEditable?: boolean;

    hideExtension?: boolean;

    showHid?: boolean;

    textOnly?: boolean;

}



const props = defineProps<Props>();
@@ -45,10 +46,11 @@ watch( 


<template>

    <div

        class="collection-element d-flex justify-content-between"

        class="d-flex justify-content-between"

        :data-hid="element.hid"

        :class="{ 'with-actions': hasActions }"

        :class="{ 'collection-element': !textOnly, 'with-actions': hasActions }"

        role="button"

        data-description="list dataset collection element"

        tabindex="0"

        @keyup.enter="emit('element-is-selected', element)"

        @click="emit('element-is-selected', element)">

client/src/components/Collections/common/CollectionCreator.vue

+6 −1
Original line number Diff line number Diff line
@@ -36,6 +36,7 @@ interface Props { 
    showButtons?: boolean;

    collectionName: string;

    mode: "wizard" | "modal";

    canRenameElements?: boolean;

}



const props = withDefaults(defineProps<Props>(), {
@@ -46,12 +47,14 @@ const props = withDefaults(defineProps<Props>(), { 
    collectionType: undefined,

    showButtons: true,

    mode: "modal",

    canRenameElements: false,

});



const emit = defineEmits<{

    (e: "on-update-collection-name", name: string): void;

    (e: "remove-extensions-toggle"): void;

    (e: "clicked-create", value: string): void;

    (e: "clicked-rename"): void;

    (e: "onUpdateHideSourceItems", value: boolean): void;

    (e: "on-update-datatype-toggle", value: "all" | "datatype" | "ext"): void;

    (e: "add-uploaded-files", value: HDASummary[]): void;
@@ -196,9 +199,11 @@ watch( 
                        <CollectionCreatorFooterButtons

                            v-if="showButtons"

                            :short-what-is-being-created="shortWhatIsBeingCreated"

                            :can-rename-elements="props.canRenameElements"

                            :valid-input="validInput"

                            @clicked-cancel="cancelCreate"

                            @clicked-create="emit('clicked-create', collectionName)" />

                            @clicked-create="emit('clicked-create', collectionName)"

                            @clicked-rename="emit('clicked-rename')" />

                    </div>

                </div>

            </BTab>

client/src/components/Collections/common/CollectionCreatorFooterButtons.vue

+15 −3
Original line number Diff line number Diff line
@@ -6,12 +6,14 @@ import GButton from "@/components/BaseComponents/GButton.vue"; 
interface Props {

    validInput: boolean;

    shortWhatIsBeingCreated: string;

    canRenameElements?: boolean;

}



defineProps<Props>();



const emit = defineEmits<{

    (e: "clicked-create"): void;

    (e: "clicked-rename"): void;

    (e: "clicked-cancel"): void;

}>();

</script>
@@ -22,8 +24,18 @@ const emit = defineEmits<{ 
            {{ localize("Cancel") }}

        </GButton>



        <span>

            <GButton

                v-if="canRenameElements"

                class="rename-elements"

                size="small"

                :disabled="!validInput"

                @click="emit('clicked-rename')">

                {{ localize("Rename " + shortWhatIsBeingCreated) + " elements" }}

            </GButton>

            <GButton class="create-collection" color="blue" :disabled="!validInput" @click="emit('clicked-create')">

                {{ localize("Create " + shortWhatIsBeingCreated) }}

            </GButton>

        </span>

    </div>

</template>

client/src/utils/navigation/navigation.yml

+1 −1
Original line number Diff line number Diff line
@@ -729,7 +729,7 @@ workflow_run: 
        _: '[data-label="${label}"] .tabs'

        create: '${_} .create-collection'

        select_all: "${_} [data-description='select many select all']"

        element_by_hid: "${_} .collection-element[data-hid='${hid}']"

        element_by_hid: "${_} [data-description='list dataset collection element'][data-hid='${hid}']"

        <<: *upload_mixin



  form_element: