From 4a92c667c5faec53fd2d3fcee49faef596901f30 Mon Sep 17 00:00:00 2001 From: david raistrick <1108844+keen99@users.noreply.github.com> Date: Wed, 8 Jul 2026 11:46:56 -0400 Subject: [PATCH] Fix dev bulk-delete button gate + reposition inside campaigns MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Gate was process.env.NODE_ENV === 'development' — unsafe default. react-scripts inlines NODE_ENV=development when unset, so prod deploys forgetting the env var exposed the delete-all button. Switched to explicit opt-in REACT_APP_DEV_TOOLS=1. process.env.REACT_APP_DEV_TOOLS as static literal gets inlined by DefinePlugin at webpack build time — runtime mutations in tests had no effect, and dev-start without the env produced bundles with the branch dead-stripped. Extracted gate to src/config/devTools.js using dynamic key access (process.env['REACT_APP_' + 'DEV_TOOLS']) so DefinePlugin cannot inline it; the value is read at runtime. dev-start.sh now exports REACT_APP_DEV_TOOLS=1. Button had also drifted outside the campaigns collapse block to the page bottom; moved it back inside the campaigns section after the grid. Tests cover both paths: gate logic (unset/0/arbitrary/1) in BulkDelete.gate.test.js, prod safety render (button absent when unset) in BulkDelete.render-hidden.test.js, dev feature render (button present when DEV_TOOLS=1) in BulkDelete.render-shown.test.js. --- TODO.md | 17 ++++++++++ scripts/dev-start.sh | 1 + src/App.js | 25 +++++++-------- src/config/devTools.js | 6 ++++ src/tests/BulkDelete.gate.test.js | 30 ++++++++++++++++++ src/tests/BulkDelete.render-hidden.test.js | 36 ++++++++++++++++++++++ src/tests/BulkDelete.render-shown.test.js | 36 ++++++++++++++++++++++ 7 files changed, 139 insertions(+), 12 deletions(-) create mode 100644 src/config/devTools.js create mode 100644 src/tests/BulkDelete.gate.test.js create mode 100644 src/tests/BulkDelete.render-hidden.test.js create mode 100644 src/tests/BulkDelete.render-shown.test.js diff --git a/TODO.md b/TODO.md index b08d6a4..f04ce7a 100644 --- a/TODO.md +++ b/TODO.md @@ -5,6 +5,23 @@ Backlog of bugs + long-term items. Milestones live in REWORK_PLAN.md. ## Open +fullscreen and dont lock on main app dm view and the no-game-player view + +also better vert tab layout - labelt friendly + +needs AC for players dude + +and quick entry hp + +hp do not carry from encounter to ecnounter!!! + + +hp wont go over max and no temp hp support + + + + + ### dm list - keep active particpant in view (scroll) not sure good way to do this diff --git a/scripts/dev-start.sh b/scripts/dev-start.sh index a4d2577..e87855b 100755 --- a/scripts/dev-start.sh +++ b/scripts/dev-start.sh @@ -28,6 +28,7 @@ fi # frontend: server storage, :3999 if ! lsof -ti :3999 >/dev/null 2>&1; then echo "starting frontend :3999..." + NODE_ENV=development REACT_APP_DEV_TOOLS=1 \ REACT_APP_STORAGE=server \ REACT_APP_BACKEND_URL=http://127.0.0.1:4001 \ REACT_APP_BACKEND_REALTIME_URL=ws://127.0.0.1:4001/ws \ diff --git a/src/App.js b/src/App.js index f6fc7c0..07a2559 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React, { useState, useEffect, useRef, useMemo, createContext, useContext, useCallback } from 'react'; import * as shared from '@ttrpg/shared'; import { initializeApp, getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken, getFirestore, where, orderBy, limit, offset, getStorage, getStorageMode } from './storage'; +import { isDevToolsEnabled } from './config/devTools'; import { PlusCircle, Users, Swords, Trash2, Eye, Edit3, Save, XCircle, ChevronsUpDown, UserCheck, UserX, HeartCrack, HeartPulse, Zap, EyeOff, ExternalLink, AlertTriangle, @@ -2754,6 +2755,18 @@ function AdminView({ userId }) { ); })} + + {isDevToolsEnabled() && campaignsWithDetails.length > 0 && ( +
+ +
+ )} )} @@ -2800,18 +2813,6 @@ function AdminView({ userId }) { message={`Are you sure you want to delete the campaign "${itemToDelete?.name}" and all its encounters? This action cannot be undone.`} /> - {process.env.NODE_ENV === 'development' && campaignsWithDetails.length > 0 && ( -
- -
- )} - setShowDeleteAllConfirm(false)} diff --git a/src/config/devTools.js b/src/config/devTools.js new file mode 100644 index 0000000..ba3241c --- /dev/null +++ b/src/config/devTools.js @@ -0,0 +1,6 @@ +// Dev-tools gate. Explicit opt-in via REACT_APP_DEV_TOOLS=1. +// Safe default: any value other than exactly '1' = off. +// Dynamic key access so react-scripts DefinePlugin does NOT inline the value +// at build time — allows tests + runtime env changes to take effect. +const KEY = 'REACT_APP_' + 'DEV_TOOLS'; +export const isDevToolsEnabled = () => process.env[KEY] === '1'; diff --git a/src/tests/BulkDelete.gate.test.js b/src/tests/BulkDelete.gate.test.js new file mode 100644 index 0000000..ea2c9dc --- /dev/null +++ b/src/tests/BulkDelete.gate.test.js @@ -0,0 +1,30 @@ +import { isDevToolsEnabled } from '../config/devTools'; + +describe('Bulk-delete-all dev-tools gate logic', () => { + const orig = process.env.REACT_APP_DEV_TOOLS; + + afterEach(() => { + if (orig === undefined) delete process.env.REACT_APP_DEV_TOOLS; + else process.env.REACT_APP_DEV_TOOLS = orig; + }); + + test('false when unset (safe default)', () => { + delete process.env.REACT_APP_DEV_TOOLS; + expect(isDevToolsEnabled()).toBe(false); + }); + + test('false when 0', () => { + process.env.REACT_APP_DEV_TOOLS = '0'; + expect(isDevToolsEnabled()).toBe(false); + }); + + test('false when arbitrary string', () => { + process.env.REACT_APP_DEV_TOOLS = 'true'; + expect(isDevToolsEnabled()).toBe(false); + }); + + test('true only when exactly 1', () => { + process.env.REACT_APP_DEV_TOOLS = '1'; + expect(isDevToolsEnabled()).toBe(true); + }); +}); diff --git a/src/tests/BulkDelete.render-hidden.test.js b/src/tests/BulkDelete.render-hidden.test.js new file mode 100644 index 0000000..518de89 --- /dev/null +++ b/src/tests/BulkDelete.render-hidden.test.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { render, screen, waitFor, fireEvent, cleanup, act } from '@testing-library/react'; +import App from '../App'; + +describe('Bulk-delete-all button render gating', () => { + const orig = process.env.REACT_APP_DEV_TOOLS; + + afterEach(() => { + cleanup(); + if (orig === undefined) delete process.env.REACT_APP_DEV_TOOLS; + else process.env.REACT_APP_DEV_TOOLS = orig; + }); + + async function renderAndCreateCampaign() { + window.history.replaceState({}, '', '/'); + global.alert = jest.fn(); + global.window.open = jest.fn(); + render(); + await waitFor(() => screen.getByRole('button', { name: /Create Campaign/i })); + await act(async () => { + fireEvent.click(screen.getByRole('button', { name: /Create Campaign/i })); + }); + await waitFor(() => screen.getByLabelText(/Campaign Name/i)); + await act(async () => { + fireEvent.change(screen.getByLabelText(/Campaign Name/i), { target: { value: 'Gate Render Test' } }); + fireEvent.click(screen.getByRole('button', { name: /^Create$/i })); + await new Promise(r => setTimeout(r, 200)); + }); + } + + test('prod safety: button absent when DEV_TOOLS unset', async () => { + delete process.env.REACT_APP_DEV_TOOLS; + await renderAndCreateCampaign(); + expect(screen.queryByText(/Delete All Campaigns/i)).not.toBeInTheDocument(); + }); +}); diff --git a/src/tests/BulkDelete.render-shown.test.js b/src/tests/BulkDelete.render-shown.test.js new file mode 100644 index 0000000..b54df40 --- /dev/null +++ b/src/tests/BulkDelete.render-shown.test.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { render, screen, waitFor, fireEvent, cleanup, act } from '@testing-library/react'; +import App from '../App'; + +describe('Bulk-delete-all button dev feature', () => { + const orig = process.env.REACT_APP_DEV_TOOLS; + + afterEach(() => { + cleanup(); + if (orig === undefined) delete process.env.REACT_APP_DEV_TOOLS; + else process.env.REACT_APP_DEV_TOOLS = orig; + }); + + async function renderAndCreateCampaign() { + window.history.replaceState({}, '', '/'); + global.alert = jest.fn(); + global.window.open = jest.fn(); + render(); + await waitFor(() => screen.getByRole('button', { name: /Create Campaign/i })); + await act(async () => { + fireEvent.click(screen.getByRole('button', { name: /Create Campaign/i })); + }); + await waitFor(() => screen.getByLabelText(/Campaign Name/i)); + await act(async () => { + fireEvent.change(screen.getByLabelText(/Campaign Name/i), { target: { value: 'Gate Render Test' } }); + fireEvent.click(screen.getByRole('button', { name: /^Create$/i })); + await new Promise(r => setTimeout(r, 200)); + }); + } + + test('dev: button present when DEV_TOOLS=1 and campaigns exist', async () => { + process.env.REACT_APP_DEV_TOOLS = '1'; + await renderAndCreateCampaign(); + await waitFor(() => screen.getByText(/Delete All Campaigns/i), { timeout: 5000 }); + }); +});