From 455641d98e9524b9f013685965209db25f164320 Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Wed, 18 Dec 2024 17:49:06 +0100
Subject: [PATCH] feat(wallet-dashboard): Improve release process (#4537)

* feat(dashboard): Embed git rev into settings panel

* refactor(wallet-dashboard): Update CI

* typo

* fix: Add missing isStaging: false to preview deploys of the explorer

* fmt

* also embed the rev in the welcome page
---
 .github/workflows/_vercel_deploy.yml          |  8 +++---
 .../apps_wallet_dashboard_deploy.yml          | 16 ++++++++++-
 apps/wallet-dashboard/app/page.tsx            |  4 ++-
 .../settings/views/SettingsListView.tsx       | 27 ++++++++++---------
 apps/wallet-dashboard/next.config.mjs         |  6 +++++
 5 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/.github/workflows/_vercel_deploy.yml b/.github/workflows/_vercel_deploy.yml
index d85f6664fff..ffdb8fda37f 100644
--- a/.github/workflows/_vercel_deploy.yml
+++ b/.github/workflows/_vercel_deploy.yml
@@ -68,14 +68,16 @@ jobs:
     secrets: inherit
     with:
       isProd: false
+      isStaging: false
 
-  wallet-dashboard-prod:
-    name: Vercel Wallet Dashboard Production
+  wallet-dashboard-staging:
+    name: Vercel Wallet Dashboard Staging
     if: github.ref_name == 'develop'
     uses: ./.github/workflows/apps_wallet_dashboard_deploy.yml
     secrets: inherit
     with:
-      isProd: true
+      isProd: false
+      isStaging: true
 
   apps-backend-preview:
     name: Vercel apps-backend Preview
diff --git a/.github/workflows/apps_wallet_dashboard_deploy.yml b/.github/workflows/apps_wallet_dashboard_deploy.yml
index d3ae3f5f284..f533776b7bb 100644
--- a/.github/workflows/apps_wallet_dashboard_deploy.yml
+++ b/.github/workflows/apps_wallet_dashboard_deploy.yml
@@ -3,14 +3,25 @@ name: Deploy for Wallet Dashboard
 env:
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
   VERCEL_PROJECT_ID: ${{ secrets.WALLET_DASHBOARD_VERCEL_PROJECT_ID }}
+  WALLET_DASHBOARD_VERCEL_PROJECT_STAGING_URL: ${{ secrets.WALLET_DASHBOARD_VERCEL_PROJECT_STAGING_URL }}
 
 on:
   workflow_dispatch:
+    inputs:
+      isProd:
+        type: boolean
+        required: true
+      isStaging:
+        type: boolean
+        required: true
   workflow_call:
     inputs:
       isProd:
         type: boolean
         required: true
+      isStaging:
+        type: boolean
+        required: true
 
 jobs:
   deploy:
@@ -64,8 +75,11 @@ jobs:
         id: deploy_url
         if: ${{ inputs.isProd == false }}
         run: echo "DEPLOY_URL=$(cat vercel_output.txt | awk 'END{print}')" >> $GITHUB_OUTPUT
+      - name: Alias Staging deploy
+        if: ${{ inputs.isStaging }}
+        run: vercel alias ${{ steps.deploy_url.outputs.DEPLOY_URL }} $WALLET_DASHBOARD_VERCEL_PROJECT_STAGING_URL --token=${{ secrets.VERCEL_TOKEN }} --scope=${{ secrets.VERCEL_SCOPE }}
       - name: Comment on pull request
-        if: ${{ inputs.isProd == false }}
+        if: ${{ inputs.isProd == false && inputs.isStaging == false }}
         uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/apps/wallet-dashboard/app/page.tsx b/apps/wallet-dashboard/app/page.tsx
index e3036bf38c2..3392c231d31 100644
--- a/apps/wallet-dashboard/app/page.tsx
+++ b/apps/wallet-dashboard/app/page.tsx
@@ -63,8 +63,10 @@ function HomeDashboardPage(): JSX.Element {
                                 <ConnectButton connectText="Connect" />
                             </div>
                         </div>
-                        <div className="text-body-lg text-neutral-60">
+                        <div className="text-center text-body-lg text-neutral-60">
                             &copy; IOTA Foundation {CURRENT_YEAR}
+                            <br />
+                            {process.env.NEXT_PUBLIC_DASHBOARD_REV}
                         </div>
                     </div>
                 </>
diff --git a/apps/wallet-dashboard/components/Dialogs/settings/views/SettingsListView.tsx b/apps/wallet-dashboard/components/Dialogs/settings/views/SettingsListView.tsx
index d5d619b3186..5ed55017ab9 100644
--- a/apps/wallet-dashboard/components/Dialogs/settings/views/SettingsListView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/settings/views/SettingsListView.tsx
@@ -41,18 +41,21 @@ export function SettingsListView({ handleClose, setView }: SettingsListViewProps
         <DialogLayout>
             <Header title="Settings" onClose={handleClose} onBack={handleClose} titleCentered />
             <DialogLayoutBody>
-                <div className="flex w-full flex-col gap-md">
-                    {MENU_ITEMS.map((item, index) => (
-                        <Card key={index} type={CardType.Default} onClick={item.onClick}>
-                            <CardImage type={ImageType.BgSolid}>
-                                <div className="flex h-10 w-10 items-center justify-center rounded-full  text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5">
-                                    <span className="text-2xl">{item.icon}</span>
-                                </div>
-                            </CardImage>
-                            <CardBody title={item.title} subtitle={item.subtitle} />
-                            <CardAction type={CardActionType.Link} />
-                        </Card>
-                    ))}
+                <div className="flex h-full flex-col content-stretch">
+                    <div className="flex h-full w-full flex-col gap-md">
+                        {MENU_ITEMS.map((item, index) => (
+                            <Card key={index} type={CardType.Default} onClick={item.onClick}>
+                                <CardImage type={ImageType.BgSolid}>
+                                    <div className="flex h-10 w-10 items-center justify-center rounded-full  text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5">
+                                        <span className="text-2xl">{item.icon}</span>
+                                    </div>
+                                </CardImage>
+                                <CardBody title={item.title} subtitle={item.subtitle} />
+                                <CardAction type={CardActionType.Link} />
+                            </Card>
+                        ))}
+                    </div>
+                    <p className="text-center">{process.env.NEXT_PUBLIC_DASHBOARD_REV}</p>
                 </div>
             </DialogLayoutBody>
         </DialogLayout>
diff --git a/apps/wallet-dashboard/next.config.mjs b/apps/wallet-dashboard/next.config.mjs
index a7417e613fd..533cbcccda9 100644
--- a/apps/wallet-dashboard/next.config.mjs
+++ b/apps/wallet-dashboard/next.config.mjs
@@ -1,6 +1,9 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { execSync } from 'child_process';
+const NEXT_PUBLIC_DASHBOARD_REV = execSync('git rev-parse HEAD').toString().trim().toString();
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     async redirects() {
@@ -16,6 +19,9 @@ const nextConfig = {
         // Remove this domain when fetching data
         domains: ['d315pvdvxi2gex.cloudfront.net'],
     },
+    env: {
+        NEXT_PUBLIC_DASHBOARD_REV,
+    },
 };
 
 export default nextConfig;