From 3835acbc81e43d36a5f6d36e563d1f650e5dad8f Mon Sep 17 00:00:00 2001
From: Pascal Euhus <pascal.euhus@gmx.de>
Date: Fri, 8 Sep 2023 09:31:00 +0200
Subject: [PATCH] show the current version in UI

---
 esbuild/build.js                    |  3 +++
 esbuild/serve.mjs                   |  3 +++
 frontend/components/MessageItem.tsx | 30 ++++++++++++++---------------
 frontend/views/Overview.tsx         |  3 +++
 package.json                        |  2 +-
 5 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/esbuild/build.js b/esbuild/build.js
index 6d423d8b..f613a145 100644
--- a/esbuild/build.js
+++ b/esbuild/build.js
@@ -9,5 +9,8 @@ esbuild
     loader: {
       ".js": "jsx",
     },
+    define: {
+      "process.env.REACT_APP_VERSION": '"v0.5.1"',
+    },
   })
   .catch(() => process.exit(1));
diff --git a/esbuild/serve.mjs b/esbuild/serve.mjs
index 324cab4d..76b051d1 100644
--- a/esbuild/serve.mjs
+++ b/esbuild/serve.mjs
@@ -5,6 +5,9 @@ const ctx = await esbuild.context({
   entryPoints: ["frontend/index.tsx"],
   minify: false,
   outfile: "public/assets/app.js",
+  define: {
+    "process.env.REACT_APP_VERSION": '"development"',
+  },
 });
 
 await ctx.watch();
diff --git a/frontend/components/MessageItem.tsx b/frontend/components/MessageItem.tsx
index bb561ba0..16000a95 100644
--- a/frontend/components/MessageItem.tsx
+++ b/frontend/components/MessageItem.tsx
@@ -59,23 +59,21 @@ const MessageItem = (props: { data: SqsMessage }) => {
                 <Typography>Message Attributes</Typography>
               </AccordionSummary>
               <AccordionDetails>
-                {
+                {Object.entries(
                   // @ts-ignore
-                  Object.entries(
-                    JSON.parse(props.data.messageAttributes.CustomAttributes),
-                  ).map(([key, value]) => {
-                    return (
-                      <Box key={key}>
-                        <Divider />
-                        <Stack direction="row" sx={{ ml: 0 }} spacing={2}>
-                          <Typography>Key: {key}</Typography>
-                          <Typography>Value: {value as string}</Typography>
-                        </Stack>
-                        <Divider />
-                      </Box>
-                    );
-                  })
-                }
+                  JSON.parse(props.data.messageAttributes.CustomAttributes),
+                ).map(([key, value]) => {
+                  return (
+                    <Box key={key}>
+                      <Divider />
+                      <Stack direction="row" sx={{ ml: 0 }} spacing={2}>
+                        <Typography>Key: {key}</Typography>
+                        <Typography>Value: {value as string}</Typography>
+                      </Stack>
+                      <Divider />
+                    </Box>
+                  );
+                })}
               </AccordionDetails>
             </Accordion>
           ) : null}
diff --git a/frontend/views/Overview.tsx b/frontend/views/Overview.tsx
index 43da8f2a..cbe2b2ce 100644
--- a/frontend/views/Overview.tsx
+++ b/frontend/views/Overview.tsx
@@ -170,6 +170,9 @@ const Overview = () => {
               <Typography variant="h6" margin={"auto"}>
                 SQS Admin UI
               </Typography>
+              <Typography variant="subtitle2" margin={"auto"}>
+                {process.env.REACT_APP_VERSION}
+              </Typography>
             </ListItem>
             <ListItem>
               <Toolbar
diff --git a/package.json b/package.json
index 82835dd1..0a0d85b8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sqs-admin-ui",
-  "version": "0.1.0",
+  "version": "0.5.1",
   "private": false,
   "author": {
     "name": "pacoVK",