[ZEPPELIN-4407] Add copy to clipboard (TSV/CSV) for table results

[kkalyan]

What is this PR for?

I've seen users downloading CSV and opening in spreadsheet viewer and copying the text.
Adding way to copy CSV/TSV directly. This is orginally implemented by @amakaur #3496 but it was closed due to lack of tests. I'm picking it up now.

Changes

Angular UI (zeppelin-web-angular)

• result.component — paragraph toolbar dropdown: renamed existing items to "Download as CSV/TSV", added divider, then "Copy as TSV" and "Copy as CSV"
• table-visualization.component — inner table Export menu: added "Copy all data as TSV/CSV" and "Copy visible data as TSV/CSV" (mirrors the existing "Export visible" scope)

Classic AngularJS UI (zeppelin-web)

• result-chart-selector.html — same dropdown restructure: Download / divider / Copy
• result.controller.js — new $scope.copyToClipboard(delimiter) function

Behaviour

• Header row (column names) is always included in the copied text
• Cell values containing the delimiter, double-quotes, or newlines are RFC 4180 quoted
• Uses navigator.clipboard.writeText with a document.execCommand('copy') fallback for older browsers

What type of PR is it?

Feature

What is the Jira issue?

https://issues.apache.org/jira/browse/ZEPPELIN-4407

How should this be tested?

1. Run a paragraph that outputs a TABLE (e.g. %sh printf "col1\tcol2\na\t1\nb\t2\n")
2. Click the ▾ next to the download button in the paragraph toolbar
3. Verify the menu shows: Download as CSV, Download as TSV, (divider), Copy as TSV, Copy as CSV
4. Click Copy as TSV → paste into a spreadsheet app or text editor — expect headers + rows, tab-delimited
5. Click Copy as CSV → paste → expect headers + rows, comma-delimited
6. Test with a cell value containing a comma, e.g. "hello, world" → the CSV copy should quote it correctly

Tests

• Classic UI (Karma/Jasmine): zeppelin-web/src/app/notebook/paragraph/result/result.controller.test.js — 4 new specs covering TSV copy, CSV copy, delimiter quoting, and double-quote escaping
• Angular UI (Playwright E2E): zeppelin-web-angular/e2e/tests/notebook/paragraph/copy-to-clipboard.spec.ts — 3 new specs (skipped on CI, require a live interpreter)

Questions

• Does the license file need update? No
• Is there a breaking change for older versions? No — existing Download as CSV/TSV behaviour is unchanged
• Does this need documentation? No

screenshots

[tbonelee]

Thanks for the suggestion.
Overall logics looks good to me, and I only left a few feedbacks.
You could also add a test cases which handles double quote delimiter in both zeppelin-web and zeppelin-web-angular

[tbonelee]

Suggested change

	navigator.clipboard.writeText(text).catch(() => {
	const el = document.createElement('textarea');
	el.value = text;
	el.style.position = 'absolute';
	el.style.left = '-9999px';
	document.body.appendChild(el);
	el.select();
	document.execCommand('copy');
	document.body.removeChild(el);
	});
	// TODO: Refactor the duplicated copy-to-clipboard logics
	const fallbackCopy = () => {
	const el = document.createElement('textarea');
	el.value = text;
	el.style.position = 'absolute';
	el.style.left = '-9999px';
	document.body.appendChild(el);
	el.select();
	document.execCommand('copy');
	document.body.removeChild(el);
	};
	// navigator.clipboard is undefined in non-secure contexts (e.g. plain HTTP),
	// where writeText would throw synchronously before the catch could run.
	if (navigator.clipboard) {
	navigator.clipboard.writeText(text).catch(fallbackCopy);
	} else {
	fallbackCopy();
	}

[kkalyan]

Done — extracted fallbackCopy as a named function and added the if (navigator.clipboard) guard before calling writeText, so the fallback triggers correctly in non-HTTPS contexts too. Applied the same pattern to both result.component.ts and table-visualization.component.ts.

[tbonelee]

Suggested change

	navigator.clipboard.writeText(text).catch(() => {
	const el = document.createElement('textarea');
	el.value = text;
	el.style.position = 'absolute';
	el.style.left = '-9999px';
	document.body.appendChild(el);
	el.select();
	document.execCommand('copy');
	document.body.removeChild(el);
	});
	// TODO: Refactor the duplicated copy-to-clipboard logics
	const fallbackCopy = () => {
	const el = document.createElement('textarea');
	el.value = text;
	el.style.position = 'absolute';
	el.style.left = '-9999px';
	document.body.appendChild(el);
	el.select();
	document.execCommand('copy');
	document.body.removeChild(el);
	};
	// navigator.clipboard is undefined in non-secure contexts (e.g. plain HTTP),
	// where writeText would throw synchronously before the catch could run.
	if (navigator.clipboard) {
	navigator.clipboard.writeText(text).catch(fallbackCopy);
	} else {
	fallbackCopy();
	}

[kkalyan]

Done — same change applied here in table-visualization.component.ts: extracted fallbackCopy and added the navigator.clipboard existence guard.

[tbonelee]

We should escape not only the row value but the header value also. You could extract the escape function inside the closure and use that for this.

[kkalyan]

Fixed — extracted an escape() closure that is now shared by both the header row and cell values, so header names containing the delimiter, double quotes, or newlines are properly RFC 4180 quoted.

[tbonelee]

Null check is needed at here.

Suggested change

	let stringValue = (row[index]).toString();
	let stringValue = (value === null || value === undefined) ? '' : String(value);

[kkalyan]

Fixed — the escape() function now does (value === null || value === undefined) ? '' : String(value) before checking for special characters.