Merge pull request #14049 from ahmedhamidawan/Dataset_info_freeze_#13888 (072d3c18) · Commits · NDIP / Galaxy

client/src/components/JobInformation/JobOutputs.test.js

+46 −0

Original line number	Diff line number	Diff line
		@@ -46,4 +46,50 @@ describe("JobInformation/JobOutputs.vue", () => {
		// should contain 2 rows, header + 1 collection + 1 hda
		expect(rows.length).toBe(3);
		});

		it("displays a table with 15 visible job outputs (paginated)", async () => {
		const propsData = {
		jobOutputs: {
		a: [{ label: "a", value: { id: "1", src: "hda" } }],
		b: [{ label: "b", value: { id: "2", src: "hda" } }],
		c: [{ label: "c", value: { id: "3", src: "hda" } }],
		d: [{ label: "d", value: { id: "4", src: "hda" } }],
		e: [{ label: "e", value: { id: "5", src: "hda" } }],
		f: [{ label: "f", value: { id: "6", src: "hda" } }],
		g: [{ label: "g", value: { id: "7", src: "hda" } }],
		h: [{ label: "h", value: { id: "8", src: "hda" } }],
		i: [{ label: "i", value: { id: "9", src: "hda" } }],
		j: [{ label: "j", value: { id: "10", src: "hda" } }],
		k: [{ label: "k", value: { id: "11", src: "hda" } }],
		l: [{ label: "l", value: { id: "12", src: "hda" } }],
		m: [{ label: "m", value: { id: "13", src: "hda" } }],
		n: [{ label: "n", value: { id: "14", src: "hda" } }],
		o: [{ label: "o", value: { id: "15", src: "hda" } }],
		},
		title: "Job Outputs",
		paginate: true,
		};
		wrapper = shallowMount(JobOutputs, {
		propsData,
		});
		// ---- Before all remaining outputs are paginated: ----
		// heading should exist and include count (due to pagination)
		expect(wrapper.find("h3").text()).toContain("(showing 10 of " + Object.keys(propsData.jobOutputs).length + ")");
		jobOutputsTable = wrapper.find("#job-outputs");
		// table should exist
		expect(jobOutputsTable).toBeTruthy();
		let rows = jobOutputsTable.findAll("tr");
		// should initially contain a header and 11 rows (10 items + a button)
		expect(rows.length).toBe(12);
		// ---- Click button, remaining 5 outputs should be displayed ----
		expect(wrapper.find("#paginate-btn").exists()).toEqual(true);
		await wrapper.find("#paginate-btn").trigger("click");
		jobOutputsTable = wrapper.find("#job-outputs");
		rows = jobOutputsTable.findAll("tr");
		// should now contain a header and 15 rows (all 15 items and no button)
		expect(rows.length).toBe(16);
		expect(wrapper.find("#paginate-btn").exists()).toEqual(false);
		// heading reverts to original value of title (as all ouputs are paginated)
		expect(wrapper.find("h3").text()).toBe("Job Outputs");
		});
		});

client/src/components/JobInformation/JobOutputs.vue

+31 −2

Original line number	Diff line number	Diff line
		<template>
		<div>
		<h3 v-if="title">{{ title }}</h3>
		<h3 v-if="title">
		{{ title }}
		<span v-if="paginate && totalLength > firstN"> (showing {{ firstN }} of {{ totalLength }}) </span>
		</h3>
		<table id="job-outputs" class="tabletip info_data_table">
		<thead>
		<tr>
		@@ -21,6 +24,13 @@
		:item-src="item.value.src" />
		</td>
		</tr>
		<tr v-if="paginate && totalLength > firstN">
		<td colspan="2">
		<b-button id="paginate-btn" block variant="secondary" @click="firstN += 10">
		Show {{ totalLength - firstN >= 10 ? 10 : totalLength - firstN }} more outputs
		</b-button>
		</td>
		</tr>
		</tbody>
		</table>
		</div>
		@@ -39,10 +49,29 @@ export default {
		type: String,
		required: false,
		},
		paginate: {
		type: Boolean,
		default: false,
		},
		},
		data() {
		return {
		firstN: 10,
		};
		},
		computed: {
		entries() {
		return Object.entries(this.jobOutputs).filter(([key, value]) => !key.startsWith("__"));
		},
		nonHiddenOutputs() {
		return Object.fromEntries(Object.entries(this.jobOutputs).filter(([key, value]) => !key.startsWith("__")));
		if (this.paginate) {
		return Object.fromEntries(this.entries.slice(0, this.firstN));
		} else {
		return Object.fromEntries(this.entries);
		}
		},
		totalLength() {
		return this.entries.length;
		},
		},
		};

client/src/components/JobParameters/JobParameters.vue

+1 −1

Original line number	Diff line number	Diff line
		@@ -40,7 +40,7 @@
		</td>
		</div>
		<br />
		<job-outputs :job-outputs="outputs" :title="`Job Outputs`" />
		<job-outputs :job-outputs="outputs" paginate :title="`Job Outputs`" />
		</div>
		</template>