feat: add more buttons to url exploder tool

Author: drodil

plugins/toolbox/src/components/Buttons/CopyToClipboardButton.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 type Props = {
   output: string | number;
+  title?: string;
 };
 
 export const CopyToClipboardButton = (props: Props) => {
@@ -13,7 +14,7 @@ export const CopyToClipboardButton = (props: Props) => {
   };
 
   return (
-    <Tooltip arrow title="Copy output to clipboard">
+    <Tooltip arrow title={props.title ?? 'Copy output to clipboard'}>
       <Button size="small" startIcon={<FileCopy />} onClick={copyToClipboard}>
         Copy
       </Button>

plugins/toolbox/src/components/Buttons/PasteFromClipboardButton.tsx

@@ -4,6 +4,7 @@ import AssignmentReturnedIcon from '@material-ui/icons/AssignmentReturned';
 
 type Props = {
   setInput: (input: string) => void;
+  title?: string;
 };
 
 export const PasteFromClipboardButton = (props: Props) => {
@@ -14,7 +15,7 @@ export const PasteFromClipboardButton = (props: Props) => {
     );
   };
   return (
-    <Tooltip arrow title="Paste input from clipboard">
+    <Tooltip arrow title={props.title ?? 'Paste input from clipboard'}>
       <Button
         size="small"
         startIcon={<AssignmentReturnedIcon />}

plugins/toolbox/src/components/Misc/UrlExploder.tsx

@@ -1,7 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { Grid, TextField } from '@material-ui/core';
 import { useStyles } from '../../utils/hooks';
-import { SampleButton } from '../Buttons';
+import {
+  ClearValueButton,
+  CopyToClipboardButton,
+  PasteFromClipboardButton,
+  SampleButton,
+} from '../Buttons';
 import { faker } from '@faker-js/faker';
 
 const UrlExploder = () => {
@@ -75,12 +80,24 @@ const UrlExploder = () => {
     <Grid container>
       <Grid item xs={12}>
         <SampleButton setInput={onInput} sample={faker.internet.url()} />
+        <ClearValueButton setValue={onInput} />
+        <PasteFromClipboardButton
+          title="Paste URL from clipboard"
+          setInput={onInput}
+        />
+        {rawInput && (
+          <CopyToClipboardButton
+            title="Copy URL to clipboard"
+            output={rawInput}
+          />
+        )}
         <TextField
           label="URL"
           variant="outlined"
           className={styles.fullWidth}
           value={rawInput}
           onChange={e => onInput(e.target.value)}
+          style={{ marginTop: '10px', marginBottom: '10px' }}
         />
       </Grid>
       <Grid item xs={6}>