🚀 feat(cyclops-ui): Copy Module Name and Namespace buttons

[ArnavK-09]

closes #639

📑 Description

✅ Checks

• I have tested my code (provide screenshots or screen recordings of a working solution)
• I have performed a self-review of my code

ℹ Additional context

[ArnavK-09]

@quest-bot loot #639

[quest-bot]

Quest PR submitted!

@ArnavK-09, you are attempting to solve the issue and loot this Quest. Will you be successful?

---

Questions? Check out the docs.

[KaradzaJuraj]

Hey @ArnavK-09, the icons are currently positioned at the bottom, but I'd like them to be positioned at the top.

You will probably need to change the styling of the <Title> to use flex for the module name copy. For the namespace copy, you can update the styling of the Description.Item

Also, color the icons grey!

[ArnavK-09]

Hey @ArnavK-09, the icons are currently positioned at the bottom, but I'd like them to be positioned at the top.

You will probably need to change the styling of the <Title> to use flex for the module name copy. For the namespace copy, you can update the styling of the Description.Item

Also, color the icons grey!

"top"

[KaradzaJuraj]

Hey @ArnavK-09 , sorry for doing this but I dislike this solution (my fault, I proposed it).

I think a better solution would be if just by clicking on the module name (or namespace), it copies it to your clipboard.

I propose the following:

1. Remove the added buttons and styling
2. Wrap {module.name} & {module.targetNamespace} in <span> with the OnClick effect of copying + style the cursor when hovering to "pointer"
3. Wrap the new <span> with the <Tooltip> component so that when people hover over the name/namespace, a tooltip will appear to tell them they can copy it
4. update the tooltip text to "Copy module name to clipboard" and "Copy namespace to clipboard"

Let me know if this makes sense.

[ArnavK-09]

Hey @ArnavK-09 , sorry for doing this but I dislike this solution (my fault, I proposed it).

I think a better solution would be if just by clicking on the module name (or namespace), it copies it to your clipboard.

I propose the following:

1. Remove the added buttons and styling
2. Wrap {module.name} & {module.targetNamespace} in <span> with the OnClick effect of copying + style the cursor when hovering to "pointer"
3. Wrap the new <span> with the <Tooltip> component so that when people hover over the name/namespace, a tooltip will appear to tell them they can copy it
4. update the tooltip text to "Copy module name to clipboard" and "Copy namespace to clipboard"

Let me know if this makes sense.

Yup, this looks better,
I'll implement this asap and resolve this issue
Thanks

[ArnavK-09]

Hey @ArnavK-09 , sorry for doing this but I dislike this solution (my fault, I proposed it).

I think a better solution would be if just by clicking on the module name (or namespace), it copies it to your clipboard.

I propose the following:

1. Remove the added buttons and styling
2. Wrap {module.name} & {module.targetNamespace} in <span> with the OnClick effect of copying + style the cursor when hovering to "pointer"
3. Wrap the new <span> with the <Tooltip> component so that when people hover over the name/namespace, a tooltip will appear to tell them they can copy it
4. update the tooltip text to "Copy module name to clipboard" and "Copy namespace to clipboard"

Let me know if this makes sense.

Like this?

[KaradzaJuraj]

Just a small change to finish this off 😅

[ArnavK-09]

Just a small change to finish this off 😅

sure, is this alr?

[KaradzaJuraj]

Looking good! Thanks @ArnavK-09 🙏

[quest-bot]

🧚 @ArnavK-09 congratulations for completing Quest #639

💰 A reward has been credited to you.

To claim your reward follow the instructions here.

Questions? Check out the docs.