From 2d6d6dc7980093d0ff603b99fa4e46b9bd5a9502 Mon Sep 17 00:00:00 2001 From: Juan Denis Date: Mon, 19 Jan 2026 10:37:41 -0500 Subject: [PATCH] plan(13): Create Phase 13 plan - Environment Switching UI --- .../13-environment-switching-ui/PLAN.md | 151 ++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 .planning/phases/13-environment-switching-ui/PLAN.md diff --git a/.planning/phases/13-environment-switching-ui/PLAN.md b/.planning/phases/13-environment-switching-ui/PLAN.md new file mode 100644 index 00000000..04557e1e --- /dev/null +++ b/.planning/phases/13-environment-switching-ui/PLAN.md @@ -0,0 +1,151 @@ +# Phase 13: Environment Switching UI — PLAN + +## Objective +Add UI components for managing environment types, linking apps as prod/dev pairs, and syncing themes between WordPress environments. + +## Execution Context + +**Key Files:** +- `frontend/src/pages/Applications.jsx` — App list (add environment badges) +- `frontend/src/pages/ApplicationDetail.jsx` — App detail (add linked apps section) +- `frontend/src/components/LinkedAppsSection.jsx` — New component for linked apps +- `frontend/src/components/LinkAppModal.jsx` — New modal for linking apps +- `frontend/src/styles/components/_badges.less` — Environment badge styles +- `frontend/src/styles/components/_linked-apps.less` — Linked apps section styles + +**API Methods Available (from Phase 12):** +- `api.linkApp(appId, targetAppId, asEnvironment, options)` +- `api.getLinkedApps(appId)` +- `api.unlinkApp(appId)` +- `api.updateAppEnvironment(appId, environmentType)` + +**Patterns to Follow:** +- Functional components with hooks +- Lucide icons (already imported in Applications.jsx) +- Status badge pattern from _badges.less +- Card-based UI for sections +- Modal pattern from CreateAppModal + +## Tasks + +### Task 1: Add Environment Badge to App List +**Files:** `frontend/src/pages/Applications.jsx`, `frontend/src/styles/components/_badges.less` + +Add environment badge next to status badge in both list and grid views: +- Show badge only when `environment_type !== 'standalone'` +- Colors: green=production, blue=development, yellow=staging +- Badge text: "PROD", "DEV", "STAGING" +- Add linked icon indicator if `has_linked_app` is true + +Update `AppRow` and `AppCard` components to display environment info. + +**Verification:** Apps with environment types show colored badges. + +--- + +### Task 2: Add Environment Filter to Apps Toolbar +**File:** `frontend/src/pages/Applications.jsx` + +Add environment filter dropdown in toolbar: +- Options: All, Production, Development, Staging, Standalone +- Uses URL params like existing search/sort +- Calls `api.getApps()` with `?environment=` filter + +**Verification:** Filter dropdown filters apps by environment type. + +--- + +### Task 3: Create LinkedAppsSection Component +**Files:** `frontend/src/components/LinkedAppsSection.jsx`, `frontend/src/styles/components/_linked-apps.less` + +New component showing linked apps in Overview tab: +```jsx + setShowLinkModal(true)} + onUnlink={handleUnlink} + onNavigate={(appId) => navigate(`/apps/${appId}`)} +/> +``` + +Features: +- Shows current environment type with colored badge +- Lists linked apps with their status +- "Link App" button to open modal +- "Unlink" button with confirmation +- Quick navigation to linked app + +**Verification:** Component renders in Overview tab with linked app info. + +--- + +### Task 4: Create LinkAppModal Component +**File:** `frontend/src/components/LinkAppModal.jsx` + +Modal for linking an app to another: +- Dropdown to select target app (filtered to same type, not already linked) +- Environment type selection (This app will be: Development / Production / Staging) +- Table prefix input for WordPress apps (optional, auto-generated default) +- Checkbox: "Propagate database credentials" (default: true) +- Shows preview of what will happen +- Calls `api.linkApp()` on submit + +**Verification:** Modal opens, shows compatible apps, links successfully. + +--- + +### Task 5: Integrate Linked Apps Section into ApplicationDetail +**File:** `frontend/src/pages/ApplicationDetail.jsx` + +Add LinkedAppsSection to Overview tab: +- Load linked apps on mount using `api.getLinkedApps(id)` +- Add state for `linkedApps`, `showLinkModal` +- Handle unlink with confirmation dialog +- Refresh after link/unlink operations + +Update header to show environment badge next to status badge. + +**Verification:** Overview tab shows linked apps section with functional link/unlink. + +--- + +### Task 6: Add Environment Settings to Settings Tab +**File:** `frontend/src/pages/ApplicationDetail.jsx` + +Add environment configuration section in SettingsTab: +- Current environment type display +- Dropdown to change environment type (standalone apps only) +- Warning when changing linked app environment +- "Unlink from [app name]" button for linked apps + +**Verification:** Can change environment type for standalone apps. + +--- + +## Verification + +```javascript +// In browser console, verify: +// 1. Apps with environment_type show badges +// 2. Filter dropdown works +// 3. Linked apps section appears in Overview +// 4. Link modal shows compatible apps +// 5. Link/unlink operations work +``` + +## Success Criteria +- [ ] Environment badges visible in app list (list and grid views) +- [ ] Environment filter dropdown in toolbar +- [ ] Linked apps section in Overview tab +- [ ] Link app modal with target selection +- [ ] Unlink functionality with confirmation +- [ ] Environment type editable in Settings tab + +## Output +- Modified: `frontend/src/pages/Applications.jsx` +- Modified: `frontend/src/pages/ApplicationDetail.jsx` +- Created: `frontend/src/components/LinkedAppsSection.jsx` +- Created: `frontend/src/components/LinkAppModal.jsx` +- Modified: `frontend/src/styles/components/_badges.less` +- Created: `frontend/src/styles/components/_linked-apps.less`