move hash to help

Author: Kr0nox

frontend/webEditor/.gitignore

@@ -1,3 +1,3 @@
 node_modules
 dist
-src/settings/hash.json
+src/helpUi/hash.json

frontend/webEditor/scripts/fetchHash.js

@@ -5,9 +5,9 @@ let hash = 'unknown'
 try {
   hash = execSync('git rev-parse HEAD').toString().trim()
 } catch (e) {
-  // eslint-disable-next-line no-console
+  // eslint-disable-next-line no-console, no-undef
   console.warn('Could not retrieve git hash:', e)
 }
-const filePath = 'src/settings/hash.json'
+const filePath = 'src/helpUi/hash.json'
 const fileContent = JSON.stringify({ hash })
 writeFileSync(filePath, fileContent)

frontend/webEditor/src/helpUi/helpUi.css

@@ -14,4 +14,11 @@
         vertical-align: text-top;
         margin-right: 4px;
     }
+
+    #hashHolder {
+        font-size: small;
+        margin-top: 4px;
+        display: flex;
+        gap: 2px;
+    }
 }

frontend/webEditor/src/helpUi/helpUi.ts

@@ -1,6 +1,7 @@
 import { injectable } from "inversify";
 import "./helpUi.css";
 import { AccordionUiExtension } from "../accordionUiExtension";
+import hashJson from "./hash.json";
 
 @injectable()
 export class HelpUI extends AccordionUiExtension {
@@ -35,9 +36,26 @@ export class HelpUI extends AccordionUiExtension {
             <p><kbd>Esc</kbd>: Disable current creation tool</p>
             <p>Toggle Creation Tool: Refer to key in the tool palette</p>
         `;
+
+        contentElement.appendChild(this.buildCommitHash());
     }
     protected initializeHeaderContent(headerElement: HTMLElement) {
         headerElement.classList.add("help-accordion-icon");
         headerElement.innerText = "Keyboard Shortcuts | Help";
     }
+
+    private buildCommitHash(): HTMLElement {
+        const holder = document.createElement("div");
+        holder.id = "hashHolder";
+        holder.innerHTML = "Commit:";
+
+        const link = document.createElement("a");
+        link.innerHTML = hashJson.hash.substring(0, 6);
+        link.href = `https://github.com/DataFlowAnalysis/OnlineEditor/tree/${hashJson.hash}`;
+        link.id = "hash";
+        link.target = "_blank";
+
+        holder.appendChild(link);
+        return holder;
+    }
 }

frontend/webEditor/src/settings/SettingsUi.ts

@@ -6,7 +6,6 @@ import { HideEdgeNames, SETTINGS, SimplifyNodeNames } from "./Settings";
 import { EditorModeController } from "./editorMode";
 import { Theme, ThemeManager } from "./Theme";
 import { ShownLabels, ShownLabelsValue } from "./ShownLabels";
-import hashJson from './hash.json'
 
 @injectable()
 export class SettingsUI extends AccordionUiExtension {
@@ -43,29 +42,13 @@ export class SettingsUI extends AccordionUiExtension {
         this.addBooleanSwitch(grid, "Hide Edge Names", this.hideEdgeNames);
         this.addBooleanSwitch(grid, "Simplify Node Names", this.simplifyNodeNames);
         this.addSwitch(grid, "Read Only", this.editorModeController, { true: "view", false: "edit" });
-        contentElement.appendChild(this.buildCommitHash())
     }
 
     protected initializeHeaderContent(headerElement: HTMLElement): void {
         headerElement.classList.add("settings-accordion-icon");
         headerElement.innerText = "Settings";
     }
 
-    private buildCommitHash(): HTMLElement {
-        const holder = document.createElement('div')
-        holder.id = 'hashHolder'
-        holder.innerHTML = 'Commit:'
-
-        const link = document.createElement('a')
-        link.innerHTML = hashJson.hash.substring(0, 6)
-        link.href = `https://github.com/DataFlowAnalysis/OnlineEditor/tree/${hashJson.hash}`
-        link.id = 'hash'
-        link.target = '_blank'
-
-        holder.appendChild(link)
-        return holder
-    }
-
     private addBooleanSwitch(container: HTMLElement, title: string, value: SettingsValue<boolean>): void {
         this.addSwitch<boolean>(container, title, value, { true: true, false: false });
     }

frontend/webEditor/src/settings/settingsUi.css

@@ -108,11 +108,3 @@ input:checked + .slider:before {
 .slider.round:before {
     border-radius: 50%;
 }
-
-.settings-ui #hashHolder {
-    font-size: small;
-    margin-top: 8px;
-    display: flex;
-    gap: 2px;
-}
-