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

This aims to fix all of the issues here: Fixes #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.

Author: ahmedhamidawan

client/src/components/Collections/ListCollectionCreator.vue

@@ -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

@@ -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

@@ -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

@@ -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>
 
-        <GButton class="create-collection" color="blue" :disabled="!validInput" @click="emit('clicked-create')">
-            {{ localize("Create " + shortWhatIsBeingCreated) }}
-        </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

@@ -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: