Repository: kestra-io/kestra
Issue: Add the autogenerated webhook key to the Flow details page
Labels: bug

### Expected Behavior

According to the documentation, a webhook secret key would be generated automatically based on a generated hash. 

Mimimum example:

```yaml
id: ci-cd
namespace: prod
tasks:
  - id: log
    type: io.kestra.core.tasks.log.Log
    message: test
triggers:
  - id: github-webhook
    type: io.kestra.core.models.triggers.types.Webhook
    key: "thisIsASecretKey123" # using "{{secret('WEBHOOK_KEY')}}" doesn't work atm
```


### Actual Behaviour

Currently, this doesn't happen. 

Passing the key from a secret also currently doesn't work.

![image](https://github.com/kestra-io/kestra/assets/86264395/8a621b0b-90df-45e2-815d-78533b0397d1)

### Steps To Reproduce

_No response_

### Environment Information

- Kestra Version: 0.9.3 develop-full image, EE also


### Example flow

_No response_

Issue comments:
The key is still generated, just not included in the flow, as we no longer edit user flow. (And note that actually, we can't  edit it from the backend)

But you can still find it in the flow list in the trigger column. 

![Image](https://github.com/kestra-io/kestra/assets/37600690/2d4fa038-b0ce-4f73-86c8-434a80796adf)

Shouldn't we add those triggers' information to the flow overview? 

@tchiotludo @anna-geller @Ben8t wdyt ?

trigger column that are on the flows listo only ?
The trigger details in this image are coming from the Execution page -- the key must be assigned to the flow's webhook trigger _before_ the flow can get triggered via a webhook. So the issue is still open unless we remove this info about generated hash from the docs and recommend creating custom keys?
The trigger details I sent arn't coming from the Execution page :
> you can still find it in the flow list in the trigger column

The key is assigned right after the flow is saved with the webhook, just not displayed. It's not an issue of not being generated, it's an issue of not being displayed correctly.
you're, right @Skraye! 

![image](https://github.com/kestra-io/kestra/assets/86264395/ba368a2b-40d4-42f6-966d-93cf1cb890cc)

should we then only clarify in the docs? 
I think we should add that information in the flow details page
That makes sense, thanks. I assigned you since you know it best 

Pull request review comments:
```suggestion
            <home-trigger v-if="flow?.triggers" :triggers="flow.triggers" class="mb-4" />
```
```suggestion
        <el-table :data="triggers" stripe table-layout="auto">
            <el-table-column v-for="prop in columns" :key="prop" :prop="prop" :label="getLabel(prop)" />
            <el-table-column :label="$t('description')">
                <template #default="scope">
                    <Markdown :source="scope.row.description" />
                </template>
            </el-table-column>
        </el-table>
```

Patch that resolved the issue:
diff --git a/ui/src/components/flows/FlowRoot.vue b/ui/src/components/flows/FlowRoot.vue
index 2a9c2f8860..1a9f0604d2 100644
--- a/ui/src/components/flows/FlowRoot.vue
+++ b/ui/src/components/flows/FlowRoot.vue
@@ -40,6 +40,7 @@
     import FlowDependencies from "./FlowDependencies.vue";
     import FlowMetrics from "./FlowMetrics.vue";
     import FlowEditor from "./FlowEditor.vue";
+    import FlowTriggers from "./FlowTriggers.vue";
 
     export default {
         mixins: [RouteContext],
@@ -133,6 +134,14 @@
                     });
                 }
 
+                if (this.user && this.flow && this.user.isAllowed(permission.FLOW, action.READ, this.flow.namespace)) {
+                    tabs.push({
+                        name: "triggers",
+                        component: FlowTriggers,
+                        title: this.$t("triggers")
+                    });
+                }
+
                 if (this.user && this.flow && this.user.isAllowed(permission.EXECUTION, action.READ, this.flow.namespace)) {
                     tabs.push({
                         name: "logs",
diff --git a/ui/src/components/flows/FlowTriggers.vue b/ui/src/components/flows/FlowTriggers.vue
new file mode 100644
index 0000000000..f706d3b786
--- /dev/null
+++ b/ui/src/components/flows/FlowTriggers.vue
@@ -0,0 +1,95 @@
+<template>
+    <el-table
+        v-loading="flowData === undefined"
+        :data="flowData ? flowData.triggers : []"
+        stripe
+        table-layout="auto"
+        @row-dblclick="triggerId = $event.id; isOpen = true"
+    >
+        <el-table-column prop="id" :label="$t('id')">
+            <template #default="scope">
+                <code>
+                    {{ scope.row.id }}
+                </code>
+            </template>
+        </el-table-column>
+        <el-table-column prop="type" :label="$t('type')" />
+        <el-table-column :label="$t('description')">
+            <template #default="scope">
+                <Markdown :source="scope.row.description" />
+            </template>
+        </el-table-column>
+
+        <el-table-column column-key="action" class-name="row-action">
+            <template #default="scope">
+                <a href="#" @click="triggerId = scope.row.id; isOpen = true">
+                    <kicon :tooltip="$t('details')" placement="left">
+                        <eye />
+                    </kicon>
+                </a>
+            </template>
+        </el-table-column>
+    </el-table>
+
+    <el-drawer
+        v-if="isOpen"
+        v-model="isOpen"
+        destroy-on-close
+        lock-scroll
+        size=""
+        :append-to-body="true"
+    >
+        <template #header>
+            <code>{{ triggerId }}</code>
+        </template>
+        <el-table stripe table-layout="auto" :data="triggerData">
+            <el-table-column prop="key" :label="$t('key')" />
+            <el-table-column prop="value" :label="$t('value')">
+                <template #default="scope">
+                    <vars v-if="scope.row.value instanceof Array || scope.row.value instanceof Object " :data="scope.row.value" />
+                </template>
+            </el-table-column>
+        </el-table>
+    </el-drawer>
+
+</template>
+
+<script setup>
+    import Eye from "vue-material-design-icons/Eye.vue";
+    import Vars from "../executions/Vars.vue";
+</script>
+
+<script>
+    import Markdown from "../layout/Markdown.vue";
+    import {mapGetters} from "vuex";
+    import Kicon from "../Kicon.vue"
+
+    export default {
+        components: {Markdown, Kicon},
+        data() {
+            return {
+                triggerId: undefined,
+                flowData: undefined,
+                isOpen: false
+            }
+        },
+        created() {
+            this.$http
+                .get(`/api/v1/flows/${this.flow.namespace}/${this.flow.id}?source=false`)
+                .then(value => this.flowData = value.data);
+        },
+        computed: {
+            ...mapGetters("flow", ["flow"]),
+            triggerData() {
+                return Object
+                    .entries(this.flowData.triggers.filter(trigger => trigger.id === this.triggerId)[0])
+                    .map(([key, value]) => {
+                        return {
+                            key,
+                            value
+                        };
+                    });
+            },
+        }
+    };
+</script>
\ No newline at end of file


Test patch: