feat: ordered multi-file Compose for Git sources (#1380)

* feat: ordered multi-file Compose for Git sources

Extend Git sources to deploy an ordered list of compose files merged with
docker compose -f base.yaml -f override.yaml ..., plus an optional project
directory.

- Pick and reorder compose files from the repository tree (drag to reorder on
  desktop, up/down arrows on phones); manual path entry is also supported.
- The ordered set drives every stack-scoped compose command (deploy, update,
  start/stop/restart/down, image scans, Compose Doctor) and the container
  lookup, so a service or image declared only in an override is handled too.
- Runtime keys off the materialized set, not the saved configuration: saving a
  source does not change deploy args until the pull is applied, and apply
  materializes from the pending snapshot rather than live config.
- The project directory is passed as --project-directory, with -p <stack>
  pinning the Compose project so container labels stay stable.
- The Mesh override is layered last; single-file sources are byte-identical to
  before, and existing rows keep working via the single-path fallback.

Docs cover the picker, ordering, project directory, and the new troubleshooting
and limitations (referenced files are not materialized; the dependency graph,
drift, and networking views read the primary file).

* fix: harden multi-file Git source (hash, unlink, collisions, node id)

- hashContent folds ordered file CONTENTS (not paths) so a clean multi-file
  stack is not flagged as locally edited: create/apply hash the fetched files
  (repo paths) while pull hashes the on-disk files (materialized paths), which
  previously disagreed and showed a false "local edits detected".
- Block unlinking a multi-file or project-directory Git source (409): the deploy
  spec lives on the source row, so removing it would silently revert deploys to
  root compose.yaml. Single-file sources still unlink.
- Reject materialized-path collisions in the selection validator: an additional
  file equal to or nested under compose.yaml, an ancestor/descendant overlap
  between selected files, and a project directory nested under a compose file
  (previously a 500 at materialization).
- DockerController.getContainersByStack uses the controller's node compose dir
  and passes its node id to the authored prefix, instead of the process default.

* fix: CI failures on multi-file Git source (test crash, aria query, path barrier)

- GitSourceFields no longer crashes when repoUrl/branch are falsy: the canBrowse
  trim() is optional-chained, so a reusable field component tolerates partial
  props. Fixes the apply-binding panel test, which feeds a minimal source object.
- GitSourcePanel tests query the footer Remove button by its exact name, so the
  picker's per-file "Remove <path>" buttons no longer collide with the broad
  /remove/i match (the test intent, footer Remove present/absent, is unchanged).
- validateCompose uses an inline resolve + startsWith barrier at the context-dir
  mkdir sink (CodeQL does not credit the wrapped isPathWithinBase helper),
  clearing the js/path-injection alert. The containment check is equivalent and
  contextDir is also validated upstream.

* test: update Git source E2E spec for the multi-file compose picker

The compose-file picker replaced the single #git-source-path input and added
per-file Remove buttons, so the E2E spec drove selectors that no longer exist:

- Drop the redundant compose.yaml fills (the picker defaults to compose.yaml).
- Select the footer Remove button by exact name so the picker's per-file
  "Remove <path>" buttons no longer make the locator ambiguous.
- Set a custom compose path through the picker (add via the manual input, press
  Enter, then remove the default compose.yaml).

* test: match the footer Remove button with an exact Playwright name

Playwright's getByRole name option is a substring match by default, so
{ name: 'Remove' } also matched the picker's "Remove <path>" buttons. Require an
exact match so only the footer Remove button is selected.
This commit is contained in:
Anso
2026-06-17 13:24:55 -04:00
committed by GitHub
parent 7ce045accb
commit f23b7e1bac
34 changed files with 2299 additions and 385 deletions
@@ -7,6 +7,7 @@ import { Label } from '../ui/label';
import { ScrollArea } from '../ui/scroll-area';
import { Checkbox } from '../ui/checkbox';
import { GitSourceFields, type ApplyMode } from '../stack/GitSourceFields';
import type { GitBrowseResult } from '../stack/GitComposeFilePicker';
import { ImportStackPanel } from './ImportStackPanel';
import { apiFetch } from '@/lib/api';
import { toast } from '@/components/ui/toast-store';
@@ -64,7 +65,8 @@ export function CreateStackDialog({ open, onOpenChange, onStackCreated, onStacks
const [creatingFromDockerRun, setCreatingFromDockerRun] = useState(false);
const [gitRepoUrl, setGitRepoUrl] = useState('');
const [gitBranch, setGitBranch] = useState('main');
const [gitComposePath, setGitComposePath] = useState('compose.yaml');
const [gitComposePaths, setGitComposePaths] = useState<string[]>(['compose.yaml']);
const [gitContextDir, setGitContextDir] = useState('');
const [gitSyncEnv, setGitSyncEnv] = useState(false);
const [gitAuthType, setGitAuthType] = useState<'none' | 'token'>('none');
const [gitToken, setGitToken] = useState('');
@@ -76,7 +78,8 @@ export function CreateStackDialog({ open, onOpenChange, onStackCreated, onStacks
setNewStackName('');
setGitRepoUrl('');
setGitBranch('main');
setGitComposePath('compose.yaml');
setGitComposePaths(['compose.yaml']);
setGitContextDir('');
setGitSyncEnv(false);
setGitAuthType('none');
setGitToken('');
@@ -84,6 +87,35 @@ export function CreateStackDialog({ open, onOpenChange, onStackCreated, onStacks
setGitDeployNow(false);
};
const browseGitRepo = async (): Promise<GitBrowseResult | null> => {
if (!gitRepoUrl.trim() || !gitBranch.trim()) {
toast.error('Enter a repository URL and branch first.');
return null;
}
try {
const body: Record<string, unknown> = {
repo_url: gitRepoUrl.trim(),
branch: gitBranch.trim(),
auth_type: gitAuthType,
};
if (gitAuthType === 'token' && gitToken !== '') body.token = gitToken;
const res = await apiFetch('/git-sources/browse', {
method: 'POST',
body: JSON.stringify(body),
});
if (res.ok) {
const data = await res.json();
return { files: data.files ?? [], truncated: data.truncated ?? false };
}
const err = await res.json().catch(() => ({}));
toast.error(err?.error || 'Failed to browse repository.');
return null;
} catch (e) {
toast.error((e as Error)?.message || 'Network error.');
return null;
}
};
const resetCreateFromDockerRunForm = () => {
setDockerRunInput('');
setConvertedYaml(null);
@@ -142,8 +174,8 @@ export function CreateStackDialog({ open, onOpenChange, onStackCreated, onStacks
toast.error('Stack name is required.');
return;
}
if (!gitRepoUrl.trim() || !gitBranch.trim() || !gitComposePath.trim()) {
toast.error('Repository URL, branch, and compose path are required.');
if (!gitRepoUrl.trim() || !gitBranch.trim() || gitComposePaths.length === 0) {
toast.error('Repository URL, branch, and at least one compose file are required.');
return;
}
if (!/^https:\/\//i.test(gitRepoUrl.trim())) {
@@ -160,7 +192,8 @@ export function CreateStackDialog({ open, onOpenChange, onStackCreated, onStacks
stack_name: stackName,
repo_url: gitRepoUrl.trim(),
branch: gitBranch.trim(),
compose_path: gitComposePath.trim(),
compose_paths: gitComposePaths,
context_dir: gitContextDir.trim() || null,
sync_env: gitSyncEnv,
auth_type: gitAuthType,
auto_apply_on_webhook: autoApply,
@@ -411,7 +444,8 @@ export function CreateStackDialog({ open, onOpenChange, onStackCreated, onStacks
disabled={creatingFromGit}
repoUrl={gitRepoUrl}
branch={gitBranch}
composePath={gitComposePath}
composePaths={gitComposePaths}
contextDir={gitContextDir}
syncEnv={gitSyncEnv}
authType={gitAuthType}
token={gitToken}
@@ -419,11 +453,13 @@ export function CreateStackDialog({ open, onOpenChange, onStackCreated, onStacks
applyMode={gitApplyMode}
onRepoUrlChange={setGitRepoUrl}
onBranchChange={setGitBranch}
onComposePathChange={setGitComposePath}
onComposePathsChange={setGitComposePaths}
onContextDirChange={setGitContextDir}
onSyncEnvChange={setGitSyncEnv}
onAuthTypeChange={setGitAuthType}
onTokenChange={setGitToken}
onApplyModeChange={setGitApplyMode}
onBrowse={browseGitRepo}
/>
<div className="flex items-center gap-2">