Merge pull request #3787 from skoeva/secret-copy

joaquimrocha · web-flow · commit baeede029903 · 2025-08-20T14:55:24.000+01:00
frontend: Secret: Add button to copy to clipboard
diff --git a/frontend/src/components/common/Resource/Resource.tsx b/frontend/src/components/common/Resource/Resource.tsx
@@ -501,15 +501,47 @@ export function DataField(props: DataFieldProps) {
 export function SecretField(props: InputProps) {
   const { value, ...other } = props;
   const [showPassword, setShowPassword] = React.useState(false);
+  const [copied, setCopied] = React.useState(false);
   const { t } = useTranslation();
 
+  const secret = String(value ?? '');
+
   function handleClickShowPassword() {
     setShowPassword(!showPassword);
   }
 
+  async function onCopy() {
+    if (!secret) {
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(secret);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch (err) {
+      console.error(`Error copying secret to clipboard: ${err}`);
+    }
+  }
+
+  const tooltipTitle = copied ? t('translation|Copied') : t('translation|Copy to clipboard');
+  const copyButton: JSX.Element = (
+    <IconButton
+      edge="start"
+      aria-label={t('translation|Copy to clipboard')}
+      onClick={onCopy}
+      onMouseDown={e => e.preventDefault()}
+      size="medium"
+      disabled={!secret}
+    >
+      <Icon icon={'mdi:content-copy'} />
+    </IconButton>
+  );
+
   return (
     <Grid container alignItems="stretch" spacing={2}>
       <Grid item>
+        {!!secret ? <LightTooltip title={tooltipTitle}>{copyButton}</LightTooltip> : copyButton}
         <IconButton
           edge="end"
           aria-label={t('toggle field visibility')}
diff --git a/frontend/src/components/secret/__snapshots__/Details.WithBase.stories.storyshot b/frontend/src/components/secret/__snapshots__/Details.WithBase.stories.storyshot
@@ -234,6 +234,17 @@
                     <div
                       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                     >
+                      <button
+                        aria-label="Copy to clipboard"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeStart MuiIconButton-sizeMedium css-1t8as3w-MuiButtonBase-root-MuiIconButton-root"
+                        data-mui-internal-clone-element="true"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                        />
+                      </button>
                       <button
                         aria-label="toggle field visibility"
                         class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1d2b2o6-MuiButtonBase-root-MuiIconButton-root"
@@ -275,6 +286,17 @@
                     <div
                       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                     >
+                      <button
+                        aria-label="Copy to clipboard"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeStart MuiIconButton-sizeMedium css-1t8as3w-MuiButtonBase-root-MuiIconButton-root"
+                        data-mui-internal-clone-element="true"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                        />
+                      </button>
                       <button
                         aria-label="toggle field visibility"
                         class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1d2b2o6-MuiButtonBase-root-MuiIconButton-root"
@@ -316,6 +338,17 @@
                     <div
                       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                     >
+                      <button
+                        aria-label="Copy to clipboard"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeStart MuiIconButton-sizeMedium css-1t8as3w-MuiButtonBase-root-MuiIconButton-root"
+                        data-mui-internal-clone-element="true"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                        />
+                      </button>
                       <button
                         aria-label="toggle field visibility"
                         class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1d2b2o6-MuiButtonBase-root-MuiIconButton-root"
diff --git a/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.WithService.stories.storyshot b/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.WithService.stories.storyshot
@@ -290,6 +290,17 @@
                     <div
                       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                     >
+                      <button
+                        aria-label="Copy to clipboard"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeStart MuiIconButton-sizeMedium css-1t8as3w-MuiButtonBase-root-MuiIconButton-root"
+                        data-mui-internal-clone-element="true"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                        />
+                      </button>
                       <button
                         aria-label="toggle field visibility"
                         class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1d2b2o6-MuiButtonBase-root-MuiIconButton-root"
diff --git a/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.WithURL.stories.storyshot b/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.WithURL.stories.storyshot
@@ -287,6 +287,17 @@
                     <div
                       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                     >
+                      <button
+                        aria-label="Copy to clipboard"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeStart MuiIconButton-sizeMedium css-1t8as3w-MuiButtonBase-root-MuiIconButton-root"
+                        data-mui-internal-clone-element="true"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                        />
+                      </button>
                       <button
                         aria-label="toggle field visibility"
                         class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1d2b2o6-MuiButtonBase-root-MuiIconButton-root"
diff --git a/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.WithService.stories.storyshot b/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.WithService.stories.storyshot
@@ -290,6 +290,17 @@
                     <div
                       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                     >
+                      <button
+                        aria-label="Copy to clipboard"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeStart MuiIconButton-sizeMedium css-1t8as3w-MuiButtonBase-root-MuiIconButton-root"
+                        data-mui-internal-clone-element="true"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                        />
+                      </button>
                       <button
                         aria-label="toggle field visibility"
                         class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1d2b2o6-MuiButtonBase-root-MuiIconButton-root"
diff --git a/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.WithURL.stories.storyshot b/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.WithURL.stories.storyshot
@@ -287,6 +287,17 @@
                     <div
                       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                     >
+                      <button
+                        aria-label="Copy to clipboard"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeStart MuiIconButton-sizeMedium css-1t8as3w-MuiButtonBase-root-MuiIconButton-root"
+                        data-mui-internal-clone-element="true"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                        />
+                      </button>
                       <button
                         aria-label="toggle field visibility"
                         class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1d2b2o6-MuiButtonBase-root-MuiIconButton-root"
diff --git a/frontend/src/i18n/locales/de/translation.json b/frontend/src/i18n/locales/de/translation.json
@@ -298,6 +298,8 @@
   "Forward port": "Port weiterleiten",
   "Delete port forward": "Portweiterleitung löschen",
   "Stop port forward": "Portweiterleitung stoppen",
+  "Copied": "",
+  "Copy to clipboard": "",
   "Mount Path": "Mount Path",
   "from": "von",
   "I/O": "I/O",
diff --git a/frontend/src/i18n/locales/en/translation.json b/frontend/src/i18n/locales/en/translation.json
@@ -298,6 +298,8 @@
   "Forward port": "Forward port",
   "Delete port forward": "Delete port forward",
   "Stop port forward": "Stop port forward",
+  "Copied": "Copied",
+  "Copy to clipboard": "Copy to clipboard",
   "Mount Path": "Mount Path",
   "from": "from",
   "I/O": "I/O",
diff --git a/frontend/src/i18n/locales/es/translation.json b/frontend/src/i18n/locales/es/translation.json
@@ -300,6 +300,8 @@
   "Forward port": "Redireccionar puerto",
   "Delete port forward": "Eliminar redireccionamiento de puerto",
   "Stop port forward": "Parar redireccionamiento de puerto",
+  "Copied": "",
+  "Copy to clipboard": "",
   "Mount Path": "Camino de montaje",
   "from": "desde",
   "I/O": "I/O",
diff --git a/frontend/src/i18n/locales/fr/translation.json b/frontend/src/i18n/locales/fr/translation.json
@@ -300,6 +300,8 @@
   "Forward port": "Transférer le port",
   "Delete port forward": "Supprimer le transfert de port",
   "Stop port forward": "Arrêter le transfert de port",
+  "Copied": "",
+  "Copy to clipboard": "",
   "Mount Path": "Chemin de montage",
   "from": "de",
   "I/O": "Entrées/Sorties",
diff --git a/frontend/src/i18n/locales/hi/translation.json b/frontend/src/i18n/locales/hi/translation.json
@@ -298,6 +298,8 @@
   "Forward port": "पोर्ट फॉरवर्ड करें",
   "Delete port forward": "पोर्ट फॉरवर्ड हटाएँ",
   "Stop port forward": "पोर्ट फॉरवर्ड रोकें",
+  "Copied": "",
+  "Copy to clipboard": "",
   "Mount Path": "माउंट पाथ",
   "from": "से",
   "I/O": "I/O",
diff --git a/frontend/src/i18n/locales/it/translation.json b/frontend/src/i18n/locales/it/translation.json
@@ -300,6 +300,8 @@
   "Forward port": "Inoltra porta",
   "Delete port forward": "Elimina port forwarding",
   "Stop port forward": "Ferma port forwarding",
+  "Copied": "",
+  "Copy to clipboard": "",
   "Mount Path": "Percorso di montaggio",
   "from": "da",
   "I/O": "I/O",
diff --git a/frontend/src/i18n/locales/ja/translation.json b/frontend/src/i18n/locales/ja/translation.json
@@ -296,6 +296,8 @@
   "Forward port": "ポートを転送",
   "Delete port forward": "ポートフォワードを削除",
   "Stop port forward": "ポートフォワードを停止",
+  "Copied": "",
+  "Copy to clipboard": "",
   "Mount Path": "マウントパス",
   "from": "から",
   "I/O": "I/O",
diff --git a/frontend/src/i18n/locales/ko/translation.json b/frontend/src/i18n/locales/ko/translation.json
@@ -296,6 +296,8 @@
   "Forward port": "포트 포워딩",
   "Delete port forward": "포트 포워딩 삭제",
   "Stop port forward": "포트 포워딩 중지",
+  "Copied": "",
+  "Copy to clipboard": "",
   "Mount Path": "마운트 경로",
   "from": "from",
   "I/O": "I/O",
diff --git a/frontend/src/i18n/locales/pt/translation.json b/frontend/src/i18n/locales/pt/translation.json
@@ -300,6 +300,8 @@
   "Forward port": "Redir. porta",
   "Delete port forward": "Eliminar redir. de porta",
   "Stop port forward": "Parar redir. de porta",
+  "Copied": "",
+  "Copy to clipboard": "",
   "Mount Path": "Cam. de montagem",
   "from": "desde",
   "I/O": "I/O",
diff --git a/frontend/src/i18n/locales/ta/translation.json b/frontend/src/i18n/locales/ta/translation.json
@@ -298,6 +298,8 @@
   "Forward port": "போர்ட் ஃபார்வர்ட்",
   "Delete port forward": "போர்ட் ஃபார்வர்ட் அழி",
   "Stop port forward": "போர்ட் ஃபார்வர்ட் நிறுத்து",
+  "Copied": "",
+  "Copy to clipboard": "",
   "Mount Path": "மவுண்ட் பாத்",
   "from": "இலிருந்து",
   "I/O": "I/O",
diff --git a/frontend/src/i18n/locales/zh-tw/translation.json b/frontend/src/i18n/locales/zh-tw/translation.json
@@ -296,6 +296,8 @@
   "Forward port": "轉發連線埠",
   "Delete port forward": "刪除連線埠轉發",
   "Stop port forward": "停止連線埠轉發",
+  "Copied": "",
+  "Copy to clipboard": "",
   "Mount Path": "掛載路徑",
   "from": "來自",
   "I/O": "I/O",
diff --git a/frontend/src/i18n/locales/zh/translation.json b/frontend/src/i18n/locales/zh/translation.json
@@ -296,6 +296,8 @@
   "Forward port": "转发端口",
   "Delete port forward": "刪除端口转发",
   "Stop port forward": "停止端口转发",
+  "Copied": "",
+  "Copy to clipboard": "",
   "Mount Path": "挂载路径",
   "from": "来自",
   "I/O": "I/O",
