From 106816bf37ff1527465e93927616498096991c57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Barth=C3=A9l=C3=A9my=20Ledoux?= <ledouxb@me.com>
Date: Thu, 16 Jan 2025 10:49:57 +0100
Subject: [PATCH] feat: add a story for executions list (#6784)

---
 ui/package-lock.json                          |  25 ++
 ui/package.json                               |   1 +
 ui/src/components/executions/Executions.vue   |   2 +-
 ui/src/mixins/restoreUrl.js                   |   2 +-
 .../executions/Executions-s.fixture.json      |  51 +++
 .../executions/Executions.fixture.json        | 404 ++++++++++++++++++
 .../executions/Executions.stories.jsx         |  95 ++++
 7 files changed, 578 insertions(+), 2 deletions(-)
 create mode 100644 ui/tests/storybook/components/executions/Executions-s.fixture.json
 create mode 100644 ui/tests/storybook/components/executions/Executions.fixture.json
 create mode 100644 ui/tests/storybook/components/executions/Executions.stories.jsx

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 9d186cbca44..a9a0733a27a 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -95,6 +95,7 @@
         "rollup-plugin-visualizer": "^5.12.0",
         "sass": "^1.83.0",
         "storybook": "^8.4.7",
+        "storybook-vue3-router": "^5.0.0",
         "typescript": "^5.7.2",
         "typescript-eslint": "^8.18.2",
         "vite": "^6.0.5",
@@ -18513,6 +18514,30 @@
         }
       }
     },
+    "node_modules/storybook-vue3-router": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/storybook-vue3-router/-/storybook-vue3-router-5.0.0.tgz",
+      "integrity": "sha512-Q5ePPv8xyYT+9IzcEMSAQeCT8OlPDX0rfUfYCmiYDXsGPvvDej2Oyid3wyaxZmU/LXt1XzMDRO3v9qk/EN6pXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "vue-router": "^4.2.5"
+      },
+      "peerDependencies": {
+        "@storybook/preview-api": "7.x||>=7.0.0-rc.0",
+        "@storybook/vue3": "7.x||>=7.0.0-rc.0",
+        "vue": "3.x",
+        "vue-router": "4.x"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        },
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
diff --git a/ui/package.json b/ui/package.json
index 466050b0b1a..3468a7a9258 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -105,6 +105,7 @@
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.83.0",
     "storybook": "^8.4.7",
+    "storybook-vue3-router": "^5.0.0",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.18.2",
     "vite": "^6.0.5",
diff --git a/ui/src/components/executions/Executions.vue b/ui/src/components/executions/Executions.vue
index 30e555ff1e0..e9761c65435 100644
--- a/ui/src/components/executions/Executions.vue
+++ b/ui/src/components/executions/Executions.vue
@@ -55,7 +55,7 @@
                 </el-card>
             </template>
 
-            <template #table v-if="executions.length">
+            <template #table v-if="executions?.length">
                 <select-table
                     ref="selectTable"
                     :data="executions"
diff --git a/ui/src/mixins/restoreUrl.js b/ui/src/mixins/restoreUrl.js
index 68dc8fddeb6..f3637e1e79c 100644
--- a/ui/src/mixins/restoreUrl.js
+++ b/ui/src/mixins/restoreUrl.js
@@ -14,7 +14,7 @@ export default {
     computed: {
         localStorageName() {
             const tenant = this.$route.params.tenant;
-            return `${this.$route.name.replace("/", "_")}${tenant ? "_" + tenant : ""}_restore_url`
+            return `${this.$route.name?.replace("/", "_")}${tenant ? "_" + tenant : ""}_restore_url`
         },
 
         localStorageValue() {
diff --git a/ui/tests/storybook/components/executions/Executions-s.fixture.json b/ui/tests/storybook/components/executions/Executions-s.fixture.json
new file mode 100644
index 00000000000..571b035a823
--- /dev/null
+++ b/ui/tests/storybook/components/executions/Executions-s.fixture.json
@@ -0,0 +1,51 @@
+{
+    "results": [
+        {
+            "id": "airbyte-sync",
+            "flowId": "airbyte-sync",
+            "namespace": "company.team",
+            "revision": 1,
+            "disabled": false,
+            "deleted": false,
+            "state": {
+                "current": "RUNNING"
+            },
+            "tasks": [
+                {
+                    "id": "data_ingestion",
+                    "type": "io.kestra.plugin.airbyte.connections.Sync",
+                    "url": "http://host.docker.internal:8000/",
+                    "username": "{{ secret('AIRBYTE_USERNAME') }}",
+                    "password": "{{ secret('AIRBYTE_PASSWORD') }}",
+                    "connectionId": "e3b1ce92-547c-436f-b1e8-23b6936c12ab"
+                }
+            ],
+            "triggers": [
+                {
+                    "id": "every_minute",
+                    "type": "io.kestra.plugin.core.trigger.Schedule",
+                    "cron": "*/1 * * * *"
+                }
+            ]
+        },
+        {
+            "id": "child",
+            "flowId": "airbyte-sync",
+            "namespace": "company.team",
+            "revision": 1,
+            "disabled": false,
+            "deleted": false,
+            "state": {
+                "current": "FAILED"
+            },
+            "tasks": [
+                {
+                    "id": "hello",
+                    "type": "io.kestra.plugin.core.log.Log",
+                    "message": "Hello from {{ flow.id }}"
+                }
+            ]
+        }
+    ],
+    "total": 2
+}
\ No newline at end of file
diff --git a/ui/tests/storybook/components/executions/Executions.fixture.json b/ui/tests/storybook/components/executions/Executions.fixture.json
new file mode 100644
index 00000000000..9deb68be4ce
--- /dev/null
+++ b/ui/tests/storybook/components/executions/Executions.fixture.json
@@ -0,0 +1,404 @@
+{
+    "results": [
+        {
+            "id": "airbyte-sync",
+            "flowId": "airbyte-sync",
+            "state": {
+                "current": "RUNNING",
+                "duration": "PT30.337S",
+                "endDate": "2025-01-15T13:57:42.734Z",
+                "startDate": "2025-01-15T13:57:12.397Z"
+            },
+            "namespace": "company.team",
+            "revision": 1,
+            "disabled": false,
+            "deleted": false,
+            "tasks": [
+                {
+                    "id": "data_ingestion",
+                    "type": "io.kestra.plugin.airbyte.connections.Sync",
+                    "url": "http://host.docker.internal:8000/",
+                    "username": "{{ secret('AIRBYTE_USERNAME') }}",
+                    "password": "{{ secret('AIRBYTE_PASSWORD') }}",
+                    "connectionId": "e3b1ce92-547c-436f-b1e8-23b6936c12ab"
+                }
+            ],
+            "triggers": [
+                {
+                    "id": "every_minute",
+                    "type": "io.kestra.plugin.core.trigger.Schedule",
+                    "cron": "*/1 * * * *"
+                }
+            ]
+        },
+        {
+            "id": "blob-sync",
+            "flowId": "blob-sync",
+            "state": {
+                "current": "KILLED",
+                "duration": "PT30.337S",
+                "endDate": "2025-01-15T13:57:42.734Z",
+                "startDate": "2025-01-15T13:57:12.397Z"
+            },
+            "namespace": "company.team",
+            "revision": 1,
+            "disabled": false,
+            "deleted": false,
+            "triggers": [
+                {
+                    "id": "every_minute",
+                    "type": "io.kestra.plugin.core.trigger.Schedule",
+                    "cron": "*/1 * * * *"
+                }
+            ]
+        },
+        {
+            "id": "child",
+            "flowId": "child",
+            "state": {
+                "current": "FAILED",
+                "duration": "PT30.337S",
+                "endDate": "2025-01-15T13:57:42.734Z",
+                "startDate": "2025-01-15T13:57:12.397Z"
+            },
+            "namespace": "company.team",
+            "revision": 1,
+            "disabled": false,
+            "deleted": false,
+            "tasks": [
+                {
+                    "id": "hello",
+                    "type": "io.kestra.plugin.core.log.Log",
+                    "message": "Hello from {{ flow.id }}"
+                }
+            ]
+        },
+        {
+            "id": "myflow",
+            "namespace": "company.team.my.deep.namespace",
+            "flowId": "myflow",
+            "state": {
+                "current": "SKIPPED",
+                "duration": "PT30.337S",
+                "endDate": "2025-01-15T13:57:42.734Z",
+                "startDate": "2025-01-15T13:57:12.397Z"
+            },
+            "revision": 1,
+            "disabled": false,
+            "deleted": false,
+            "tasks": [
+                {
+                    "id": "hello",
+                    "type": "io.kestra.plugin.core.log.Log",
+                    "message": "Hello World! \uD83D\uDE80"
+                }
+            ]
+        },
+        {
+            "id": "myflow",
+            "namespace": "company.team",
+            "revision": 3,
+            "flowId": "myflow",
+            "inputs": [
+                {
+                    "id": "api_url",
+                    "type": "STRING",
+                    "required": true
+                }
+            ],
+            "state": {
+                "current": "WARN",
+                "duration": "PT30.337S",
+                "endDate": "2025-01-15T13:57:42.734Z",
+                "startDate": "2025-01-15T13:57:12.397Z"
+            },
+            "disabled": false,
+            "deleted": false,
+            "tasks": [
+                {
+                    "id": "hello",
+                    "type": "io.kestra.plugin.core.log.Log",
+                    "message": "Hello World! \uD83D\uDE80"
+                }
+            ]
+        },
+        {
+            "id": "myflow-editable",
+            "namespace": "company.team",
+            "revision": 8,
+            "flowId": "myflow-editable",
+            "inputs": [
+                {
+                    "id": "api_url",
+                    "type": "STRING",
+                    "required": true
+                }
+            ],
+            "state": {
+                "current": "RETRIED",
+                "duration": "PT30.337S",
+                "endDate": "2025-01-15T13:57:42.734Z",
+                "startDate": "2025-01-15T13:57:12.397Z"
+            },
+            "disabled": false,
+            "deleted": false,
+            "tasks": [
+                {
+                    "id": "hello",
+                    "type": "io.kestra.plugin.core.log.Log",
+                    "message": "Hello World! \uD83D\uDE80"
+                }
+            ]
+        },
+        {
+            "id": "parentflow",
+            "namespace": "company.team",
+            "revision": 1,
+            "flowId": "parentflow",
+            "state": {
+                "current": "RETRYING",
+                "duration": "PT30.337S",
+                "endDate": "2025-01-15T13:57:42.734Z",
+                "startDate": "2025-01-15T13:57:12.397Z"
+            },
+            "disabled": false,
+            "deleted": false,
+            "tasks": [
+                {
+                    "id": "hello",
+                    "type": "io.kestra.plugin.core.log.Log",
+                    "message": "Hello World!"
+                }
+            ],
+            "triggers": [
+                {
+                    "id": "flow_trigger",
+                    "type": "io.kestra.plugin.core.trigger.Flow",
+                    "preconditions": {
+                        "id": "child_flow",
+                        "flows": [
+                            {
+                                "namespace": "company.team",
+                                "flowId": "child",
+                                "states": [
+                                    "SUCCESS"
+                                ]
+                            }
+                        ]
+                    }
+                }
+            ]
+        },
+        {
+            "id": "repro_bool",
+            "namespace": "company.team",
+            "flowId": "repro_bool",
+            "state": {
+                "current": "RESTARTED",
+                "duration": "PT30.337S",
+                "endDate": "2025-01-15T13:57:42.734Z",
+                "startDate": "2025-01-15T13:57:12.397Z"
+            },
+            "revision": 3,
+            "inputs": [
+                {
+                    "id": "mybool",
+                    "type": "BOOLEAN",
+                    "description": "This will not show up in the UI at all unless you mark it as required",
+                    "required": false,
+                    "defaults": false
+                }
+            ],
+            "disabled": false,
+            "deleted": false,
+            "tasks": [
+                {
+                    "id": "return_null",
+                    "type": "io.kestra.plugin.core.debug.Return",
+                    "format": "{{inputs}}"
+                }
+            ]
+        },
+        {
+            "id": "request_resources",
+            "namespace": "company.team",
+            "revision": 1,
+            "flowId": "request_resources",
+            "state": {
+                "current": "PAUSED",
+                "duration": "PT30.337S",
+                "endDate": "2025-01-15T13:57:42.734Z",
+                "startDate": "2025-01-15T13:57:12.397Z"
+            },
+            "inputs": [
+                {
+                    "id": "resource_type",
+                    "type": "SELECT",
+                    "required": true,
+                    "displayName": "Resource Type",
+                    "values": [
+                        "Access permissions",
+                        "SaaS applications",
+                        "Development tool",
+                        "Cloud VM"
+                    ],
+                    "allowCustomValue": false,
+                    "isRadio": false
+                },
+                {
+                    "id": "access_permissions",
+                    "type": "SELECT",
+                    "dependsOn": {
+                        "inputs": [
+                            "resource_type"
+                        ],
+                        "condition": "{{ inputs.resource_type equals 'Access permissions' }}"
+                    },
+                    "required": true,
+                    "displayName": "Access Permissions",
+                    "values": [
+                        "Admin",
+                        "Developer",
+                        "Editor",
+                        "Launcher",
+                        "Viewer"
+                    ],
+                    "allowCustomValue": true,
+                    "isRadio": false
+                },
+                {
+                    "id": "saas_applications",
+                    "type": "MULTISELECT",
+                    "dependsOn": {
+                        "inputs": [
+                            "resource_type"
+                        ],
+                        "condition": "{{ inputs.resource_type equals 'SaaS applications' }}"
+                    },
+                    "required": true,
+                    "displayName": "SaaS Applications",
+                    "values": [
+                        "Slack",
+                        "Notion",
+                        "HubSpot",
+                        "GitHub",
+                        "Jira"
+                    ],
+                    "itemType": "STRING",
+                    "allowCustomValue": true
+                },
+                {
+                    "id": "development_tools",
+                    "type": "SELECT",
+                    "dependsOn": {
+                        "inputs": [
+                            "resource_type"
+                        ],
+                        "condition": "{{ inputs.resource_type equals 'Development tool' }}"
+                    },
+                    "required": true,
+                    "displayName": "Development Tool",
+                    "values": [
+                        "Cursor",
+                        "IntelliJ IDEA",
+                        "PyCharm Professional",
+                        "Datagrip"
+                    ],
+                    "allowCustomValue": true,
+                    "isRadio": false
+                },
+                {
+                    "id": "cloud_provider",
+                    "type": "SELECT",
+                    "dependsOn": {
+                        "inputs": [
+                            "resource_type"
+                        ],
+                        "condition": "{{ inputs.resource_type equals 'Cloud VM' }}"
+                    },
+                    "required": true,
+                    "displayName": "Cloud Provider",
+                    "values": [
+                        "AWS",
+                        "GCP",
+                        "Azure"
+                    ],
+                    "allowCustomValue": true,
+                    "isRadio": false
+                },
+                {
+                    "id": "deadline",
+                    "type": "DATE",
+                    "required": true,
+                    "displayName": "Deadline for the resources"
+                },
+                {
+                    "id": "comment",
+                    "type": "STRING",
+                    "required": true,
+                    "displayName": "Provide details about the resources you need"
+                }
+            ],
+            "disabled": false,
+            "deleted": false,
+            "variables": {
+                "slack_message": "New form submission! Click on the Resume button here to approve or reject the request\n"
+            },
+            "tasks": [
+                {
+                    "id": "get_service_catalog",
+                    "type": "io.kestra.plugin.core.http.Download",
+                    "uri": "https://huggingface.co/datasets/kestra/datasets/resolve/main/ion/catalog.ion"
+                },
+                {
+                    "id": "send_approval_request",
+                    "type": "io.kestra.plugin.notifications.slack.SlackIncomingWebhook",
+                    "url": "https://reqres.in/api/slack",
+                    "payload": "{\n  \"channel\": \"#devops\",\n  \"text\": {{ render(vars.slack_message) | toJson }}\n}\n"
+                },
+                {
+                    "id": "wait_for_approval",
+                    "type": "io.kestra.plugin.core.flow.Pause",
+                    "onResume": [
+                        {
+                            "id": "provisioning_status",
+                            "type": "BOOLEAN",
+                            "description": "Whether the resources were able to be provisioned",
+                            "required": true,
+                            "defaults": true,
+                            "displayName": "Provisioning Status"
+                        },
+                        {
+                            "id": "comment",
+                            "type": "STRING",
+                            "description": "Extra comments about the provisioned resources",
+                            "required": true,
+                            "defaults": "All requested resources have been provisioned",
+                            "displayName": "Approval Comment"
+                        }
+                    ]
+                },
+                {
+                    "id": "approve",
+                    "type": "io.kestra.plugin.core.http.Request",
+                    "uri": "https://reqres.in/api/resources",
+                    "method": "POST",
+                    "body": "{{ inputs }}"
+                },
+                {
+                    "id": "log",
+                    "type": "io.kestra.plugin.core.log.Log",
+                    "message": "Status of the request {{ outputs.wait_for_approval.onResume.comment }}.\nProcess finished with {{ outputs.approve.body }}.\n"
+                }
+            ],
+            "outputs": [
+                {
+                    "id": "catalog",
+                    "value": "{{ outputs.get_service_catalog.uri }}",
+                    "type": "FILE"
+                }
+            ]
+        }
+    ],
+    "total": 8
+}
\ No newline at end of file
diff --git a/ui/tests/storybook/components/executions/Executions.stories.jsx b/ui/tests/storybook/components/executions/Executions.stories.jsx
new file mode 100644
index 00000000000..836c1b5af13
--- /dev/null
+++ b/ui/tests/storybook/components/executions/Executions.stories.jsx
@@ -0,0 +1,95 @@
+import {useStore} from "vuex";
+import {vueRouter} from "storybook-vue3-router";
+import Executions from "../../../../src/components/executions/Executions.vue";
+import fixture from "./Executions.fixture.json"
+import fixtureS from "./Executions-s.fixture.json"
+
+function getDecorators(data) {
+    return [
+        () => {
+            return {
+                setup () {
+                    const store = useStore()
+                    store.commit("auth/setUser", {
+                        id: "123",
+                        firstName: "John",
+                        lastName: "Doe",
+                        email: "john.doe@example.com",
+                        isAllowed: () => true,
+                        hasAnyActionOnAnyNamespace: () => true,
+                    })
+                    store.commit("misc/setConfigs", {
+                        hiddenLabelsPrefixes: ["system_"]
+                    })
+                    store.$http = {
+                        get(a) {
+                            if (a.endsWith("executions/search")) {
+                                return Promise.resolve({
+                                    data 
+                                })
+                            }
+                            return Promise.resolve({data: []})
+                        },
+                    }
+                },
+                template: "<div style='margin:2rem'><story /></div>"
+            }
+        },
+        vueRouter([
+        {
+            path: "/",
+            name: "home",
+            component: {template: "div>home</div>"}
+        },
+          {
+            path: "/flows/update/:namespace/:id?/:flowId?",
+            name: "flows/update",
+            component: {template: "div>updateflows</div>"}
+          },{
+            path: "/executions/update/:namespace/:id?/:flowId?",
+            name: "executions/update",
+            component: {template: "div>executions</div>"}
+          },
+          {
+            path: "/executions/:id?/:flowId?",
+            name: "executions/list",
+            component: {template: "div>executions</div>"}
+          }
+        ], {
+            initialRoute: "/executions/123/645"
+        }),
+    ]
+}
+
+// Story configuration
+export default {
+    title: "Components/Executions",
+    component: Executions,
+    parameters: {
+        layout: "fullscreen"
+    }
+};
+
+
+// Stories
+export const SmallData = {
+    decorators: getDecorators(fixtureS),
+    args: {
+        hidden: [],
+        statuses: [],
+        isReadOnly: false,
+        embed: true,
+        topbar: false,
+        filter: false
+    }
+};
+
+export const BiggerData = {
+    decorators: getDecorators(fixture),
+    args: {
+        hidden: [],
+        statuses: [],
+        topbar: false,
+        filter: false
+    }
+};
\ No newline at end of file