From 3c7ad61f8be840920fbfed3ba757321259f4de65 Mon Sep 17 00:00:00 2001
From: Jonathan Senecal <jonathan.senecal@metrooptic.com>
Date: Wed, 16 Aug 2023 17:34:48 -0400
Subject: [PATCH] Properly hide dashboard buttons

---
 netbox/project-static/src/dashboard.ts | 12 ++++++++++++
 netbox/templates/home.html             |  6 +++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/netbox/project-static/src/dashboard.ts b/netbox/project-static/src/dashboard.ts
index df200fffd..84337b848 100644
--- a/netbox/project-static/src/dashboard.ts
+++ b/netbox/project-static/src/dashboard.ts
@@ -4,16 +4,28 @@ import { apiPatch, hasError } from './util';
 
 function lockDashboard(): void {
   const dashboard = document.getElementById('dashboard') as any;
+  const gridUnlockButton = document.getElementById('unlock_dashboard') as HTMLButtonElement;
+  const gridLockButton = document.getElementById('lock_dashboard') as HTMLButtonElement;
   if (dashboard) {
     dashboard.gridstack.disable();
   }
+  if (gridUnlockButton && gridLockButton) {
+    gridUnlockButton.classList.remove('invisible');
+    gridLockButton.classList.add('invisible');
+  }
 }
 
 function unlockDashboard(): void {
   const dashboard = document.getElementById('dashboard') as any;
+  const gridUnlockButton = document.getElementById('unlock_dashboard') as HTMLButtonElement;
+  const gridLockButton = document.getElementById('lock_dashboard') as HTMLButtonElement;
   if (dashboard) {
     dashboard.gridstack.enable();
   }
+  if (gridUnlockButton && gridLockButton) {
+    gridUnlockButton.classList.add('invisible');
+    gridLockButton.classList.remove('invisible');
+  }
 }
 
 async function saveDashboardLayout(
diff --git a/netbox/templates/home.html b/netbox/templates/home.html
index 414ac3488..f77ce3e50 100644
--- a/netbox/templates/home.html
+++ b/netbox/templates/home.html
@@ -41,7 +41,11 @@
   <div class="collapse multi-collapse">
     <div class="d-flex px-3">
       <div class="flex-grow-1">
-        <button type="button" id="lock_dashboard" class="btn btn-light btn-sm" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
+        <button type="button"
+          id="lock_dashboard"
+          class="btn btn-light btn-sm invisible"
+          data-bs-toggle="collapse"
+          data-bs-target=".multi-collapse">
           <i class="mdi mdi-lock-outline"></i> Lock Dashboard
         </button>
       </div>