Change dataset details page PID text to a input field with copy button

[TheMeinerLP]

Description

On the detail page of a dataset is a PID. Normaly the user needs to select manually the PID. This PR adds a input field with simple copy option.

Motivation

To deliver more easy a dataset PID add a UX improvement.

Fixes:

• Nothing

Changes:

• UX improvement

Tests included/Docs Updated?

• Included for each change/fix?
• Passing? (Merge will not be approved unless this is checked)
• Docs updated?
• New packages used/requires npm install?
• Toggle added for new features?
• Requires update of SciCat backend API?

Before:

After:

[nitrosx]

Check the scicat token copy under the user settings page.
We should implement it as it is done there

[nitrosx]

Instead of creating a full functional text box, can we just add the copy button, like is done under user settings with the scicat token

[Junjiequan]

From the best practice point of view, especially if you are an accessibility enthusiast, I wouldn't recommend to use onClick in a span to make it a button.
But in our case, I think it is completely fine to follow the pattern what we already have for consistency, and you can add an aria attribute if you want to.

[TheMeinerLP]

Okay i will check that from the settings page and improve the current code

[minottic]

after the changes, I would add a test, similar to this:

frontend/src/app/users/user-settings/user-settings.component.spec.ts

Lines 72 to 91 in 757d079

	describe("#onCopy()", () => {
	it("should copy the token to the users clipboard and dispatch a showMessageAction", () => {
	const commandSpy = spyOn(document, "execCommand");
	dispatchSpy = spyOn(store, "dispatch");
	const message = new Message(
	"SciCat token has been copied to your clipboard",
	MessageType.Success,
	5000
	);
	component.onCopy("test");
	expect(commandSpy).toHaveBeenCalledTimes(1);
	expect(commandSpy).toHaveBeenCalledWith("copy");
	expect(dispatchSpy).toHaveBeenCalledTimes(1);
	expect(dispatchSpy).toHaveBeenCalledWith(showMessageAction({ message }));
	});
	});
	});

Very minor comment, I don't think the box "Toggle added for new features?" should be ticked in this case