feat: add per-webhook secret with backfill migration (#13573)

2026-02-26 17:26:12 +05:30
parent 7c60ad9e28
commit c218eff5ec
19 changed files with 319 additions and 78 deletions
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -31,6 +31,14 @@
    "WEBHOOK": {
      "SUBSCRIBED_EVENTS": "Subscribed Events",
      "LEARN_MORE": "Learn more about webhooks",
+      "SECRET": {
+        "LABEL": "Secret",
+        "COPY": "Copy secret to clipboard",
+        "COPY_SUCCESS": "Secret copied to clipboard",
+        "TOGGLE": "Toggle secret visibility",
+        "CREATED_DESC": "Your webhook has been created. Use the secret below to verify webhook signatures. Please copy it now — you can also find it later in the webhook edit form.",
+        "DONE": "Done"
+      },
      "COUNT": "{n} webhook | {n} webhooks",
      "SEARCH_PLACEHOLDER": "Search webhooks...",
      "NO_RESULTS": "No webhooks found matching your search",
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
@@ -58,6 +58,7 @@ export default {
    },
  },
  mounted() {
+    this.$store.dispatch('integrations/get', 'webhook');
    this.$store.dispatch('webhooks/get');
  },
  methods: {
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
@@ -1,60 +1,98 @@
-<script>
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useBranding } from 'shared/composables/useBranding';
-import { mapGetters } from 'vuex';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import WebhookForm from './WebhookForm.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';

-export default {
-  components: { WebhookForm },
-  props: {
-    onClose: {
-      type: Function,
-      required: true,
-    },
-  },
-  setup() {
-    const { replaceInstallationName } = useBranding();
-    return {
-      replaceInstallationName,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'webhooks/getUIFlags',
-    }),
-  },
-  methods: {
-    async onSubmit(webhook) {
-      try {
-        await this.$store.dispatch('webhooks/create', { webhook });
-        useAlert(
-          this.$t('INTEGRATION_SETTINGS.WEBHOOK.ADD.API.SUCCESS_MESSAGE')
-        );
-        this.onClose();
-      } catch (error) {
-        const message =
-          error.response.data.message ||
-          this.$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.API.ERROR_MESSAGE');
-        useAlert(message);
-      }
-    },
+const props = defineProps({
+  onClose: {
+    type: Function,
+    required: true,
  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+const { replaceInstallationName } = useBranding();
+
+const createdWebhook = ref(null);
+
+const uiFlags = computed(() => store.getters['webhooks/getUIFlags']);
+
+const onSubmit = async webhook => {
+  try {
+    const result = await store.dispatch('webhooks/create', { webhook });
+    createdWebhook.value = result;
+  } catch (error) {
+    const message =
+      error.response.data.message ||
+      t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.API.ERROR_MESSAGE');
+    useAlert(message);
+  }
+};
+
+const handleCopySecret = async () => {
+  await copyTextToClipboard(createdWebhook.value.secret);
+  useAlert(t('INTEGRATION_SETTINGS.WEBHOOK.SECRET.COPY_SUCCESS'));
 };
 </script>

 <template>
  <div class="h-auto overflow-auto flex flex-col">
-    <woot-modal-header
-      :header-title="$t('INTEGRATION_SETTINGS.WEBHOOK.ADD.TITLE')"
-      :header-content="
-        replaceInstallationName($t('INTEGRATION_SETTINGS.WEBHOOK.FORM.DESC'))
-      "
-    />
-    <WebhookForm
-      :is-submitting="uiFlags.creatingItem"
-      :submit-label="$t('INTEGRATION_SETTINGS.WEBHOOK.FORM.ADD_SUBMIT')"
-      @submit="onSubmit"
-      @cancel="onClose"
-    />
+    <template v-if="createdWebhook">
+      <woot-modal-header
+        :header-title="
+          t('INTEGRATION_SETTINGS.WEBHOOK.ADD.API.SUCCESS_MESSAGE')
+        "
+      />
+      <div class="px-8 pb-6">
+        <p class="text-sm text-n-slate-11 mb-4">
+          {{ t('INTEGRATION_SETTINGS.WEBHOOK.SECRET.CREATED_DESC') }}
+        </p>
+        <label>
+          {{ t('INTEGRATION_SETTINGS.WEBHOOK.SECRET.LABEL') }}
+          <div class="flex items-center gap-2">
+            <input
+              :value="createdWebhook.secret"
+              type="text"
+              readonly
+              class="!mb-0 font-mono"
+            />
+            <NextButton
+              v-tooltip.top="t('INTEGRATION_SETTINGS.WEBHOOK.SECRET.COPY')"
+              icon="i-lucide-copy"
+              slate
+              faded
+              @click="handleCopySecret"
+            />
+          </div>
+        </label>
+        <div class="flex justify-end mt-4">
+          <NextButton
+            blue
+            :label="t('INTEGRATION_SETTINGS.WEBHOOK.SECRET.DONE')"
+            @click="props.onClose()"
+          />
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <woot-modal-header
+        :header-title="t('INTEGRATION_SETTINGS.WEBHOOK.ADD.TITLE')"
+        :header-content="
+          replaceInstallationName(t('INTEGRATION_SETTINGS.WEBHOOK.FORM.DESC'))
+        "
+      />
+      <WebhookForm
+        :is-submitting="uiFlags.creatingItem"
+        :submit-label="t('INTEGRATION_SETTINGS.WEBHOOK.FORM.ADD_SUBMIT')"
+        @submit="onSubmit"
+        @cancel="props.onClose()"
+      />
+    </template>
  </div>
 </template>
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
@@ -3,6 +3,8 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, url, minLength } from '@vuelidate/validators';
 import wootConstants from 'dashboard/constants/globals';
 import { getI18nKey } from 'dashboard/routes/dashboard/settings/helper/settingsHelper';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import { useAlert } from 'dashboard/composables';
 import NextButton from 'dashboard/components-next/button/Button.vue';

 const { EXAMPLE_WEBHOOK_URL } = wootConstants;
@@ -57,10 +59,14 @@ export default {
      url: this.value.url || '',
      name: this.value.name || '',
      subscriptions: this.value.subscriptions || [],
+      secretVisible: false,
      supportedWebhookEvents: SUPPORTED_WEBHOOK_EVENTS,
    };
  },
  computed: {
+    hasSecret() {
+      return !!this.value.secret;
+    },
    webhookURLInputPlaceholder() {
      return this.$t(
        'INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.PLACEHOLDER',
@@ -81,6 +87,10 @@ export default {
        subscriptions: this.subscriptions,
      });
    },
+    async copySecret() {
+      await copyTextToClipboard(this.value.secret);
+      useAlert(this.$t('INTEGRATION_SETTINGS.WEBHOOK.SECRET.COPY_SUCCESS'));
+    },
    getI18nKey,
  },
 };
@@ -111,6 +121,35 @@ export default {
          :placeholder="webhookNameInputPlaceholder"
        />
      </label>
+      <label v-if="hasSecret" class="mb-4">
+        {{ $t('INTEGRATION_SETTINGS.WEBHOOK.SECRET.LABEL') }}
+        <div class="flex items-center gap-2">
+          <input
+            :value="
+              secretVisible ? value.secret : '••••••••••••••••••••••••••••••••'
+            "
+            type="text"
+            readonly
+            class="!mb-0 font-mono"
+          />
+          <NextButton
+            v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.SECRET.TOGGLE')"
+            type="button"
+            :icon="secretVisible ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+            slate
+            faded
+            @click="secretVisible = !secretVisible"
+          />
+          <NextButton
+            v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.SECRET.COPY')"
+            type="button"
+            icon="i-lucide-copy"
+            slate
+            faded
+            @click="copySecret"
+          />
+        </div>
+      </label>
      <label :class="{ error: v$.url.$error }" class="mb-2">
        {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.LABEL') }}
      </label>
--- a/app/javascript/dashboard/store/modules/webhooks.js
+++ b/app/javascript/dashboard/store/modules/webhooks.js
@@ -42,6 +42,7 @@ export const actions = {
      } = response.data;
      commit(types.default.ADD_WEBHOOK, webhook);
      commit(types.default.SET_WEBHOOK_UI_FLAG, { creatingItem: false });
+      return webhook;
    } catch (error) {
      commit(types.default.SET_WEBHOOK_UI_FLAG, { creatingItem: false });
      throw error;