feat(sidebar): Add Home Assistant sidebar

.prettierignore

@@ -4,3 +4,4 @@ ui/css/lib/
 ui/js/lib/
 docs/.vuepress/.temp
 docs/.vuepress/.cache
+resources/handlebars.min-v4.7.8.js

docs/guide/diagnostics.md

@@ -2,9 +2,21 @@
 
 ## Overview
 
-In order to assist with troubleshooting, the supplied diagnostics flow serves as a valuable tool for collecting data about the runtime and the system environment. This flow can be [imported](https://nodered.org/docs/user-guide/editor/workspace/import-export) into Node-RED and ran. By doing so, it compiles crucial information regarding the runtime and the system environment, enabling users to easily share this data when addressing issues.
+To assist with troubleshooting, a button has been added to the Node-RED editor that will run a diagnostics flow and copy the output to the clipboard. This output can then be pasted into a GitHub issue or a support forum.
 
-## Flow
+::: tip Note
+Before version 0.62.0, the diagnostics flow was a separate flow that had to be imported into Node-RED. This flow is still available and can be found [here](#before-version-0-62-0).
+:::
+
+![screenshot of buton location](./images/diagnostics_04.png)
+
+![gif for finding button](./images/diagnostics_05.gif)
+
+## Before version 0.62.0
+
+The supplied diagnostics flow serves as a valuable tool for collecting data about the runtime and the system environment. This flow can be [imported](https://nodered.org/docs/user-guide/editor/workspace/import-export) into Node-RED and run. By doing so, it compiles crucial information regarding the runtime and the system environment, enabling users to easily share this data when addressing issues.
+
+### Flow
 
 ![screenshot](./images/diagnostics_01.png)
 
@@ -14,7 +26,7 @@ This flow can also be imported directly from the examples section in Node-RED.
 
 - [How to import a flow](https://nodered.org/docs/user-guide/editor/workspace/import-export)
 
-## Usage
+### Usage
 
 1. Import the flow into Node-RED.
 

gulpfile.js

@@ -51,11 +51,14 @@ const uiFormWrap =
     '<script type="text/html" data-template-name="<%= data.type %>"><%= data.contents %></script>';
 const uiHelpWrap =
     '<script type="text/html" data-help-name="<%= data.type %>"><%= data.contents %></script>';
+const uiHandlebarsWrap =
+    '<script type="text/html" id="handlebars-<%= data.id %>" data-template-name="<%= data.type %>"><%= data.contents %></script>';
 const resourcePath = 'resources/node-red-contrib-home-assistant-websocket';
 const resourceFiles = [
     `<script src="${resourcePath}/select2.full.min.js?v=4.1.0-rc.0"></script>`,
     `<link rel="stylesheet" href="${resourcePath}/select2.min.css?v=4.1.0-rc.0">`,
     `<script src="${resourcePath}/maximize-select2-height.min.js?v=1.0.4"></script>`,
+    `<script src="${resourcePath}/handlebars.min-v4.7.8.js"></script>`,
 ];
 
 const nodeMap = {
@@ -151,6 +154,35 @@ const buildEditor = lazypipe()
         )
     );
 
+const buildSidebar = lazypipe()
+    .pipe(gulpHtmlmin, {
+        collapseWhitespace: true,
+        minifyCSS: true,
+    })
+    .pipe(() => wrap(uiFormWrap, { type: 'ha_sidebar' }, { variable: 'data' }));
+
+const buildSidebarToolbar = lazypipe()
+    .pipe(gulpHtmlmin, {
+        collapseWhitespace: true,
+        minifyCSS: true,
+    })
+    .pipe(() =>
+        wrap(uiFormWrap, { type: 'ha_sidebar_toolbar' }, { variable: 'data' })
+    );
+
+const buildHandlebars = lazypipe()
+    .pipe(gulpHtmlmin, {
+        collapseWhitespace: false,
+        minifyCSS: true,
+    })
+    .pipe(() =>
+        wrap(
+            uiHandlebarsWrap,
+            { id: currentFilename, type: 'x-tmpl-handlebars' },
+            { variable: 'data' }
+        )
+    );
+
 // Covert markdown documentation to html and modify it to look more like Node-RED
 // help files.
 const buildHelp = lazypipe()
@@ -327,6 +359,33 @@ task('buildEditorFiles', (done) => {
         })
     );
 
+    const sidebarHtml = src(['src/editor/sidebar/index.html']).pipe(
+        flatmap((stream, file) => {
+            const [filename] = file.basename.split('.');
+
+            currentFilename = filename;
+            return stream.pipe(buildSidebar());
+        })
+    );
+
+    const sidebarToolbarHtml = src(['src/editor/sidebar/toolbar.html']).pipe(
+        flatmap((stream, file) => {
+            const [filename] = file.basename.split('.');
+
+            currentFilename = filename;
+            return stream.pipe(buildSidebarToolbar());
+        })
+    );
+
+    const handlebarsTemplates = src(['src/**/*.handlebars']).pipe(
+        flatmap((stream, file) => {
+            const [filename] = file.basename.split('.');
+
+            currentFilename = filename;
+            return stream.pipe(buildHandlebars());
+        })
+    );
+
     const html = src([
         'src/nodes/**/*.html',
         `docs/node/*.md`,
@@ -353,7 +412,15 @@ task('buildEditorFiles', (done) => {
         })
     );
 
-    return merge([css, js, html, editorsHtml])
+    return merge([
+        css,
+        js,
+        html,
+        editorsHtml,
+        sidebarHtml,
+        sidebarToolbarHtml,
+        handlebarsTemplates,
+    ])
         .pipe(concat('index.html'))
         .pipe(header(resourceFiles.join('')))
         .pipe(dest(editorFilePath + '/'));

package.json

@@ -124,6 +124,7 @@
     "gulp-terser": "2.1.0",
     "gulp-typescript": "6.0.0-alpha.1",
     "gulp-wrap": "0.15.0",
+    "handlebars": "^4.7.8",
     "husky": "8.0.3",
     "jsonata": "1.8.6",
     "lazypipe": "1.0.2",