feat(example): show branch name in status bar

camunda · Nov 29, 2023 · 5948595 · 5948595
1 parent 4b9f092
commit 5948595
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/example/src/app.js b/example/src/app.js
@@ -12,6 +12,9 @@ const container = document.querySelector('.playground');
 const designBtn = document.querySelector('.design');
 const validateBtn = document.querySelector('.validate');
 
+const branchNameNode = document.querySelector('.branch-name b');
+branchNameNode.textContent = process.env.BRANCH_NAME;
+
 const data = {
   creditor: 'John Doe Company',
   amount: 456,

diff --git a/example/src/index.html b/example/src/index.html
@@ -12,11 +12,11 @@
 </head>
 
 <body>
-  <div class="root">
+  <main class="root">
     <div class="playground"></div>
     <div class="status-bar">
       <div class="buttons">
-        <span class="execution-platform">Camunda Platform 8.0</span>
+        <span class="execution-platform">Camunda Platform 8.4</span>
         <button>
           <svg viewBox="0 0 24 24">
             <path d="M12,5 C15.8659932,5 19,8.13400675 19,12 C19,15.8659932 15.8659932,19 12,19 C8.13400675,19 5,15.8659932 5,12 C5,8.13400675 8.13400675,5 12,5 Z M9.33333333,8 L8,9.33333333 L10.667,12 L8,14.6666667 L9.33333333,16 L12,13.333 L14.6666667,16 L16,14.6666667 L13.333,12 L16,9.33333333 L14.6666667,8 L12,10.666 L9.33333333,8 Z"></path>
@@ -39,10 +39,10 @@
         </button>
       </div>
       <div class="buttons">
-        <span class="execution-platform">5.2.0</span>
+        <span class="branch-name">Branch: <b></b></span>
       </div>
     </div>
-  </div>
+  </main>
   <script src="app.js"></script>
 </body>
 

diff --git a/example/src/style.css b/example/src/style.css
@@ -81,7 +81,8 @@ html, body, .root {
   line-height: 28px;
 }
 
-.status-bar .execution-platform {
+.status-bar .execution-platform,
+.status-bar .branch-name {
   margin-top: 2px;
 }
 

diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -1,7 +1,15 @@
 const path = require('path');
 
+const webpack = require('webpack');
+
 const CopyPlugin = require('copy-webpack-plugin');
 
+// get git info from command line
+const branchName = require('child_process')
+  .execSync('git rev-parse --abbrev-ref HEAD')
+  .toString()
+  .trim();
+
 const mode = process.env.NODE_ENV || 'development';
 
 module.exports = {
@@ -28,6 +36,9 @@ module.exports = {
         { from: '@ibm/plex/{css/ibm-plex.min.css,{IBM-Plex-Sans,IBM-Plex-Mono}/fonts/{complete,split}/woff2/**}', context: '../node_modules', to: './vendor' },
       ],
     }),
+    new webpack.DefinePlugin({
+      'process.env.BRANCH_NAME': JSON.stringify(branchName)
+    })
   ],
   devtool: mode === 'development' ? 'eval-source-map' : 'source-map'
 };